Bootstrap's impostazioni predefinite
Bootstrap's predefinita globale font-size è 14px, con una line-height di 1.428.
Questo viene applicato al <body> e tutti i paragrafi.
Inoltre, tutti i <p> elementi hanno un margine inferiore che equivale a metà della loro line-height computerizzata (10px di default).
Bootstrap impostazioni predefinite del browser vs.
In questo capitolo, vedremo alcuni elementi HTML che sarà essere in stile un po 'diverso da Bootstrap di default del browser.
<h1> - <h6>
Per impostazione predefinita, Bootstrap sarà lo stile le intestazioni HTML ( <h1> a <h6> ) nel seguente modo:
Esempio
h1 Bootstrap heading (36px)
h2 Bootstrap heading (30px)
h3 Bootstrap heading (24px)
h4 Bootstrap heading (18px)
h5 Bootstrap heading (14px)
h6 Bootstrap heading (12px)
Prova tu stesso " <small>
In Bootstrap l'HTML <small> elemento viene utilizzato per creare un testo secondario più leggero di qualsiasi voce:
Esempio
h1 heading secondary text
h2 heading secondary text
h3 heading secondary text
h4 heading secondary text
h5 heading secondary text
h6 heading secondary text
Prova tu stesso " <mark>
Bootstrap sarà lo stile del HTML <mark> elemento nel modo seguente:
<abbr>
Bootstrap sarà lo stile del HTML <abbr> elemento nel modo seguente:
<blockquote>
Bootstrap sarà lo stile del HTML <blockquote> elemento nel modo seguente:
Esempio
For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
Prova tu stesso " Per mostrare la citazione a destra, utilizzare il .blockquote-reverse classe:
Esempio
For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
Prova tu stesso " <dl>
Bootstrap sarà lo stile del HTML <dl> elemento nel modo seguente:
<code>
Bootstrap sarà lo stile del HTML <code> elemento nel seguente modo:
Esempio
The following HTML elements: span , section , and div defines a section in a document.
Prova tu stesso " <kbd>
Bootstrap sarà lo stile del HTML <kbd> elemento nel modo seguente:
<pre>
Bootstrap sarà lo stile del HTML <pre> elemento nel modo seguente:
Esempio
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks.
Prova tu stesso " Colori contestuali e sfondi
Bootstrap ha anche alcune classi di contesto che possono essere utilizzati per fornire ", cioè attraverso i colori".
Le classi per i colori di testo sono: .text-muted , .text-primary , .text-success , .text-info , .text-warning , e .text-danger :
Esempio
This text is muted.
This text is important.
This text indicates success.
This text represents some information.
This text represents a warning.
This text represents danger.
Prova tu stesso " Le classi per i colori di sfondo sono: .bg-primary , .bg-success , bg-info , bg-warning , e .bg-danger :
Esempio
This text is important.
This text indicates success.
This text represents some information.
This text represents a warning.
This text represents danger.
Prova tu stesso " Altre classi Tipografia
Le classi bootstrap sottostanti possono essere aggiunti agli elementi di stile HTML ulteriori:
| Classe | Descrizione | Esempio |
|---|---|---|
.lead | Rende un paragrafo risaltare | Provalo |
.small | Indica il testo più piccolo (impostata al 85% della dimensione del genitore) | Provalo |
.text-left | Indica il testo allineato a sinistra | Provalo |
.text-center | Indica il testo allineato al centro | Provalo |
.text-right | Indica il testo allineato a destra | Provalo |
.text-justify | Indica il testo giustificato | Provalo |
.text-nowrap | Indica nessun testo avvolgere | Provalo |
.text-lowercase | Indica il testo in minuscolo | Provalo |
.text-uppercase | Indica il testo maiuscolo | Provalo |
.text-capitalize | Indica il testo in maiuscolo | Provalo |
.initialism | Consente di visualizzare il testo all'interno di un <abbr> elemento in una dimensione di carattere leggermente più piccolo | Provalo |
.list-unstyled | Rimuove l'elenco-stile predefinito e margine sinistro su voci di elenco (funziona sia su <ul> e <ol> ). Questa classe si applica solo alle voci di elenco figli immediati (per rimuovere la lista-stile predefinito da eventuali liste nidificate, applicare questa classe per eventuali liste nidificate pure) | Provalo |
.list-inline | Luoghi tutti gli elementi della lista in una singola linea | Provalo |
.dl-horizontal | Allinea i termini ( <dt> ) e descrizioni ( <dd> ) in <dl> elementi side-by-side. Inizia come predefinita <dl> s, ma quando si espande la finestra del browser, che schiererà side-by-side | Provalo |
.pre-scrollable | Fa un <pre> elemento scorrevole | Provalo |
Completare Bootstrap Tipografia di riferimento
Per un riferimento completo di tutti gli elementi di tipografia / classi, vai alla nostra completa Bootstrap Tipografia di riferimento .
Anche guardare la nostra Bootstrap Helper classi di riferimento per ulteriori informazioni sulle classi contestuali.