Bootstrap Panoramica CSS
In questo capitolo, spiegheremo la struttura sottostante di una parte fondamentale di Bootstrap, compresi i nostri sviluppatori web rendono migliore, più veloce, migliori pratiche più forti.
HTML 5 doctype (Doctype)
Bootstrap utilizza alcuni elementi HTML5 e le proprietà CSS. Al fine di questi per lavorare, è necessario utilizzare il tipo di documento HTML5 (Doctype). Così, all'inizio del progetto Bootstrap all'uso contiene il seguente segmento di codice.
<!DOCTYPE html> <html> .... </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
dispositivi mobili priorità è il cambiamento più significativo nel Bootstrap 3.
Nelle versioni precedenti di Bootstrap (fino 2.x), è necessario citare manualmente un altro CSS, per rendere l'intero progetto di un supporto adatto per i dispositivi mobili.
Non più, Bootstrap 3 CSS predefinito è di per sé il supporto adatto per i dispositivi mobili.
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, initial-scale=1.0">
proprietà width apparecchiature di controllo di larghezza. Supponiamo che il vostro sito sarà con diversi dispositivi risoluzione dello schermo per navigare, 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, dipenderà vostra situazione!
<meta name="viewport" content="width=device-width,
initial-scale=1.0,
maximum-scale=1.0,
user-scalable=no">
immagine responsive
<img src="..." class="img-responsive" alt="响应式图像">
Con l'aggiunta di img class-reattiva Bootstrap 3 consente l'immagine di sostenere il layout reattivo che è più amichevole.
Diamo un'occhiata a ciò che questa classe contiene la proprietà CSS.
Nel codice qui sotto, potete vedere l'immagine img class-reattivo dà max-width: 100%; e l'altezza: auto; proprietà può essere scalato in modo che l'immagine non superi la dimensione dell'elemento genitore.
.img-responsive {
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
visualizzazione globale di base
Bootstrap 3 usando body {margin: 0;} per rimuovere il corpo dei margini.
Prendere in considerazione le seguenti impostazioni per il corpo:
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.
composizione
Utilizzare @ font-family-base, @ font-size-base e la proprietà @ line-height-base come tipografia.
Stile link
Impostare il colore attraverso la Global Property legame @ link-colore.
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 usare Normalizza per costruire consistenza cross-browser.
Normalize.css è un piccolo file CSS che fornisce una migliore consistenza cross-browser negli elementi HTML stile predefinito.
Container (Container)
<div class="container"> ... </div>
classe contenitore Bootstrap 3 per il contenuto del pacchetto pagina. Diamo uno sguardo a questo file di classe bootstrap.css .container.
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
Attraverso il codice di cui sopra, i margini destro e sinistro del contenitore (margin-right, margin-left) deciso dal browser.
Si prega di notare che a causa di padding (padding) sono a larghezza fissa, contenitori predefiniti non possono essere nidificate.
.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.
@media (min-width: 768px) {
.container {
width: 750px;
}
Bootstrap Browser / Device Support
Bootstrap può funzionare bene nella sua ultima desktop e mobile del browser del terminale.
I browser meno recenti possono non essere ben supportato.
Nella tabella seguente sono bootstrap supporta le ultime versioni dei browser e piattaforme:
| cromo | Firefox | IE | opera | safari | |
|---|---|---|---|---|---|
| androide | SI | SI | non applicabile | NO | non applicabile |
| iOS | SI | non applicabile | non applicabile | NO | SI |
| Mac OS X | SI | SI | non applicabile | SI | SI |
| finestre | SI | SI | SI * | SI | NO |
* Supporto Bootstrap per Internet Explorer 8 e versioni successive di IE.