Bootstrap3: cos'è la struttura e il layout standard?

C'è un sacco di tutorial sugli elementi di bootstrap.Bootstrap3: cos'è la struttura e il layout standard?

Ma io voglio sapere dove devo usare nav/intestazione/contenitore/riga/bene/pannello/sezione

per example..Do di cui ha bisogno l'uso di riga per la colonna 12?

1- Al momento lo faccio in questo modo:

<body> 
<div class="container-fluid"> /*only for top navbar*/ 
    <nav> 
</div> 

<div class="container"> /* for body */ 
    <header></header> 

    <main class="row"> 
     <div class="col-md-2"></div> 
     <div class="col-md-5"></div> 
     <div class="col-md-5"></div> 
    </main> 

    <footer class="row"> 
     <div class="col-md-4"></div> 
     <div class="col-md-4"></div> 
     <div class="col-md-4"></div> 
    </footer> 
</div> 

</body>

E 'vero?

2- Questo formato è vero o necessario?

<div class="row"> 
    <div class="col-md-12"></div> 
</div>

3- quale standard?

<div class ="well"> 
    <div class="row"> <div class="col-md-*"></div> </div> 
</div>

<div class ="row"> 
    <div class="well"> <div class="col-md-*"></div> </div> 
</div>

4- la dose è sufficiente utilizzare la classe "contenitore" di tutte le sezioni o solo per la sezione genitore?

fonte

2016-04-07 elize

per 1: - sì è un metodo corretto. ogni volta che si desidera utilizzare classi di colonne bootstrap come col-xs-12 nel loro primo genitore è necessario inserire la "riga" di classe.

per 2: - questo è vero. metodo anche accessorio.

per 3: - la prima opzione è corretta.

per 4: - dipende dalla necessità del design della pagina. se tutto il sito si trova nello stesso contenitore, puoi inserirlo nella classe genitore.

fonte

2016-04-07 09:27:58

# 3 - "Le righe devono essere posizionate all'interno di un contenitore. (A larghezza fissa) o di un contenitore (a tutta larghezza) per un corretto allineamento e riempimento." ... http://getbootstrap.com/css/ #grid – ZimSystem

-1

Ma io voglio sapere dove devo usare nav/intestazione/sezione/footer

Ebbene tutti questi campi sono solo a scopo di semantica, in realtà tutti potrebbero essere div. In futuro o anche ora è best practice per SEO per utilizzare nav per la navigazione, footer per il footer ecc. Ad esempio, header deve essere utilizzato per introdurre il contenuto, spesso contiene i tag <h1> - <h6>.

Non ci sono molte informazioni a questa nel web, ecco un reference

Tutte le altre classi di bootstrap sono solo stili che si potrebbe applicare da soli. Ad esempio, un container può essere utilizzato una volta per tutti i tuoi contenuti se non hai mai bisogno di un elemento a larghezza intera, ma a volte hai una situazione in cui hai bisogno di un elemento a larghezza intera (ad esempio un'immagine) quindi non vuoi avvolgere tutti i tuoi contenuti nel contenitore.

Here you want to use multiple containers and not one for everything (Fiddle)

Spero che questo ti aiuta un po '.

fonte

2016-04-07 09:28:25 Roman

Tutte le opzioni citate sono corrette.

Tuttavia, la struttura scritta sottostante ha senso.Ciò significa che se si utilizza col in container o container-fluid, dovrebbe essere in row.

<div class="container"> 
     <div class="row"> 
      <div class="col-*-*"> 
      </div> 
     </div> 
    </div>

Se in qualsiasi momento si desidera controllare come il vostro bootstrap è scritto, è possibile controllare su http://www.bootlint.com/

fonte

2016-04-07 09:34:12

il link suggerito "http://www.bootlint.com/" è molto utile per verificare la struttura del codice di bootstrap. grazie amico :) –

Bootlint è utile. – ZimSystem

-1

Il rapporto tra container, row e col-* è explained in the docs.

Righe devono essere posizionati all'interno di un .container o .container fluido

Solo le colonne possono essere figli immediati di righe.

Nel tuo caso l'opzione # 1 e # 2 vanno bene, ma non a # 3 è di serie.

Per # 4: è necessario utilizzare solo un esterno container e nesting consente alle colonne di agire come contenitori.

fonte

2016-04-07 11:24:06 ZimSystem

Cura di spiegare il downvote? – ZimSystem

Bootstrap3: cos'è la struttura e il layout standard?

risposta

Problemi correlati