Border ها

از ابزارهای border برای استایل دهی سریع border و border-radius یک المان استفاده کنید.

افزودن Border

هرکدام از کلاس های زیر را برای افزودن border در سمت مورد نظر وارد کنید.

کلاس‌ها توضیحات
.border در هر سمت المان یک border با ضخامت 1px اضافه می کند.
.border-{top/bottom/left/right} در سمت بالا/پایین/راست/چپ المان یک border با ضخامت 1px اضافه می کند.
حذف Border

هرکدام از کلاس های زیر را برای حذف border از سمت مورد نظر وارد کنید.

کلاس‌ها توضیحات
.no-border از همه سمت های المان border را حذف می کند.
.border-{top/bottom/left/right}-0 از سمت بالا/پایین/راست/چپ المان border را حذف می کند.
ضخامت های Border

هرکدام از کلاس های زیر را برای تغییر ضخامت border در سمت مورد نظر وارد کنید.

کلاس‌ها توضیحات
.border-2 در همه سمت ها ضخامت border را به 2px تغییر می دهد.
.border-{side}-{size} ضخامت border را به مقدار اندازه مشخص شده (2px ، 3px) در جهت مشخص شده (بالا ، پایین ، راست ، چپ) تغییر می دهد.
رنگ Border

رنگ border را بر پایه رنگ های تعریف شده در قالب تغییر دهید. برای گزینه های بیشتر در رابطه با رنگ border لطفا صفحه «رنگ ها» را بررسی کنید.

کلاس‌ها توضیحات
.border border-{colorName} رنگ border را در همه جهت ها تغییر می دهد. مقادیر colorName میتواند primary ، success ، danger ، warning ، info ، secondary light ، dark ، white باشد.
Border-radius

این کلاس ها به یک المان برای گرد کردن گوشه های آن وارد کنید.

کلاس‌ها توضیحات
.rounded گوشه را در همه جهت ها گرد می کند.
.rounded-{side} گوشه را در جهت مشخص شده گرد می کند (بالا ، پایین ، راست ، چپ).
.rounded-circle گوشه های دایره ای ایجاد می کند.
.rounded-0 گوشه گرد را از همه جهت ها حذف می کند.
حذف border-radius

هرکدام از کلاس های زیر را برای حذف border-radius از سمت مورد نظر وارد کنید.

کلاس‌ها توضیحات
.no-border-{top/bottom}-radius border-radius را از سمت بالا / پایین حذف می کند.
.no-border-{top/bottom}-{left/right}-radius border-radius سمت بالا / پایین را از سمت راست / چپ حذف می کند.

Clearfix

با افزودن یک ابزار clearfix به سادگی، محتوای float شده را داخل یک دربرگیرنده clear کنید.

به سادگی floatها را با افزودن .clearfixبه المان والدclear کنید.

				
				    <div class="clearfix">...</div>
				
			

مثال زیر نحوه استفاده از clearfix را نشان میدهد. بدون clearfix المان دربرگیرنده، دور دکمه را نمی گیرد و منجر به یک طرح نادرست خواهد شد.


            <div class="bg-info clearfix">
              <button type="button" class="btn btn-danger float-left">Example Button floated left</button>
              <button type="button" class="btn btn-warning float-right">Example Button floated right</button>
            </div>
            

آیکن بستن

از یک آیکن عمومی بستن برای رد کردن محتوا هایی مانند مودال ها و پیغام ها استفاده کنید.

مطمئن شوید که متنی را برای screen reader ها بگنجانید با استفاده از aria-label.

				
				    <button type="button" class="close" aria-label="بستن">
                      <span aria-hidden="true">×</span>
                    </button>
				
			

ویژگی Display

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

مقادیر display متداول

ویژگی display تعداد انگشت شماری از مقادیر را می پذیرد و ما خیلی از آن ها را با کلاس های کاربردی پشتیبانی می کنیم. ما به صورت هدفمند هر مقداری را به صورت ابزار ارائه نمی کنیم. مقادیر پشتیبانی شده ما به قرار زیر است:

کلاس‌ها توضیحات
.d-none المان را مجبور به مخفی شدن در همه viewport ها میکند.
.d-inline المان را مجبور به رفتار مانند یک المان inline می کند.
.d-inline-block المان را مجبور به رفتار مانند یک المان inline-block می کند.
.d-block المان را مجبور به رفتار مانند یک المان block می کند.
.d-table المان را مجبور به رفتار مانند یک المان <table> می کند.
.d-table-cell المان را مجبور به رفتار مانند یک المان <td> می کند.
.d-flex المان را مجبور به رفتار مانند یک block-level flex container می کند.
.d-inline-flex المان را مجبور به رفتار مانند یک inline-level flex container می کند.

با اعمال هرکدام از این کلاس ها به المان مورد نظر میتوانید از آن ها استفاده کنید. برای مثال در زیر نحوه استفاده از ابزار های inline ، block یا inline-block آمده است (همین روش برای کلاس های دیگر نیز کارایی دارد).

d-inline
d-inline

                <div class="d-inline bg-success">d-inline</div>
                <div class="d-inline bg-success">d-inline</div>
                
d-block

                <span class="d-block bg-primary">d-block</span>
                
d-inline-block
d-inline-block

                <div class="d-inline-block bg-warning">d-inline-block</div>
                <div class="d-inline-block bg-warning">d-inline-block</div>
                

برای هر ابزار معرفی شده در بالا انواع واکنش گرای آن نیز وجود دارد.

  • .d-none
  • .d-inline
  • .d-inline-block
  • .d-block
  • .d-table
  • .d-table-cell
  • .d-flex
  • .d-inline-flex
  • .d-{breakPoint}-none
  • .d-{breakPoint}-inline
  • .d-{breakPoint}-inline-block
  • .d-{breakPoint}-block
  • .d-{breakPoint}-table
  • .d-{breakPoint}-table-cell
  • .d-{breakPoint}-flex
  • .d-{breakPoint}-inline-flex
پنهان سازی المان ها

برای ایجاد سریع طرح های mobile-friendly از کلاس های display واکنش گرا برای نمایش و مخفی سازی المان ها بر اساس اندازه صفحه استفاده کنید. از ایجاد نسخه های کاملا متفاوت یک سایت خودداری کنید، در عوض المان ها را بر اساس اندازه صفحه پنهان کنید.

برای پنهان سازی المان ها به سادگی از کلاس .d-none یا یکی از کلاس های .d-{sm,md,lg,xl}-none برای هر نوع صفحه نمایش واکنش گرا استفاده کنید.

برای نمایش یک المان تنها در رده خاصی از اندازه های صفحه نمایش میتوانید یک کلاس .d-*-none را با یک کلاس .d-*-* ترکیب کنید. برای مثال .d-none.d-md-block.d-xl-none المان را در تمامی اندازه های صفحه نمایش به جز متوسط و بزرگ مخفی خواهد کرد.

اندازه صفحه نمایش کلاس
مخفی در همه d-none
مخفی فقط در اندازه breakpoint d-{breakPoint}-none d-{breakPoint}-block
نمایان در همه d-block
نمایان فقط در اندازه breakpoint d-{breakPoint}-none d-{breakPoint}-block
نمایش در چاپ

مقدار display المان ها در هنگام چاپ را با استفاده از ابزار های display چاپ تغییر دهید.

کلاس استایل چاپ
.d-print-block مقدار display: block را در هنگام چاپ به المان اضافه می کند.
.d-print-inline مقدار display: inline را در هنگام چاپ به المان اضافه می کند.
.d-print-inline-block مقدار display: inline-block را در هنگام چاپ به المان اضافه می کند.
.d-print-none مقدار display: none را در هنگام چاپ به المان اضافه می کند.

Embed ها

ویدیو ها یا اسلاید شو های embed شده بر اساس عرض والد با ایجاد یک ratio طبیعی که در هر وسیله ای به درستی نمایش داده می شود بسازید.

قوانین به طور مستقیم به المان های <iframe>, <embed>, <video> و <object> اعمال میشوند. optionally use an explicit descendant class .embed-responsive-item when you want to match the styling for other attributes.

نکته حرفه ای! نیازی به استفاده از frameborder="0" در <iframe> تان ندارید چون ما آن را برای شما override کرده ایم.

نمونه

هر المان embed مانند <iframe> را توسط یک والد با .embed-responsive و یک aspect ratio در بر بگیرید. .embed-responsive-item به طور حتمی نیاز نیست، اما توصیه میکنیم وارد کنید.


                <div class="embed-responsive embed-responsive-16by9">
                  <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
                </div>
                
Aspect ratio ها

Aspect ratio ها توسط کلاس های modifier قابل سفارشی سازی هستند.


                <!-- 21:9 aspect ratio -->
                <div class="embed-responsive embed-responsive-21by9">
                  <iframe class="embed-responsive-item" src="..."></iframe>
                </div>

                <!-- 16:9 aspect ratio -->
                <div class="embed-responsive embed-responsive-16by9">
                  <iframe class="embed-responsive-item" src="..."></iframe>
                </div>

                <!-- 4:3 aspect ratio -->
                <div class="embed-responsive embed-responsive-4by3">
                  <iframe class="embed-responsive-item" src="..."></iframe>
                </div>

                <!-- 1:1 aspect ratio -->
                <div class="embed-responsive embed-responsive-1by1">
                  <iframe class="embed-responsive-item" src="..."></iframe>
                </div>
                

Flex

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

فعالسازی رفتارهای flex

از ابزارهای display برای ایجاد یک دربرگیرنده flexbox و تبدیل المان های فرزند مستقیم به آیتم های flex استفاده کنید. دربرگیرنده ها و آیتم های flex میوانند بعدا با ویژگی های بیشتر flex تغییر داده شوند.

من یک دربرگیرنده flexbox هستم!

                <div class="d-flex p-2">I'm a flexbox container!</div>
                
من یک دربرگیرنده inline flexbox هستم!

                <div class="d-inline-flex p-2">I'm an inline flexbox container!</div>
                

همچنین انواع واکنش گرا برای .d-flex و .d-inline-flex وجود دارد.

  • .d-flex
  • .d-inline-flex
  • .d-{breakpoint}-flex
  • .d-{breakpoint}-inline-flex
جهت

جهت آیتم های flex یک دربرگیرنده flex را با ابزار direction مشخص کنید. در اکثر موارد میتوانید از کلاس افقی صرف نظر کنید چرا که پیش فرض مرورگر rowاست. هر چند ممکن است در برخی موقعیت ها نیاز به تنظیم این مقدار داشته باشید (مانند طرح های واکنش گرا).

از .flex-row برای تنظیم یک جهت افقی (پیش فرض مرورگر) و یا .flex-row-reverse برای شروع جهت افقی از سمت مخالف استفاده کنید.

آیتم flex 1
آیتم flex 2
آیتم flex 3
آیتم flex 1
آیتم flex 2
آیتم flex 3

                <div class="d-flex flex-row">
                  <div class="p-2">Flex item 1</div>
                  <div class="p-2">Flex item 2</div>
                  <div class="p-2">Flex item 3</div>
                </div>
                <div class="d-flex flex-row-reverse">
                  <div class="p-2">Flex item 1</div>
                  <div class="p-2">Flex item 2</div>
                  <div class="p-2">Flex item 3</div>
                </div>
                

از .flex-column برای تنظیم یک جهت عمودی و یا .flex-column-reverse برای شروع جهت عمودی از سمت مخالف استفاده کنید.

آیتم flex 1
آیتم flex 2
آیتم flex 3
آیتم flex 1
آیتم flex 2
آیتم flex 3

                <div class="d-flex flex-column">
                  <div class="p-2">Flex item 1</div>
                  <div class="p-2">Flex item 2</div>
                  <div class="p-2">Flex item 3</div>
                </div>
                <div class="d-flex flex-column-reverse">
                  <div class="p-2">Flex item 1</div>
                  <div class="p-2">Flex item 2</div>
                  <div class="p-2">Flex item 3</div>
                </div>
                

همچنین انواع واکنش گرا برای flex-direction وجود دارد.

  • .flex-{row/column}
  • .flex-{row-reverse/column-reverse}
  • .flex-{breakpoint}-{row/column}
  • .flex-{breakpoint}-{row-reverse/column-reverse}
کشیدن محتوا

از justify-content در دربرگیرنده flexbox برای تغییر تراز آیتم های flex بر روی محور اصلی ( محور x برای شروع و یا محور y درصورت تنظیم flex-direction: column) استفاده کنید. از بین مقادیر یکی را انتخاب کنید: start (پیش فرض مرورگر), end, center, betweenو یا around.

آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex

                <div class="d-flex justify-content-start">...</div>
                <div class="d-flex justify-content-end">...</div>
                <div class="d-flex justify-content-center">...</div>
                <div class="d-flex justify-content-between">...</div>
                <div class="d-flex justify-content-around">...</div>
                

همچنین انواع واکنش گرا برای justify-content وجود دارد.

  • .justify-content-start
  • .justify-content-end
  • .justify-content-center
  • .justify-content-between
  • .justify-content-around
  • .justify-content-{breakpoint}-{start/end/center/between/around}
تراز آیتم ها

از align-items در دربرگیرنده flexbox برای تغییر تراز آیتم های flex بر روی محور متقاطع ( محور y برای شروع و یا محور x درصورت تنظیم flex-direction: column) استفاده کنید. از بین مقادیر یکی را انتخاب کنید: start, end, center, baseline و یا stretch (پیشفرض مرورگر)

آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex

                <div class="d-flex align-items-start">...</div>
                <div class="d-flex align-items-end">...</div>
                <div class="d-flex align-items-center">...</div>
                <div class="d-flex align-items-baseline">...</div>
                <div class="d-flex align-items-stretch">...</div>
                

همچنین انواع واکنش گرا برای align-items وجود دارد.

  • .align-items-start
  • .align-items-end
  • .align-items-center
  • .align-items-baseline
  • .align-items-stretch
  • .align-items-{breakpoint}-{start/end/center/baseline/stretch}
Align self

از align-self در آیتم های flexbox برای تغییر تراز هر آیتم بر روی محور متقاطع ( محور y برای شروع و یا محور x درصورت تنظیم flex-direction: column) استفاده کنید. از بین مقادیر مشابه align-items یکی را انتخاب کنید: start, end, center, baseline و یا stretch (پیشفرض مرورگر)

آیتم Flex
آیتم flex تراز شده
آیتم Flex
آیتم Flex
آیتم flex تراز شده
آیتم Flex
آیتم Flex
آیتم flex تراز شده
آیتم Flex
آیتم Flex
آیتم flex تراز شده
آیتم Flex
آیتم Flex
آیتم flex تراز شده
آیتم Flex

                <div class="align-self-start">Aligned flex item</div>
                <div class="align-self-end">Aligned flex item</div>
                <div class="align-self-center">Aligned flex item</div>
                <div class="align-self-baseline">Aligned flex item</div>
                <div class="align-self-stretch">Aligned flex item</div>
                

همچنین انواع واکنش گرا برای align-self وجود دارد.

  • .align-self-start
  • .align-self-end
  • .align-self-center
  • .align-self-baseline
  • .align-self-stretch
  • .align-self-{breakpoint}-{start/end/center/baseline/stretch}
margin های خودکار

Flexbox can do some pretty awesome things when you mix flex alignments with auto margins. Shown below are three examples of controlling flex items via auto margins: default (no auto margin), pushing two items to the right (.mr-auto), and pushing two items to the left (.ml-auto).

متاسفانه IE10 و IE11 به درستی از margin های auto در آیتم های flex که دربرگیرنده شان مقدار غیر پیش فرض justify-content را دارد پشتیبانی نمی کند.این جواب stackoverflow را مشاهده کنید برای جزئیات بیشتر.

آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex

                <div class="d-flex">
                  <div class="p-2">Flex item</div>
                  <div class="p-2">Flex item</div>
                  <div class="p-2">Flex item</div>
                </div>

                <div class="d-flex">
                  <div class="mr-auto p-2">Flex item</div>
                  <div class="p-2">Flex item</div>
                  <div class="p-2">Flex item</div>
                </div>

                <div class="d-flex">
                  <div class="p-2">Flex item</div>
                  <div class="p-2">Flex item</div>
                  <div class="ml-auto p-2">Flex item</div>
                </div>
                
به همراه align-items

به طور عمودی یک آیتم flex را به بالا یا پایین یک دربرگیرنده منتقل کنید با ترکیب align-items, flex-direction: column و margin-top: auto یا margin-bottom: auto.

آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex

          <div class="d-flex align-items-start flex-column" style="height: 200px;">
            <div class="mb-auto p-2">Flex item</div>
            <div class="p-2">Flex item</div>
            <div class="p-2">Flex item</div>
          </div>

          <div class="d-flex align-items-end flex-column" style="height: 200px;">
            <div class="p-2">Flex item</div>
            <div class="p-2">Flex item</div>
            <div class="mt-auto p-2">Flex item</div>
          </div>
          
Wrap

Change how flex items wrap in a flex container. Choose from no wrapping at all (the browser default) with .flex-nowrap, wrapping with .flex-wrap, or reverse wrapping with .flex-wrap-reverse.

آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex

                <div class="d-flex flex-nowrap">
                  ...
                </div>
                
آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex

                <div class="d-flex flex-wrap">
                  ...
                </div>
                
آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex

                <div class="d-flex flex-wrap-reverse">
                  ...
                </div>
                

همچنین انواع واکنش گرا برای flex-wrap وجود دارد.

  • .flex-nowrap
  • .flex-wrap
  • .flex-wrap-reverse
  • .flex-{breakpoint}-{nowrap/wrap/wrap-reverse}
  • .flex-sm-wrap
  • .flex-sm-wrap-reverse
ترتیب

ترتیب نمایشی آیتم های flex به خصوص را توسط ابزار های انگشت شمار order تغییر دهید. ما تنها گزینه های جابه جایی یک آیتم به اول و آخر به همراه یک بازنشانی برای استفاده از ترتیب DOM ارائه داده ایم. از آنجایی که order هر مقدار عددی را قبول می کند (مانند 5)برای مقادیر مورد نیاز بیشتر، CSS سفارشی اضافه کنید.

آیتم flex اول
آیتم flex دوم
آیتم flex سوم

                <div class="d-flex flex-nowrap">
                  <div class="order-3 p-2">First flex item</div>
                  <div class="order-2 p-2">Second flex item</div>
                  <div class="order-1 p-2">Third flex item</div>
                </div>
                

همچنین انواع واکنش گرا برای order وجود دارد.

  • .order-{value}
  • .order-{breakpoint}-{value}
تراز محتوا

از align-content در یک دربرگیرنده flexbox برای تراز بندی آیتم های flex با هم بر روی محور متقاطع استفاده کنید. یکی از این مقادیر را انتخاب کنید: start (پیش فرض مرورگر), end, center, between, aroundو یا stretch. برای پیش نمایش این ابزار ها ما از flex-wrap: wrap استفاده کردیم و تعداد آیتم های flex را افزایش دادیم.

توجه داشته باشید! این ویژگی تاثیری بر آیتم های flex تک سطری ندارد.

آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex

                <div class="d-flex align-content-start flex-wrap">
                  ...
                </div>
                
آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex

                <div class="d-flex align-content-end flex-wrap">
                  ...
                </div>
                
آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex

                <div class="d-flex align-content-center flex-wrap">
                  ...
                </div>
                
آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex

                <div class="d-flex align-content-between flex-wrap">
                  ...
                </div>
                
آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex

                <div class="d-flex align-content-around flex-wrap">
                  ...
                </div>
                
آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex
آیتم Flex

                <div class="d-flex align-content-stretch flex-wrap">
                  ...
                </div>
                

همچنین انواع واکنش گرا برای align-content وجود دارد.

  • .align-content-start
  • .align-content-end
  • .align-content-center
  • .align-content-around
  • .align-content-stretch
  • .align-content-{breakpoint}-{start/end/center/around/stretch}

Float

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

این کلاس های کاربردی با استفاده از ویژگی CSS float بر اساس اندازه viewport کنونی یک المان را به سمت راست یا چپ float کرده و یا float را بر روی آن غیر فعال می کنند. برای جلوگیری از مشکلات اولویتی !important گنجانده شده است. این گزینه ها از همان breakpoint های viewport که در سیستم توری استفاده شده استفاده میکنند.

اعمال یک float توسط یک کلاس:

float به راست در همه اندازه های viewport

float به چپ در همه اندازه های viewport

عدم float در همه اندازه های viewport

                <div class="float-left">Float left on all viewport sizes</div><br>
                <div class="float-right">Float right on all viewport sizes</div><br>
                <div class="float-none">Don't float on all viewport sizes</div>
                
واکنشگرا

همچنین انواع واکنشگرا برای هر مقدار float وجود دارد.

float به راست در viewport های با اندازه sm (کوچک) و یا بزرگتر

float به راست در viewport های با اندازه md (متوسط) و یا بزرگتر

float به راست در viewport های با اندازه lg (بزرگ) و یا بزرگتر

float به راست در viewport های با اندازه xl (خیلی بزرگ) و یا بزرگتر


                <div class="float-sm-left">Float left on viewports sized SM (small) or wider</div><br>
                <div class="float-md-left">Float left on viewports sized MD (medium) or wider</div><br>
                <div class="float-lg-left">Float left on viewports sized LG (large) or wider</div><br>
                <div class="float-xl-left">Float left on viewports sized XL (extra-large) or wider</div><br>
                

تمامی کلاس های پشتیبانی شده را در زیر میتوانید مشاهده کنید:

  • .float-{left/right/none}
  • .float-{breakpoint}-{left/right/none}

جایگزینی تصویر

با کلاس جا به جایی تصویر، متن را با تصویر پس زمینه تعویض کنید.

از کلاس .text-hide برای جایگزینی محتوای متنی یک المان با تصویر پس زمینه استفاده کنید.


                <h1 class="text-hide">Custom heading</h1>
                

کلاس .text-hide را برای حفظ قابلیت دستیابی و سئوی تگ های عناوین در مواقعی که میخواهید از تصویر پس زمینه background-image به جای متن استفاده کنید وارد کنید.

بوت‌استرپ


                <h1 class="text-hide my-2" style="background-image: url('../../assets/images/logo/logo.png'); width: 30px; height: 26px;">Bootstrap</h1>
                

موقعیت

از این کلاس های کاربردی کوتاه برای تنظیم سریع position یک المان استفاده کنید.

کلاس‌ها توضیحات
.position-fixed position المان را به fixed تغییر می دهد.
.position-relative position المان را به relative تغییر می دهد.
.position-absolute position المان را به absolute تغییر می دهد.
.position-static position المان را به static تغییر می دهد.
.position-sticky position المان را به sticky تغییر می دهد.
ثابت در بالا

یک المان را در بالای viewport از یک سمت تا سمت دیگر قرار دهید. قبل از استفاده از این ابزار از درک صحیح نحوه عملکرد fixed position در پروژه خود مطمئن شوید. ممکن است نیاز به اضافه کردن css اضافی داشته باشید.


                <div class="fixed-top">...</div>
                
ثابت در پایین

یک المان را در پایین viewport از یک سمت تا سمت دیگر قرار دهید. قبل از استفاده از این ابزار از درک صحیح نحوه عملکرد fixed position در پروژه خود مطمئن شوید. ممکن است نیاز به اضافه کردن css اضافی داشته باشید.


                <div class="fixed-footer">...</div>
                
چسبیده به بالا

یک المان را در بالای viewport از یک سمت تا سمت دیگر قرار دهید، اما تنها در هنگام اسکرول شدن صفحه. ابزار .sticky-top از کد css position: stickyکه به طور کامل در تمامی مرورگر ها پشتیبانی نمی شود استفاده می کند.

Microsoft Edge و IE11 position: sticky را به صورت position: relative نمایش خواهند داد. بنابراین ما استایل هایمان را در یک @supports قرار داده ایم تا چسبناکی را تنها به مرورگر هایی محدود کنیم که به طور صحیح قابلیت نمایش آن را دارند.


                <div class="sticky-top">...</div>
                

Screenreader ها

از ابزار های screenreader برای مخفی سازی المان ها در همه دستگاه ها به جز screen reader ها استفاده کنید.

یک المان را از همه دستگاه ها به جز screen reader ها با استفاده از .sr-only مخفی کنید. .sr-only را با .sr-only-focusable ترکیب کنید تا المان را مجدد در صورت focus نمایش دهید (برای مثال کاربرانی که تنها از کیبورد استفاده می کنند).


                <a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>
                

سایزبندی

به سادگی یک المان را به عرض یا ارتفاع نسبی از والد آن با استفاده از ابزار width و height در آورید.

از مقادیر 25%, 50%, 75% و 100% به صورت پیش فرض پشتیبانی می کند.

عرض 25%
عرض 50%
عرض 75%
عرض 100%

                <div class="w-25 p-3" style="background-color: #eee;">Width 25%</div>
                <div class="w-50 p-3" style="background-color: #eee;">Width 50%</div>
                <div class="w-75 p-3" style="background-color: #eee;">Width 75%</div>
                <div class="w-100 p-3" style="background-color: #eee;">Width 100%</div>
                
ارتفاع 25%
ارتفاع 50%
ارتفاع 75%
ارتفاع 100%

                <div style="height: 100px; background-color: rgba(255,0,0,0.1);">
                  <div class="h-25 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 25%</div>
                  <div class="h-50 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 50%</div>
                  <div class="h-75 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 75%</div>
                  <div class="h-100 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 100%</div>
                </div>
                

همچنین میتوانید از کلاس max-width: 100%; و max-height: 100%; بر اساس نیاز استفاده کنید.

Max-width = 100% [1000%x100]

                    <img class="mw-100" src="..." alt="Max-width 100%">
                
حداکثر ارتفاع 100%

                <div style="height: 100px; background-color: rgba(255,0,0,0.1);">
                  <div class="mh-100" style="width: 100px; height: 200px; background-color: rgba(0,0,255,0.1);">Max-height 100%</div>
                </div>
                
عرض و ارتفاع

یکی از این کلاس ها را برای تنظیم عرض محتوا اضافه کنید.

کلاس‌ها توضیحات
.fit حداکثر عرض محتوا را به 100% تنظیم می کند.
.half-width عرض محتوا را به 50% تنظیم می کند.
.full-width عرض محتوا را به 100% تنظیم می کند.
.full-height ارتفاع محتوا را به 100% تنظیم می کند.
عرض ثابت

یکی از این کلاس ها را برای تنظیم عرض ثابت به محتوا اضافه کنید.

کلاس‌ها توضیحات
.width-{size} عرض ثابت محتوا را به px به اندازه دلخواه تنظیم کنید که مقدار size یکی از مقادیر 50, 100, 150, 200, 250, 300, 350, 400, 450, 500, 550, 600, 650, 700, 750 و 800 می تواند باشد. برای مثال .width-50
.width-{size}-per عرض ثابت محتوا را به % به اندازه دلخواه تنظیم کنید که مقدار size یکی از مقادیر 5%, 10%, 15%, 20%, 25%, 30%, 35%, 40%, 45%, 50%, 55%, 60%, 65%, 70%, 75% و 80% می تواند باشد. برای مثال .width-5-per
ارتفاع ثابت

یکی از این کلاس ها را برای تنظیم ارتفاع ثابت به محتوا اضافه کنید.

کلاس‌ها توضیحات
.height-{size} ارتفاع ثابت محتوا را به px به اندازه دلخواه تنظیم کنید که مقدار size یکی از مقادیر 50, 100, 150, 200, 250, 300, 350, 400, 450, 500, 550, 600, 650, 700, 750 و 800 می تواند باشد. برای مثال .height-50
.height-{size}-per ارتفاع ثابت محتوا را به % به اندازه دلخواه تنظیم کنید که مقدار size یکی از مقادیر 5%, 10%, 15%, 20%, 25%, 30%, 35%, 40%, 45%, 50%, 55%, 60%, 65%, 70%, 75% و 80% می تواند باشد. برای مثال .height-5-per

فاصله دهی

بوت استرپ بازه وسیعی از کلاس های کاربردی کوتاه واکنشگرا برای margin و padding را دارا می باشد که میتوانید نحوه نمایش یک المان را تغییر دهید.

چطور کار می کند

مقادیر واکنش گرای margin یا padding را به یک المان یا یک سمت آن با کلاس های کوتاه اضافه کنید. از سمت های به خصوص، همه سمت ها و سمت های عمودی و افقی پشتیبانی می کند. اندازه کلاس ها از بازه 0.25rem تا 4rem است.

توجه

ابزار فاصله دهی که به همه breakpoint ها اعمال میشوند، از xs تا xl ، دارای اختصار مربوط به breakpoint نیستند. دلیل این امر این است که این کلاس ها از min-width: 0 به بالا اعمال میشوند و بنابراین به هیچ media query وابسته نیستند. هرچند کلاس های دیگر دارای اختصار breakpoint هستند.

کلاس ها با فرمت {property}{sides}-{size} برای xs و {property}{sides}-{breakpoint}-{size} برای sm, md, lg و xl هستند.

مقدار property یکی از این موارد می تواند باشد:

  • m - برای کلاس های تنظیم کننده margin
  • p - برای کلاس های تنظیم کننده padding

مقدار sides یکی از این موارد می تواند باشد:

  • t - برای کلاس های تنظیم کننده margin-top یا padding-top
  • b - برای کلاس های تنظیم کننده margin-bottom یا padding-bottom
  • r - برای کلاس های تنظیم کننده margin-left یا padding-left
  • l - برای کلاس های تنظیم کننده margin-right یا padding-right
  • x - برای کلاس های تنظیم کننده ویژگی های افقی *-left و *-right
  • y- برای کلاس های تنظیم کننده ویژگی های عمودی *-top و *-bottom
  • جای خالی - برای کلاس های تنظیم کننده یک margin یا padding در هر 4 سمت المان

مقدار size یکی از این موارد می تواند باشد:

  • 0 برای کلاس های حذف کننده margin یا padding با تنظیم کردن آن به 0
  • 1 - برای کلاس های تنظیم کننده margin یا padding به 1rem
  • 2 - برای کلاس های تنظیم کننده margin یا padding به 1.5rem
  • 3 - برای کلاس های تنظیم کننده margin یا padding به 3rem
  • 4 - برای کلاس های تنظیم کننده margin یا padding به 3.5rem
  • 5 - برای کلاس های تنظیم کننده margin یا padding به 4rem
  • 25 - برای کلاس های تنظیم کننده margin یا padding به 0.25rem
  • 50 - برای کلاس های تنظیم کننده margin یا padding به 0.5rem
  • 75 - برای کلاس های تنظیم کننده margin یا padding به 0.75rem
  • auto - برای کلاس های تنظیم کننده margin به auto
وسط چینی افقی

همچنین، بوت استرپ دارای یک کلاس .mx-auto برای وسط چین کردن افقی محتواهای block level با عرض ثابت است، محتوایی که دارای display: block و یک width تنظیم شده باشد. این کلاس با تنظیم margin افقی به auto این کار را انجام می دهد.

المان وسط چین شده

                <div class="mx-auto" style="width: 200px;">
                  Centered element
                </div>
                

تراز عمودی

به سادگی تراز عمودی المان های inline, inline-block, inline-table و table cell را تغییر دهید.

تراز عمودی المان ها را با استفاده از ابزار های vertical-alignment تغییر دهید. لطفا توجه داشته باشید که vertical-align تنها به المان های inline, inline-block, inline-table و table cell قابل اعمال است.

از یکی از کلاس های .align-baseline, .align-top, .align-middle, .align-bottom, .align-text-bottom و .align-text-top بر اساس نیاز استفاده کنید.

baseline بالا وسط پایین text-top text-bottom
کلاس‌ها توضیحات
.align-{direction} تراز عمودی المان را به direction اشاره شده تغییر می دهد (top, middle, bottom, baseline).
.align-text-{top/bottom} بالای المان با بالا / پایین فونت المان والد هم تراز می شود.

با table cell ها:

baseline بالا وسط پایین text-top text-bottom

                <table style="height: 100px;">
                  <tbody>
                    <tr>
                      <td class="align-baseline">baseline</td>
                      <td class="align-top">top</td>
                      <td class="align-middle">middle</td>
                      <td class="align-bottom">bottom</td>
                      <td class="align-text-top">text-top</td>
                      <td class="align-text-bottom">text-bottom</td>
                    </tr>
                  </tbody>
                </table>
                

تصویر

یکی از این کلاس ها را برای تغییر اندازه یا سایر ویژگی های تصویر اضافه کنید.

کلاس‌ها توضیحات
.bg-cover تصویر پس زمینه را به اندازه ای بزرگ یا کوچک می کند که قسمت پس زمینه به طور کامل توسط عکس پوشانده شود.
.background-repeat تصویر پس زمینه را تکرار می کند.
.background-no-repeat تصویر پس زمینه را تکرار نمی کند.

کمک کننده های محتوا

z-index

یکی از این کلاس ها را برای تغییر ویژگی های z-index المان ها اضافه کنید.

کلاس‌ها توضیحات
.zindex-minus-{1/2/3/4} z-index المان را به مقادیر منفی 1/2/3/4 تنظیم می کند.
.zindex-{1/2/3/4} z-index المان را به مقادیر 1/2/3/4 تنظیم می کند.
حاشیه ها

یکی از این کلاس ها را برای حذف حاشیه از سمت مورد نظر المان استفاده کنید. بر روی المان های دارای position های absolute, fixed و relative کار می کند.

کلاس‌ها توضیحات
.no-edge-{direction} حاشیه المان را در جهت مشخص شده حذف می کند (top/bottom/left/right).
مکان نما ها

یکی از این کلاس ها را برای تغییر استایل مکان نما اضافه کنید.

کلاس‌ها توضیحات
.cursor-pointer مکان نما یک اشاره گر بوده و نشانگر یک لینک است. مفید برای بازخورد تعاملی با کاربر.
.cursor-move مکان نما نشانگر یک چیز قابل حرکت است. استفاده شده در اجزای قابل مرتب سازی.
.cursor-default مکان نما را به استایل پیش فرض مرورگر تنظیم می کند.
.cursor-progress مکان نما نشانگر این است که برنامه مشغول است (در حال پردازش).
.cursor-not-allowed مکان نما نشانگر این است که عمل درخواست شده انجام نخواهد شد.
Overflow

یکی از این کلاس ها را برای تغییر ویژگی overflow یک المان اضافه کنید.

کلاس‌ها توضیحات
.overflow-visible پیش فرض. overflow بریده نمی شود. هرچه خارج از چارچوب المان باشد نمایش داده می شود.
.overflow-hidden overflow بریده می شود و هرچه خارج از چارچوب المان باشد پنهان می شود.
.overflow-auto اگر overflow بریده شود یک اسکرول بار برای مشاهده قسمت بریده شده اضافه می شود.
.overflow-scroll overflow بریده می شود اما همواره یک اسکرول بار برای مشاهده قسمت بریده شده وجود خواهد داشت.
لیست

یکی از این کلاس ها را برای تغییر استایل لیست اضافه کنید.

کلاس‌ها توضیحات
.list-unstyled هیچ نشانگری در آیتم لیست نمایش داده نمی شود.
.bullets-inside متن و نشانگر را indent میکند. نقطه ها داخل محتوای آیتم نمایش داده می شود.
.list-style-circle نشانگر آیتم لیست را به دایره تنظیم می کند.
.list-style-square نشانگر آیتم لیست را به مربع تنظیم می کند.
.list-style-icons نشانگر آیتم لیست را به آیکن تنظیم می کند.

قابلیت مشاهده

قابلیت مشاهده المان ها را بدون تغییر مقدار display آن ها توسط ابزار های visibility کنترل کنید.

مقدار visibility المان ها را توسط ابزارهای visibility تنظیم کنید. این ابزار ها مقدار display را به هیچ وجه تغییر نمیدهند و برای مخفی سازی محتوا از اکثر کاربران مفید هستند، اما همچنان توسط screen reader ها قابل خواندن هستند.

کلاس .visible یا .invisible را بر اساس نیاز اعمال کنید.


                <div class="visible">...</div>
                <div class="invisible">...</div>
                

سفارشی سازی قالب

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

رنگ های فهرست

جمع کردن فهرست

رنگ های نوار بالایی
نکته : این گزینه تنها در حالت نوار ثابت و در هنگام اسکرول صفحه نمایش داده خواهد شد.
نوع نوار بالایی

نوع فوتر

سایه کارت

مخفی سازی دکمه اسکرول به بالا
ارتباط با ما
امروز

لورم ایپسوم متن ساختگی

7:45 ق.ظ

لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت

لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم

7:50 ق.ظ

لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ

8:01 ق.ظ