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

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

 

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

بوت استرپ شامل تعدادی کلاس کمکی برای اهدافی خاص است. کلاس های کمکی ، کلاس هایی از بوت استرپ هستند که امکان سفارشی سازی خاصی را در سریعترین زمان ممکن فراهم می کنند. هر کدام از این کلاس ها برای ارائه یک هدف واحد و کاهش نیاز به استفاده از دستورات تکراری CSS ساخته شده اند. Bootstrap با ساختار CSS مناسب ارائه می شود و چارچوبی برای ترویج بهترین روش های کد گذاری با مفهوم DRY (کد خود را تکرار نکنید) و قراردادهای مرسوم برای نامگذاری و روش کاملاً عملی مشابه BEM (Block Element Modifier) ​​و OOCSS (Object Oriented CSS) ایجاد شده که باعث می شود ، کد CSS شما قابل نگهداری و توسعه باشد. هدف نهایی بوت استرپ این است که همیشه سرعت توسعه نرم افزار را تا حد ممکن و بدون نیاز به دوباره کاری ، افزایش دهید.

در این آموزش ، شما خواهید آموخت که کلاس های کمکی از پیش تعریف شده Bootstrap 5 چیست و چگونه از آنها در شرایط خاص استفاده کنید. Bootstrap تعداد زیادی از آنها را با همان هدف ارائه می دهد. ممکن است قبلاً بعضی از آنها را در گذشته ناآگاهانه استفاده کرده باشید. در پایان این آموزش ، شما قادر خواهید بود از طریق کلاس های کمکی داخلی که توسط Bootstrap ارائه شده است ، به سرعت مولفه های مورد نظر خودتان را شخصی سازی کنید.

 

 

فهرست مطالب

 

• کلاس های کمکی بوت استرپ 5
  • Flat و Clearfix
  • پیوندهای رنگی
  • تنظیم نسبت عرض و ارتفاع
  • تنظیم موقعیت
  • پنهان سازی بصری
  • لینک گسترده
  • کوتاه کردن متن
• نتیجه

 

 

Float و Clearfix

 

بوت استرپ 5 شامل کلاسهای مفید داخلی (درون ساخت) برای ایجاد یک عنصر شناور است. با اضافه کردن کلاس float-start یا  float-end به یک div ، می توانید عناصر خود را به راحتی به سمت چپ (start) یا راست (end) شناور کنید. البته کلاس های شناورساز واکنش گرای دیگری نیز وجود دارند که می توانید برای هر اندازه خاص صفحه عنصر را در جهت متفاوتی شناور کنید. به خاطر داشته باشید که هر دو کلاس اصلاح کننده important! را (برای جلوگیری از مشکلات استایل های متناقض) دارند.

 

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

• float-start
• float-end
• float-none
• float-sm-start
• float-sm-end
• float-sm-none
• float-md-start
• float-md-end
• float-md-none
• float-lg-start
• float-lg-end
• float-lg-none
• float-xl-start
• float-xl-end
• float-xl-none
• float-xxl-start
• float-xxl-end
• float-xxl-none

برای اینکه کاملاً بفهمید کاربرد clearfix  چیست ، یک مثال ساده از عناصر شناور را بررسی می کنیم.

<div class="wrapper">
   <div class="float-start">
      FLOATED LEFT ELEMENT
   </div>
   <div class="float-end">
      FLOATED RIGHT ELEMENT
   </div>
</div>

همانطور که در نشانه گذاری بالا مشاهده می کنید ، ما یک برچسب <div> با کلاس wrapper و داخل آن دو برچسب <div> دیگر با کلاس float-start و float-end داریم که عناصر را به سمت چپ (start) و راست (end) شناور می کند.

 

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

همانطور که مشاهده می کنید ، بدون کلاس clearfix  ، برچسب <div> بیرونی در اطراف دو برچسب <div> داخلی شناور شده ، قرار نمی گیرد که باعث شکسته شدن طرح می شود.

 

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

<div class="wrapper clearfix">
   <div class="float-start">
      FLOATED LEFT ELEMENT
   </div>
   <div class="float-end">
      FLOATED RIGHT ELEMENT
   </div>
</div>

 

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

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

 

 

پیوند های رنگی

 

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

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

برای استفاده از ویژگی پیوندهای رنگی ، باید این نحو کلاس *-link را به خاطر بسپارید. "*" نشان دهنده رنگهای تم پشتیبانی شده است که در حالتها یا موقعیتهای مختلف استفاده می شود (به عنوان مثال اولیه ، ثانویه و غیره). در مقایسه با کلاسهای *-text ، کلاسهای کمکی پیوندهای رنگی حالت hover و focus نیز دارند.

 

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

• link-primary
• link-secondary
• link-success
• link-danger
• link-warning
• link-info
• link-light
• link-dark

 

برای اینکه ببینیم این کلاس ها چگونه کار می کنند. نشان گذاری زیر را در نظر بگیرید:

<a href="#" class="link-primary">Primary link</a>
<a href="#" class="link-secondary">Secondary link</a>
<a href="#" class="link-success">Success link</a>
<a href="#" class="link-danger">Danger link</a>
<a href="#" class="link-warning">Warning link</a>
<a href="#" class="link-info">Info link</a>
<a href="#" class="link-light">Light link</a>
<a href="#" class="link-dark">Dark link</a>

 

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

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

 

 

تنظیم نسبت عرض و ارتفاع

 

بوت استرپ 5 همچنین به شما امکان می دهد عناصر محتوای خارجی جاسازی شده مانند <iframe> ، <embed> ، <video> و <object> را به صورت واکنش گرا نشان دهید. با استفاده از کلاس ratio همراه با کلاس اصلاح کننده *-ratio ("*" نمایانگر اندازه یا نسبت ابعاد است: عرض و ارتفاع محتوای خارجی که می خواهید در یک حالت خاص استفاده کنید). همه استایل ها از کلاس ratio بکار رفته در والدین روی عناصر فرزند اعمال می شوند. بخاطر داشته باشید که نسبت ابعاد یک عنصر ، نسبت عرض با ارتفاع است که معمولاً با دو عدد که از طریق دو نقطه (کولون) از هم جدا شده اند در قالب x:y مشخص می شود. با این حال ، وقتی صحبت از استفاده از نسبت ابعاد در Bootstrap می شود ، منظور استفاده از کلاس اصلاح کننده ای با فرمت  *-ratio است که در آن ابعاد  به جای کولون با x جدا شده است.

 

چهار کلاس اصلاح کننده نسبت ابعاد وجود دارد که می توانید استفاده کنید:

• کلاس ratio-1×1 : عرض و ارتفاع عنصر برابر است. شبیه شکل مربع است.
• کلاس ratio-4×3 : عرض و ارتفاع عنصر مشابه صفحه نمایش تلویزیون و صفحه نمایش مانیتور کامپیوتر به شکل مستطیل است.
• کلاس ratio-16×9 : عرض و ارتفاع عنصر مشابه اسلاید نمایشی ، مانیتور کامپیوتر یا تلویزیون صفحه عریض اما با شکل مستطیل نازک تر و نسبتاً کشیده است.
• کلاس ratio-21×9 : عرض و ارتفاع عنصر برای نمایش فوق العاده گسترده با میدان دید گسترده تر.

 

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

<div class="ratio ratio-1x1">
   <embed type="video/webm" src="video.mp4" width="100%"/>
</div>
<div class="ratio ratio-4x3">
   <video width="100%" controls>
      <source src="movie.mp4" type="video/mp4"/>
   </video>
</div>
<div class="ratio ratio-16x9">
   <iframe width="560" height="315" src="https://www.youtube.com/embed/AW3SppO7qfY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="ratio ratio-21x9">
   <object data="film.mp4" width="100%"></object>
</div>

 

برای درک کامل این مثال، هر بخش کد را جداگانه مرور کنیم:

 

• در اولین برچسب <div> ، ما از هر دو کلاس ratio و ratio-1×1 به عنوان ظرفی برای یک برچسب <embed> که شامل یک ویدیو است استفاده کردیم. با این کار نسبت ابعادی با عرض و ارتفاع مساوی مشابه شکل مربع تولید می شود.
• بر روی برچسب <div> دوم ، ما از کلاس های ratio و ratio-4×3 به عنوان ظرفی برای برچسب <video> استفاده می کنیم که نوعی ویدیو و یک فایل منبع ویدیو است. این نسبت ابعادی با عرض و ارتفاع مشابه صفحه نمایش تلویزیون و اندازه صفحه نمایش مانیتور کامپیوتر قابل مقایسه با شکل مستطیل تولید می کند.
• در برچسب سوم <div> ، ما از هر دو کلاس ratio  و ratio-16×9 به عنوان ظرفی برای برچسب <iframe> استفاده کردیم که در آن از یک ویدیوی YouTube به عنوان فایل منبع خود استفاده کردیم. این امر باعث ایجاد نسبت ابعادی به شکل مستطیل باریک تر و نسبتاً کشیده با عرض و ارتفاع مشابه اسلاید نمایشی ، مانیتور کامپیوتر یا تلویزیون صفحه عریض می شود.
• سرانجام ، در برچسب چهارم <div> ، ما از هر دو کلاس ratio و ratio-21×9 به عنوان ظرفی برای برچسب <object> استفاده کردیم که در منبع داده آن یک فیلم mp4 وجود دارد. این امر باعث ایجاد نسبت ابعاد صفحه نمایش فوق العاده گسترده با ظاهری افقی می شود.

 

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

 

 

تنظیم موقعیت

 

Bootstrap یک روش بسیار ساده برای پیکربندی موقعیت هر عنصری ارائه می دهد. شما می توانید عنصری را در بالا یا پایین صفحه وب خود قرار دهید ، و حتی در آن مکان رفتار عنصر را هنگام پیمایش (scroll) صفحه مشخص کنید.

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

Bootstrap سه کلاس پیش فرض برای قرار دادن یک عنصر در صفحه وب شما فراهم می کند. علاوه بر آن چند کلاس سفارشی دیگر نیز برای واکنش گرا کردن کلاس sticky-top فراهم می کند.

 

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

• fixed-top
• fixed-bottom
• sticky-top

و در زیر کلاس های واکنش گرای sticky-top پشتیبانی شده:

• sticky-sm-top
• sticky-md-top
• sticky-lg-top
• sticky-xl-top

در مثال زیر می بینیم این کلاس های کمکی موقعیت چگونه کار می کنند. در ابتدا ، ما نحوه کار کلاس های fixed-top و fixed-bottom را نشان خواهیم داد. نشان گذاری html زیر را برای این منظور در نظر بگیرید:

<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
   <div class="container-fluid">
      <a class="navbar-brand" href="#">Navbar</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
         <ul class="navbar-nav ms-auto">
            <li class="nav-item">
               <a class="nav-link active" aria-current="page" href="#">Home</a>
            </li>
            <li class="nav-item">
               <a class="nav-link" href="#">About</a>
            </li>
            <li class="nav-item">
               <a class="nav-link" href="#">Contact</a>
            </li>
         </ul>
      </div>
   </div>
</nav>
<!-- Your main content here -->
<footer class="fixed-bottom">
   <p class="text-center">Footer</p>
</footer>

نشان گذاری در بالا بسیار ساده است. ما از نشانه گذاری معمول نوار ناوبری بوت استرپ استفاده کرده ایم و سپس از کلاس fixed-top در داخل برچسب <nav> استفاده کردیم. با این کار نوار ناوبری مستقل از پیمایش صفحه در بالای صفحه وب ثابت می شود.

ما همچنین یک تگ <footer> ساده ایجاد کردیم و از کلاس fixed-bottom برای آن استفاده کردیم. با این کار محتوای <footer> در پایین صفحه وب در موقعیت ثابت و مستقل از پیمایش صفحه قرار می گیرد.

 

در مرحله بعدی ، نحوه عملکرد کلاس sticky-top را بررسی می کنیم. ما تقریباً از همان نشانه گذاری در بالا به جز برچسب <footer> استفاده خواهیم کرد. علامت گذاری را در زیر بررسی کنید:

<nav class="navbar navbar-expand-lg navbar-dark bg-dark sticky-top">
   <div class="container-fluid">
      <a class="navbar-brand" href="#">Navbar</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
         <ul class="navbar-nav ms-auto">
            <li class="nav-item">
               <a class="nav-link active" aria-current="page" href="#">Home</a>
            </li>
            <li class="nav-item">
               <a class="nav-link" href="#">About</a>
            </li>
            <li class="nav-item">
               <a class="nav-link" href="#">Contact</a>
            </li>
         </ul>
      </div>
   </div>
</nav>

 

علامت گذاری بالا نیز همانطور که در قسمت قبلی توضیح داده شد ساده است با این تفاوت که ما این بار از کلاس sticky-top استفاده کرده ایم. این رفتار تقریباً مشابه کلاس fixed-top خواهد بود با این تفاوت که با این موقعیت گذاری عنصر فضا را اشغال می کند ، بنابراین عنصر بعدی در پشت آن پنهان نمی شود. در صورت استفاده از کلاس fixed-top  عنصر هیچ فضایی را در صفحه اشغال نمی کند ، بنابراین عنصر بعدی که داخل کد صفحه در زیر آن است پشت عنصر ثابت (fixed) ، خواهد بود.

به طور خلاصه ، استفاده از کلاس fixed-top عنصر را در موقعیتی ثابت نسبت به viewport یا خود پنجره مرورگر نمایش می دهد. حتی اگر صفحه پیمایش شود ، همیشه در همان مکان باقی می ماند. هنگام استفاده از کلاس sticky-top ، عنصر بر اساس موقعیت پیمایش (scroll) کاربر قرار می گیرد. این همچنین بدان معنی است که هر بار که کاربر به عقب پیمایش می کند ، عنصر نیز به موقعیت قبلی یا نسبی خود برمی گردد.

Bootstrap همچنین برای کلاس sticky-top گونه های واکنش گرا را نیز ارائه می دهد. رفتار این کلاسها تقریباً همانند کلاس پیش فرض sticky-top خواهد بود با این تفاوت که این عنصر به قسمت بالا در viewport هایی که در نام کلاس به صورت  sticky-(modifier)-top مشخص شده می چسبد. مثلاً در کلاس sticky-sm-top عنصر به بالای صفحه های کوچک (sm در نام آن مخفف small است) می چسبد.

 

 

پنهان سازی بصری

 

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

Bootstrap دو کلاس برای پنهان سازی بصری به صورت پیش فرض ارائه می دهد که هر کدام با هدف خاص هستند:

• کلاس visually-hidden - این کلاس به شما امکان می دهد تا یک عنصر را پنهان کنید در حالی که همچنان قادر است در معرض فناوری های کمکی قرار گیرد (مانند صفحه خوان ها)
• کلاس visually-hidden-focusable - این کلاس به شما امکان می دهد یک عنصر را به طور بصری پنهان کنید ، اما در هنگام فوکوس شدن عنصر آن را نمایش دهید (به عنوان مثال توسط کاربری که فقط از صفحه کلید استفاده می کند و موشواره ندارد).

 

 

لینک گسترده

 

در نسخه های قبلی bootstrap ، برای قابل کلیک کردن چند عنصر ، تمامی آن عناصر را باید درون یک لینک قرار می دادید.

در بوت استرپ 4 ، کلاس stretched-link معرفی شد که این مشکل خاص را حل می کند (حداقل در اکثر موارد). استفاده از کلاس stretched-link در یک لینک باعث می شود عنصر والد حاوی لینک از طریق شبه المنت after:: قابل کلیک باشد.

این کلاس کمکی معمولاً در عناصر «خود شامل» ، مانند عنصر کارت بوت استرپ یا هر عنصر بلوکی شامل تگ های داخلی استفاده می شود. بخاطر داشته باشید که کلاس کمکی stretched-link را نمی توان با بیشتر عناصر جدول مخلوط کرد.

 

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

<div class="card">
   <img src="https://i.imgur.com/BY4dr4M.png" class="card-img-top" alt="Bootstrap 5"/>
   <div class="card-body">
      <h5 class="card-title">Bootstrap 5 Helpers</h5>
      <p class="card-text">Bootstrap includes a number of helper classes for a certain purpose. Helpers are bootstrap classes that make certain customization as quickly as possible.</p>
      <a href="#" class="btn btn-primary stretched-link">Learn More &rarr;</a>
   </div>
</div>

 

نتیجه در مرورگر:

 

همانطور که در نشان گذاری ما در بالا مشاهده می کنید ، ما از یک عنصر کارت بوت استرپ استفاده کردیم و در داخل عنصر پیوند ، کلاس stretched-link را به همراه کلاس های پیش فرض دکمه بوت استرپ اضافه کردیم. کارتها به طور پیش فرض دارای ویژگی position: relative هستند بنابراین در اینجا بدون نیاز به تغییر نشان گذاری html می توانید کلاس stretched-link را به پیوند درون کارت اضافه کنید.

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

اگر سعی کنید روی هر قسمت از عنصر کارت کلیک کنید ، خواهید دید که همه چیز قابل کلیک است.

 

 

کوتاه کردن متن

 

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

بوت استرپ یک کلاس از پیش تعریف شده text-truncate برای کوتاه کردن رشته های طولانی متن با سه نقطه پایانی دارد. برای استفاده از این ویژگی عنصر والد متن کوتاه شده باید دارای ویژگی display: inline-block یا display: block باشد.

 

برای اینکه ببینیم این کلاس چگونه کار می کند. نشان گذاری زیر را در نظر بگیرید:

<!-- Block level -->
<div class="col-3 text-truncate">
   Bootstrap is one of the most popular frameworks for building websites and applications. 
</div>
<!-- Inline level -->
<span class="d-inline-block text-truncate" style="max-width: 350px;">
The end goal of bootstrap is to always increase the pace of development as much as possible without completely reinventing the wheel.
</span>

 

نتیجه باید به این شکل باشد:

توجه: اندازه متن کوتاه شده بسته به عرض عنصر والد که در آن کلاس text-truncate را قرار می دهید ، متفاوت خواهد بود.

 

 

نتیجه

 

Bootstrap 5 برای پشتیبانی از مرورگر های مختلف ، کلاس های کمکی و mixin هایی برای افزودن خودکار پیشوند های ویژگی های جدید CSS را ارائه می دهد.  کلاس های کمکی (Helpers) بوت استرپ به توسعه دهندگان کمک می کند بدون اضافه کردن کد های اضافی یا قوانین تکراری CSS ، به شخصی سازی های مورد نیازشان دست یابند. بعلاوه ، این کلاسها برای ارائه هدف خاص در یک موقعیت خاص و کاهش استفاده از قوانین تکراری CSS ساخته شده اند.

 

اگر می خواهید بیشتر در مورد Bootstrap 5 بیاموزید می توانید از سایر آموزش های سایت استفاده کنید یا از اسناد رسمی Bootstrap 5 استفاده کنید.