Bootstrap 3: การสร้าง Navbar ~ API In Depth

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

สำหรับขันตอนการสร้าง Navbar เริ่มต้นให้เราสร้างแท็ก "<div>" พร้อมกำหนดคลาสในแท็กดังกล่าวเป็น "navbar navbar-default" ดังโค้ดตัวอย่างด้านล่าง เพื่อเป็นสิ่งที่บ่งบอกว่า ณ ส่วนใดของเว็บไซด์ที่เราต้องการสร้าง Navbar

<div class="navbar navbar-default">

</div>

ถัดมาให้ใส่วางแท็ก "<div>" ข้างในแท็กด้านบนพร้อมกำหนดคลาสเป็น "container-fluid" เพื่อที่เป็นที่จัดเก็บเนื้อหาของเมนูบาร์ทั้งหมด

<div class="navbar navbar-default">
     <div class="container-fluid">
     </div>
</div>

ถัดมาเราจะใส่โลโก้หรือชื่อเว็บไซด์บน Navbars พร้อมกับเมนต่างๆ โดยให้เราสร้างแท็ก "<div>" พร้อมกำหนดชื่อคลาสเป็น "navbar-header" ต่อมาเราจะใส่ปุ่มเพื่อแสดงตอนที่ Navbars ของเราแสดงบนหน้าจอขนาดเล็ก เพื่อให้เข้าใจได้ง่ายขอให้ผู้อ่านดูโค้ดที่แสดงในด้านล่างประกอบไปด้วย โดยการแสดงปุ่มสำหรับหน้าจอขนาดเล็ก จะต้องใส่แท็ก "<button>" พร้อมกำหนดชื่อคลาสเป็น "navbar-toggle" เพื่อการแสดงผลที่สวยงาม นอกจากนี้ยังต้องใส่แอตทริบิวส์ "data-toggle" เป็น "collapse" เพื่อเป็นการบ่งบอกที่แอคชั่นที่เกิดขึ้นเมื่อมีการคลิกปุ่ม และแอตทริบิวส์ "data-target" เป็นเป็นการบ่งบอกถึงส่วนของการแสดงผลของเนื้อหาเมื่อมีการคลิกปุ่ม โดยค่าที่ถูกกำหนดในแอตทริบิวส์นี้คือ "#mynavbar" ซึ่งหมายถึงให้แสดงผลเนื้อหาที่การกำหนดด้วยแอตทริบิวส์ "id" ที่มีค่าเป็น "mynavbar"

<div class="navbar-header">
   <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mynavbar-content">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
   </button>
  <a class="navbar-brand" href="#">Sitepoint</a>
</div>

หลังจากเราใส่โค้ดตามที่แสดงด้านบนทั้งหมดผลลัพธ์จะของการสร้าง Navbar จะแสดงผลในรูปที่ 1 สำหรับหน้าจอขนาดปกติ และสำหรับผลลัพธ์ของการแสดงผลในหน้าจอขนาดเล็กจะแสดงในรูปที่ 2

รูปที่ 1

รูปที่ 2

ถัดมาคือขั้นตอนการใส่ลิงค์ที่เราต้องการใน Navbar โดยให้เราสร้างแท็ก "<div>" ที่อยู่ในลำดับเดียวกับแท็ก "<div class="navbar-header">" โดยแท็ก "<div>" ดังกล่าวให้กำหนดคลาสเป็น "collapse navbar-collapse" และกำหนดแอตทริบิวส id เป็น "mynavbar-content" เพื่อให้้มีความสอดคล้องกับแอคชั่นของปุ่มที่เราได้สร้างขึ้นก่อนหน้านี้

ต่อมาเราจะใช้แท็ก "<ul>" และแท็ก "<li>" เพื่อใช้สร้างลิงค์บน Navbar โดยคลาสของแท็ก "<ul>" ต้องกำหนดเป็น "nav navbar-nav" ดังโค้ดที่แสดงในด้านล่าง และผลลัพธ์แสดงในรูปที่ 3 และ 4 สำหรับหน้าจอในขนาดปกติ และหน้าจอขนาดเล็กตามลำดับ

<div class="navbar navbar-default">
 <div class="container-fluid">
   <div class="navbar-header">
   <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mynavbar-content">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
   </button>
   <a class="navbar-brand" href="#">Sitepoint</a>
 </div>
 <div class="collapse navbar-collapse" id="mynavbar-content">
  <ul class="nav navbar-nav">
   <li ><a href="#">Home</a></li>
   <li ><a href="#">About</a></li>
   <li ><a href="#">Pricing</a></li>
   <li ><a href="#">Contract</a></li>
   <li ><a href="#">Feedback</a></li>
  </ul>
 </div>
     
 </div>
</div>