Bootstrap 3: การสร้าง Navs

     Navs คือการสร้างเมนูบาร์บนเว็บไซด์ในรูปแบบแนวตั้งและแนวนอน อย่างที่เราเคยเห็นกันในทุกๆเว็บไซด์จำเป็นต้องมีการสร้างเมนูบาร์ เพื่อให้ผู้เข้าชมสามารถที่จะเข้าไปถึงหน้าต่างๆที่อยู่ในเว็บไซด์ได้ง่าย  นอกจากนี้การสร้าง Navs ใน Bootstrap ยังสามารถกำหนดให้ลิงค์ที่อยู่ในแต่ละ Navs สามารถแสดงในรูปแบบแท็บหรือแบบปุ่มได้อีกด้วย




     สำหรับตัวอย่างแรกเราจะสร้าง Navs ในรูปแบบของแนวนอนโดยจะแสดงผลในรูปแบบแท็บ ดังโค้ดตัวอย่างในด้านล่าง

<ul class="nav nav-tabs">
 <li class="active"><a href="#">About</a></li>
 <li><a href="#">Activity</a></li>
 <li><a href="#">Linked Page</a></li>
</ul>

    จากโค้ดด้านบนจะเห็นว่าการสร้าง Navs ใน bootstrap จะต้องมีการกำหนดคลาส "nav nav-tabs" ภายในแท็ก "<ul>" และลิงค์ต่างๆ จะถูกสร้างภายใต้แท็ก "<li>" โดยผลลัพธ์ของการสร้าง Navs จากโค้ดด้านบนแสดงในรูปที่ 1

     รูปที่ 1

     สำหรับการสร้าง Navs ในรูปแบบของแนวนอนแต่เป็นการแสดงผลของลิงค์จากแท๊บเป็นในรูปแบบของปุ่มนั้นทำได้ไม่ยาก เพีงแค่เปลี่ยนแค่ชื่อจากที่ถูกกำหนดในแท็ก "<ul> จากเดิมที่ถูกกำหนดด้วยชื่อคลาส "nav nav-tabs" ให้เปลี่ยนเป็น "nav nav-pills" ดังโค้ดตัวอย่างด้านล่าง โดยผลลัพธ์จากตัวอย่างนี้แสดงในรูปที่ 2

<ul class="nav nav-pills">
 <li class="active"><a href="#">About</a></li>
 <li><a href="#">Activity</a></li>
 <li><a href="#">Linked Page</a></li>
</ul>

รูปที่ 2

     และสำหรับการสร้าง Navs ในรูปแบบของแนวตั้งบน Bootstrap นั้นก็ทำได้ไม่ยากเพียงแค่เพิ่มชื่อคลาส "nav-stacked" เข้าไปในแท็กของ "<ul>" ดังโค้ดที่แสดงด้านล่าง เพียงเท่านี้เราจะได้เมนูบาร์ที่แสดงดังในรูปที่ 3 แล้วครับ

<ul class="nav nav-pills nav-stacked">
 <li class="active"><a href="#">About</a></li>
 <li><a href="#">Activity</a></li>
 <li><a href="#">Linked Page</a></li>
</ul>

รูปที่ 3

Reference

-  Rahman, Syed Fazle. Jump start Bootstrap get up to speed with Bootstrap in a weekend. Collingwood, VIC, Australia: SitePoint, 2014. Print.