استودیو | راهنما

حاشیه ها

از ابزارهای مرزی برای سبک کردن سریع مرز و شعاع مرزی یک عنصر استفاده کنید. عالی برای تصاویر ، دکمه ها یا هر عنصر دیگر. لطفا مطالعه کنید اسناد رسمی برای لیست کامل گزینه ها.

اضافی

.border

.border-top

.border-right

.border-bottom

.border-left

SUBTRACTIVE (حذف)

.border-0

.border-top-0

.border-right-0

.border-bottom-0

.border-left-0

رنگ حاشیه

.border-primary

.border-secondary

.border-success

.border-danger

.border-warning

.border-info

.border-light

.border-dar هزار

.border-white

<!-- additive example -->
<span class="border"></span>

<!-- subtractive example -->
<span class="border-0"></span>

<!-- border color example -->
<span class="border border-primary"></span>

شعاع مرزی

کلاس ها را به یک عنصر اضافه کنید تا به راحتی گوشه های آن جمع شود. اسناد رسمی برای لیست کامل گزینه ها.

حاشیه مرزی

.rounded

.rounded-top

.rounded-right

.rounded-bottom

.rounded-left

.rounded-pill

.rounded-circle

.rounded-0

اندازه های پرتوهای مرزی

.rounded-sm

.rounded

.rounded-lg

حذف حاشیه مرزی

.rounded-top-0

.rounded-top-left-0

.rounded-top-right-0

.rounded-bottom-0

.rounded-bottom-left-0

.rounded-bottom-right-0

<!-- border-radius example -->
<img src="" alt="" class="rounded" />

<!-- border-radius sizes example -->
<img src="" alt="" class="rounded-sm" />

رنگ متن

معنی را از طریق رنگ با تعداد انگشت شماری از کلاسهای ابزار رنگی انتقال دهید. شامل پشتیبانی از لینک های یک ظاهر طراحی شده با حالت های شناور نیز می شود. لطفا مطالعه کنید اسناد رسمی برای لیست کامل گزینه ها.

رنگ متنبوت استرپ

T

.text-primary

T

.text-secondary

T

.text-success

T

.text-danger

T

.text-warning

T

.text-info

T

.text-dar هزار

T

.text-body

T

.text-muted

T

.text-black-50

T

.text-white

T

.text-light

T

.text-white-50

رنگ متن تمدید شده

T

.text-teal

T

.text-indigo

T

.text-purple

T

.text-yellow

T

.text-gray-100

T

.text-gray-200

T

.text-gray-300

T

.text-gray-400

T

.text-gray-500

T

.text-gray-600

T

.text-gray-700

T

.text-gray-800

T

.text-gray-900

<!-- مثال -->
<p class="text-primary"></p>

رنگ شفاف متن

اکنون از کدورت 10٪ تا 90٪ از شفافیت متن پشتیبانی می کنیم. همچنین برای هر کلاس متن دیگر نیز کاربرد دارد .text-teal-transparent-*.

T

.text-primary-transparent-1

T

.text-primary-transparent-2

T

.text-primary-transparent-3

T

.text-primary-transparent-4

T

.text-primary-transparent-5

T

.text-primary-transparent-6

T

.text-primary-transparent-7

T

.text-primary-transparent-8

T

.text-primary-transparent-9

T

.text-primary

<!-- مثال -->
<p class="text-primary-transparent-1"></p>

رنگ پس زمینه

مشابه کلاسهای رنگ متن متن ، به راحتی زمینه یک عنصر را در هر کلاس متنی تنظیم کنید. اجزای لنگر دقیقاً مانند کلاس های متن ، روی شناور تیره می شوند. خدمات پس زمینه رنگ را تنظیم نکنید, بنابراین در بعضی موارد می خواهید از آنها استفاده کنید .text-* خدمات رفاهی. لطفا مطالعه کنید اسناد رسمی برای لیست کامل گزینه ها.

رنگ متن بوت استرپ

.bg-primary

.bg-secondary

.bg-success

.bg-danger

.bg-warning

.bg-info

.bg-light

.bg-dar هزار

.bg-white

.bg-transparent

.bg-none

رنگ متن تمدید شده

.bg-teal

.bg-indigo

.bg-purple

.bg-yellow

.bg-gray-100

.bg-gray-200

.bg-gray-300

.bg-gray-400

.bg-gray-500

.bg-gray-600

.bg-gray-700

.bg-gray-800

.bg-gray-900

<!-- مثال -->
<div class="bg-primary width-30 height-30 rounded"></div>

رنگ شیب پس زمینه

ما هر گرادیان تک رنگ را بر اساس متغیر رنگی تعریف شده در پرونده های scss ایجاد کرده ایم /scss/_variables.scss. همچنین ممکن است کد رنگ و کلاس مورد نظر خود را نیز اضافه کنید.

کلاس گرادیان بوت استرپ

.bg-gradient-primary

.bg-gradient-secondary

.bg-gradient-success

.bg-gradient-danger

.bg-gradient-warning

.bg-gradient-info

.bg-gradient-light

.bg-gradient-dar هزار

.bg-gradient-white

گرادیان تمدید شده

.bg-gradient-teal

.bg-gradient-indigo

.bg-gradient-purple

.bg-gradient-yellow

.bg-gradient-gray-100

.bg-gradient-gray-200

.bg-gradient-gray-300

.bg-gradient-gray-400

.bg-gradient-gray-500

.bg-gradient-gray-600

.bg-gradient-gray-700

.bg-gradient-gray-800

.bg-gradient-gray-900

<!-- مثال -->
<div class="bg-gradient-primary width-30 height-30 rounded"></div>

رنگ فانتزی شیب پس زمینه

ما بر اساس متغیر رنگی که داریم شیب خطی فانتزی و در عین حال زیبا ایجاد کرده ایم. ممکن است ترکیب بیشتری را در آن اضافه کنید /scss/_helper.scss

گرادیان فنسی

.bg-gradient-red-pin هزار

.bg-gradient-orange-red

.bg-gradient-yellow-red

.bg-gradient-yellow-orange

.bg-gradient-yellow-green

.bg-gradient-cyan-blue

.bg-gradient-cyan-indigo

گرادیان دستی

.bg-gradient-custom-orange

.bg-gradient-custom-pin هزار

.bg-gradient-custom-teal

.bg-gradient-custom-indigo

.bg-gradient-custom-blue

<!-- مثال -->
<div class="bg-gradient-orange-red width-30 height-30 rounded "></div>

نمایش ویژگی

سرعت و پاسخگو مقدار نمایشگر قطعات و موارد دیگر را با ابزارهای نمایشگر ما جابجا کنید. شامل پشتیبانی از برخی از مقادیر رایج تر ، و همچنین برخی اضافات برای کنترل نمایشگر هنگام چاپ. لطفا مطالعه کنید اسناد رسمی برای لیست کامل گزینه ها.

کلاس های برنامه ای را که برای همه نقاط دستیابی اعمال می شود ، نمایش دهید ، از xs به xl. به این ترتیب ، کلاسها با استفاده از قالب مشخص می شوند:

.d-{value} for xs
.d-{breakpoint}-{value} for sm, md, lg, و xl.

جایی که {value} یکی از:

none
inline
inline-block
block
table
table-cell
table-row
flex
inline-flex

<!-- مثال -->
<div class="d-none d-md-block"></div>

جاسازی

با ایجاد یک نسبت ذاتی که در هر دستگاه ترازو می کند ، بر اساس عرض والدین ، جاسازی های نمایش اسلایدی یا نمایشگر پاسخگو ایجاد کنید. لطفا مطالعه کنید اسناد رسمی برای لیست کامل گزینه ها.

نسبت ابعاد برای کلاس های اصلاح کننده عبارتند از: .embed-responsive-21by9, .embed-responsive-16by9, .embed-responsive-4by3 و .embed-responsive-1by1.

<!-- مثال -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/3Kf-FlECN7M?rel=0" allowfullscreen></iframe>
</div>

فلکس

به سرعت ، طرح ، تراز و اندازه ستون های شبکه ، ناوبری ، اجزا و موارد دیگر را با مجموعه کاملی از برنامه های کاربردی flexbox پاسخگو مدیریت کنید. برای پیاده سازی های پیچیده تر ، CSS سفارشی ممکن است لازم باشد. لطفا مطالعه کنید اسناد رسمی برای لیست کامل گزینه ها.

فلکس	موارد را تراز کنید	پر کردن / رشد / بسته بندی
`.d-flex` `.d-inline-flex` `.d-sm-flex` `.d-sm-inline-flex` `.d-md-flex` `.d-md-inline-flex` `.d-lg-flex` `.d-lg-inline-flex` `.d-xl-flex` `.d-xl-inline-flex`	`.align-items-start` `.align-items-end` `.align-items-center` `.align-items-baseline` `.align-items-stretch` `.align-self-start` `.align-self-end` `.align-self-center` `.align-self-baseline` `.align-self-stretch` `.align-content-start` `.align-content-end` `.align-content-center` `.align-content-between` `.align-content-around` `.align-content-stretch`	`.flex-fill` `.flex-grow-0` `.flex-shrink-0` `.flex-nowrap` `.flex-wrap` `.flex-wrap-reverse` `.order-{1\|2\|3\|4\|5\|6 \|7\|8\|9\|10\|11\|12}`

<!-- مثال -->
<div class="d-flex align-items-center">
  <div class="flex-fill"></div>
</div>

شناور / موقعیت / سرریز

با استفاده از ابزارهای پاسخگو شناور ما ، روی هر عنصر و در هر نقطه شکستن شناور حرکت کنید.

شناور	موقعیت	سرریز
`.float-left` `.float-sm-left` `.float-md-left` `.float-lg-left` `.float-xl-left` `.float-right` `.float-sm-right` `.float-md-right` `.float-lg-right` `.float-xl-right` `.float-none` `.float-sm-none` `.float-md-none` `.float-lg-none` `.float-xl-none`	`.position-static` `.position-relative` `.position-absolute` `.position-fixed` `.position-sticky` `.fixed-top` `.fixed-bottom` `.desktop-sticky-top` `.top-0` `.right-0` `.bottom-0` `.left-0` `.top-auto` `.right-auto` `.bottom-auto` `.left-auto`	`.overflow-auto` `.overflow-hidden`

سایه ها

سایه ها را به عناصر دارای ابزار جعبه سایه اضافه یا حذف کنید. لطفا مطالعه کنید اسناد رسمی برای لیست کامل گزینه ها.

.shadow-none

.shadow

.shadow-sm

.shadow-lg

<!-- مثال -->
<div class="shadow-none"></div>

عرض و ارتفاع

به راحتی یک عنصر به اندازه عرض یا قد با ابزارهای عرض و ارتفاع ما بسازید. لطفا مطالعه کنید اسناد رسمی برای لیست کامل گزینه ها.

عرض	ارتفاع
`.w-25` `.w-50` `.w-75` `.w-100` `.w-auto` `.mw-100` `.width-{10\|20\|30\|40\|50}` `.width-{60\|70\|80\|50\|90\|100}` `.width-{100\|150\|200\|250\|300\|350}` `.width-{400\|450\|500\|550\|600}`	`.h-25` `.h-50` `.h-75` `.h-100` `.h-auto` `.mh-100` `.height-{10\|20\|30\|40\|50}` `.height-{60\|70\|80\|50\|90\|100}` `.height-{100\|150\|200\|250\|300\|350}` `.height-{400\|450\|500\|550\|600}`

<!-- مثال -->
<img src="" class="mw-100 mh-100" />

حاشیه و پدینگ

بوت استرپ شامل طیف گسترده ای از کلاس های حاشیه ای پاسخگو و تغییر اندازه ظاهر مفید برای تغییر ظاهر یک عنصر است. لطفا مطالعه کنید اسناد رسمی برای لیست کامل گزینه ها.

حاشیه	پدینگ
`.mt-{1\|2\|3\|4\|5}` `.mr-{1\|2\|3\|4\|5}` `.mb-{1\|2\|3\|4\|5}` `.ml-{1\|2\|3\|4\|5}` `.mx-{1\|2\|3\|4\|5}` `.my-{1\|2\|3\|4\|5}` `.mt-{1~20}px` `.mr-{1~20}px` `.mb-{1~20}px` `.ml-{1~20}px`	`.pt-{1\|2\|3\|4\|5}` `.pr-{1\|2\|3\|4\|5}` `.pb-{1\|2\|3\|4\|5}` `.pl-{1\|2\|3\|4\|5}` `.px-{1\|2\|3\|4\|5}` `.py-{1\|2\|3\|4\|5}` `.pt-{1~20}px` `.pr-{1~20}px` `.pb-{1~20}px` `.pl-{1~20}px`

<!-- مثال -->
<div class="mr-3"></div>

متن

مستندات و مثال هایی برای ابزارهای متداول متن برای کنترل تراز ، بسته بندی ، وزن و موارد دیگر. لطفا مطالعه کنید اسناد رسمی برای لیست کامل گزینه ها.

تراز و دکوراسیون	بسته بندی و تبدیل	سبک فونت
`.text-justify` `.text-left` `.text-center` `.text-right` `.text-reset` `.text-decoration-none` `.text-decoration-underline` `.text-gradient` `.line-height-1`	`.text-wrap` `.text-nowrap` `.text-truncate` `.text-break` `.text-lowercase` `.text-uppercase` `.text-capitalize`	`.font-weight-bold` `.font-weight-bolder` `.font-weight-normal` `.font-weight-light` `.font-weight-lighter` `.font-italic` `.font-weight-100` `.font-weight-200` `.font-weight-300` `.font-weight-400` `.font-weight-500` `.font-weight-600` `.font-weight-700` `.font-weight-800`

<!-- مثال -->
<div class="font-weight-bold"></div>

وضوح / دید / عمودی تراز

با استفاده از ابزارهای بوت استرپ ، دید ، کدورت و تراز عمودی را کنترل کنید. لطفا مطالعه کنید اسناد رسمی برای لیست کامل گزینه ها.

کدورت	دید	تراز عمودی
`.opacity-10` `.opacity-9` `.opacity-8` `.opacity-7` `.opacity-6` `.opacity-5` `.opacity-4` `.opacity-3` `.opacity-2` `.opacity-1` `.opacity-0`	`.visible` `.invisible`	`.align-baseline` `.align-top` `.align-middle` `.align-bottom` `.align-text-top` `.align-text-bottom`

<!-- مثال -->
<div class="opacity-5"></div>

راهنما توضیحات عنوان صفحه در اینجا می رود...