آموزش طراحی سایت-کلاس های کاربردی در بوت استرپ 4

سلام با آموزش Bootstrap 4 از دوره آموزش طراحی سایت در خدمت شما هستیم

آموزش کار با Scrollspy در بوت استرپ 4:

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

آموزش نحوه ایجاد یک Scrollspy در بوت استرپ 4:

از کد زیر برای ایجاد یک Scrollspy در Bootstrap 4 استفاده می شود. به کد دقت نمایید، سپس به تشریح نکات مهم آن پرداخته ایم :

مثال 1

<!-- The scrollable area -->

<!-- The navbar - The <a> elements are used to jump to a section in the scrollable area -->
<nav class=&quotnavbar navbar-expand-sm bg-dark navbar-dark fixed-top&quot>
...
<ul class=&quotnavbar-nav&quot>
    <li><a href=&quot#section1&quot>Section 1</a></li>
    ...
<nav class=&quotnavbar navbar-expand-sm bg-dark navbar-dark fixed-top&quot>
...
  <ul class=&quotnavbar-nav&quot>
    <li><a href=&quot#section1&quot>Section 1</a></li>
    ...
</ul></nav>
<!-- Section 1 -->
<div id=&quotsection1&quot>
  <h1>Section 1</h1>
  <p>Try to scroll this page and look at the navigation bar while scrolling!</p>
</div>
...

خاصیت data-spy=” Scroll” را به المنتی که دربرگیرنده منطقه اسکرول و پرش لینک ها و درواقع عنصر حاوی محتویات هدف است، اعمال کنید.

سپس خاصیت data-target را که مقدار آن برابر با Id یا کلاس عنصر منوی Navigation Bar است، اضافه کنید (کلاس navbar).

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

دقت کنید که المنت های اسکرول شونده دارای id ای معادل خاصیت href لینک لیست آیتم های درون منوی navbar باشند، مثلا تگ div دارای id معادل “section1” بوده که با خاصیت href تگ a معادل #section1 برابر است.

در نهایت خاصیت اختیاری data-offset تعیین کننده تعداد پیکسل فاصله از بالای عنصر اسکرول شونده است که در هنگام محاسبه موقعیت آن، لحاظ خواهد شد. این خاصیت زمانی کاربرد دارد که شما احساس می کنید لینک های درون منوی navbar، حالت فعال بودن (active state) خود را در هنگام پرش به عناصر اسکرول شونده، خیلی زود، تغییر می دهند. مقدار پیش فرض آن 10 پیکسل است.

نکته :

المنت با خاصیت data-spy=”scroll” نیازمند خاصیت موقعیت CSS Position برابر با حالت relative است تا درست کار کند.

ایجاد Scrollspy عمودی در آموزش طراحی سایت

در کد مثال عملی زیر، از دکمه های pills بوت استرپ 4، برای ایجاد Scrollspy عمودی استفاده کرده ایم. به کد مثال و تفاوت آن با کد قبل دقت نمایید :

مثال 2

<div class=&quotcontainer-fluid&quot>
  <div class=&quotrow&quot>
    <nav class=&quotcol-sm-3 col-4&quot id=&quotmyScrollspy&quot>
      <ul class=&quotnav nav-pills flex-column&quot>
<li class=&quotnav-item&quot>
          <a class=&quotnav-link active&quot href=&quot#section1&quot>Section 1</a>
       </li>
     ...
  </ul>
    </nav>
    <div class=&quotcol-sm-9 col-8&quot>
      <div id=&quotsection1&quot>
        <h1>Section 1</h1>
    <p>Try to scroll this page and look at the menu while scrolling!</p>
      </div>
      ...
    </div>
  </div>
</div>

آموزش کار با کلاس های کاربردی Utility Classes در Bootstrap 4

بوت استرپ 4، دارای تعداد زیادی کلاس کاربردی / کمکی موسوم به Utility Classes است که به شما امکان می دهد بدون استفاده از هیچ کد یا استایل CSS، قالب مورد نظرتان را به المنت هدف، اعمال کنید.

آموزش کار با کلاس خطوط حاشیه border در بوت استرپ 4:

به وسیله کلاس border در بوت استرپ 4، می توانید خطوط حاشیه برای یک المنت اضافه یا حذف نمایید.

شکل زیر، مدل های مختلف تعیین خطوط حاشیه در Bootstrap 4 را نشان می دهد.

مثال : در کد مثال عملی زیر، نحوه تعیین خطوط حاشیه به دور یک عنصر را نشان داده ایم. در مثال اول، المنت span در هر چهار طرف دارای خطوط حاشیه خواهد بود ولی در مثال های بعد با اعمال عدد صفر و تعیین جهت، خطوط حاشیه مورد نظر را حذف کرده ایم :

مثال 1

<span class=&quotborder&quot></span>
<span class=&quotborder border-0&quot></span>
<span class=&quotborder border-top-0&quot></span>
<span class=&quotborder border-bottom-0&quot></span>
<span class=&quotborder border-left-0&quot></span>

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

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

مثال: در کد مثال عملی زیر : برای چندین المنت Span خطوط حاشیه رنگی با استفاده از کلاس متنی رنگی ویژه بوت استرپ 4، تعیین کرده ایم :

مثال 2

<span class=&quotborder border-primary&quot></span>
<span class=&quotborder border-secondary&quot></span>
<span class=&quotborder border-success&quot></span>
<span class=&quotborder border-warning&quot></span>
<span class=&quotborder border-info&quot></span>
<span class=&quotborder border-light&quot></span>
<span class=&quotborder border-dark&quot></span>
<span class=&quotborder border-white&quot></span>

تعیین خطوط حاشیه گرد Border Radius در آموزش طراحی سایت:

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

به وسیله کلاس rounded و سایر کلاس های وابسته می توانید تعیین کنید گوشه های خطوط حاشیه یک عنصر به صورت گرد باشد. با اعمال کلاس rounded، هر چهارگوش عنصر گرد خواهد شد، اما با تعیین جهت بالا (top)، پایین (bottum) و چپ (left) و راست (right) می توانید گرد شدن هر طرف را به صور مجزا مشخص نمایید.

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

مثال 3

<span class=&quotrounded-sm&quot></span>
<span class=&quotrounded&quot></span>
<span class=&quotrounded-lg&quot></span>
<span class=&quotrounded-top&quot></span>
<span class=&quotrounded-right&quot></span>
<span class=&quotrounded-bottom&quot></span>
<span class=&quotrounded-left&quot></span>
<span class=&quotrounded-circle&quot></span>
<span class=&quotrounded-0&quot></span>

آموزش طراحی سایت ادامه دارد