วิธีการใช้ Navs ใน Bootstrap
Posted: 29/05/2013 5:58 pm
Nav ย่อมาจาก Navigation คือ ส่วนที่ใช้ลิงค์ไปยังหน้าต่างๆของเว็บไซต์ เว็บไซต์ที่ดีควรมี
เนวิเกชันในทุกหน้า เพราะในปัจจุบันผู้ใช้งานรู้จักเว็บไซต์ของเราจาก search engine ซึ่งแน่นอนว่าเราไม่สามารถกำหนดได้ว่าให้ search engine แสดงหน้าใดให้ผู้ใช้งานดู ถ้า search engine แสดงผลในหน้าที่ไม่มีเนวิเกชัน อาจทำให้ผู้ใช้งานเข้าใจผิดได้ว่าเว็บไซต์ของคุณมีแค่หน้าที่แสดงผลเพียงหน้าเดียว
ใน Bootstrap ก็มี Nav ให้เลือกใช้มากมายหลายรูปแบบ ดังนี้
1.) เป็น tabs พื้นฐานทั่วไป
2.) Basic pills
3.) Disabled state เหมาะสำหรับอกค์กรต่าง ๆ
4.) tabs ที่เป็นแถวเรียงซ้อนกัน
5.) Stacked pills
6.) nav list
เนวิเกชันในทุกหน้า เพราะในปัจจุบันผู้ใช้งานรู้จักเว็บไซต์ของเราจาก search engine ซึ่งแน่นอนว่าเราไม่สามารถกำหนดได้ว่าให้ search engine แสดงหน้าใดให้ผู้ใช้งานดู ถ้า search engine แสดงผลในหน้าที่ไม่มีเนวิเกชัน อาจทำให้ผู้ใช้งานเข้าใจผิดได้ว่าเว็บไซต์ของคุณมีแค่หน้าที่แสดงผลเพียงหน้าเดียว
ใน Bootstrap ก็มี Nav ให้เลือกใช้มากมายหลายรูปแบบ ดังนี้
1.) เป็น tabs พื้นฐานทั่วไป
- 1.jpg (10.11 KiB) Viewed 2928 times
Code: Select all
<ul class="nav nav-tabs">
<li class="active">
<a href="#">Home</a>
</li>
<li><a href="#">...</a></li>
<li><a href="#">...</a></li>
</ul>- 2.jpg (10.61 KiB) Viewed 2928 times
Code: Select all
<ul class="nav nav-pills">
<li class="active">
<a href="#">Home</a>
</li>
<li><a href="#">...</a></li>
<li><a href="#">...</a></li>
</ul>- 3.jpg (12.23 KiB) Viewed 2928 times
- 4.jpg (16.01 KiB) Viewed 2928 times
- 5.jpg (19.27 KiB) Viewed 2928 times
- 6.jpg (27.39 KiB) Viewed 2928 times