Bootstrap 3 CSS Panoramica
bersaglio
In questo tutorial, abbiamo discusso i punti CSS Bootstrap 3. Successivo spiegheremo Bootstrap 3 di lavoro diversi fattori chiave.
HTML 5 doctype (Doctype)
Bootstrap 3 utilizzati alcuni elementi di HTML5 e attributi CSS. Al fine di questi per lavorare, è necessario utilizzare il tipo di documento HTML5 (Doctype).
<! DOCTYPE html> <Html lang = "it"> ... </ Html>
Se l'inizio della pagina in Bootstrap creato non utilizza il tipo di documento HTML5 (Doctype), si potrebbe affrontare alcuni browser visualizzano problemi incoerenza che può anche affrontare certe situazioni incoerenti sotto che non può passare la convalida standard W3C nel codice .
priorità del dispositivo mobile
Questo è probabilmente il cambiamento più significativo nel Bootstrap 3. Nelle versioni precedenti di Bootstrap (fino 2.x), è necessario citare manualmente un altro CSS, in modo da rendere il progetto insieme con i principali mobili CSS dispositivo da usare. Non più, Bootstrap 3 di default CSS per sé è un dispositivo mobile friendly.
Bootstrap 3 è progettato priorità dispositivo mobile, seguito dal desktop. Questo è in realtà un cambiamento di grande attualità, come sempre più persone utilizzano i dispositivi mobili.
Per rendere il sito Bootstrap di sviluppo per i dispositivi mobili amichevole per garantire una corretta rappresentazione e lo zoom touch-screen, è necessario aggiungere finestra meta tag nella testa della pagina, come segue:
<Meta name = "viewport" content = "width = device-width, iniziale di scala = 1.0">
proprietà width apparecchiature di controllo di larghezza. Supponiamo che il vostro sito sarà con diversi dispositivi risoluzione dello schermo per sfogliare, quindi impostarlo su device-width per assicurarsi che rende correttamente su dispositivi diversi.
iniziale scala = 1.0 per garantire il caricamento della pagina, il rapporto di 1: 1 presentazione, non ci sarà alcun ridimensionamento.
Nel browser dispositivo mobile, con l'aggiunta di user-scalable = no per il meta tag viewport per disabilitare la funzione di scala (zoom). In genere, la massima scala = 1.0 e user-scalable = no insieme. Dopo questa funzione zoom è disattivato, l'utente può scorrere lo schermo, è possibile rendere il sito un aspetto più simile a una sensazione applicazione nativa. Si noti che, in questo modo non è consigliabile l'uso di tutti i siti, o dipende dalla vostra situazione!
immagine responsive
Con l'aggiunta di img class-reattiva consente Bootstrap 3 immagini per sostenere il layout reattivo che è più amichevole. Diamo un'occhiata a questa classe contiene ciò che CSS proprietà. La sua essenza è quello di dare l'immagine di un max-width: 100%; e l'altezza: auto; proprietà consente una scalatura delle immagini, non superi la dimensione dell'elemento genitore.
.img-reattivo {
display: inline-block;
height: auto;
max-width: 100%;
}
Ciò indica che l'immagine associata reso come inline-block. Quando si impostano le proprietà di visualizzazione dell'elemento è inline-block, elemento inline rispetto al contenuto del modulo di presentazione intorno ad esso, ma con la differenza in linea è che in questo caso siamo in grado di impostare la larghezza e l'altezza.
Altezza Ambito: altezza auto, elementi correlati dipende dal browser.
Set max-width è al 100% sostituisce qualsiasi larghezza specificata dalla proprietà width. Esso consente di ottenere immagini di sostenere il layout reattivo che è più amichevole.
Visualizzazione globale, il layout e collegamenti
Bootstrap 3 usando body {margin: 0;} per rimuovere il corpo dei margini.
Si consideri la seguente serie di organismo competente
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1,428,571429 millions;
color: # 333333;
background-color: #FFFFFF;
}
La prima regola per impostare lo stile del font di default per il corpo "Helvetica Neue", Helvetica, Arial , sans-serif.
La seconda regola del testo della dimensione del font di default di 14 pixel.
La terza regola è quella di impostare l'altezza della riga di default è 1,428,571429 millions.
La quarta regola imposta il colore del testo di default # 333333.
regola finale imposta il colore di sfondo predefinito è bianco.
Lo stile predefinito per un collegamento, le seguenti impostazioni
a: hover,
un: focus {
color: # 2a6496;
text-decoration: underline;
}
un: focus {
contorno: sottile punteggiata # 333;
contorno: 5px automatica -webkit-focus-ring-colore;
delineare-offset: -2px;
}
Così, quando il mouse passa sopra il link o collegamenti si sceglie, il colore è impostato su # 2a6496. Allo stesso tempo, ci sarà una sottolineatura.
Inoltre, i collegamenti selezionati, ci sarà un codice colore per il sottile tratteggiata contorno # 333. Un'altra regola è quella di impostare il contorno di 5 pixel di larghezza, e per il browser basato su Webkit ha un -webkit-focus-ring-colore estensioni del browser. offset di Contour è impostata su pixel -2.
Tutti questi stili si possono trovare nel scaffolding.less.
Evitare incoerenze cross-browser
Bootstrap 3, come la sua versione precedente, utilizzare la Normalizzazione, per creare consistenza cross-browser.
contenitore
classe contenitore Bootstrap 3 per il contenuto del pacchetto pagina. Diamo uno sguardo al seguente classe
.container {
margin-right: auto;
margin-left: auto;
}
Attraverso il codice di cui sopra, i margini destro e sinistro del contenitore da parte del browser a decidere.
.container: prima,
.container: dopo {
display: table;
tenore: "";
}
Questo genera pseudo-elementi. Impostazione della tabella di visualizzazione, si creerà un anonimo table-cell e un nuovo contesto di formattazione a blocchi. : Prima di pseudo-elemento per evitare il collasso del margine ,: dopo pseudo-elementi per cancellare galleggiante.
Se l'attributo conteneditable appare in HTML, dal momento che alcuni dei bug Opera, creare uno spazio attorno a questi elementi. Questo può essere fatto utilizzando il contenuto: "" riparare.
.container: dopo {
clear: both;
}
Si crea una pseudo-elemento, e garantisce che tutto galleggiamento che contiene tutti gli elementi.
Bootstrap 3 CSS ha un'applicazione in risposta alle domande dei media, media query in diversi valori di soglia sono set max-width per il contenitore, al fine di corrispondere il sistema a griglia.