سایر عناصر موجود در Bootstrap

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

ساخت اسلایدر Carousel در بوت استرپ

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

برای استفاده از اسلایدر ابتدا پوشه ای با نام img در مجاورت صفحه خود ایجاد نموده و 3 تصویر هم اندازه با فرمت یکسان (مانند jpg یا png) درون آن قرار دهید.

آموزش بوت استرپ-اسلایدرسپس صفحه ای با نام slider.html در مجاورت پوشه img ایجاد کرده و تگ زیر را به آن اضافه نمایید. برای ساخت اسلایدر، نیاز است به div ایجاد شده، کلاس های carousel و slide اختصاص داده شود.

<div id="demo" class="carousel slide" data-ride="carousel">
    
</div>

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

<div id="demo" class="carousel slide" data-ride="carousel">
    <ul class="carousel-indicators">
        <li data-target="#demo" data-slide-to="0" class="active"></li>
        <li data-target="#demo" data-slide-to="1"></li>
        <li data-target="#demo" data-slide-to="2"></li>
    </ul>
</div>

همانطور که در کدهای فوق مشخص است، برای شمارنده ها از تگ ul و به ازای هر شمارنده نیز از تگ li استفاده است شود. همچنین خاصیت data-slide-to نیز به ترتیب به تصاویری که در مرحله بعد ایجاد خواهیم نمود اشاره می کنند.

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

<div class="carousel-inner">
    <div class="carousel-item active">
        <img src="img/slide-1.jpg" alt="Image 1" />
    </div>
    <div class="carousel-item">
        <img src="img/slide-2.jpg" alt="Image 2" />
    </div>
    <div class="carousel-item">
        <img src="img/slide-3.jpg" alt="Image 3" />
    </div>
</div>

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Beno Academy | Bootstrap Tutorial</title>
    <link rel="stylesheet" href="css/bootstrap-rtl.css" />
  </head>
  <body>
    <div id="demo" class="carousel slide" data-ride="carousel">
      <ul class="carousel-indicators">
        <li data-target="#demo" data-slide-to="0" class="active"></li>
        <li data-target="#demo" data-slide-to="1"></li>
        <li data-target="#demo" data-slide-to="2"></li>
      </ul>
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img src="img/slide-1.jpg" alt="Image 1" />
        </div>
        <div class="carousel-item">
          <img src="img/slide-2.jpg" alt="Image 2" />
        </div>
        <div class="carousel-item">
          <img src="img/slide-3.jpg" alt="Image 3" />
        </div>
      </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="/js/bootstrap.bundle.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  </body>
</html>

 

نحوه استفاده از Modal در بوت استرپ

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

  • نمایش پیغام خوش آمد گویی یا اطلاعیه های تبلیغاتی
  • دریافت اطلاعات کوتاه مانند اطلاعات مربوط به ورود به سایت
  • دریافت تأییدیه برای حذف گزینه ها
  • نمایش اطلاعات کوتاه مانند قوانین و مقررات

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

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
    نمایش مودال
</button>

در این تنظیمات، دو خاصیت مهم وجود دارد:

toggle: بیانگر این موضوع می باشد که قرار است این آیتم برای نمایش یک modal مورد استفاده قرار گیرد.

data-target: آی دی عنصری (مودالی) می باشد که به عنوان مودال قصد داریم آن را نمایش دهیم.

پس از افزودن button می بایست خود مودال به صفحه اضافه نماییم. هر مودال از سه بخش header, body و footer تشکیل شده است.

برای استفاده از مودال ابتدا باید یک div با آی دی مشخص شده در مرحله قبل به صفحه و بعد از button اضافه کنید.

<div class="modal" id="myModal">
    
</div>

سپس یک div دیگر با کلاس modal-dialog می بایست درون آن ایجاد کرد.

<div class="modal" id="myModal">
    <div class="modal-dialog">
        
    </div>
</div>

و در ادامه یک div با کلاس modal-content جهت تعریف محتوای مودال.

<div class="modal" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content">
            
        </div>
    </div>
</div>

حال درون modal-content می توان بخش های مختلف یک مودال را اضافه نمود.

<div class="modal-header">
    <h4 class="modal-title">عنوان</h4>
    <button type="button" class="close" data-dismiss="modal">
        &times;
    </button>
</div>

<div class="modal-body">متن اصلی</div>

<div class="modal-footer">
    <button type="button" class="btn btn-danger" data-dismiss="modal">
        بستن
    </button>
</div>

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

آموزش بوت استرپ-مودال

کد کامل این تمرین به شکل زیر خواهد بود.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Beno Academy | Bootstrap Tutorial</title>
    <link rel="stylesheet" href="css/bootstrap-rtl.css" />
  </head>

  <body class="rtl">
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
      نمایش مودال
    </button>
    <div class="modal" id="myModal">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h4 class="modal-title">عنوان</h4>
            <button type="button" class="close" data-dismiss="modal">
              &times;
            </button>
          </div>
          <div class="modal-body">متن اصلی</div>
          <div class="modal-footer">
            <button type="button" class="btn btn-danger" data-dismiss="modal">
              بستن
            </button>
          </div>
        </div>
      </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="/js/bootstrap.bundle.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  </body>
</html>

 

نحوه استفاده Tooltip در بوت استرپ

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

<div class="container">
  <a href="#" data-toggle="tooltip" title="Webdesign Tutorial">آکادمی بنو</a>
</div>

در کدها فوق دو خاصیت مهم برای مقدار دهی data-toggle و title می باشند که مقدار تعیین شده برای title همان متنی می باشد که به عنوان tooltip قرار است نمایش داده شود. در ادامه باید کدهای جی کوئری زیر را به انتهای صفحه و پس از لینک های مربوط به فایل های js اضافه نمایید.

<script>
  $(document).ready(function () {
    $('[data-toggle="tooltip"]').tooltip();
  });
</script>

پس از ذخیره سازی و اجرا مشاهده خواهید نمود که با انتقال ماوس بر روی لینک، متن توضیحی آن در قالب tooltip نمایان می شود.

آموزش بوت استرپ-tooltip