Nav ย่อมาจาก Navigation คือ ส่วนที่ใช้ลิงค์ไปยังหน้าต่างๆของเว็บไซต์ เว็บไซต์ที่ดีควรมี
เนวิเกชันในทุกหน้า เพราะในปัจจุบันผู้ใช้งานรู้จักเว็บไซต์ของเราจาก search engine ซึ่งแน่นอนว่าเราไม่สามารถกำหนดได้ว่าให้ search engine แสดงหน้าใดให้ผู้ใช้งานดู ถ้า search engine แสดงผลในหน้าที่ไม่มีเนวิเกชัน อาจทำให้ผู้ใช้งานเข้าใจผิดได้ว่าเว็บไซต์ของคุณมีแค่หน้าที่แสดงผลเพียงหน้าเดียว
ใน Bootstrap ก็มี Nav ให้เลือกใช้มากมายหลายรูปแบบ ดังนี้
1.) เป็น tabs พื้นฐานทั่วไป
- 1.jpg (10.11 KiB) Viewed 3674 times
โค้ด: เลือกทั้งหมด
<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.) Basic pills
- 2.jpg (10.61 KiB) Viewed 3674 times
โค้ด: เลือกทั้งหมด
<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.) Disabled state เหมาะสำหรับอกค์กรต่าง ๆ
- 3.jpg (12.23 KiB) Viewed 3674 times
4.) tabs ที่เป็นแถวเรียงซ้อนกัน
- 4.jpg (16.01 KiB) Viewed 3674 times
5.) Stacked pills
- 5.jpg (19.27 KiB) Viewed 3674 times
6.) nav list
- 6.jpg (27.39 KiB) Viewed 3674 times
Nav ย่อมาจาก Navigation คือ ส่วนที่ใช้ลิงค์ไปยังหน้าต่างๆของเว็บไซต์ เว็บไซต์ที่ดีควรมี
เนวิเกชันในทุกหน้า เพราะในปัจจุบันผู้ใช้งานรู้จักเว็บไซต์ของเราจาก search engine ซึ่งแน่นอนว่าเราไม่สามารถกำหนดได้ว่าให้ search engine แสดงหน้าใดให้ผู้ใช้งานดู ถ้า search engine แสดงผลในหน้าที่ไม่มีเนวิเกชัน อาจทำให้ผู้ใช้งานเข้าใจผิดได้ว่าเว็บไซต์ของคุณมีแค่หน้าที่แสดงผลเพียงหน้าเดียว
ใน Bootstrap ก็มี Nav ให้เลือกใช้มากมายหลายรูปแบบ ดังนี้
1.) เป็น tabs พื้นฐานทั่วไป
[attachment=5]1.jpg[/attachment]
[code]<ul class="nav nav-tabs">
<li class="active">
<a href="#">Home</a>
</li>
<li><a href="#">...</a></li>
<li><a href="#">...</a></li>
</ul>[/code]
2.) Basic pills
[attachment=4]2.jpg[/attachment]
[code]<ul class="nav nav-pills">
<li class="active">
<a href="#">Home</a>
</li>
<li><a href="#">...</a></li>
<li><a href="#">...</a></li>
</ul>[/code]
3.) Disabled state เหมาะสำหรับอกค์กรต่าง ๆ
[attachment=3]3.jpg[/attachment]
4.) tabs ที่เป็นแถวเรียงซ้อนกัน
[attachment=2]4.jpg[/attachment]
5.) Stacked pills
[attachment=0]5.jpg[/attachment]
6.) nav list
[attachment=1]6.jpg[/attachment]