i look at the Bootstrap library bootstrap.css and i am confused with the hierarchy structure.

 

like this one .navbar, .navbar-collapse, .navbar-toggle, .navbar-btn... when to combine different components in .navbar and how do i know if it's valid?

 

i saw some examples in the web <div class="navbar navbar-default navbar-fixed-top" role="navigation">

is it valid if i integrate navbar-header or navbar-brand in the div or how to know if i need to use different div class?

Edited August 2, 201412 yr by Ashlee0016

I don't fully understand your question, but below is a good, working example for a Bootstrap navbar...

<div class="navbar-header">
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
  <a class="navbar-brand" href="#">Project name</a>
</div>
<div class="navbar-collapse collapse">
  <ul class="nav navbar-nav">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#contact">Contact</a></li>
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
      <ul class="dropdown-menu" role="menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li class="dropdown-header">Nav header</li>
        <li><a href="#">Separated link</a></li>
        <li><a href="#">One more separated link</a></li>
      </ul>
    </li>
  </ul>
</div>

Taken from: http://getbootstrap.com/examples/navbar-static-top/

Edited August 2, 201412 yr by andy9l