Na szczycie rusztowania podstawowe elementy HTML są stylizowane i wzbogacane o rozszerzalne klasy, aby zapewnić świeży, spójny wygląd.
Cała siatka typograficzna oparta jest na dwóch zmiennych Less w naszym pliku Variable.less: @baseFontSizei @baseLineHeight. Pierwszy to podstawowy rozmiar czcionki używany w całym tekście, a drugi to podstawowa wysokość linii.
Używamy tych zmiennych i trochę matematyki do tworzenia marginesów, dopełnień i wysokości linii wszystkich naszych typów i nie tylko.
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.
| Element | Stosowanie | Opcjonalny |
|---|---|---|
<strong> |
Za podkreślenie fragmentu tekstu z ważnymi | Nic |
<em> |
Do podkreślania fragmentu tekstu ze stresem | Nic |
<abbr> |
Zawija skróty i akronimy, aby wyświetlić rozszerzoną wersję po najechaniu myszą | Uwzględnij opcjonalny .initialismclass dla skrótów pisanych wielkimi literami. |
<address> |
Aby uzyskać informacje kontaktowe najbliższego przodka lub całej pracy | Zachowaj formatowanie, kończąc wszystkie wiersze znakiem<br> |
Fusce dapibus , tellus ac cursus commodo , tortor mauris condimentum nibh , ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero, pharetra augue.
Uwaga: Zapraszam do używania <b>i <i>w HTML5, ale ich użycie nieco się zmieniło. <b>ma na celu podkreślenie słów lub fraz bez przekazywania dodatkowego znaczenia, podczas gdy <i>dotyczy głównie głosu, terminów technicznych itp.
Oto dwa przykłady wykorzystania <address>tagu:
Skróty z titleatrybutem mają dolną granicę z jasnymi kropkami i kursor pomocy po najechaniu myszą. Daje to użytkownikom dodatkową wskazówkę, że coś zostanie pokazane po najechaniu myszą.
Dodaj initialismklasę do skrótu, aby zwiększyć harmonię typograficzną, nadając jej nieco mniejszy rozmiar tekstu.
HTML to najlepsza rzecz od czasów krojonego chleba.
Skrót atrybutu słowa to attr .
| Element | Stosowanie | Opcjonalny |
|---|---|---|
<blockquote> |
Element blokowy do cytowania treści z innego źródła | Dodaj .pull-lefti .pull-rightklasy dla opcji pływających |
<small> |
Opcjonalny element do dodania cytatu skierowanego do użytkownika, zazwyczaj autora z tytułem pracy | Umieść <cite>wokół tytułu lub nazwy źródła |
Aby dołączyć cytat blokowy, owiń <blockquote>dowolny kod HTML jako cytat. W przypadku prostych cytatów zalecamy <p>.
Dołącz opcjonalny <small>element, aby zacytować swoje źródło, a otrzymasz —przed nim myślnik do celów stylizacji.
- <cytat blokowy>
- <p> Lorem ipsum dolor sit amet, konsektetur adipisująca elita. Liczba całkowita posuere erat a ante venenatis. </p>
- <small> Ktoś sławny </small>
- </blockquote>
Domyślne cytaty mają następujący styl:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Liczba całkowita posuere erat a ante venenatis.
Ktoś sławny w Body of work
Aby umieścić cytat blokowy po prawej stronie, dodaj class="pull-right":
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Liczba całkowita posuere erat a ante venenatis.
Ktoś sławny w Body of work
<ul>
<ul class="unstyled">
<ol>
<dl>
<dl class="dl-horizontal">
Heads-up! Poziome listy opisów skrócą terminy, które są zbyt długie, aby zmieściły się w lewej kolumnie text-overflow. W węższych rzutniach zmienią się na domyślny układ piętrowy.
Zawijaj wbudowane fragmenty kodu za pomocą <code>.
- Na przykład <code> sekcja </ code > powinna być opakowana jako inline .
Użyj <pre>dla wielu wierszy kodu. Upewnij się, że w kodzie zostały usunięte nawiasy kątowe, aby zapewnić prawidłowe renderowanie.
<p>Tutaj przykładowy tekst...</p>
- <pre>
- <p>Przykładowy tekst tutaj...</p>
- </pre>
Uwaga: pamiętaj, aby umieścić kod w <pre>tagach jak najbliżej lewej strony; wyrenderuje wszystkie karty.
Możesz opcjonalnie dodać .pre-scrollableklasę, która ustawi maksymalną wysokość na 350px i zapewni pasek przewijania na osi y.
Weź ten sam <pre>element i dodaj dwie opcjonalne klasy, aby uzyskać ulepszone renderowanie.
- <p> Przykładowy tekst tutaj... </p>
- <pre class = "ładny druk
- płótno" >
- <p>Przykładowy tekst tutaj...</p>
- </pre>
Pobierz google-code-prettify i zobacz plik Readme, aby dowiedzieć się, jak używać.
| Etykietka | Opis |
|---|---|
<table> |
Element opakowujący do wyświetlania danych w formacie tabelarycznym |
<thead> |
Element kontenera dla wierszy nagłówka tabeli ( <tr>) do etykietowania kolumn tabeli |
<tbody> |
Element kontenera dla wierszy tabeli ( <tr>) w treści tabeli |
<tr> |
Element kontenera dla zestawu komórek tabeli ( <td>lub <th>), który pojawia się w jednym wierszu |
<td> |
Domyślna komórka tabeli |
<th> |
Specjalna komórka tabeli dla etykiet kolumn (lub wierszy, w zależności od zakresu i położenia) Musi być użyta w obrębie a <thead> |
<caption> |
Opis lub podsumowanie zawartości tabeli, szczególnie przydatne dla czytników ekranu |
- <tabela>
- <głowa>
- <tr>
- <th> … </th>
- <th> … </th>
- </tr>
- </head>
- <tbody>
- <tr>
- <td> … </td>
- <td> … </td>
- </tr>
- </tbody>
- </table>
| Nazwa | Klasa | Opis |
|---|---|---|
| Domyślna | Nic | Bez stylów, tylko kolumny i wiersze |
| Podstawowy | .table |
Tylko poziome linie między rzędami |
| Graniczy | .table-bordered |
Zaokrągla rogi i dodaje zewnętrzną granicę |
| Zebra-pasek | .table-striped |
Dodaje jasnoszary kolor tła do nieparzystych wierszy (1, 3, 5 itd.) |
| Skondensowany | .table-condensed |
Przecina pionowe dopełnienie na pół, od 8px do 4px, w obrębie wszystkich tdi thelementów |
Tabele są automatycznie stylizowane tylko z kilkoma obramowaniami, aby zapewnić czytelność i zachować strukturę. W wersji 2.0 .tableklasa jest wymagana.
- < klasa tabeli = "tabela" >
- …
- </table>
| # | Imię | Nazwisko | Nazwa użytkownika |
|---|---|---|---|
| 1 | Ocena | Otto | @mdo |
| 2 | Jakub | Thornton | @tłuszcz |
| 3 | Larry | ptak | @świergot |
Wykreuj swoje stoły, dodając paski zebry — po prostu dodaj .table-stripedklasę.
Uwaga: tabele w paski używają :nth-childselektora CSS i nie są dostępne w IE7-IE8.
- <table class = "table table-striped" >
- …
- </table>
| # | Imię | Nazwisko | Nazwa użytkownika |
|---|---|---|---|
| 1 | Ocena | Otto | @mdo |
| 2 | Jakub | Thornton | @tłuszcz |
| 3 | Larry | ptak | @świergot |
Dodaj obramowania wokół całego stołu i zaokrąglone rogi ze względów estetycznych.
- <table class = "tabela z obramowaniem tabeli" >
- …
- </table>
| # | Imię | Nazwisko | Nazwa użytkownika |
|---|---|---|---|
| 1 | Ocena | Otto | @mdo |
| Ocena | Otto | @oczywiście | |
| 2 | Jakub | Thornton | @tłuszcz |
| 3 | Larry ptak | @świergot | |
Spraw, aby Twoje tabele były bardziej zwarte, dodając .table-condensedklasę, aby zmniejszyć wypełnienie komórek tabeli o połowę (od 8 do 4 pikseli).
- <table class = "tabela skondensowana" >
- …
- </table>
| # | Imię | Nazwisko | Nazwa użytkownika |
|---|---|---|---|
| 1 | Ocena | Otto | @mdo |
| 2 | Jakub | Thornton | @tłuszcz |
| 3 | Larry ptak | @świergot | |
Możesz łączyć dowolne klasy stołów, aby uzyskać inny wygląd, korzystając z dowolnej z dostępnych klas.
- <table class = "tabela w paski tabela-obramowana tabela-skondensowana" >
- ...
- </table>
| Pełne imię i nazwisko | |||
|---|---|---|---|
| # | Imię | Nazwisko | Nazwa użytkownika |
| 1 | Ocena | Otto | @mdo |
| 2 | Jakub | Thornton | @tłuszcz |
| 3 | Larry ptak | @świergot | |
Najlepszą częścią formularzy w Bootstrap jest to, że wszystkie dane wejściowe i kontrolki wyglądają świetnie, niezależnie od tego, jak je zbudujesz w swoich znacznikach. Nie jest wymagany zbędny kod HTML, ale dostarczamy wzorce dla tych, którzy tego potrzebują.
Bardziej skomplikowane układy zawierają zwięzłe i skalowalne klasy ułatwiające stylizację i wiązanie wydarzeń, dzięki czemu jesteś objęty na każdym kroku.
Bootstrap obsługuje cztery typy układów formularzy:
Różne typy układów formularzy wymagają pewnych zmian w znacznikach, ale same kontrolki pozostają i zachowują się tak samo.
Formularze Bootstrap zawierają style dla wszystkich podstawowych kontrolek formularza, takich jak input, textarea i select, których można się spodziewać. Ale zawiera również wiele niestandardowych komponentów, takich jak dołączane i dołączane dane wejściowe oraz obsługa list pól wyboru.
Stany, takie jak błąd, ostrzeżenie i sukces, są uwzględniane dla każdego typu kontrolki formularza. Dołączone są również style dla wyłączonych kontrolek.
Bootstrap zapewnia proste znaczniki i style dla czterech stylów popularnych formularzy internetowych.
| Nazwa | Klasa | Opis |
|---|---|---|
| Pionowo (domyślnie) | .form-vertical (nie wymagane) |
Ułożone, wyrównane do lewej etykiety nad kontrolkami |
| W linii | .form-inline |
Etykieta wyrównana do lewej i wbudowane bloki sterujące zapewniają kompaktowy styl |
| Szukaj | .form-search |
Bardzo zaokrąglone wprowadzanie tekstu dla typowej estetyki wyszukiwania |
| Poziomy | .form-horizontal |
Unieś etykiety wyrównane do lewej i do prawej w tym samym wierszu, co elementy sterujące |
Inteligentne i lekkie ustawienia domyślne bez dodatkowych znaczników.
- < klasa formularza = "dobrze" >
- <label> Nazwa etykiety </label>
- <input type = „text” class = „span3” symbol zastępczy = „Wpisz coś…” >
- <span class = "help-block" > Przykładowy tekst pomocy na poziomie bloku tutaj. </span>
- <label class = "pole wyboru" >
- <input type = "checkbox" > Sprawdź mnie
- </label>
- <button type = "prześlij" class = "btn" > Prześlij </button>
- </form>
Dodaj .form-searchdo formularza i .search-querydo input.
- <form class = "well form-search" >
- <input type = „text” class = „input-medium search-query” >
- <button type = "submit" class = "btn" > Szukaj </button>
- </form>
Dodaj .form-inline, aby doprecyzować wyrównanie w pionie i odstępy kontrolek formularza.
- <form class = "well form-inline" >
- <input type = „text” class = „input-small” symbol zastępczy = „Email” >
- <input type = „password” class = „input-small” symbol zastępczy = „Password” >
- <label class = "pole wyboru" >
- <input type = "checkbox" > Zapamiętaj mnie
- </label>
- <button type = "submit" class = "btn" > Zaloguj się </button>
- </form>
Po prawej stronie pokazane są wszystkie obsługiwane przez nas domyślne kontrolki formularzy. Oto lista punktowana:
Biorąc pod uwagę powyższy przykładowy układ formularza, oto znacznik skojarzony z pierwszym wejściem i grupą kontrolną. Do stylizacji wymagane są wszystkie klasy .control-group, .control-label, i ..controls
- < klasa formularza = "forma-pozioma" >
- <zestaw pól>
- <legend> Tekst legendy </legend>
- <div class = "grupa kontrolna" >
- <label class = "etykieta-kontrolna" for = "input01" > Wprowadzanie tekstu </label>
- <div class = "kontrole" >
- <input type = „text” class = „input-xlarge” id = „input01” >
- <p class = "help-block" > Pomocniczy tekst pomocy </p>
- </div>
- </div>
- </fieldset>
- </form>
Bootstrap zawiera style dla skoncentrowanych i disabledstanów obsługiwanych przez przeglądarkę. Usuwamy domyślny Webkit outlinei stosujemy box-shadoww jego miejsce :focus.
Zawiera również style walidacji błędów, ostrzeżeń i sukcesu. Aby użyć, dodaj klasę błędu do otoczenia .control-group.
- <zestaw pól
- class = "błąd grupy kontrolnej" >
- …
- </fieldset>
Grupy danych wejściowych — z dołączonym lub dołączonym tekstem — zapewniają łatwy sposób na zapewnienie większego kontekstu wprowadzanym tekstom. Świetnymi przykładami są znak @ dla nazw użytkowników Twittera lub $ dla finansów.
Do wersji 1.4 Bootstrap wymagał dodatkowych znaczników wokół pól wyboru i radia, aby je układać. Teraz jest to prosta kwestia powtórzenia tego <label class="checkbox">, co otacza <input type="checkbox">.
Obsługiwane są również wbudowane pola wyboru i radia. Po prostu dodaj .inlinedo dowolnego .checkboxlub .radioi gotowe.
Aby użyć dodawania lub dołączania danych wejściowych w formularzu wbudowanym, należy umieścić .add-oni inputw tym samym wierszu, bez spacji.
Aby dodać tekst pomocy do danych wejściowych formularza, dołącz tekst pomocy wbudowanej z <span class="help-inline">lub blok tekstu pomocy z <p class="help-block">po elemencie input .
Zamiast sprawiać, że każda ikona jest dodatkowym żądaniem, skompilowaliśmy je w sprite — kilka obrazów w jednym pliku, który używa CSS do pozycjonowania obrazów za pomocą background-position. To jest ta sama metoda, której używamy na Twitter.com i sprawdziła się dla nas.
Wszystkie klasy ikon są poprzedzone prefiksem, .icon-aby zapewnić prawidłowe rozmieszczenie nazw i zakres, podobnie jak inne nasze komponenty. Pomoże to uniknąć konfliktów z innymi narzędziami.
Glyphicons umożliwił nam korzystanie z zestawu Niziołków z naszego zestawu narzędzi open-source, o ile podamy link i autorstwo tutaj, w dokumentacji. Proszę rozważyć zrobienie tego samego w swoich projektach.
Bootstrap używa <i>znacznika dla wszystkich ikon, ale nie mają one klasy wielkości liter — tylko wspólny prefiks. Aby użyć, umieść następujący kod w dowolnym miejscu:
- <i class = "icon-search" ></i>
Dostępne są również style dla odwróconych (białych) ikon, przygotowane z jedną dodatkową klasą:
- <i class = „ikona-wyszukiwanie ikona-biała” ></i>
Do wyboru jest 120 klas dla twoich ikon. Wystarczy dodać <i>tag z odpowiednimi klasami i gotowe. Pełną listę znajdziesz w sprites.less lub tutaj, w tym dokumencie.
Heads-up! Używając obok ciągów tekstu, jak w przyciskach lub linkach nawigacyjnych, pamiętaj o pozostawieniu spacji po <i>tagu, aby zapewnić prawidłowe odstępy.
Ikony są świetne, ale gdzie ich użyć? Oto kilka pomysłów:
Zasadniczo wszędzie, gdzie możesz umieścić <i>tag, możesz umieścić ikonę.
Używaj ich w przyciskach, grupach przycisków dla paska narzędzi, nawigacji lub dołączonych danych wejściowych formularza.