راهنمای مبتدیان برای جدیدترین کلاس های بوت استرپ 5

راهنمای مبتدیان برای جدیدترین کلاس های بوت استرپ 5

 

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

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

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

 

در این آموزش جامع ، همه مواردی را که باید در مورد کلاس های کمکی Bootstrap 5 بدانید به شما به صورت عملی آموزش می دهم. بنابراین ، موضوعاتی که در این مقاله به آنها خواهیم پرداخت عبارتند از:

• رنگ های پس زمینه ای
• Border ها یا خطوط حاشیه ای
• رنگها
• Display
• Flex
• تعاملات صفحه با کاربر
• Overflow یا سرریز
• ویژگی Position یا موقعیت
• Box Shadow ها یا سایه های اطراف تگ ها
• سایز بندی
• فاصله گذاری
• استایل دهی به متن ها
• تراز عمودی

توجه: در برخی موارد در آموزش ، من در مورد کلاس هایی که قبلاً معرفی شده بحث نخواهم کرد بلکه به موضوع اصلی و کلاس های جدید خواهم پرداخت.

 

 

 

 

 

 

فهرست مطالب

 

• کلاس های کمکی بوت استرپ 5
  • رنگ های پس زمینه
  • خطوط حاشیه ای
  • رنگ ها
  • Display
  • Flex
  • تعاملات صفحه با کاربر
  • سرریز یا Overflw
  • موقعیت یا Psition
  • سایه تگ ها یا Box Shadow
  • سایز بندی
  • فاصله گذاری
  • استایل دهی به متن
  • تراز عمودی
• پدیداری یا Visibility
• جمع بندی

 

 

رنگ های زمینه

 

با استفاده از بوت استرپ ، اضافه کردن ویژگی background-color در یک عنصر برای انتقال یک مفهوم خاص با استفاده از کلاسهای رنگ زمینه از پیش تعریف شده آن که از تم های داخلی آن پیروی می کنند ، آسان است. این رنگ ها از ترکیب زیر مجموعه ای از جعبه رنگ ها برای تولید طرح های رنگی تشکیل شده اند.

توجه: کلاسهای کمکی رنگ پس زمینه نمی تواند رنگ متن را تنظیم کند. اگر می خواهید با توجه به نیازهای خود رنگ متن را مشخص کنید ، می توانید از کلاسهای کمکی متناسب با متن یعنی کلاس های *-text استفاده کنید (در این مورد در ادامه بیشتر توضیح می دهم).

 

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

 

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

<div class="container">
   <div class="row g-2">
      <div class="col-4 bg-primary text-white">
         .bg-primary
      </div>
      <div class="col-4 bg-secondary text-white">
         .bg-secondary
      </div>
      <div class="col-4 bg-success text-white">
         .bg-success
      </div>
      <div class="col-4 bg-danger text-white">
         .bg-danger
      </div>
      <div class="col-4 bg-warning text-white">
         .bg-warning
      </div>
      <div class="col-4 bg-info text-white">
         .bg-info
      </div>
      <div class="col-4 bg-light">
         .bg-light
      </div>
      <div class="col-4 bg-dark text-white">
         .bg-dark
      </div>
      <div class="col-4 bg-body">
         .bg-body
      </div>
      <div class="col-4 bg-white">
         .bg-white
      </div>
      <div class="col-4 bg-transparent">
         .bg-transparent
      </div>
   </div>
</div>

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

 

با افزودن برخی از استایل های سفارشی برای نمایش ، ما باید یک خروجی مشابه تصویر زیر داشته باشیم:

 

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

با استفاده از همان نشان گذاری های html در بالا ، ببینید فقط با اضافه کردن کلاس bg-gradient  در هر ستون ، رنگ پس زمینه چه تغییری می کند. این نشان گذاری را در زیر می بینید:

<div class="container">
   <div class="row g-2">
      <div class="col-4 bg-primary bg-gradient text-white">
         .bg-primary
      </div>
      <div class="col-4 bg-secondary bg-gradient text-white">
         .bg-secondary
      </div>
      <div class="col-4 bg-success bg-gradient text-white">
         .bg-success
      </div>
      <div class="col-4 bg-danger bg-gradient text-white">
         .bg-danger
      </div>
      <div class="col-4 bg-warning bg-gradient text-white">
         .bg-warning
      </div>
      <div class="col-4 bg-info bg-gradient text-white">
         .bg-info
      </div>
      <div class="col-4 bg-light bg-gradient">
         .bg-light
      </div>
      <div class="col-4 bg-dark bg-gradient text-white">
         .bg-dark
      </div>
      <div class="col-4 bg-body bg-gradient">
         .bg-body
      </div>
      <div class="col-4 bg-white bg-gradient">
         .bg-white
      </div>
      <div class="col-4 bg-transparent bg-gradient">
         .bg-transparent
      </div>
   </div>
</div>

 

با افزودن برخی استایل های سفارشی ، باید یک خروجی مشابه تصویر زیر داشته باشید:

 

 

خطوط حاشیه ای

 

استایل CSS دیگری که به طور منظم در هر طراحی چیدمانی استفاده می شود ، خط حاشیه ای است. ویژگی های border به شما امکان می دهد استایل ، عرض و رنگ خط حاشیه ای اطراف هر عنصری را تعیین کنید. در bootstrap ، می توانید با استفاده از کلاسهای از پیش تعریف شده border  ، استایل خط حاشیه ای و گردی گوشه های یک عنصر را به سرعت تنظیم کنید.

 

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

• کلاس border : در هر طرف یک عنصر خط حاشیه اضافه می کند.
• کلاس border-top : خط حاشیه ای را در سمت بالای یک عنصر اضافه می کند.
• کلاس border-right : خط حاشیه ای را در سمت راست یک عنصر اضافه می کند.
• کلاس border-left : خط حاشیه ای را در سمت چپ یک عنصر اضافه می کند.
• کلاس border-0 : تمام حاشیه ها را از هر طرف یک عنصر حذف می کند.
• کلاس border-top-0 : حاشیه سمت بالای یک عنصر را حذف می کند.
• کلاس border-right-0 : حاشیه سمت راست یک عنصر را حذف می کند.
• کلاس border-bottom-0 : حاشیه سمت پایین یک عنصر را حذف می کند.
• کلاس border-left-0 : حاشیه سمت چپ یک عنصر را حذف می کند.

 

در زیر کلاس های کمکی برای ویژگی border-color بر اساس تم های بوت استرپ را می بینید:

 

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

• کلاس border-1 : برای اعمال خط حاشیه ای با ضخامت ۱ پیکسل به عنصر
• کلاس border-2 : برای اعمال خط حاشیه ای با ضخامت ۲ پیکسل به عنصر
• کلاس border-3 : برای اعمال خط حاشیه ای با ضخامت ۳ پیکسل به عنصر
• کلاس border-4 : برای اعمال خط حاشیه ای با ضخامت ۴ پیکسل به عنصر
• کلاس border-5 : برای اعمال خط حاشیه ای با ضخامت ۵ پیکسل به عنصر

برای افزودن شعاع یا گوشه (های) گرد به یک عنصر ، می توانید از کلاسهای کمکی border-radius نیز استفاده کنید:

• کلاس rounded : برای اعمال گوشه های گرد به هر چهار گوشه عنصر
• کلاس rounded-top : برای گرد کردن دو گوشه ی بالا-راست و بالا-چپ عنصر
• کلاس rounded-end : برای گرد کردن دو گوشه سمت راست (بالا-راست و پایین-راست)
• کلاس rounded-bottom : برای گرد کردن دو گوشه پایین (پایین-راست و پایین-چپ)
• کلاس rounded-start : برای گرد کردن دو گوشه سمت چپ (بالا-چپ و پایین-چپ)
• کلاس rounded-circle : برای گرد کردن گوشه های عنصر به صورتی که عنصر به شکل یک دایره کامل شود
• کلاس rounded-pill : برای گرد کردن گوشه های عنصر به صورتی که عنصر به شکل کپسولی شود
• کلاس rounded-0 : حذف خمیدگی از گوشه های عنصر به شکلی که گوشه ها مثل حالت معمول گوشه های مستطیل شود
• کلاس rounded-1 : اعمال شعاع خمیدگی 2rem. به یک عنصر
• کلاس rounded-2 : اعمال شعاع خمیدگی 25rem. به یک عنصر
• کلاس rounded-3 : اعمال شعاع خمیدگی 3rem. به یک عنصر

 

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

<div>
   <a href="#" class="bg-primary border border-dark border-5 text-white">Link 1</a>
   <a href="#" class="bg-light border border-primary">Link 2</a>
   <a href="#" class="bg-transparent border-bottom border-info border-5">Link 3</a>
</div>
<div>
   <a href="#" class="bg-secondary border border-danger border-4 rounded-pill text-white">Link 4</a>
   <a href="#" class="bg-white border border-success border-2 rounded-bottom">Link 5</a>
   <a href="#" class="bg-danger border border-top-0 border-dark border-5 rounded-start rounded-end text-white">Link 6</a>
</div>

 

با کمی استایل اضافی این نشان گذاری html در مرورگر به صورت زیر دیده می شود:

در نشانه گذاری html بالا ، من برخی از کلاسهای کمکی رنگ پس زمینه بوت استرپ را اضافه کرده ام تا پس از استفاده کلاس های خط حاشیه ای نتیجه واضح تر باشد. در اینجا خلاصه ای از آنچه شما باید بدانید وجود دارد:

 

• پیوند اول به دلیل اینکه کلاس bg-primary به آن اضافه شده است ، دارای رنگ زمینه 0D6EFD# است. همچنین دارای یک رنگ حاشیه ای 0D6EFD# به دلیل استفاده از کلاس border-dark و همچنین  خط حاشیه ای با عرض  5 پیکسل به دلیل استفاده از کلاس border-5 است
• پیوند دوم دارای یک رنگ زمینه F8F9FA# به دلیل استفاده از کلاس bg-light در آن است. سرانجام ، ما به هر چهار سمت آن خط حاشیه ای با رنگ 0D6EFD# با استفاده از border-primary اضافه کردیم.
• لینک سوم به دلیل استفاده از کلاس bg-transparent که به آن اضافه شده است دارای پس زمینه شفاف است. همچنین دارای یک خط حاشیه ای در پایین با رنگ DCAF00 و با ضخامت حاشیه 5 پیکسل با استفاده از کلاس های border-bottom و border-info و border-5 است.
• پیوند چهارم به دلیل استفاده از کلاس bg-secondary  که به آن اضافه شده دارای پس زمینه 6C757D# است. از آنجایی که کلاس های border-danger و rounded-pill را به آن اضافه کرده ایم ، دارای رنگ حاشیه ای DC3545 و شکل کپسولی دارد. در آخر ، عرض خط حاشیه ای به دلیل استفاده از کلاس border-4 که ​​به آن اضافه شده ، ضخامت 4 پیکسل خواهد داشت.
• چون کلاس bg-white را به پیوند پنجم اضافه کرده ایم ، پیوند پنجم دارای رنگ زمینه سفید خواهد بود. چون کلاس border-success را به آن اضافه کردیم ، رنگ حاشیه ای 198754# خواهد بود و همچنین به دلیل استفاده از کلاس rounded-bottom دارای گوشه های پایین گرد می باشد. در آخر ، عرض حاشیه به دلیل استفاده از کلاس border-2 که به آن اضافه شده ، دارای ضخامت 2 پیکسل است.
• پیوند آخر دارای رنگ پس زمینه  DC3545 و رنگ حاشیه 212529# به دلیل استفاده از کلاس های bg-danger و border-dark است. همچنین به دلیل داشتن کلاس border-5 دارای عرض حاشیه ای 5 پیکسل خواهد بود. در آخر چون کلاس های rounded-start و rounded-end را به آن اضافه کردیم ، دارای شعاع گرد در چهار گوشه بالا-چپ ، پایین-چپ و بالا-راست و پایین-راست است.

 

 

رنگ ها

 

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

 

استفاده از این کلاسهای کمکی بسیار ساده است. برای این کار می توانید از کلاس های زیر استفاده کرده و این کلاس ها را مستقیماً روی هر یک از عناصر متن خود اعمال کنید:

 

 

Display

 

مجموعه مفید دیگری از کلاسهای کمکی bootstrap که به شما امکان می دهد به راحتی و با واکنش گرایی ویژگی display یک عنصر خاص را در یک نقطه انفصال (breakpoint) خاص یا viewport تغییر دهید ، کلاسهای کمکی display هستند.

این کلاسها از زیرمجموعه ای از کلاسها تشکیل شده است که عمدتاً در نام آنها مخفف هایی از نقطه انفصال (breakpoint) یا viewport استفاده می شود و به کمک آنها می توان نمایش عناصر را بر اساس وضوح صفحه یا عرض نمایشگر دستگاه ، کنترل کند.

 

در زیر کلاس های اصلی display را می بینید که می توانند هنگام کار با مولفه های واکنش گرا مفید باشند:

• کلاس d-none : عنصر را در تمامی اندازه ها و وضوح های مختلف صفحه مخفی می کند
• کلاس d-inline : مقدار ویژگی display عنصر را inline تنظیم می کند
• کلاس d-inline-block : مقدار ویژگی display عنصر را inline-block تنظیم می کند
• کلاس d-block : مقدار ویژگی display عنصر را block تنظیم می کند
• کلاس d-grid : مقدار ویژگی display عنصر را grid تنظیم می کند
• کلاس d-table : مقدار ویژگی display عنصر را table تنظیم می کند
• کلاس d-table-row : مقدار ویژگی display عنصر را table-row تنظیم می کند
• کلاس d-table-cell : مقدار ویژگی display عنصر را table-cell تنظیم می کند
• کلاس d-flex : مقدار ویژگی display عنصر را flex تنظیم می کند
• کلاس d-inline-flex : مقدار ویژگی display عنصر را inline-flex تنظیم می کند

 

علاوه بر این ، کلاسهای کمکی display می توانند برای تمام نقاط انفصال ، از xs (عرض خیلی کوچک) تا xxl (عرض بسیار بزرگ) اعمال شوند. با استفاده از قالب کلاس d-{breakpoint}-{value} برای sm ، md ، lg ، xl و xxl می توانید از این کلاسهای کمکی برای نشان دادن یا پنهان کردن عناصر بر روی وضوح صفحه نمایش یا عرض نمای مناسب استفاده کنید. به عنوان مثال ، می توانید از کلاس های d-md-none ، d-sm-block ، d-md-flex و... استفاده کنید.

در آخر اینکه ، هنگام چاپ از طریق کلاسهای کمکی چاپی می توانید مقدار نمایش یک عنصر را در تصویر چاپ شده تغییر دهید. این مقدار ها برای display در کلاسهای کمکی چاپی از همان مقادیر display در کلاس های واکنش گرای *-d پشتیبانی می کنند. شما می توانید نام این کلاس ها را با اضافه کردن کلمه print بعد از *-d بدست آورید.

 

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

• d-print-none.
• d-print-inline.
• d-print-inline-block.
• d-print-block.
• d-print-grid.
• d-print-table.
• d-print-table-row.
• d-print-table-cell.
• d-print-flex.
• d-print-inline-flex.

 

در زیر نحوه کار چند نمونه از این کلاسهای کمکی display را در نشان گذاری html می بینید:

<div class="d-inline p-2 bg-success text-white">.d-inline</div>
<div class="d-inline p-2 bg-dark text-white">.d-inline</div>
<div class="d-block p-2 mt-3 bg-danger text-white">.d-block</div>
<div class="d-block p-2 mt-2 bg-secondary text-white">.d-block</div>
<div class="d-md-none d-lg-block p-2 mt-2 bg-dark text-white">.d-md-none .d-lg-block</div>
<div class="d-print-none p-2 mt-2 bg-warning">.d-print-none</div>

 

و نتیجه را در مرورگر در تصویر زیر می بینید:

در اینجا خلاصه ای از آنچه باید درباره نشان گذاری html در بالا بدانید:

 

• ما از کلاس d-inline در <div> اول و دوم استفاده کردیم. این باعث می شود که این دو برچسب <div>  بتوانند در کنار هم در یک خط قرار گیرند و چون آنها inline (درون خطی) هستند ، افزودن هر ویژگی برای تغییر ارتفاع و عرض آنها هیچ تاثیری نخواهد داشت.
• ما از کلاس d-block در <div> سوم و چهارم استفاده کردیم. این برچسب <div> را به صورت بلوکی می کند یعنی از یک خط جدید شروع می شود و کل عرض را اشغال می کند. هرچند این حالت به صورت پیش فرض برای div وجود دارد ولی در صورتی که قبلاً display آن را تغییر داده باشیم می تواند برای تغییر display تگ div به حالت پیش فرض استفاده شود همچنین می توان از این کلاس برای تگ هایی که حالت پیش فرض آنها display: block نیست استفاده شود.
• در برچسب چهارم <div> از کلاس های d-md-none و d-lg-block استفاده کردیم. این به سادگی <div> را در نمایشگر با وضوح بالا  یا عرض بزرگ نمایش می دهد اما آن را در وضوح صفحه نمایش و عرض متوسط و کوچک ، مخفی می کند ،
• در آخرین برچسب <div> ما از کلاس d-print-none استفاده کردیم. که به این معنی است که <div> فقط در صفحه نمایش ، دیده می شود اما در صفحه چاپی پنهان است.

 

 

Flex

 

Flexbox روش بهتری برای سازماندهی عناصر در یک صفحه وب به روشی قابل پیش بینی ارائه می دهد. در حالی که بعضی اوقات عملکرد آن مانند float است ، اما چیزهای بسیار بیشتری از جمله تغییر ترتیب عناصر و اجتناب از مشکلات شناخته شده float را ارائه می دهد.

در نسخه 4 بوت استرپ ، پشتیبانی از flexbox بالاخره رسید. با استفاده از کلاس های کمکی display ، ایجاد یک ظرف flexbox و تبدیل عناصر درونی آن به عناصر flex آسان است.

 

بوت استرپ با کلاسهای اصلی زیر برای flexbox همراه است:

• کلاس d-flex : عنصر را به عنوان محفظه flex تعیین می کند که ظاهر بلوکی (block) دارد ولی تگ های درون آن ، آیتم های flex  می شوند.
• کلاس d-inline-flex : عنصر را به عنوان محفظه flex تعیین می کند که ظاهر درون خطی (inline) دارد ولی تگ های درون آن آیتم های flex  می شوند.
• کلاس flex-row : چیدمان آیتم های فلکسی درون عنصر را در direction: ltr از چپ به راست و برای direction: rtl از راست به چپ تنظیم می کند.
• کلاس flex-column : چیدمان آیتم های فلکسی درون عنصر را از بالا به پایین تنظیم می کند.
• کلاس flex-row-reverse : چیدمان آیتم های فلکسی درون عنصر را در direction: ltr از راست به چپ و برای direction: rtl از چپ به راست تنظیم می کند (برعکس کلاس flex-row است).
• کلاس flex-column-reverse : چیدمان آیتم های فلکسی درون عنصر را از پایین به بالا تنظیم می کند (برعکس کلاس flex-column است).
• کلاس justify-content-start : ترازبندی آیتم های فلکس را در محور اصلی مشخص می کند و آیتم های فلکس را در سمت ابتدای flex-direction تراز می کند.
• کلاس justify-content-end : ترازبندی آیتم های فلکس را در محور اصلی مشخص می کند و آیتم های فلکس را در سمت انتهای flex-direction تراز می کند.
• کلاس justify-content-center : ترازبندی آیتم های فلکس را در محور اصلی مشخص می کند و آیتم های فلکس را در مرکز خط flex-direction تراز می کند.
• کلاس justify-content-between : ترازبندی آیتم های فلکس را در محور اصلی مشخص می کند. فضای خالی به صورت مساوی فقط بین آیتم های فلکس تقسیم می شود.
• کلاس justify-content-around : ترازبندی آیتم های فلکس را در محور اصلی مشخص می کند. فضای خالی به صورت مساوی بین تمامی آیتم های فلکس تقسیم می شود. فاصله اولین و آخرین آیتم فلکس از دیواره ها نصف فاصله بین آیتم های فلکس است.
• کلاس justify-content-evenly : ترازبندی آیتم های فلکس را در محور اصلی مشخص می کند. فضای خالی به صورت مساوی بین تمامی آیتم های فلکس تقسیم می شود. فاصله اولین و آخرین آیتم فلکس از دیواره ها نیز برابر فاصله بین آیتم های فلکس است.
• کلاس align-items-start : رفتار آیتم های فلکس را در محور عرضی مشخص می کند و آیتم های فلکس را در نقطه ابتدایی این محور تراز می کند.
• کلاس align-items-end : رفتار آیتم های فلکس را در محور عرضی مشخص می کند و آیتم های فلکس را در نقطه انتهایی این محور تراز می کند.
• کلاس align-items-center : رفتار آیتم های فلکس را در محور عرضی مشخص می کند و آیتم های فلکس را در نقطه مرکزی این محور تراز می کند.
• کلاس align-items-baseline : رفتار آیتم های فلکس را در محور عرضی مشخص می کند و آیتم های فلکس را در این محور روی خط محتوا تراز می کند.
• کلاس align-items-stretch : رفتار آیتم های فلکس را در محور عرضی مشخص می کند و  آیتم های فلکس را در این محور گسترش می دهد تا آن را پوشش بدهند.
• کلاس align-self-start : تراز بندی این آیتم فلکس را درون محفظه flexbox مشخص می کند. و تراز این عنصر را ابتدای محفظه flexbox قرار می دهد.
• کلاس align-self-end : تراز بندی این آیتم فلکس را درون محفظه flexbox مشخص می کند. و تراز این عنصر را انتهای محفظه flexbox قرار می دهد.
• کلاس align-self-center : تراز بندی این آیتم فلکس را درون محفظه flexbox مشخص می کند. و تراز این عنصر را مرکز محفظه flexbox قرار می دهد.
• کلاس align-self-baseline : تراز بندی این آیتم فلکس را درون محفظه flexbox مشخص می کند. و این عنصر را هم تراز خط محتوا قرار می دهد.
• کلاس align-self-stretch : تراز بندی این آیتم فلکس را درون محفظه flexbox مشخص می کند. و این عنصر گسترش می یابد تا عرض محفظه flexbox را پوشش دهد.
• کلاس *-order : ترتیب  این آیتم فلکس را بین آیتم های فلکس درون محفظه تعیین می کند. بجای * می توان اعداد صفر یا بزرگتر قرار داد.
• کلاس align-content-start : مشخص می کند که هر ردیف چگونه درون محفظه flexbox تراز می شود. ردیف را در سمت ابتدای محفظه flexbox تراز می کند.
• کلاس align-content-end : مشخص می کند که هر ردیف چگونه درون محفظه flexbox تراز می شود. ردیف را در سمت انتهای محفظه flexbox تراز می کند.
• کلاس align-content-center : مشخص می کند که هر ردیف چگونه درون محفظه flexbox تراز می شود. ردیف را در مرکز محفظه flexbox تراز می کند.
• کلاس align-content-baseline : مشخص می کند که هر ردیف چگونه درون محفظه flexbox تراز می شود. ردیف را روی خط محتوا درون محفظه flexbox تراز می کند.
• کلاس align-content-stretch : مشخص می کند که هر ردیف چگونه درون محفظه flexbox تراز می شود. ردیف را گسترش می دهد تا ارتفاع محفظه flexbox را پوشش دهد.
• کلاس flex-nowrap : تعیین می کند که آیا آیتم های فلکس می توانند فقط یک ردیف را پر کنند یا می توانند در چند ردیف قرار گیرند. این کلاس از قرار گیری آیتم های فلکس در بیش از یک ردیف جلوگیری می کند.
• کلاس flex-wrap : تعیین می کند که آیا آیتم های فلکس می توانند فقط یک ردیف را پر کنند یا می توانند در چند ردیف قرار گیرند. این کلاس امکان پخش شدن آیتم های فلکس در بیش از یک ردیف را فراهم می کند.
• کلاس flex-wrap-reverse : تعیین می کند که آیا آیتم های فلکس می توانند فقط یک ردیف را پر کنند یا می توانند در چند ردیف قرار گیرند. این کلاس امکان پخش شدن آیتم های فلکس در بیش از یک ردیف را فراهم می کند. اما با ترتیب برعکس.
• کلاس *-flex-grow : میزان گسترش آیتم فلکس درون محفظه flexbox را نسبت به سایر آیتم های فلکس مشخص می کند.
• کلاس *-flex-shrink : میزان کوچک شدن آیتم فلکس درون محفظه flexbox را نسبت به سایر آیتم های فلکس مشخص می کند.

 

بعلاوه ، انواع واکنش گرا در اکثر این کلاسهای سودمند flexbox وجود دارد. به عنوان مثالی برای کلاس d-flex ، می توانید از کلاس ها در نقطه های انفصال (breakpoint) یا viewport های خاص مانند d-sm-flex یا d-xl-flex استفاده کنید.

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

 

در ادامه یک مثال را در مورد برخی از این کلاسهای کمکی flexbox بررسی می کنیم. نشانه گذاری html زیر را در نظر بگیرید:

<div class="container">
<div class="row">
   <div class="col-md-7">
      <nav>
         <ul class="nav justify-content-evenly text-white bg-primary">
            <li><a href="#">Link #1</a></li>
            <li><a href="#">Link #2</a></li>
            <li><a href="#">Link #3</a></li>
            <li><a href="#">Link #4</a></li>
         </ul>
      </nav>
      <div class="main d-flex">
         <div class="bg-light flex-grow-1 p-2">
            <h3>Main Content</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
         </div>
         <aside class="bg-success text-white p-2">
            <h3>Sidebar</h3>
            <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
         </aside>
      </div>
      <footer class="d-flex">
         <p class="bg-warning p-2">Extra Link</p>
         <p class="bg-danger flex-grow-1 text-white p-2">Copyright Text</p>
      </footer>
   </div>
</div>

 

با کمی استایل های CSS سفارشی اضافه شده ، اگر آن را در مرورگر مشاهده می کنید ، باید به این شکل باشد:

نگاهی دقیق به آنچه در نشانه گذاری بالا رخ می دهد ، می اندازیم:

 

• در داخل برچسب <nav> و برچسب <ul> ما از کلاس کمکی justify-content-evenly استفاده کردیم. این کلاس تراز بندی عناصر فلکس داخل این تگ ها را در امتداد محور اصلی تعریف می کند و فضای خالی را به شکل مساوی در اطراف تمام عناصر فلکس تقسیم می کند.
• در عناصر محتوای اصلی ما ، از کلاس d-flex استفاده می کنیم که این باعث می شود این تگ ها محفظه flexbox و تگ های درونی آنها آیتم های flex باشند که به صورت پیش فرض ، افقی کنار هم قرار می گیرند.  ما همچنین کلاس flex-grow-1 را بر روی برچسب <div> اضافه کردیم تا میزان رشد این مورد فلکس نسبت به بقیه موارد فلکس درون ظرف flexbox را تعیین کنیم. که دو برابر فضای <aside> را اشغال می کند چون میزان گسترش <aside> صفر است.
• سرانجام ، بر روی برچسب <footer> ما دوباره از کلاس d-flex استفاده کردیم تا این تگ تبدیل به محفظه flexbox شود و flex-grow-1 را بر روی برچسب <p> دوم اضافه کردیم که باز هم دو برابر تگ <p> اول فضای بیشتری را اشغال می کند.

 

 

تعاملات کاربر با صفحه

 

Bootstrap 5 همچنین کنترل های استایل های CSS را فراهم می کند که به کاربران امکان تعامل با محتوا را می دهد. این تعیین می کند که آیا کاربر می تواند متن را انتخاب کند یا خیر و اینکه آیا یک رویداد اشاره گر خاص در یک عنصر متن فعال است. این تأثیری بر محتوای بارگذاری شده به عنوان بخشی از رابط کاربری در مرورگر ندارد ، به جز در جعبه های متنی.

 

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

• کلاس user-select-all : امکان انتخاب متن با کلیک را فراهم می کند.
• کلاس user-select-auto : حالت پیش فرض در انتخاب متن.
• کلاس user-select-none : جلوگیری از انتخاب عنصر متنی و اجزای آن توسط کاربر.
• کلاس pe-none : جلوگیری از تعامل از طریق اشاره گر (موس ، قلم ، صفحه لمسی).
• کلاس pe-auto : حالت پیش فرض در تعامل از طریق اشاره گر.

 

برای اینکه این کلاس های تعاملی را در عمل ببینیم. نشانه گذاری html زیر را در نظر بگیرید:

<p class="user-select-all">استفاده از <span style="color: #7952B3; font-weight: bold">.user-select-all</span>, پس از کلیک کل این پاراگراف انتخاب می شود</p>
<p class="user-select-auto">استفاده از <span style="color: #7952B3; font-weight: bold">.user-select-auto</span>, این پاراگراف رفتار پیش فرض برای انتخاب را دارد</p>
<p class="user-select-none">استفاده از <span style="color: #7952B3; font-weight: bold">.user-select-none</span>, این پاراگراف با کلیک قابل انتخاب نیست</p>
<p>Using <span style="color: #7952B3; font-weight: bold">.pe-none</span>, <a href="#" class="pe-none" tabindex="-1" aria-disabled="true">این لینک</a> نمی تواند کلیک شود</p>
<p>Using <span style="color: #7952B3; font-weight: bold">.pe-auto</span>, <a href="#" class="pe-auto">این لینک</a> می تواند کلیک شود (حالت پیش فرض)</p>

نشانه گذاری ما در بالا بسیار ساده است. اگر آن را در مرورگر خود بررسی کنید ، دقیقاً همان رفتاری را می بینید که روی هر پاراگراف نوشته شده است.

 

 

سرریز یا Overflow

 

با استفاده از bootstrap ، تنظیم رفتار دلخواه خود برای سرریز یک عنصر با استفاده از کلاسهای کمکی سرریز نیز آسان است. به عنوان مثال ، وقتی محتوای یک عنصر بسیار زیاد است و نمی تواند درون ظرف خود قرار بگیرد ، می توانید تعیین کنید که آیا محتوا را در هر دو جهت برش دهید یا یک نوار پیمایشی به آن اضافه کنید.

 

Bootstrap کلاسهای سودمند سرریز زیر را ارائه می دهد که می توانید روی عناصر به راحتی استفاده کنید:

• کلاس overflow-auto : اگر محتوا جا نشود دیده نمی شود ولی میله پیمایش (scroll bar) به صورت خودکار اضافه می شود تا کاربر بتواند محتوا را ببیند.
• کلاس overflow-hidden : محتوایی که جا نمی شود برش می خورد و محتوایی که جا نشده هرگز قابل مشاهده نیست.
• کلاس overflow-visible : محتوایی که جا نمی شود برش نمی خورد و در خارج از مکان خود سرریز می کند.
• کلاس overflow-scroll : میله پیمایش (scroll bar)  همیشه اضافه می شود ، اگر محتوایی جا نشده می توان از میله پیمایش برای دیدن آن استفاده کرد ولی اگر کل محتوا جا شده ، میله پیمایش به صورت غیرفعال دیده می شود.

برای دیدن این کلاسهای کمکی برای سرریز در عمل ، نشان گذاری زیر را در نظر بگیرید:

<div class="overflow-auto">
   <h3>Overflow Auto</h3>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="overflow-hidden">
   <h3>Overflow Hidden</h3>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="overflow-visible">
   <h3>Overflow Visible</h3>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="overflow-scroll">
   <h3>Overflow Scroll</h3>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

 

با اضافه کردن کمی استایل CSS سفارشی ، نتیجه باید به صورت زیر باشد:

 

 

موقعیت یا Position

 

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

 

Bootstrap کلاسهای سودمند موقعیت زیر را ارائه می دهد:

• کلاس position-static : آیتم به صورت static در صفحه قرار می گیرد که به معنی حالت پیش فرض طبق نشان گذاری های html است.
• کلاس position-relative : آیتم به صورت relative در صفحه قرار می گیرد که مانند حالت قبل طبق نشان گذاری های صفحه است با این تفاوت که با استفاده از ویژگی های top, right, bottom, left می توان آن را نسبت به مکان اصلی جابجا کرد. در صورت جابجایی در مکان اصلی آیتم یک فضای خالی دیده می شود. همچنین چون این آیتم دارای موقعیت relative است می تواند مبنایی برای آیتم های درونی خودش باشد که موقعیت absolute دارند.
• کلاس position-absolute : آیتم از جریان اصلی صفحه خارج می شود و روی صفحه قرار می گیرد. بر اساس ویژگی های top, right, bottom, left مکان آن را می توان روی صفحه مشخص کرد. اگر این آیتم درون تگ دیگری با موقعیت relative یا absolute یا fixed باشد ، مبنای این ویژگی ها مکان آن تگ والد است یعنی این ویژگی ها موقعیت این آیتم را نسبت به موقعیت آن تگ والد تعیین می کنند. در غیر این صورت اگر این آیتم درون تگی با موقعیت relative یا absolute یا fixed نباشد ، مبنای تعیین موقعیت آن تگ body است یعنی top, right, bottom, left نسبت به تگ body محاسبه می شوند.
• کلاس position-fixed : آیتم از جریان اصلی صفحه خارج می شود و روی صفحه قرار می گیرد. بر اساس ویژگی های top, right, bottom, left مکان آن را می توان روی صفحه مشخص کرد. مبنای تعیین موقعیت آن تگ body است یعنی top, right, bottom, left نسبت به تگ body محاسبه می شوند. در هنگام پیمایش (scroll) صفحه این آیتم در مکان خود باقی می ماند.
• کلاس position-sticky : موقعیت آیتم بر اساس پیمایش (scroll) صفحه مشخص می شود. مثلاً تا مکانی از پیمایش که آیتم دیده شود ، آیتم نیز با صفحه پیمایش شود ولی با پیمایش بیشتر ، آیتم بالای صفحه ثابت بماند. مکان آیتم را می توان با ویژگی های top, right, bottom, left مشخص کرد.
• کلاس *-top : برای تعیین موقعیت قرار گیری بالای آیتم در محور عمودی.
• کلاس *-bottom : برای تعیین موقعیت قرار گیری پایین آیتم در محور عمودی.
• کلاس *-start : برای تعیین موقعیت قرار گیری سمت چپ آیتم در محور افقی (در LTR).
• کلاس *-end : برای تعیین موقعیت قرار گیری سمت راست آیتم در محور افقی (در LTR).
• کلاس 0-[top/start/bottom/end] : تنظیم موقعیت این گوشه روی صفر.
• کلاس 50-[top/start/bottom/end] : تنظیم موقعیت این گوشه روی ۵۰٪.
• کلاس 100-[top/start/bottom/end] : تنظیم موقعیت این گوشه روی ۱۰۰٪.
• کلاس translate-middle : اعمال تبدیلی به اندازه ۵۰٪- در محور افقی و عمودی روی آیتم که در ترکیب با کلاس های موقعیت ذکر شده در بالا باعث می شود عنصر کاملاً در مرکز قرار گیرد.

 

برخی از این کلاس های کمکی را در چند مثال بررسی می کنیم. نشان گذاری html زیر را ببینید:

<nav class="navbar navbar-dark bg-dark position-sticky">
   <div class="container-fluid">
      <a class="navbar-brand" href="#">Position Sticky</a>
   </div>
</nav>
<div class="container-fluid">
<div class="row">
   <div class="col-md-12 mx-auto">
      <aside class="bg-danger text-white p-4 position-absolute top-50 start-50 translate-middle">
         <h3>Position Absolute With Translate Middle</h3>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </aside>
      <div class="main bg-success p-4 text-white position-relative top-0 end-0">
         <h3>Position Relative</h3>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
   </div>
</div>

 

نتیجه نهایی باید در مرورگر به این شکل باشد:

در اینجا چند نکته وجود دارد که باید درباره نشان گذاری بالا بیان شود:

 

• ما برای نشان دادن موقعیت sticky  از مولفه نوار ناوبری بوت استرپ استفاده کردیم. این مثال خوبی در مورد کارکرد موقعیت sticky است.
• بعد ، درون برچسب <aside> ما کلاس های position-absolute, top-50, start-50 و translate-middle را اضافه کردیم. این برچسب <aside> را نسبت به نزدیکترین عنصر موجود قرار می دهد و موقعیت چپ افقی را تنظیم می کند به 50٪ موقعیت لبه و موقعیت بالایی عمودی را روی 50٪ موقعیت لبه تنظیم کنید. با استفاده از کلاس translate-middle جابجایی های translateX برابر ۵۰٪- و translateY برابر ۵۰٪- را به عنصر اعمال می کنیم که آن را در مرکز قرار می دهد.
• در آخرین برچسب <div> ما از کلاس های position-relative ، top-0 و end-0 استفاده کردیم که باعث می شود موقعیت آن نسبت به صفحه مشخص شود. با استفاده از کلاس های top-0 و end-0 ، موقعیت بالایی عمودی را در 0 نسبت به لبه صفحه و موقعیت افقی راست را نیز در 0 نسبت به لبه صفحه تنظیم می کنیم.

 

 

سایه تگ ها یا Box Shadow

 

با ویژگی box-shadow ، می توانید جلوه های سایه را با فاصله دلخواه که با X و Y تعیین می شود ، به دور قاب هر عنصری اعمال کنید. Bootstrap 5 همچنین کلاسهای کمکی آماده خود را دارد تا به سرعت سایه های جعبه را به عناصر شما اضافه کند.

 

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

 

• کلاس shadow-none : رفع سایه اطراف عنصر
• کلاس shadow : اعمال یک سایه معمولی اطراف عنصر
• کلاس shadow-sm : اعمال یک سایه کوچک اطراف عنصر
• کلاس shadow-lg : اعمال یک سایه بزرگ اطراف عنصر

 

حالا این کلاسها را در عمل ببینیم. نشان گذاری html زیر را در نظر بگیرید:

<div class="shadow-none p-3 mb-4 bg-light rounded">No shadow</div>
<div class="shadow-sm p-3 mb-4 bg-body rounded">Small shadow</div>
<div class="shadow p-3 mb-4 bg-body rounded">Regular shadow</div>
<div class="shadow-lg p-3 mb-4 bg-body rounded">Larger shadow</div>

نشانه گذاری بسیار ساده است زیرا ما فقط هر کلاس box-shadow را بر روی هر برچسب <div> اضافه کردیم.

 

نتیجه باید مانند تصویر زیر باشد:

 

 

سایزبندی

 

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

جدا از ستون های واکنش گرا و کلاس های flexbox ، بوت استرپ کلاس های مفیدی برای سایزبندی نیز ارائه می دهد که بسته به طرح مورد نظر شما می تواند عنصری را به اندازه مورد نیاز شما عریض یا بلند کند.

 

این امر از طریق کلاسهای مفید سایزبندی ارائه شده توسط bootstrap امکان پذیر می شود.

• کلاس w-25 : تنظیم عرض یک عنصر برابر ۲۵٪ عرض تگ والد آن.
• کلاس w-50 : تنظیم عرض یک عنصر برابر ۵۰٪ عرض تگ والد آن.
• کلاس w-75 : تنظیم عرض یک عنصر برابر ۷۵٪ عرض تگ والد آن.
• کلاس w-100 : تنظیم عرض یک عنصر برابر ۱۰۰٪ عرض تگ والد آن.
• کلاس w-auto : تنظیم عرض یک عنصر به صورت خودکار.
• کلاس mw-100 : تنظیم حداکثر عرض یک عنصر برابر ۱۰۰٪ عرض تگ والد آن.
• کلاس h-25 : تنظیم ارتفاع یک عنصر برابر ۲۵٪ تگ والد آن.
• کلاس h-50 : تنظیم ارتفاع یک عنصر برابر ۵۰٪ تگ والد آن.
• کلاس h-75 : تنظیم ارتفاع یک عنصر برابر ۷۵٪ تگ والد آن.
• کلاس h-100 : تنظیم ارتفاع یک عنصر برابر ۱۰۰٪ تگ والد آن.
• کلاس h-auto : تنظیم ارتفاع یک عنصر به صورت خودکار.
• کلاس mh-100 : تنظیم حداکثر ارتفاع یک عنصر برابر ۱۰۰٪ تگ والد آن.
• کلاس vw-100 : تنظیم عرض یک عنصر برابر ۱۰۰٪ عرض صفحه.
• کلاس min-vw-100 : تنظیم حداقل عرض یک عنصر برابر ۱۰۰٪ عرض صفحه.
• کلاس vh-100 : تنظیم ارتفاع یک عنصر برابر ۱۰۰٪ صفحه.
• کلاس min-vh-100 : تنظیم حداقل ارتفاع یک عنصر برابر ۱۰۰٪ صفحه.

 

حالا برخی از این کلاس ها را امتحان می کنیم. نشانه گذاری html زیر را در نظر بگیرید:

<div>
   <div class="w-25 p-3 bg-primary text-white">Width 25%</div>
   <div class="w-50 p-3 bg-success text-white">Width 50%</div>
   <div class="w-75 p-3 bg-danger text-white">Width 75%</div>
   <div class="w-100 p-3 bg-dark text-white">Width 100%</div>
   <div class="w-auto p-3 bg-secondary text-white">Width auto</div>
</div>
<div>
   <div class="h-25 d-inline-block p-3 bg-primary text-white" style="width: 120px;">Height 25%</div>
   <div class="h-50 d-inline-block p-3 bg-success text-white" style="width: 120px;">Height 50%</div>
   <div class="h-75 d-inline-block p-3 bg-danger text-white" style="width: 120px;">Height 75%</div>
   <div class="h-100 d-inline-block p-3 bg-dark text-white" style="width: 120px;">Height 100%</div>
   <div class="h-auto d-inline-block p-3 bg-secondary text-white" style="width: 120px;">Height auto</div>
</div>

در نشانه گذاری بالا ، ما دو برچسب حاوی <div> داریم. اولین برچسب <div>  با کمک کلاس های بوت استرپ ، تمام  عرض را پوشش می دهد در حالی که دومین برچسب <div> با کمک کلاس های بوت استرپ ، تمام  ارتفاع را پوشش می دهد.

 

با استفاده از این کدها می توانید انتظار نتیجه ای مشابه تصویر زیر را داشته باشید:

 

 

فاصله گذاری

 

بوت استرپ انواع مختلفی از کلاسهای واکنش گرای margin و padding و gap را برای تغییر موقعیت یا شکل عنصر ارائه می دهد. این کلاسهای کمکی فاصله گذاری را می توان در هر نقطه انفصال (breakpoint) پشتیبانی شده ای ، از xs (خیلی کوچک) تا xxl (بسیار بزرگ) استفاده کرد و هیچ کلمه اختصاری از نقطه انفصال (breakpoint) در نام این کلاس ها وجود ندارد. اندازه گیری استاندارد برای هر کلاس margin و padding و gap از 0.25rem تا 3rem است.

این کلاسها با فرمت های زیر قالب بندی شده اند:

{property}{sides}-{size} // xs

{property}{sides}-{breakpoint}-{size} // sm, md, lg, xl, xxl

اندازه های موجود از 0 تا 5 و یک کلمه کلیدی auto اضافی برای تنظیم margin بر روی خودکار است.

 

در زیر برخی از کلاس های فاصله گذاری را می بینید:

• کلاس *-mt : تنظیم margin بالا روی عنصر
• کلاس *-mb : تنظیم margin پایین روی عنصر
• کلاس *-ml : تنظیم margin چپ روی عنصر
• کلاس *-mr : تنظیم margin راست روی عنصر
• کلاس *-mx : تنظیم margin چپ و راست روی عنصر
• کلاس *-my : تنظیم margin بالا و پایین روی عنصر
• کلاس *-pt : تنظیم padding بالا روی عنصر
• کلاس *-pb : تنظیم padding پایین روی عنصر
• کلاس *-pl : تنظیم padding چپ روی عنصر
• کلاس *-pr : تنظیم padding راست روی عنصر
• کلاس *-px : تنظیم padding چپ و راست روی عنصر
• کلاس *-py : تنظیم padding بالا و پایین روی عنصر
• کلاس *-gap : تنظیم gap روی grid والد

 

به عنوان مثال می توانید از کلاس mt-5 برای اضافه کردن margin برابر 3rem در بالای عنصر یا کلاسpb-1  برای افزودن padding پایین 25rem. به عنصر استفاده کنید.

علاوه بر این ، می توانید از طریق کلمه کلیدی n حاشیه (margin) منفی نیز اضافه کنید. به عنوان مثال ، اگر می خواهید یک حاشیه منفی در بالای یک عنصر اضافه کنید ، می توانید از کلاس mt-n1 استفاده کنید. این قالب کلاس با کلاس margin مثبت یکسان است فقط با افزودن کلید واژه n به آن margin منفی شده است.

 

 

استایل دهی به متن

 

بوت استرپ 5 همچنین چند کلاس جدید برای مولفه های متنی یا پیوند اضافه کرده است. با استفاده از این کلاس ها ، می توانید متن را به راحتی درون مولفه ها تراز کنید ، متن را بپیچانید (wrap کنید)، اندازه یا وزن فونت را اصلاح کنید ، اندازه حروف را تغییر دهید و موارد دیگر. درست مانند مجموعه قبلی کلاسهای کمکی که در بالا معرفی کردم و نشان دادم ، کلاسهای واکنش گرا نیز در برخی از این کلاسهای کمکی متن موجود است و به کمک آنها می توانید با استفاده از نقاط انفصال عرض viewport چیدمان متن را تغییر دهید.

 

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

• کلاس text-start : تراز متن به سمت چپ
• کلاس text-center : تراز متن در مرکز
• کلاس text-end : تراز متن به سمت راست
• کلاس text-wrap : پیچاندن متن سر ریز شده
• کلاس text-nowrap : جلوگیری از پیچیدن متن سر ریز شده
• کلاس text-lowercase : تبدیل حروف متن به حروف کوچک
• کلاس text-uppercase : تبدیل حروف متن به حروف بزرگ
• کلاس text-capitalize : اولین حرف هر کلمه تبدیل به حروف بزرگ شود
• کلاس *-fs : تغییر اندازه فونت متن ، بجای * می توان از اعداد ۱ تا ۶ استفاده کرد
• کلاس fw-bold : تغییر وزن فونت متن به  bold (پر رنگ)
• کلاس fw-bolder : تغییر وزن فونت متن به  bolder (نسبت به تگ والد)
• کلاس fw-normal : تغییر وزن فونت متن به نرمال
• کلاس fw-light : تغییر وزن فونت متن به light
• کلاس fw-lighter : تغییر وزن فونت متن به lighter (نسبت به تگ والد)
• کلاس fst-italic : تغییر استایل فونت متن به italic (کج)
• کلاس fst-normal : تغییر استایل فونت متن به نرمال
• کلاس *-lh : تنظیم ارتفاع خط با اضافه کردن یک عدد یا breakpoint بعد از خط فاصله در نام این کلاس
• کلاس font-monospace : تغییر فونت به مجموعه فونت های monospace بوت استرپ. در این فوت ها هر حرف فضای برابری از محور افقی را اشغال می کند.
• کلاس text-reset : تنظیم مجدد رنگ متن یا پیوند
• کلاس text-decoration-underline : قرارگیری یک خط افقی زیر متن
• کلاس text-decoration-line-through : قرار گیری یک خط افقی روی متن
• کلاس text-decoration-none : حذف تاثیر دو کلاس قبلی این لیست یعنی خط زیر یا روی متن را در صورت وجود حذف می کند.

حالا می بینیم که برخی از این کلاس های کمکی مربوط به متن چگونه کار می کنند. نشان گذاری html زیر را بررسی کنید:

<h2 class="fs-4 text-center mb-4">The quick, brown fox jumps over a lazy dog</h2>
<p class="text-start lh-1">The quick <span class="text-lowercase text-decoration-underline">BROWN FOX</span> jumps over the lazy dog. The quick brown fox jumps over the <span class="text-uppercase text-decoration-underline">lazy dog</span>. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</p>
<p class="text-end text-capitalize">The quick brown fox jumps over the lazy dog. <span class="fw-bold text-decoration-underline">The quick brown fox jumps over the lazy dog</span>. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. <span class="fst-italic text-decoration-underline">The quick brown fox jumps over the lazy dog.</span></p>
<a class="text-decoration-none text-uppercase text-sm-center" href="#">click here to learn more &rarr;</a>

 

خروجی نشان گذاری بالا به صورت زیر است:

 

در اینجا برخی از نکات برجسته ای که باید در مورد نشان گذاری در بالا از آنها آگاه باشید :

 

• در برچسب <h2> ما از کلاس fs-3 و text-center استفاده می کنیم. این به سادگی اندازه فونت متن را روی 1.75rem تنظیم می کند و متن را در مرکز تراز می کند.
• در پاراگراف اول ، ما از کلاس text-start و lh-1 استفاده می کنیم. این به سادگی ترازبندی متن را در سمت چپ یا ابتدای تگ والدش قرار می دهد و به آن ارتفاع یا فاصله خطی برابر 1 می دهد. با استفاده از چند برچسب <span> ، کلاسهای زیر را اضافه کردیم: text-lowercase و text-decoration-underline و text-uppercase. این کلاس ها خیلی سر راست هستند. آنها به ترتیب متن را به کوچک و بزرگ تبدیل می کنند و زیر هر متن یک خط می گذارند.
• در پاراگراف دوم از کلاس های text-end و text-capitalize استفاده کردیم. این تقریباً مشابه پاراگراف اول است با این تفاوت که متن را به سمت راست یا انتهای ظرف تراز می کند. دوباره ، با استفاده از چند برچسب <span> ، کلاسهای زیر را اضافه کردیم: fw-bold و text-decoration-underline و fst-italic این کلاس ها به سادگی یک وزن فونت bold یا درشت و استایل italic یا کجی را به متن اضافه می کنند. کلاس text-decoration-underline نیز خطی را در زیر متن قرار می دهد.
• بر روی برچسب پیوند کلاس های text-decoration-none و text-uppercase  و text-sm-center را اضافه کردیم در مقایسه با کلاس text-decoration-underline  کلاس text-decoration-none خط پیوند را حذف می کند. کلاس text-sm-center در وضوح صفحه نمایش کوچک یا عرض صفحه کوچک ، متن را در وسط صفحه تراز می کند.

 

 

تراز عمودی

 

با bootstrap افزودن گزینه های هم ترازی عمودی به اجزای سازنده آسان است. در صورت لزوم می توانید از کلاس های .align-baseline, .align-top, .align-middle, .align-bottom, .align-text-bottom, .align-text-top استفاده کنید.

 

توجه: اگر می خواهید اجزای غیر خطی مانند عناصری که از برچسب <div> استفاده می کنند به صورت عمودی تراز شوند ، باید در عوض از ابزارهای flexbox استفاده کنید. همچنین ، تراز کردن عمودی فقط می تواند روی عناصر inline, inline-block, inline-table, table-cell تأثیرگذار باشد.

 

بیایید نگاهی به نحوه کار این کلاسهای تراز بندی عمودی بیندازیم. نشانه گذاری html زیر را در نظر بگیرید:

<table>
   <tbody>
      <tr>
         <td class="align-baseline">.align-baseline</td>
         <td class="align-top">.align-top</td>
         <td class="align-middle">.align-middle</td>
         <td class="align-bottom">.align-bottom</td>
         <td class="align-text-top">.align-text-top</td>
         <td class="align-text-bottom">.align-text-bottom</td>
      </tr>
   </tbody>
</table>

 

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

 

 

پدیداری

 

در حالی که بوت استرپ از قبل ویژگی های نمایش خاص خود را برای مخفی کردن و نمایش عناصر در وضوح صفحه نمایش خاص یا در عرض خاصی از  viewport دارد ، همچنین دارای دو کلاس اضافی visible و invisible  برای کنترل قابلیت مشاهده یک عنصر است.

این کلاس های کمکی بسیار ساده هستند. شما از کلاس visible برای نمایان ساختن عنصری استفاده خواهید کرد و از کلاس  invisible  برای پنهان کردن یک عنصر هم از نظر بصری و هم برای کاربران فناوری های کمکی  / صفحه خوان ها استفاده می کنید.

 

 

جمع بندی

 

با وجود اینکه لیست کلاس های کمکی بوت استرپ خیلی طولانی است ولی در حد امکان در این مقاله ، تمام کلاسهای کمکی اضافه شده به Bootstrap 5 از جمله کلاسهای اخیراً اضافه شده را بررسی کردیم. این کلاسها در واقع از کلاسهای اساسی برای ایجاد وب سایت هایی با کد ها و استایل های باکیفیت و در عین حال جلوگیری از تکرار استایل های CSS سفارشی شده در سایت شما هستند. دانش عمیق از آنها به شما یک مزیت بزرگ می بخشد و به شما کمک می کند تا اصلاحات ساده در طراحی وب خود را سریعتر انجام دهید. به یاد داشته باشید که سازگاری در سراسر وب سایت نکته اصلی در مورد بوت استرپ است ، که باعث صرفه جویی در وقت ارزشمند شما می شود.