Bootstrap navbar-inverse: นาวบาร์สีเข้ม

เพื่อสร้าง navbar แบบกลับสี (inverted) ที่มีพื้นหลังสีดำและข้อความสีขาว ให้เพิ่มคลาส .navbar-inverse ไปยังคลาส .navbar

ตัวอย่าง

ลองรันโค้ดต่อไปนี้เพื่อนำ navbar-inverse ไปใช้งาน:

<!DOCTYPE html> <html> 
  <head> 
    <title>Bootstrap Example</title> 
    <link href = "/bootstrap/css/bootstrap.min.css" rel = "stylesheet"> 
    <script src = "/scripts/jquery.min.js"></script> 
    <script src = "/bootstrap/js/bootstrap.min.js"></script> 
  </head> 
  <body> 
    <nav class = "navbar navbar-inverse" role = "navigation"> 
      <div class = "navbar-header"> 
        <a class = "navbar-brand" href = "#">TutorialsPoint</a> 
      </div> 
      <div> 
        <ul class = "nav navbar-nav"> 
          <li class = "active"><a href = "#">iOS</a></li> 
          <li><a href = "#">SVN</a></li> 
          <li class = "dropdown"> 
            <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown"> 
              Java 
              <b class = "caret"></b> 
            </a> 
            <ul class = "dropdown-menu"> 
              <li><a href = "#">jmeter</a></li> 
              <li><a href = "#">EJB</a></li> 
              <li><a href = "#">Jasper Report</a></li> 
              <li class = "divider"></li> 
              <li><a href = "#">Separated link</a></li> 
              <li class = "divider"></li> 
              <li><a href = "#">One more separated link</a></li> 
            </ul> 
          </li> 
        </ul> 
      </div> 
    </nav> 
  </body> 
</html>