Bootstrap's Ustawienia domyślne
Bootstrap's globalny domyślny rozmiar czcionki jest 14px, o składzie wysokości 1.428.
Jest stosowana do <body> i wszystkich punktach.
Ponadto, wszystkie <p> elementy mają dolny margines, która jest równa połowie ich komputerowej line-height (10px domyślnie).
Bootstrap kontra domyślne Browser
W tym rozdziale zajmiemy się pewnych elementów HTML, które będą stylizowany trochę inaczej Bootstrap niż domyślne przeglądarki.
<h1> - <h6>
Domyślnie Bootstrap będzie styl nagłówków HTML ( <h1> do <h6> ) w następujący sposób:
Przykład
h1 Bootstrap heading (36px)
h2 Bootstrap heading (30px)
h3 Bootstrap heading (24px)
h4 Bootstrap heading (18px)
h5 Bootstrap heading (14px)
h6 Bootstrap heading (12px)
Spróbuj sam " <small>
W Bootstrap HTML <small> element jest stosowany do tworzenia lżejsze, tekst wtórnego w dowolnej pozycji:
Przykład
h1 heading secondary text
h2 heading secondary text
h3 heading secondary text
h4 heading secondary text
h5 heading secondary text
h6 heading secondary text
Spróbuj sam " <mark>
Bootstrap będzie styl HTML <mark> elementu w następujący sposób:
<abbr>
Bootstrap będzie projektować html <abbr> elementu w następujący sposób:
<blockquote>
Bootstrap będzie projektować html <blockquote> elementu w następujący sposób:
Przykład
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.
Spróbuj sam " Aby pokazać cytat z prawej strony, użyj .blockquote-reverse klasę:
Przykład
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.
Spróbuj sam " <dl>
Bootstrap będzie styl HTML <dl> elementu w następujący sposób:
<code>
Bootstrap będzie styl HTML <code> elementu w następujący sposób:
Przykład
The following HTML elements: span , section , and div defines a section in a document.
Spróbuj sam " <kbd>
Bootstrap będzie projektować html <kbd> elementu w następujący sposób:
<pre>
Bootstrap będzie styl HTML <pre> elementu w następujący sposób:
Przykład
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks.
Spróbuj sam " Kontekstowe Kolory i tła
Bootstrap ma również kilka klas kontekstowego, które mogą być wykorzystane w celu zapewnienia ", czyli przez barwnych".
Zajęcia dla kolorów tekstu są: .text-muted , .text-primary , .text-success , .text-info , .text-warning i .text-danger :
Przykład
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.
Spróbuj sam " Zajęcia dla kolorów tła są: .bg-primary , .bg-success , bg-info , bg-warning i .bg-danger :
Przykład
This text is important.
This text indicates success.
This text represents some information.
This text represents a warning.
This text represents danger.
Spróbuj sam " Więcej Klasy Typografia
Klasy Bootstrap poniżej mogą być dodawane do dalszych elementów stylu HTML:
| Klasa | Opis | Przykład |
|---|---|---|
.lead | Tworzy pkt wyróżniać | Spróbuj |
.small | Wskazuje mniejsze tekstu (ustawiony na 85% od wielkości jednostki dominującej) | Spróbuj |
.text-left | Wskazuje tekst wyrównany do lewej | Spróbuj |
.text-center | Wskazuje tekst wyśrodkowany | Spróbuj |
.text-right | Wskazuje tekst wyrównany do prawej | Spróbuj |
.text-justify | Wskazuje tekst wyjustowany | Spróbuj |
.text-nowrap | Wskazuje na brak zawijania tekstu | Spróbuj |
.text-lowercase | Wskazuje małe litery tekstu | Spróbuj |
.text-uppercase | Wskazuje tekst duże litery | Spróbuj |
.text-capitalize | Wskazuje tekst skapitalizowanych | Spróbuj |
.initialism | Wyświetla tekst wewnątrz <abbr> elementu w nieco mniejszym rozmiarze czcionki | Spróbuj |
.list-unstyled | Usuwa domyślnego list-style i lewy margines elementów listy (działa zarówno <ul> i <ol> ). Ta klasa ma zastosowanie wyłącznie do bezpośrednich elementów listy dzieci (w celu usunięcia domyślnej listy stylu od wszelkich zagnieżdżonych listach, zastosować tę klasę do jakichkolwiek zagnieżdżonych listach, jak również) | Spróbuj |
.list-inline | Miejsca wszystkie elementy listy w jednej linii | Spróbuj |
.dl-horizontal | Linie up warunkami ( <dt> ) oraz opisów ( <dd> ) w <dl> Elementy side-by-side. Zaczyna się jak domyślnie <dl> s, ale gdy okno przeglądarki rozszerza, to w kolejce side-by-side | Spróbuj |
.pre-scrollable | Tworzy <pre> elementu przewijane | Spróbuj |
Wypełnij Bootstrap Typografia Reference
Pełną odniesieniu do wszystkich elementów typografii / klas, przejdź do naszej pełnej Bootstrap Typografia Reference .
Również spojrzeć na naszej Bootstrap Helper klasy Reference , aby uzyskać więcej informacji na temat klas kontekstowych.