سلام دوستان. توی این مطلب درخدمتتون هستیم با آموزش متنی مقدماتی تا متوسطه بوت استرپ به زبان فارسی جلسه دوازدهم که از وب سایت آموزش برنامه نویسی سورس باران مشاهده می نمایید. با ما همراه باشید با ادامه آموزش…
آموزش ساخت منوی کشویی در بوت استرپ :
منوی کشویی ساده : منوی کشویی در واقع منویی ست که به کاربر اجازه میدهد تا لز یک لیست از پیش تعیین شده یک مقدار را انتخاب کند.
<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>
توضیح مثال :
کلاس .dropdown در بوت استرپ نشان دهنده یک منوی کشویی ست .
برای باز کردن یک منوی کشویی ، از یک دکمه یا لینک به همراه کلاس .dropdown-toggle و خاصیت data-toggle=”dropdown” استفاده کنید.
کلاس .caret یک ایکن فلش مانند میسازد که حاکی از یک منوی کشویی ست .برای ساخت منوی کشویی کلاس .dropdown-menu را به عنصر <ul> اضافه کنید .
جداکننده منوی کشویی :
کلاس .divider به منظور جدا کردن لینک ها در منوی کشویی استفاده میشود
<li class="divider"></li>
سر فصل (هدر) منو کشویی :
از کلاس .dropdown-header برای اضافه کردن سرفصل درون منوی کشویی استفاده میشود
<li class="dropdown-header">Dropdown header 1</li>
غیر فعال کردن یک گزینه در منوی کشویی بوت استرپ :
برای غیر فعال کردن یک ایتم در منوی کشویی از کلاس .disabled استفاده کنید.
<li class="disabled"><a href="#">CSS</a></li>
موقعیت منوی کشویی در بوت استرپ :
برای اینکه منوی کشویی را در سمت راست نشان دهید کلاس .dropdown-menu-right را به عنصور حاوی منوی کشویی اضافه کنید.
<ul class="dropdown-menu dropdown-menu-right">
منوی سمت بالا در بوت استرپ :
اگر میخواهید منوی کشویی تان به سمت بالا باز شود ، عنصر <div> به همراه کلاس dropdown را به “dropup” تغییر دهید.
<div class="dropup">
دسترسی به منوی کشویی در بوت استرپ :
برای بهبود دسترسی برای افرادی که از صفحه خوان ها اسیفاده میکنند باید خصوصیات role و aria-* را به هنگام ساختن منوی کشویی اضافه کنید.
<div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Tutorials <span class="caret"></span></button> <ul class="dropdown-menu" role="menu" aria-labelledby="menu1"> <li role="presentation"><a role="menuitem" href="#">HTML</a></li> <li role="presentation"><a role="menuitem" href="#">CSS</a></li> <li role="presentation"><a role="menuitem" href="#">JavaScript</a></li> <li role="presentation" class="divider"></li> <li role="presentation"><a role="menuitem" href="#">About Us</a></li> </ul> </div>
راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام سورس باران عضو شوید.
- انتشار: ۱۲ خرداد ۱۳۹۵
دسته بندی موضوعات
- آموزش برنامه نویسی
- آموزش کریپتو کارنسی (ارز دیجیتال)
- آموزش متنی برنامه نویسی
- پروژه برنامه نویسی
- فروشگاه
- فیلم های آموزشی
- #F
- ++C
- 3ds max
- Ada
- ADO.NET
- Adobe Flash
- Agile
- Ajax
- AngularJS
- Anime Studio
- apache
- ARM
- Asp.Net
- ASP.NET MVC
- assembly
- AVR
- Azure
- Bootstrap
- Cassandra
- CCNA
- CCNP
- CCSP
- ChatGPT
- Cisco
- CMD
- COBOL
- CSS
- Cython
- Django
- Dreameaver
- Elixir
- EntityFramework
- Erlang
- Flash
- Go
- Groovy
- Haskell
- Htaccess
- HTML
- IOS
- Jade
- jquery
- Kendo UI
- Linq
- Linux
- LUA
- MariaDB
- maya
- Meteor
- MongoDB
- Mono Android
- MonoGame
- Mysql
- NoSQL
- Oracle
- Orchard
- Perl
- php
- PHPMyAdmin
- R
- Rational Rose
- Ruby
- Rust
- Scala
- Scrum Master
- SFML
- SharePoint
- SignalR
- silver light
- SQL Server
- Stimulsoft Reports
- Telerik
- UML
- VB.NET&VB6
- Vue 3
- WPF
- Xml
- آردوینو
- آموزش های پروژه محور
- آیونیک
- اتوکد
- الگوریتم تقریبی
- الگوریتم نویسی و فلوچارت
- امنیت
- اندروید
- اندروید استودیو
- انیمیشن سازی
- بازی سازی با Scratch
- بک ترک
- بیسیک فور اندروید
- پایتون
- پرولوگ
- پریمیر
- جاوا
- جاوا اسکریپت
- جنگو
- جوملا
- دارت
- دلفی
- دوره های رایگان پیشنهادی
- زامارین
- سئو
- ساخت CMS
- ساخت اتوران
- ساختمان داده ها
- سی شارپ
- شبکه و مجازی سازی
- طراحی الگوریتم
- طراحی بازی
- طراحی وب
- فتوشاپ
- فریم ورک codeigniter
- فلاتر
- کاتلین
- کامپایلرها
- کانستراکت
- کریستال ریپورت
- کلوژر
- گوگل آنالیتیکس
- گیت
- لاراول
- مای بی بی
- مایکروسافت پروجکت
- متریال دیزاین
- متلب
- معماری کامپیوتر
- مهندسی اینترنت
- میکروتیک
- نود جی اس
- نیوک
- هوش مصنوعی
- ویبولوتین
- ویژوال استودیو
- یونیتی
- کتاب های آموزشی
- Ada
- Ajax
- Android
- ASP.NET
- ASP.NET Core
- AVR
- clips
- CNC
- COBOL
- CQRS
- Cython
- Dreamweaver
- Elixir
- Entity Framework 4.0
- Erlang
- Go
- Groovy
- Haskell
- LINQ
- Lua
- Matlab
- MFC
- Node.js
- PERL
- php
- PLC
- Prolog
- React
- Rust
- Scala
- SFML
- SharePoint
- silver light
- VHDL
- VMware
- WinJS
- Workflow
- WPF
- XHTML
- Yii Framework
- اتوکد
- اچ تی ام ال
- اسمبلی
- اکتیو ایکس
- الگوریتم و فلوچارت
- انگولار
- اوبونتو
- اوراکل
- بازی سازی
- بانک اطلاعاتی
- برنامه نویسی سوکت
- برنامه نویسی موبایل
- بک ترک
- پاسکال
- پایان نامه
- پایتون
- پرولوگ
- جاوا
- جاوا اسکریپت
- جی کوئری
- حوملا
- داده کاوی
- دلفی
- رباتیک
- روبی
- زبان ماشین
- سئو
- ساختمان داده ها
- سایر کتاب ها
- سخت افزار
- سوئیفت
- سی اس اس
- سی پلاس پلاس
- سی شارپ
- سیستم عامل
- سیستم های خبره
- شبکه و مجازی سازی
- شبیه سازی کامپیوتر
- طراحی الگوریتم
- فتوشاپ
- فریم ورک گتنا
- کاتلین
- کالی لینوکس
- کریستال ریپورت
- گزارش کارآموزی
- گوگل
- لیسپ
- متلب
- مقاله
- مهندسی نرم افزار
- نیوک
- هوش مصنوعی
- وب مستر
- ویژوال بیسیک
- نرم افزار و ابزار برنامه نویسی
- وردپرس