Dropdowns มีทั้งหมด 5 รูปแบบที่แตกต่างกันดังนี้
วิธีนำไปใช้งาน
1.นำโค้ดด้านล่างนี้ไปไว้ใน <head>
โค้ด: เลือกทั้งหมด
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
2.เลือกรูปแบบของ Dropdown ที่ต้องการนำไปใช้แล้ววางโค้ดด้านล่างนี้ในส่วนของ <body>
รูปแบบของ Dropdowns
รูปแบบที่ 1 Basic Dropdown เมื่อคลิกจะมีรายการลงมาให้เลือกด้านล่าง
นำโค้ดด้านล่างนี้ไปไว้ในส่วนของ <body>
โค้ด: เลือกทั้งหมด
<div class="container">
<h2>จังหวัด</h2>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">กรุณาเลือกจังหวัด
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">กรุงเทพมหานคร</a></li>
<li><a href="#">ชลบุรี</a></li>
<li><a href="#">เชียงใหม่</a></li>
<li><a href="#">เชียงราย</a></li>
<li><a href="#">ขอนแก่น</a></li>
<li><a href="#">ภูเก็ต</a></li>
<li><a href="#">เลย</a></li>
<li><a href="#">ระยอง</a></li>
</ul>
</div>
</div>
โค้ด: เลือกทั้งหมด
<div class="container">
<h2>จังหวัด</h2>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">กรุณาเลือกจังหวัด
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li class="dropdown-header">ภาคเหนือ</li>
<li><a href="#">เชียงใหม่</a></li>
<li><a href="#">เชียงราย</a></li>
<li class="divider"></li>
<li class="dropdown-header">ภาคอีสาน</li>
<li><a href="#">โคราช</a></li>
<li><a href="#">บุรีรัมย์</a></li>
</ul>
</div>
</div>
รูปแบบที่ 3 Disable and Active items เมื่อคลิกจะมีรายการลงมาให้เลือกด้านล่าง แต่จะมีบางรายการที่ไม่สามารถเลือกได้
โค้ด: เลือกทั้งหมด
<div class="container">
<h2>Zone ที่นั่ง</h2>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">กรุณาเลือกZoneที่นั่ง
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Zone A</a></li>
<li class="disabled"><a href="#">Zone B (เต็ม)</a></li>
<li class="active"><a href="#">Zone C</a></li>
<li><a href="#">Zone D</a></li>
</ul>
</div>
</div>
รูปแบบที่ 4 Dropdown Position เมื่อคลิกจะมีรายการลงมาให้เลือกด้านล่าง แต่รายการจะอยู่ทางด้านขวา ไม่ได้อยู่ติดกับที่ปุ่ม
โค้ด: เลือกทั้งหมด
<div class="container">
<h2>Menu</h2>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">กรุณาเลือก
<span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right">
<li><a href="#">copy</a></li>
<li><a href="#">Edit</a></li>
<li><a href="#">Paste</a></li>
</ul>
</div>
</div>
รูปแบบที่ 5 Dropup เมื่อคลิกที่ปุ่มจะมีเมนูรายการขึ้นมาทางด้านบนของปุ่ม เหมาะสำหรับนำปุ่มไปไว้ทางด้านล่างของเว็บเพื่อแสดงรายการเรียงไว้ด้านบน
โค้ด: เลือกทั้งหมด
<div class="container">
<h2>ห้อง</h2>
<div class="dropup">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">กรุณาเลือกห้อง
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">ห้อง 1</a></li>
<li><a href="#">ห้อง 2</a></li>
</ul>
</ul>
</div>
</div>