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

4 سال پیش

امتیاز دهید post

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

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش منوهای کشویی در بوت استرپ خواهیم پرداخت.

این درس در مورد منوهای کشویی بوت استرپ برجسته می کند. منوهای کشویی منوهای متنی قابل تغییر برای نمایش پیوندها در قالب لیست هستند. این را می توان با افزونه کشویی JavaScript تعاملی کرد.

برای استفاده از منوی کشویی را در کلاس dropdown. قرار دهید. مثال زیر یک منوی کشویی اساسی را نشان می دهد –

&lt;div class = "dropdown"&gt;
   
   &lt;button type = "button" class = "btn dropdown-toggle" id = "dropdownMenu1" data-toggle = "dropdown"&gt;
      Topics
      &lt;span class = "caret"&gt;&lt;/span&gt;
   &lt;/button&gt;
   
   &lt;ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu1"&gt;
      &lt;li role = "presentation"&gt;
         &lt;a role = "menuitem" tabindex = "-1" href = "#"&gt;Java&lt;/a&gt;
      &lt;/li&gt;
      
      &lt;li role = "presentation"&gt;
         &lt;a role = "menuitem" tabindex = "-1" href = "#"&gt;Data Mining&lt;/a&gt;
      &lt;/li&gt;
      
      &lt;li role = "presentation"&gt;
         &lt;a role = "menuitem" tabindex = "-1" href = "#"&gt;
            Data Communication/Networking
         &lt;/a&gt;
      &lt;/li&gt;
      
      &lt;li role = "presentation" class = "divider"&gt;&lt;/li&gt;
      
      &lt;li role = "presentation"&gt;
         &lt;a role = "menuitem" tabindex = "-1" href = "#"&gt;Separated link&lt;/a&gt;
      &lt;/li&gt;
   &lt;/ul&gt;
   
&lt;/div&gt;

Topics

</button>

</li>

<a role = "menuitem" tabindex = "-1" href = "#">Data Mining</a>

</li>

Data Communication/Networking

</a>

</li>

<a role = "menuitem" tabindex = "-1" href = "#">Separated link</a>

</li>

</ul>

</div>

گزینه ها
هم ترازی

با افزودن کلاس pull-right. به dropdown-menu. منوی کشویی را به راست تراز کنید. مثال زیر این را نشان می دهد –

&lt;div class = "dropdown"&gt;
   
   &lt;button type = "button" class = "btn dropdown-toggle" id = "dropdownMenu1" data-toggle = "dropdown"&gt;
      Topics
      &lt;span class = "caret"&gt;&lt;/span&gt;
   &lt;/button&gt;
   
   &lt;ul class = "dropdown-menu pull-right" role = "menu" aria-labelledby = "dropdownMenu1"&gt;
      &lt;li role = "presentation"&gt;
         &lt;a role = "menuitem" tabindex = "-1" href = "#"&gt;Java&lt;/a&gt;
      &lt;/li&gt;
      
      &lt;li role = "presentation"&gt;
         &lt;a role = "menuitem" tabindex = "-1" href = "#"&gt;Data Mining&lt;/a&gt;
      &lt;/li&gt;
      
      &lt;li role = "presentation"&gt;
         &lt;a role = "menuitem" tabindex = "-1" href = "#"&gt;
            Data Communication/Networking
         &lt;/a&gt;
      &lt;/li&gt;
      
      &lt;li role = "presentation" class = "divider"&gt;&lt;/li&gt;
      
      &lt;li role = "presentation"&gt;
         &lt;a role = "menuitem" tabindex = "-1" href = "#"&gt;Separated link&lt;/a&gt;
      &lt;/li&gt;
   &lt;/ul&gt;
   
&lt;/div&gt;

Topics

</button>

</li>

<a role = "menuitem" tabindex = "-1" href = "#">Data Mining</a>

</li>

Data Communication/Networking

</a>

</li>

<a role = "menuitem" tabindex = "-1" href = "#">Separated link</a>

</li>

</ul>

</div>

هدرها

با استفاده از کلاس dropdown-header. می توانید یک سربرگ برای برچسب گذاری بخش های اقدامات در هر منوی کشویی اضافه کنید. مثال زیر این را نشان می دهد –

&lt;div class = "dropdown"&gt;
   
   &lt;button type = "button" class = "btn dropdown-toggle" id = "dropdownMenu1" data-toggle = "dropdown"&gt;
      Topics
      &lt;span class = "caret"&gt;&lt;/span&gt;
   &lt;/button&gt;
   
   &lt;ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu1"&gt;
      &lt;li role = "presentation" class = "dropdown-header"&gt;Dropdown header&lt;/li&gt;
      
      &lt;li role = "presentation" &gt;
         &lt;a role = "menuitem" tabindex = "-1" href = "#"&gt;Java&lt;/a&gt;
      &lt;/li&gt;
      
      &lt;li role = "presentation"&gt;
         &lt;a role = "menuitem" tabindex = "-1" href = "#"&gt;Data Mining&lt;/a&gt;
      &lt;/li&gt;
      
      &lt;li role = "presentation"&gt;
         &lt;a role = "menuitem" tabindex = "-1" href = "#"&gt;
            Data Communication/Networking
         &lt;/a&gt;
      &lt;/li&gt;
      
      &lt;li role = "presentation" class = "divider"&gt;&lt;/li&gt;
      &lt;li role = "presentation" class = "dropdown-header"&gt;Dropdown header&lt;/li&gt;
      
      &lt;li role = "presentation"&gt;
         &lt;a role = "menuitem" tabindex = "-1" href = "#"&gt;Separated link&lt;/a&gt;
      &lt;/li&gt;
   &lt;/ul&gt;
   
&lt;/div&gt;

Topics

</button>

<li role = "presentation" class = "dropdown-header">Dropdown header</li>

</li>

<a role = "menuitem" tabindex = "-1" href = "#">Data Mining</a>

</li>

Data Communication/Networking

</a>

</li>

<li role = "presentation" class = "dropdown-header">Dropdown header</li>

<a role = "menuitem" tabindex = "-1" href = "#">Separated link</a>

</li>

</ul>

</div>

منبع.

لیست جلسات قبل آموزش بوت استرپ

امتیاز دهید post

برچسب ها : آموزش بوت استرپ آموزش طراحی وب سایت

نویسنده مطلب saber

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

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

گزینه ها
هم ترازی

هدرها

لیست جلسات قبل آموزش بوت استرپ

دیدگاه شما

بدون دیدگاه

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

گزینه ها هم ترازی

هدرها

لیست جلسات قبل آموزش بوت استرپ

دیدگاه شما

برای صرف‌نظر کردن از پاسخ‌گویی اینجا را کلیک نمایید.

بدون دیدگاه

گزینه ها
هم ترازی