1. เริ่มต้นจากการระบุว่าเราจะต้องทำ dropdown อะไร เช่นตัวอย่างที่จะทำนี้คือ dropdown ของจังหวัดนครนายก
โดยจะมีข้อมูลในส่วนของ
- ประวัติของจังหวัดนครนายก
- คำขวัญนครนายก
- สถานที่ท่องเที่ยวของจังหวัดนครนายก
2. ประกาศ container ในการจัดการข้อมูลให้อยู่ภายใน container
โค้ด: เลือกทั้งหมด
<div class="container">........(ข้อมูลภายใน)........</div>
คำขวัญนครนายก และสถานที่ท่องเที่ยวของจังหวัดนครนายก ตามที่เราต้องการ
- โดยการประกาศ button (ปุ่ม) และเรียก class มาใช้งาน
โค้ด: เลือกทั้งหมด
<div class="container">
<div class="dropdown">
<button class="btn btn-success" type="button">จังหวัดนครนายก</button>
</div>
</div>
โค้ด: เลือกทั้งหมด
<div class="container">
<div class="dropdown">
<button class="btn btn-success" type="button" data-toggle="dropdown">จังหวัดนครนายก
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>- ประวัติจังหวัดนครนายก</a></li>
<li>- คำขวัญประจำจังหวัดนครนายก</a></li>
<li>- แหล่งท่องเที่ยวของจังหวัดนครนายก</a></li>
</ul>
</div>
</div>
- ประกาศคำสั่ง <a href="#"> เป็นคำสั่งที่ใช้ในการ link ไปยังเว็บที่เราต้องการจะแสดง ซึ่งตอนนี้ยังไม่สามารถ link ได้ เพราะเราต้องแทนที่ "#" เป็น
url ที่เราจะ link ไป
โค้ด: เลือกทั้งหมด
<div class="container">
<div class="dropdown">
<button class="btn btn-success" 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>
</ul>
</div>
</div>
โค้ด: เลือกทั้งหมด
<div class="container">
<div class="dropdown">
<button class="btn btn-success" type="button" data-toggle="dropdown">จังหวัดนครนายก
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="https://nut2nutyou.wordpress.com/">- ประวัติจังหวัดนครนายก</a></li>
<li><a href="https://kumkhunforget.wordpress.com">- คำขวัญประจำจังหวัดนครนายก</a></li>
<li><a href="http://www.painaidii.com">- แหล่งท่องเที่ยวของจังหวัดนครนายก</a></li>
</ul>
</div>
</div>