Qual è la struttura della barra di navigazione di Bootstrap 3?

Question

Mentre la documentazione Bootstrap è molto buona, non riesco a comprendere la struttura della barra di navigazione da un solo esempio nello documentation. Sto cercando di capire quali sono i sottocomponenti della barra di navigazione e come usarli. Per quanto posso dire, ci sono due aree della barra di navigazione: un'intestazione e un'area di compressione. L'intestazione sembra essere il posto dove mettere un nome di marca (a sinistra) e il pulsante di attivazione a destra. Sembra anche l'area che verrà sempre mostrata. Collapse sembra essere l'area per tutto il resto e verrà compresso per larghezze minori.

1. È questa la comprensione corretta? Ci sono altre aree?
2. Qual è lo scopo dell'involucro del fluido del contenitore? Cosa succede se questo wrapper viene rimosso?
3. Che tipo di elementi possono andare in ogni area?
4. Cosa succede se non ho bisogno di alcuna sezione collassabile? Dovrei mettere tutto nell'intestazione?
5. Cosa succede se ho bisogno di tre sezioni non pieghevoli: sinistra, centrale e destra?

Si prega di aiutare.

P.S. Mentre la documentazione di Bootstrap è molto buona, vorrei che i componenti fossero documentati usando una sorta di diagramma che identifica i vari sottocomponenti e il loro comportamento e uso previsti.

Edit ho trovato this tutorial sul Bootstrap Navbar che ha molti altri esempi - è davvero bello. Potrei probabilmente ricavarne i modelli da lì, ma sarebbe bello se qualcuno potesse articolarli in modo più esplicito. Ad esempio, il primo esempio di questo tutorial ha un div con l'intestazione della navbar della classe seguita da un div senza classe e contenente tutti i collegamenti. Questo mi fa pensare che uno può aggiungere tanti div nella barra di navigazione secondo necessità, il navbar-header e il navbar-collapse sono solo sottocomponenti per scopi speciali.

Answer 1

Sulla base dei pareri di @ bto.rdz, questa era la soluzione mi è venuta per il # 5 barra di navigazione con le sezioni sinistra, centro e destra:

<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> 

Ho pensato che poiché non v'è un contenitore-fluido all'interno la barra di navigazione, perché non creare una riga con 3 colonne per i collegamenti sinistro, centrale e destro. Questo ha funzionato quasi eccetto che si stava rompendo a 768 pixel. Ho tracciato questo a Bootstrap aggiungendo 15px margini sinistro e destro a quel punto di interruzione. Ho annullato questo comportamento come segue e ora ho il comportamento desiderato a tutte le larghezze del browser.

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