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

آموزش Bootstrap--ساخت منو به صورت Tap و pills در بوت استرپ

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

ساخت منو به صورت Tap و pills در بوت استرپ (Bootstrap Tabs and Pills)                             قسمت 11

برای ساخت منو در html معمولا از لیست های نا مرتب <ul></ul> استفاده می شود به صورت زیر :

6358258357824418322.png

 

 

 

 

 برای نمایش لیست به صورت inline یا خطی از کلاس list-inline. استفاده می کنیم 

 

<div class="container">

  <ul class="list-inline">

    <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>

</div>

 

6358258369610192431.png

 

 

 

بوت استرپ امکاناتی فراهم کرده است که با استفاده از آن میتوانید منوهای تب دار در طراحی سایت خود داشته باشید. 

کلاس Tab

برای ایجاد یک منو تب دار ابتدا یک لیست ساده مثل لیست بالا ایجاد کنید

سپس کلاس "class="nav nav-tabs را به لیست خود اضافه کنید

<div class="container">

  <h3>Tabs</h3>

  <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>

</div>

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

 

6358258390962913733.png

 

 

 

 

 

برای این که یکی از زبانه ها را بهصورت پیش فرض نمایش بدهیم از کلاس "class="active استفاده می کنیم

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

نکته : منوی کرکره ای (کلاس dropdown)در قسمت های قبل آموزس داده شده است لطفا مراجعه کنید

مثال زیر استفاده از دو کلاس nav-tabs و dropdown  را نشان می دهد

<div class="container">

  <h3>Tabs With Dropdown Menu</h3>

  <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>

</div>

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

 

6358258417224115794.png

 

 

 

 

 

 

زبانه های پویا (Toggable)

برای اینکه با کلیک یر روی هر تب بتوانیم محتویات مربوط به آن تب را مشاهده کنیم میبایست کار های زیر را انجام دهیم

  1. اضافه کردن خصوصیت "data-toggle="tab به هر لینک
  2. اضافه کردن کلاس  tab-pane. و یک ID  منحصر به فرد به هر Tab و قرار دادن آنها درون یک المان Div با کلاس tab-content.
  3. همچنین برای محو شدن محتویات در هنگام عوض شدن تب ها می توانید کلاس fade. را به کلاس tab-pane. اضافه کنید

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

<div class="container">

  <h2>Dynamic Tabs</h2>

  <ul class="nav nav-tabs">

    <li class="active"><a data-toggle="tab" href="#home">Home</a></li>

    <li><a data-toggle="tab" href="#menu1">Menu 1</a></li>

    <li><a data-toggle="tab" href="#menu2">Menu 2</a></li>

    <li><a data-toggle="tab" href="#menu3">Menu 3</a></li>

  </ul>

 

  <div class="tab-content">

    <div id="home" class="tab-pane fade in active">

      <h3>HOME</h3>

      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

    </div>

    <div id="menu1" class="tab-pane fade">

      <h3>Menu 1</h3>

      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

    </div>

    <div id="menu2" class="tab-pane fade">

      <h3>Menu 2</h3>

      <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>

    </div>

    <div id="menu3" class="tab-pane fade">

      <h3>Menu 3</h3>

      <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>

    </div>

  </div>

</div>

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

 

6358258465074052655.png

 

6358258467140370846.png

 

6358258470063738047.png

 6358258652752787268.png

  

کلاس pills

برای ایجاد منو به صورت pills از کلاس "class="nav nav-pills استفاده می کنیم

مانند منو Tab یک لیست ساده ایجاد کرده و کلاس pills را به آن اضافه کنید

 

<div class="container">

 

  <h3>Pills</h3>

 

  <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>

 

</div>

 

 

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

 

6358258523978821819.png

 

 

 

پیل های عمودی

با استفاده از کلاس nav-stacked.  می توان پیل های عمود را ایجاد کرد.

<div class="container">

  <h3>Vertical Pills</h3>

  <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>

 

63582585433279285110.png

 

 

 

 

 

 

 

میتوانید پیل های عمودی  را در ستون ها نیز قرار دهید مانند زیر:

 

63582585520077249711.png

 

 استفاده از Dropdown menu در کلاس pills :

<div class="container">

  <h3>Pills With Dropdown Menu</h3>

  <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>

</div>

pills های پویا (Toggable)

مانند کلاس tap پویا می شود

<div class="container">

  <h2>Dynamic Pills</h2>

  <ul class="nav nav-pills">

    <li class="active"><a data-toggle="pill" href="#home">Home</a></li>

    <li><a data-toggle="pill" href="#menu1">Menu 1</a></li>

    <li><a data-toggle="pill" href="#menu2">Menu 2</a></li>

    <li><a data-toggle="pill" href="#menu3">Menu 3</a></li>

  </ul>

 

  <div class="tab-content">

    <div id="home" class="tab-pane fade in active">

      <h3>HOME</h3>

      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

    </div>

    <div id="menu1" class="tab-pane fade">

      <h3>Menu 1</h3>

      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

    </div>

    <div id="menu2" class="tab-pane fade">

      <h3>Menu 2</h3>

      <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>

    </div>

    <div id="menu3" class="tab-pane fade">

      <h3>Menu 3</h3>

      <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>

    </div>

  </div>

</div>

اجرای کد بالا بیه صورت زیر می باشد  :

 

635825859458846045p1.png

 

635825859664267794p2.png

 

 

635825860004397249p3.png

 

635825860255681621p4.png

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 پایان قسمت 11

 

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

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

 

نظــرات شما

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

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