What is the structure of the Bootstrap 3 navigation bar?

Question

While the Bootstrap documentation is very good, I cannot understand the structure of the navigator from just one example in the documentation . I'm trying to understand what subcomponents of a navigator are and how to use them. As far as I can tell, there are two areas of the navigation bar: the title bar and the camber area. The title seems to put the brand name (on the left) and the toggle button to the right. It also looks like an area that will always be displayed. Collapse seems to be an area for everything else and will be minimized for smaller widths.

• Is this the correct understanding? Are there any other areas?
• What is the purpose of container fluid? What if this shell is removed?
• What elements can be performed in each area?
• What if I don’t need a folding section? Should I put everything in the header?
• What if I need three non-folding sections: left, middle and right?

Please, help.

PS Although the Bootstrap documentation is very good, I want the components to be documented using some kind of diagram identifying the various subcomponents and their intended behavior and usage.

Edit I found this tutorial on Bootstrap Navbar, which has many more examples - it's really nice. Maybe I can get the templates from there, but it would be nice if someone could articulate them clearly. For example, the very first example in this tutorial has a div with the heading class navbar, followed by a div without a class and containing all the links. This makes me think that, if necessary, you can add as many divs to the navbar as the navbar-tan header and short-term anti-aliasing are just special-purpose components.

Answer 1

Based on @ bto.rdz's advice, this was the solution I came up with for # 5 navbar with left, middle and right sections:

<nav class="navbar navbar-inverse" role="navigation"> <div class="container-fluid"> <div class="row"> <div class="col-xs-4 navbar-text"> <a href="#" class="navbar-link">Left</a> </div> <div class="col-xs-4 navbar-text text-center"> <a href="#" class="navbar-link">Middle</a> </div> <div class="col-xs-4 navbar-text text-right"> <a href="#" class="navbar-link">Right</a> </div> </div> </div><!-- /.container-fluid --> </nav> 

I realized that since there is a liquid container in the navigation bar, why not create a row with three columns for the left, middle and right links. It almost worked, except that it split into 768 pixels. I traced this to Bootstrap by adding 15px left and right margins at this breakpoint. I tried this behavior as follows, and now I have the desired behavior for all browser widths.

 .navbar-text { margin-left: 0; margin-right: 0; }