การสร้าง Menubar ใน Bootstrap เราจะใช้ Navbar ในการสร้าง Navbar คือ ฟิจเจอร์ที่ใช้สำหรับรองรับการสร้าง Menubar ให้มีความสะดวกและง่ายสำหรับผู้สร้างเว็บไซด์ อีกทั้งยังรองรับการแสดงผลแบบ Responsive อีกด้วย
ขั้นตอนการสร้าง Navbar
1. สร้างแท็ก "<div>" พร้อมกำหนดคลาสในแท็กดังกล่าวเป็น "navbar navbar-default"
<div class="navbar navbar-default">
</div>
2. วางแท็ก "<div>" ข้างในแท็กด้านบน กำหนดคลาสเป็น "container-fluid"
<div class="navbar navbar-default">
<div class="container-fluid">
</div>
</div>
3. สร้างแท็ก "<div>" พร้อมกำหนดชื่อคลาสเป็น "navbar-header" ต่อมาเราจะใส่ปุ่มเพื่อแสดงตอนที่ Navbars ของเราแสดงบนหน้าจอขนาดเล็ก โดยการแสดงปุ่มสำหรับหน้าจอขนาดเล็ก จะต้องใส่แท็ก "<button>"
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mymenu-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>
4. ใส่ลิงค์ที่เราต้องการใน Navbar โดยให้เราสร้างแท็ก "<div>" ที่อยู่ในลำดับเดียวกับแท็ก "<div class="navbar-header">" โดยแท็ก "<div>" ดังกล่าวให้กำหนดคลาสเป็น "collapse navbar-collapse" ต่อมาเราจะใช้แท็ก "<ul>" และแท็ก "<li>" เพื่อใช้สร้างลิงค์บน Navbar โดยคลาสของแท็ก "<ul>" ต้องกำหนดเป็น "nav navbar-nav"
<div class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mymenu-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="mymenu-content">
<ul class="nav navbar-nav">
<li ><a href="#">Home</a></li>
<li ><a href="#">About</a></li>
<li ><a href="#">Product</a></li>
</ul>
</div>
</div>
</div>
รับทําเว็บไซต์ 
แลกลิงค์ 
