Info@Afragraphic.ir
0912 22 460 22
خدمات و مطالب آموزشی

آموزش Bootstrap--ایجاد یک منو کرکره ای با بوت استرپ

کانون تبلیغاتی افرا گرافیک در نظر دارد به صورت گام به گام bootstrap را به شما عزیزان آموزش دهد. لذا قسمت دهم آموزش در زیر قرار داده شده است.

ایجاد یک منو کرکره ای با بوت استرپ                       قسمت10

برای ایجاد یک منو کرکره ای یا dropdown در بوت استرپ از کلاس dropdown. استفاده می کنیم

برای این کار ابتدا به button خود کلاس dropdown-toggle. را میدهیم سپس data-toggle آن را برابر dropdown قرار میدهیم مانند : 

 

<div class="container">

  <h2>Dropdowns</h2>                                       

  <div class="dropdown">

    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example

    <span class="caret"></span></button>

    <ul class="dropdown-menu">

      <li><a href="#">HTML</a></li>

      <li><a href="#">CSS</a></li>

      <li><a href="#">JavaScript</a></li>

    </ul>

  </div>

</div>

 6358250979591307532.png

 

 

 

 

 6358250981779732701.png

 

 

 

 

 

 

 

همانطور که مشاهده می کنید برای کرکره ای  شدن به لیست ul خود کلاس "class="dropdown-menu را می دهیم.

همچنین کلاس "class="caret یک آیکن فلش را نشان می دهد که دکمه منو کرکره ای است.

میتوانیم آیتم های لیست خود را گروه بندی کنیم برای این کار کافی است به li های خود کلاس divider. را بدهیم

<li class="divider"></li>      

 6358251014647312613.png

 

 

 

 

 

 

 

 

 

 

همچنین می توانیم به آیتم های لیستمان یک سر تیتر یا header اختصاص دهیم

برای این کار کلاس headerdropdown. را به li  که می خواهیم تیتر باشد اضافه می کنیم

<div class="dropdown">

    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Tutorials

    <span class="caret"></span></button>

    <ul class="dropdown-menu">

      <li class="dropdown-header">Dropdown header 1</li>

      <li><a href="#">HTML</a></li>

      <li><a href="#">CSS</a></li>

      <li><a href="#">JavaScript</a></li>

      <li class="divider"></li>

      <li class="dropdown-header">Dropdown header 2</li>

      <li><a href="#">About Us</a></li>

    </ul>

  </div>

6358251016954344574.png

 

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

همچنین می توانیم از کد زیر برای اینکه لیست منو ما سمت را یا بالا باز شود استفاده کنیم

 

<ul class="dropdown-menu dropdown-menu-right">

 

<div class="dropup">

 

 پایان قسمت 10

 ادامه آموزش در قسمت بازدهم و از طریق مطالب آموزشی سایت افراگرافیک - www.afragraphic.ir خواهید دید.

منبع :https://www.w3schools.com

 

 

نظــرات شما

نام :
وب سایت :
ایمیل :
پیغام :  

تمامی حقوق مادی و معنوی این سایت متعلق به شرکت طراحی و چاپ افراگرافیک  می باشد.