سبد (0)

بررسی منوها در بوت استرپ

منوها

Wiki

اکثر صفحات وب دارای یک نوع منو می باشند. 

در HTML اغلب یک منو، در یک لیست نامنظم(<ul>) شبیه زیر تعریف می شود:

<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">Menu 1</a></li>
  <li><a href="#">Menu 2</a></li>
  <li><a href="#">Menu 3</a></li>
</ul>

بوت استرپ دو راه را برای نمایش دادن منوی بالا ارائه می دهد: تب ها و pillها:


تب ها

Wiki

 تب ها به وسیله ی عبارت <ul class="nav nav-tabs"> ایجاد می شوند.

نکته: همواره صفحه ی جاری را با <li class="active"> مشخص کنید.

مثال زیر، تب های ناوبری را ایجاد می کند:

مثال (بررسی منو)

<ul class="nav nav-tabs">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Menu 1</a></li>
  <li><a href="#">Menu 2</a></li>
  <li><a href="#">Menu 3</a></li>
</ul>

خودتان امتحان کنید »

تب ها به همراه منوی کشویی

Wiki

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

مثال زیر یک منوی کشویی را به "Menu1" اضافه می کند:

مثال (بررسی منو)

<ul class="nav nav-tabs">
  <li class="active"><a href="#">Home</a></li>
  <li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu 1
    <span class="caret"></span></a>
    <ul class="dropdown-menu">
      <li><a href="#">Submenu 1-1</a></li>
      <li><a href="#">Submenu 1-2</a></li>
      <li><a href="#">Submenu 1-3</a></li> 
    </ul>
  </li>
  <li><a href="#">Menu 2</a></li>
  <li><a href="#">Menu 3</a></li>
</ul>

خودتان امتحان کنید »

قرص ها(pills)

Wiki

pill ها به وسیله ی عبارت <ul class="nav nav-pills"> ایجاد می شوند. همچنین می توانید صفحه ی جاری را با عبارت <li class="active">مشخص کنید:

مثال (بررسی منو)

<ul class="nav nav-pills">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Menu 1</a></li>
  <li><a href="#">Menu 2</a></li>
  <li><a href="#">Menu 3</a></li>
</ul>

خودتان امتحان کنید »

قرص های عمودی

Wiki

pill ها همچنین می توانند به صورت عمودی نمایش داده شوند. فقط کافی است که کلاس nav-stacked. را اضافه کنید.

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

مثال (بررسی منو)

<div class="col-md-3">
  <ul class="nav nav-pills nav-stacked">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Menu 1</a></li>
    <li><a href="#">Menu 2</a></li>
    <li><a href="#">Menu 3</a></li>
  </ul>
</div>

خودتان امتحان کنید »

قرص ها به همراه منوهای کشویی

Wiki

قرص ها(pill ها) همچنین می توانند منوهای کشویی را در خود نگه دارند.

مثال زیر، یک منوی کشویی را به "Menu1" اضافه می کند:

مثال (بررسی منو)

<ul class="nav nav-pills nav-stacked">
  <li class="active"><a href="#">Home</a></li>
  <li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu 1
    <span class="caret"></span></a>
    <ul class="dropdown-menu">
      <li><a href="#">Submenu 1-1</a></li>
      <li><a href="#">Submenu 1-2</a></li>
      <li><a href="#">Submenu 1-3</a></li> 
    </ul>
  </li>
  <li><a href="#">Menu 2</a></li>
  <li><a href="#">Menu 3</a></li>
</ul>

خودتان امتحان کنید »

آموزش صوتی Bootstrap

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

فقط کافی است روی عنوان پاراگراف مورد نظرتان کلیک کنید تا پخش صدا آغاز شود ...!

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