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: @baseFontSize
i @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 opcjonalne title dla rozszerzonego tekstu |
<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 są stylizowane wielkimi literami i jasną kropkowaną dolną krawędzią. Mają również kursor pomocy po najechaniu kursorem, dzięki czemu użytkownicy mają dodatkowe wskazanie, że coś zostanie pokazane po najechaniu.
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-left i .pull-right klasy 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>
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-scrollable
klasę, 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 td i th elementów |
Tabele są automatycznie stylizowane tylko z kilkoma obramowaniami, aby zapewnić czytelność i zachować strukturę. W wersji 2.0 .table
klasa jest wymagana.
- < klasa tabeli = "tabela" >
- …
- </table>
# | Imię | Nazwisko | Język |
---|---|---|---|
1 | Ocena | Otto | CSS |
2 | Jakub | Thornton | JavaScript |
3 | Stu | Wygięcie | HTML |
Wykreuj swoje stoły, dodając paski zebry — po prostu dodaj .table-striped
klasę.
Uwaga: tabele w paski używają :nth-child
selektora CSS i nie są dostępne w IE7-IE8.
- <table class = "table table-striped" >
- …
- </table>
# | Imię | Nazwisko | Język |
---|---|---|---|
1 | Ocena | Otto | CSS |
2 | Jakub | Thornton | JavaScript |
3 | Stu | Wygięcie | HTML |
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 | Język |
---|---|---|---|
1 | Mark Otto | CSS | |
2 | Jakub | Thornton | JavaScript |
3 | Stu | Wygięcie | |
3 | Brosef | Stalina | HTML |
Spraw, aby Twoje tabele były bardziej zwarte, dodając .table-condensed
klasę, aby zmniejszyć wypełnienie komórek tabeli o połowę (od 8 do 4 pikseli).
- <table class = "tabela skondensowana" >
- …
- </table>
# | Imię | Nazwisko | Język |
---|---|---|---|
1 | Ocena | Otto | CSS |
2 | Jakub | Thornton | JavaScript |
3 | Stu | Wygięcie | HTML |
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>
# | Imię | Nazwisko | Język |
---|---|---|---|
1 | Ocena | Otto | CSS |
2 | Jakub | Thornton | JavaScript |
3 | Stu | Wygięcie | HTML |
4 | Brosef | Stalina | HTML |
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 elementami sterującymi |
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 |
W wersji 2.0 mamy lżejsze i inteligentniejsze domyślne ustawienia stylów formularzy. Bez dodatkowych znaczników, tylko kontrolki formularzy.
- < klasa formularza = "dobrze" >
- <label> Nazwa etykiety </label>
- <input type = „text” class = „span3” symbol zastępczy = „Wpisz coś…” >
- <span class = "help-inline" > Powiązany tekst pomocy! </span>
- <label class = "pole wyboru" >
- <input type = "checkbox" > Sprawdź mnie
- </label>
- <button type = "prześlij" class = "btn" > Prześlij </button>
- </form>
Odzwierciedlając domyślne style WebKit, po prostu dodaj, .form-search
aby uzyskać dodatkowe zaokrąglone pola wyszukiwania.
- <form class = "well form-search" >
- <input type = „text” class = „input-medium search-query” >
- <button type = "submit" class = "btn" > Szukaj </button>
- </form>
Wejścia są na poziomie bloku, aby rozpocząć. Dla .form-inline
i .form-horizontal
używamy inline-block.
- <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” >
- <button type = "submit" class = "btn" > Idź </button>
- </form>
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>
Po lewej stronie znajdują się wszystkie obsługiwane przez nas domyślne kontrolki formularzy. Oto lista punktowana:
Do wersji 1.4 domyślne style formularzy Bootstrapa wykorzystywały układ poziomy. W Bootstrap 2 usunęliśmy to ograniczenie, aby mieć inteligentniejsze, bardziej skalowalne ustawienia domyślne dla dowolnej formy.
Bootstrap zawiera style dla skoncentrowanych i disabled
stanów obsługiwanych przez przeglądarkę. Usuwamy domyślny Webkit outline
i stosujemy box-shadow
w 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. Wystarczy dodać .inline
do dowolnego .checkbox
lub .radio
i gotowe.
Aby użyć dodawania lub dołączania danych wejściowych w formularzu wbudowanym, należy umieścić .add-on
i input
w 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 .
:after
. W dokumentach po najechaniu myszą pokazujemy jasnoczerwony kolor tła, aby podkreślić rozmiar ikony.
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.
W wersji 2.0.1 zdecydowaliśmy się na użycie <i>
tagu dla wszystkich naszych ikon, ale nie mają one klasy przypadku — 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.
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.