CSS
Globalne ustawienia CSS, podstawowe elementy HTML stylizowane i wzbogacone o rozszerzalne klasy oraz zaawansowany system siatki.
Przegląd
Poznaj najważniejsze elementy infrastruktury Bootstrap, w tym nasze podejście do lepszego, szybszego i silniejszego tworzenia stron internetowych.
Typ dokumentu HTML5
Bootstrap korzysta z pewnych elementów HTML i właściwości CSS, które wymagają użycia doctype HTML5. Dołącz go na początku wszystkich swoich projektów.
<!DOCTYPE html>
<html lang="en">
...
</html>Najpierw telefon komórkowy
W Bootstrap 2 dodaliśmy opcjonalne style przyjazne dla urządzeń mobilnych dla kluczowych aspektów frameworka. W Bootstrap 3 zmieniliśmy projekt od samego początku tak, aby był przyjazny dla urządzeń mobilnych. Zamiast dodawać opcjonalne style mobilne, są one wbudowane w rdzeń. W rzeczywistości Bootstrap jest najpierw mobilny . Style Mobile First można znaleźć w całej bibliotece zamiast w osobnych plikach.
Aby zapewnić prawidłowe renderowanie i powiększanie dotykiem, dodaj metatag widocznego obszaru do swojego <head>.
<meta name="viewport" content="width=device-width, initial-scale=1">Możesz wyłączyć funkcję powiększania na urządzeniach mobilnych, dodając user-scalable=nodo tagu meta viewport. Powoduje to wyłączenie powiększania, co oznacza, że użytkownicy mogą tylko przewijać, co sprawia, że witryna przypomina nieco natywną aplikację. Ogólnie rzecz biorąc, nie zalecamy tego na każdej stronie, więc zachowaj ostrożność!
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">Typografia i linki
Bootstrap ustawia podstawowe globalne style wyświetlania, typografii i łączy. W szczególności:
- Ustaw
background-color: #fff;nabody - Użyj
@font-family-base,@font-size-base, i@line-height-baseatrybutów jako naszej bazy typograficznej - Ustaw globalny kolor linku za pomocą
@link-colori zastosuj podkreślenia linków tylko na:hover
Te style można znaleźć w scaffolding.less.
Normalizuj.css
Aby usprawnić renderowanie w różnych przeglądarkach, używamy Normalize.css , projektu autorstwa Nicolasa Gallaghera i Jonathana Neala .
Kontenery
Bootstrap wymaga elementu zawierającego, aby zawinąć zawartość witryny i pomieścić nasz system siatki. Możesz wybrać jeden z dwóch kontenerów do wykorzystania w swoich projektach. Zwróć uwagę, że ze względu na paddingi nie tylko, żaden pojemnik nie jest możliwy do zagnieżdżenia.
Użyj .containerdla responsywnego kontenera o stałej szerokości.
<div class="container">
...
</div>Użyj .container-fluiddla kontenera o pełnej szerokości, obejmującego całą szerokość widocznego obszaru.
<div class="container-fluid">
...
</div>System siatki
Bootstrap zawiera responsywny, mobilny pierwszy system płynnej siatki, który odpowiednio skaluje do 12 kolumn wraz ze wzrostem rozmiaru urządzenia lub obszaru roboczego. Zawiera predefiniowane klasy dla łatwych opcji układu, a także potężne domieszki do generowania bardziej semantycznych układów .
Wstęp
Systemy siatek służą do tworzenia układów stron za pomocą serii wierszy i kolumn, w których znajdują się Twoje treści. Oto jak działa system siatki Bootstrap:
- Rzędy muszą być umieszczone w obrębie
.container(stała szerokość) lub.container-fluid(pełna szerokość) w celu prawidłowego wyrównania i wypełnienia. - Użyj wierszy, aby utworzyć poziome grupy kolumn.
- Treść powinna być umieszczona w kolumnach, a tylko kolumny mogą być bezpośrednimi dziećmi wierszy.
- Wstępnie zdefiniowane klasy siatek, takie jak
.rowi,.col-xs-4są dostępne do szybkiego tworzenia układów siatek. Mniej domieszek może być również użytych do bardziej semantycznych układów. - Kolumny tworzą rynny (przerwy między zawartością kolumny) poprzez
padding. To dopełnienie jest przesunięte w wierszach dla pierwszej i ostatniej kolumny o ujemny margines na.rows. - Ujemny margines jest powodem, dla którego poniższe przykłady są przestarzałe. Dzieje się tak, aby zawartość w kolumnach siatki była wyrównana z zawartością spoza siatki.
- Kolumny siatki są tworzone przez określenie liczby dwunastu dostępnych kolumn, które chcesz objąć. Na przykład trzy równe kolumny użyją three
.col-xs-4. - Jeśli w jednym rzędzie znajduje się więcej niż 12 kolumn, każda grupa dodatkowych kolumn, jako jedna jednostka, zawinie się w nowy wiersz.
- Klasy siatki dotyczą urządzeń o szerokości ekranu większej lub równej rozmiarom punktów przerwania i zastępują klasy siatki przeznaczone dla mniejszych urządzeń. Dlatego np. zastosowanie dowolnej
.col-md-*klasy do elementu wpłynie nie tylko na jego stylizację na średnich urządzeniach, ale także na dużych urządzeniach, jeśli.col-lg-*klasa nie jest obecna.
Spójrz na przykłady zastosowania tych zasad w swoim kodzie.
Zapytania dotyczące mediów
Używamy następujących zapytań o media w naszych plikach Less, aby utworzyć kluczowe punkty przerwania w naszym systemie grid.
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }
/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }
/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }Od czasu do czasu rozwijamy te zapytania o media, aby uwzględnić a, max-widthaby ograniczyć CSS do węższego zestawu urządzeń.
@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }Opcje siatki
Zobacz, jak różne aspekty systemu Bootstrap działają na wielu urządzeniach za pomocą poręcznej tabeli.
| Bardzo małe urządzenia Telefony (<768px) | Małe urządzenia Tablety (≥768px) | Średnie urządzenia Komputery stacjonarne (≥992px) | Duże urządzenia Komputery stacjonarne (≥1200px) | |
|---|---|---|---|---|
| Zachowanie siatki | Zawsze poziomo | Zwinięty do początku, poziomo nad punktami przerwania | ||
| Szerokość kontenera | Brak (automatycznie) | 750px | 970 pikseli | 1170 pikseli |
| Prefiks klasy | .col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
| # kolumn | 12 | |||
| Szerokość kolumny | Automatyczny | ~62px | ~81px | ~97px |
| Szerokość rynny | 30px (15px z każdej strony kolumny) | |||
| Gniazdowy | TAk | |||
| Przesunięcia | TAk | |||
| Kolejność kolumn | TAk | |||
Przykład: Ułożone w poziomie
Używając pojedynczego zestawu .col-md-*klas siatek, możesz utworzyć podstawowy system siatek, który zaczyna się ułożony w stos na urządzeniach mobilnych i tabletach (od bardzo małego do małego zakresu), a następnie staje się poziomy na urządzeniach stacjonarnych (średnich). Umieść słupy siatki w dowolnym .row.
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-6
.col-md-6
<div class="row">
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>Przykład: pojemnik na płyn
Zmień dowolny układ siatki o stałej szerokości w układ o pełnej szerokości, zmieniając najbardziej zewnętrzny .containerna .container-fluid.
<div class="container-fluid">
<div class="row">
...
</div>
</div>Przykład: telefon komórkowy i komputer stacjonarny
Nie chcesz, aby Twoje kolumny po prostu układały się w stosy na mniejszych urządzeniach? Użyj bardzo małych i średnich klas siatki urządzeń, dodając .col-xs-* .col-md-*do swoich kolumn. Zobacz poniższy przykład, aby lepiej zrozumieć, jak to wszystko działa.
.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
<div class="col-xs-6">.col-xs-6</div>
<div class="col-xs-6">.col-xs-6</div>
</div>Przykład: telefon komórkowy, tablet, komputer stacjonarny
Buduj na poprzednim przykładzie, tworząc jeszcze bardziej dynamiczne i zaawansowane układy z .col-sm-*klasami tabletów.
.col-xs-12 .col-sm-6 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<!-- Optional: clear the XS cols if their content doesn't match in height -->
<div class="clearfix visible-xs-block"></div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>Przykład: zawijanie kolumn
Jeśli w jednym rzędzie znajduje się więcej niż 12 kolumn, każda grupa dodatkowych kolumn, jako jedna jednostka, zawinie się w nowy wiersz.
.col-xs-9
.col-xs-4
Ponieważ 9 + 4 = 13 > 12, ten czterokolumnowy div jest zawijany w nową linię jako jedna ciągła jednostka.
Ponieważ 9 + 4 = 13 > 12, ten czterokolumnowy div jest zawijany w nową linię jako jedna ciągła jednostka.
.col-xs-6
Kolejne kolumny są kontynuowane w nowym wierszu.
Kolejne kolumny są kontynuowane w nowym wierszu.
<div class="row">
<div class="col-xs-9">.col-xs-9</div>
<div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
<div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div>
</div>Responsywne kolumny resetują się
Dzięki czterem dostępnym poziomom siatek na pewno napotkasz problemy, w których w pewnych punktach przerwania twoje kolumny nie są całkowicie jasne, ponieważ jedna jest wyższa od drugiej. Aby to naprawić, użyj kombinacji a .clearfixi naszych responsywnych klas narzędziowych .
.col-xs-6 .col-sm-3
Zmień rozmiar widocznego obszaru lub sprawdź na przykład na telefonie.
Zmień rozmiar widocznego obszaru lub sprawdź na przykład na telefonie.
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
<div class="row">
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<!-- Add the extra clearfix for only the required viewport -->
<div class="clearfix visible-xs-block"></div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>Oprócz czyszczenia kolumn w responsywnych punktach przerwania może być konieczne zresetowanie odsunięć, wypchnięć lub wyciągnięć . Zobacz to w akcji w przykładzie siatki .
<div class="row">
<div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
<div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
</div>
<div class="row">
<div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
<div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
</div>Przesunięcie kolumn
Przenieś kolumny w prawo za pomocą .col-md-offset-*klas. Te klasy zwiększają lewy margines kolumny o *kolumny. Na przykład .col-md-offset-4porusza się .col-md-4po czterech kolumnach.
.col-md-4
.col-md-4 .col-md-przesunięcie-4
.col-md-3 .col-md-przesunięcie-3
.col-md-3 .col-md-przesunięcie-3
.col-md-6 .col-md-przesunięcie-3
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>Możesz także nadpisać przesunięcia z niższych poziomów siatki .col-*-offset-0klasami.
<div class="row">
<div class="col-xs-6 col-sm-4">
</div>
<div class="col-xs-6 col-sm-4">
</div>
<div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-0">
</div>
</div>Zagnieżdżanie kolumn
Aby zagnieździć zawartość z domyślną siatką, dodaj nową .rowi zestaw .col-sm-*kolumn w istniejącej .col-sm-*kolumnie. Wiersze zagnieżdżone powinny zawierać zestaw kolumn, które sumują się do 12 lub mniej (nie jest wymagane użycie wszystkich 12 dostępnych kolumn).
Poziom 1: .col-sm-9
Poziom 2: .col-xs-8 .col-sm-6
Poziom 2: .col-xs-4 .col-sm-6
<div class="row">
<div class="col-sm-9">
Level 1: .col-sm-9
<div class="row">
<div class="col-xs-8 col-sm-6">
Level 2: .col-xs-8 .col-sm-6
</div>
<div class="col-xs-4 col-sm-6">
Level 2: .col-xs-4 .col-sm-6
</div>
</div>
</div>
</div>Kolejność kolumn
Łatwo zmieniaj kolejność naszych wbudowanych kolumn siatki za pomocą klas modyfikujących .col-md-push-*i ..col-md-pull-*
.col-md-9 .col-md-push-3
.col-md-3 .col-md-pull-9
<div class="row">
<div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
<div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>Mniej mixinów i zmiennych
Oprócz wstępnie zbudowanych klas siatek dla szybkich układów, Bootstrap zawiera mniej zmiennych i domieszek do szybkiego generowania własnych prostych, semantycznych układów.
Zmienne
Zmienne określają liczbę kolumn, szerokość rynny i punkt zapytania o media, od którego mają się zaczynać kolumny swobodne. Używamy ich do generowania wcześniej zdefiniowanych klas siatek opisanych powyżej, a także do niestandardowych domieszek wymienionych poniżej.
@grid-columns: 12;
@grid-gutter-width: 30px;
@grid-float-breakpoint: 768px;Mieszanki
Domieszki są używane w połączeniu ze zmiennymi siatki do generowania semantycznego CSS dla poszczególnych kolumn siatki.
// Creates a wrapper for a series of columns
.make-row(@gutter: @grid-gutter-width) {
// Then clear the floated columns
.clearfix();
@media (min-width: @screen-sm-min) {
margin-left: (@gutter / -2);
margin-right: (@gutter / -2);
}
// Negative margin nested rows out to align the content of columns
.row {
margin-left: (@gutter / -2);
margin-right: (@gutter / -2);
}
}
// Generate the extra small columns
.make-xs-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @grid-float-breakpoint) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
// Generate the small columns
.make-sm-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @screen-sm-min) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
// Generate the small column offsets
.make-sm-column-offset(@columns) {
@media (min-width: @screen-sm-min) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-sm-column-push(@columns) {
@media (min-width: @screen-sm-min) {
left: percentage((@columns / @grid-columns));
}
}
.make-sm-column-pull(@columns) {
@media (min-width: @screen-sm-min) {
right: percentage((@columns / @grid-columns));
}
}
// Generate the medium columns
.make-md-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @screen-md-min) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
// Generate the medium column offsets
.make-md-column-offset(@columns) {
@media (min-width: @screen-md-min) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-md-column-push(@columns) {
@media (min-width: @screen-md-min) {
left: percentage((@columns / @grid-columns));
}
}
.make-md-column-pull(@columns) {
@media (min-width: @screen-md-min) {
right: percentage((@columns / @grid-columns));
}
}
// Generate the large columns
.make-lg-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @screen-lg-min) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
// Generate the large column offsets
.make-lg-column-offset(@columns) {
@media (min-width: @screen-lg-min) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-lg-column-push(@columns) {
@media (min-width: @screen-lg-min) {
left: percentage((@columns / @grid-columns));
}
}
.make-lg-column-pull(@columns) {
@media (min-width: @screen-lg-min) {
right: percentage((@columns / @grid-columns));
}
}Przykładowe użycie
Możesz modyfikować zmienne do własnych wartości niestandardowych lub po prostu użyć domieszek z ich wartościami domyślnymi. Oto przykład użycia ustawień domyślnych do utworzenia układu dwukolumnowego z przerwą między nimi.
.wrapper {
.make-row();
}
.content-main {
.make-lg-column(8);
}
.content-secondary {
.make-lg-column(3);
.make-lg-column-offset(1);
}<div class="wrapper">
<div class="content-main">...</div>
<div class="content-secondary">...</div>
</div>Typografia
Nagłówki
Dostępne są wszystkie nagłówki HTML <h1>od <h6>. .h1dostępne są .h6również klasy, jeśli chcesz dopasować styl czcionki nagłówka, ale nadal chcesz, aby tekst był wyświetlany w tekście.
h1. Nagłówek Bootstrapa |
Półgruby 36px |
h2. Nagłówek Bootstrapa |
Półgruby 30px |
h3. Nagłówek Bootstrapa |
Półgruby 24px |
h4. Nagłówek Bootstrapa |
Półgruby 18px |
h5. Nagłówek Bootstrapa |
Półgruby 14px |
h6. Nagłówek Bootstrapa |
Półgruby 12px |
<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>Utwórz jaśniejszy, drugorzędny tekst w dowolnym nagłówku za pomocą ogólnego <small>tagu lub .smallklasy.
h1. Nagłówek Bootstrap Tekst wtórny |
h2. Nagłówek Bootstrap Tekst wtórny |
h3. Nagłówek Bootstrap Tekst wtórny |
h4. Nagłówek Bootstrap Tekst wtórny |
h5. Nagłówek Bootstrap Tekst wtórny |
h6. Nagłówek Bootstrap Tekst wtórny |
<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
<h3>h3. Bootstrap heading <small>Secondary text</small></h3>
<h4>h4. Bootstrap heading <small>Secondary text</small></h4>
<h5>h5. Bootstrap heading <small>Secondary text</small></h5>
<h6>h6. Bootstrap heading <small>Secondary text</small></h6>Kopia ciała
Globalna wartość domyślna Bootstrapa font-sizeto 14px , z a 1.428line-height . Dotyczy to wszystkich paragrafów. Ponadto (akapity) otrzymują margines dolny równy połowie obliczonej wysokości wiersza (domyślnie 10 pikseli).<body><p>
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.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.
Mecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
<p>...</p>Kopia treści głównej
Wyróżnij akapit, dodając .lead.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commododo luctus.
<p class="lead">...</p>Zbudowany z Less
Skala typograficzna opiera się na dwóch zmiennych Less w zmiennych.less : @font-size-basei @line-height-base. Pierwszy to podstawowy rozmiar czcionki używany w całym tekście, a drugi to podstawowa wysokość linii. Używamy tych zmiennych i prostej matematyki do tworzenia marginesów, dopełnień i wysokości linii wszystkich naszych typów i nie tylko. Dostosuj je i dostosuje Bootstrap.
Wbudowane elementy tekstowe
Zaznaczony tekst
Aby wyróżnić fragment tekstu ze względu na jego znaczenie w innym kontekście, użyj <mark>tagu.
Możesz użyć znacznika znaku, abyatrakcjatekst.
You can use the mark tag to <mark>highlight</mark> text.Tekst usunięty
Aby wskazać bloki tekstu, które zostały usunięte, użyj <del>znacznika.
Ten wiersz tekstu ma być traktowany jako tekst usunięty.
<del>This line of text is meant to be treated as deleted text.</del>Tekst przekreślony
Aby wskazać bloki tekstu, które nie są już istotne, użyj <s>znacznika.
Ta linia tekstu ma być traktowana jako nieaktualna.
<s>This line of text is meant to be treated as no longer accurate.</s>Wstawiony tekst
Do wskazania uzupełnień w dokumencie użyj <ins>znacznika.
Ta linia tekstu ma być traktowana jako dodatek do dokumentu.
<ins>This line of text is meant to be treated as an addition to the document.</ins>Podkreślony tekst
Aby podkreślić tekst użyj <u>znacznika.
Ten wiersz tekstu zostanie wyświetlony jako podkreślony
<u>This line of text will render as underlined</u>Korzystaj z domyślnych znaczników nacisku HTML z lekkimi stylami.
Mały tekst
Aby usunąć akcenty w tekście lub bloki tekstu, użyj <small>znacznika, aby ustawić tekst na 85% rozmiaru rodzica. Elementy nagłówka otrzymują własne font-sizedla elementów zagnieżdżonych <small>.
Możesz alternatywnie użyć elementu wbudowanego .smallw miejsce dowolnego <small>.
Ta linia tekstu ma być traktowana jako drobny druk.
<small>This line of text is meant to be treated as fine print.</small>Pogrubienie
Do podkreślania fragmentu tekstu grubszą czcionką.
Poniższy fragment tekstu jest renderowany jako tekst pogrubiony .
<strong>rendered as bold text</strong>Kursywa
Za podkreślenie fragmentu tekstu kursywą.
Poniższy fragment tekstu jest renderowany kursywą .
<em>rendered as italicized text</em>Alternatywne elementy
Zapraszam do korzystania <b>i <i>w HTML5. <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.
Klasy wyrównania
Łatwo wyrównuj tekst do komponentów za pomocą klas wyrównania tekstu.
Tekst wyrównany do lewej.
Tekst wyśrodkowany.
Tekst wyrównany do prawej.
Tekst wyjustowany.
Brak tekstu do zawijania.
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>Klasy transformacji
Przekształć tekst w komponenty za pomocą klas pisania wielkimi literami.
Tekst pisany małymi literami.
Tekst pisany wielkimi literami.
Tekst pisany wielką literą.
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>Skróty
Stylizowana implementacja elementu HTML <abbr>dla skrótów i akronimów, aby wyświetlić rozszerzoną wersję po najechaniu myszą. Skróty z titleatrybutem mają dolną granicę z jasną kropkowaną kropką i kursor pomocy po najechaniu kursorem, co zapewnia dodatkowy kontekst po najechaniu i użytkownikom technologii wspomagających.
Skrót podstawowy
Skrót atrybutu słowa to attr .
<abbr title="attribute">attr</abbr>Inicjalizacja
Dodaj .initialismdo skrótu, aby uzyskać nieco mniejszy rozmiar czcionki.
HTML to najlepsza rzecz od czasów krojonego chleba.
<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>Adresy
Przedstaw dane kontaktowe najbliższego przodka lub całej pracy. Zachowaj formatowanie, kończąc wszystkie wiersze na <br>.
Twitter, Inc.
1355 Market Street, Suite 900
San Francisco, CA 94103
P: (123) 456-7890 Imię i nazwisko
[email protected]
1355 Market Street, Suite 900
San Francisco, CA 94103
P: (123) 456-7890 Imię i nazwisko
[email protected]
<address>
<strong>Twitter, Inc.</strong><br>
1355 Market Street, Suite 900<br>
San Francisco, CA 94103<br>
<abbr title="Phone">P:</abbr> (123) 456-7890
</address>
<address>
<strong>Full Name</strong><br>
<a href="mailto:#">[email protected]</a>
</address>Cytaty blokowe
Do cytowania bloków treści z innego źródła w Twoim dokumencie.
Domyślny cytat blokowy
Owiń <blockquote>dowolny kod HTML jako cytat. W przypadku cytatów prostych zalecamy a <p>.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Liczba całkowita posuere erat ante.
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>Opcje cytatów blokowych
Zmiany stylu i treści dla prostych wariacji normy <blockquote>.
Nazywanie źródła
Dodaj a, <footer>aby zidentyfikować źródło. Zawijaj nazwę pracy źródłowej w <cite>.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Liczba całkowita posuere erat ante.
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>Wyświetlacze alternatywne
Dodaj .blockquote-reversedla cytatu blokowego z treścią wyrównaną do prawej.
<blockquote class="blockquote-reverse">
...
</blockquote>Listy
Niezamówiony
Lista pozycji, w których kolejność wyraźnie nie ma znaczenia.
- Lorem ipsum dolor sit amet
- Consectetur adipisująca elita
- Integer molestie lorem w massa
- Facilisis w pretium nisl aliquet
- Nulla volutpat aliquam velit
- Fasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
<ul>
<li>...</li>
</ul>Zamówione
Lista pozycji, w których kolejność ma znaczenie.
- Lorem ipsum dolor sit amet
- Consectetur adipisująca elita
- Integer molestie lorem w massa
- Facilisis w pretium nisl aliquet
- Nulla volutpat aliquam velit
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
<ol>
<li>...</li>
</ol>Bez stylu
Usuń domyślny list-stylei lewy margines na elementach listy (tylko bezpośrednie dzieci). Dotyczy to tylko elementów list podrzędnych , co oznacza, że musisz dodać klasę również dla wszystkich list zagnieżdżonych.
- Lorem ipsum dolor sit amet
- Consectetur adipisująca elita
- Integer molestie lorem w massa
- Facilisis w pretium nisl aliquet
- Nulla volutpat aliquam velit
- Fasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
<ul class="list-unstyled">
<li>...</li>
</ul>W linii
Umieść wszystkie elementy listy w jednej linii z display: inline-block;lekkim wypełnieniem.
- Lorem ipsum
- Fazallus iaculis
- Nulla volutpat
<ul class="list-inline">
<li>...</li>
</ul>Opis
Lista terminów wraz z powiązanymi opisami.
- Listy opisów
- Lista opisowa jest idealna do definiowania terminów.
- Euismod
- Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
- Donec id elit non mi porta gravida at eget metus.
- Malesuada porta
- Etiam porta sem malesuada magna mollis euismod.
<dl>
<dt>...</dt>
<dd>...</dd>
</dl>Opis poziomy
Ułóż terminy i opisy <dl>obok siebie. Rozpoczyna się skumulowany jak domyślny <dl>s, ale gdy pasek nawigacyjny się rozszerza, zrób to.
- Listy opisów
- Lista opisowa jest idealna do definiowania terminów.
- Euismod
- Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
- Donec id elit non mi porta gravida at eget metus.
- Malesuada porta
- Etiam porta sem malesuada magna mollis euismod.
- Felis euismod semper eget lacinia
- Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
<dl class="dl-horizontal">
<dt>...</dt>
<dd>...</dd>
</dl>Automatyczne przycinanie
Poziome listy opisów skrócą terminy, które są zbyt długie, aby zmieściły się w lewej kolumnie za pomocą text-overflow. W węższych rzutniach zmienią się na domyślny układ piętrowy.
Kod
W linii
Zawijaj wbudowane fragmenty kodu za pomocą <code>.
Na przykład
<section>powinien być opakowany jako inline.
For example, <code><section></code> should be wrapped as inline.Wprowadzane przez użytkownika
Użyj , <kbd>aby wskazać dane wejściowe, które są zwykle wprowadzane za pomocą klawiatury.
Aby przełączyć katalogi, wpisz,
cda następnie nazwę katalogu.
Aby edytować ustawienia, naciśnij ctrl + ,
Aby edytować ustawienia, naciśnij ctrl + ,
To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>Blok podstawowy
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>Sample text here...</p></pre>Możesz opcjonalnie dodać .pre-scrollableklasę, która ustawi maksymalną wysokość na 350px i zapewni pasek przewijania na osi y.
Zmienne
Do wskazania zmiennych użyj <var>znacznika.
y = m x + b
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>Przykładowe wyjście
Do wskazania bloków przykładowych danych wyjściowych z programu użyj <samp>znacznika.
Ten tekst ma być traktowany jako przykładowe wyjście z programu komputerowego.
<samp>This text is meant to be treated as sample output from a computer program.</samp>Stoły
Podstawowy przykład
W przypadku podstawowych stylów — lekkie wypełnienie i tylko poziome dzielniki — dodaj klasę bazową .tabledo any <table>. Może wydawać się to bardzo zbędne, ale biorąc pod uwagę powszechne stosowanie tabel dla innych wtyczek, takich jak kalendarze i selektory dat, zdecydowaliśmy się wyizolować nasze niestandardowe style tabel.
| # | Imię | Nazwisko | Nazwa użytkownika |
|---|---|---|---|
| 1 | Ocena | Otto | @mdo |
| 2 | Jakub | Thornton | @tłuszcz |
| 3 | Larry | ptak | @świergot |
<table class="table">
...
</table>Pasiaste rzędy
Służy .table-stripeddo dodawania pasków zebry do dowolnego wiersza tabeli w <tbody>.
Kompatybilność z różnymi przeglądarkami
Tabele w paski są stylizowane za pomocą :nth-childselektora CSS, który nie jest dostępny w przeglądarce Internet Explorer 8.
| # | Imię | Nazwisko | Nazwa użytkownika |
|---|---|---|---|
| 1 | Ocena | Otto | @mdo |
| 2 | Jakub | Thornton | @tłuszcz |
| 3 | Larry | ptak | @świergot |
<table class="table table-striped">
...
</table>Stół z obramowaniem
Dodaj .table-bordereddla obramowań ze wszystkich stron tabeli i komórek.
| # | Imię | Nazwisko | Nazwa użytkownika |
|---|---|---|---|
| 1 | Ocena | Otto | @mdo |
| 2 | Jakub | Thornton | @tłuszcz |
| 3 | Larry | ptak | @świergot |
<table class="table table-bordered">
...
</table>Wskaż wiersze
Dodaj .table-hover, aby włączyć stan najechania na wiersze tabeli w ramach <tbody>.
| # | Imię | Nazwisko | Nazwa użytkownika |
|---|---|---|---|
| 1 | Ocena | Otto | @mdo |
| 2 | Jakub | Thornton | @tłuszcz |
| 3 | Larry | ptak | @świergot |
<table class="table table-hover">
...
</table>Skondensowany stół
Dodaj .table-condensed, aby stoły były bardziej zwarte, przecinając wypełnienie komórek na pół.
| # | Imię | Nazwisko | Nazwa użytkownika |
|---|---|---|---|
| 1 | Ocena | Otto | @mdo |
| 2 | Jakub | Thornton | @tłuszcz |
| 3 | Larry ptak | @świergot | |
<table class="table table-condensed">
...
</table>Zajęcia kontekstowe
Użyj klas kontekstowych, aby pokolorować wiersze tabeli lub poszczególne komórki.
| Klasa | Opis |
|---|---|
.active |
Stosuje kolor najechania na konkretny wiersz lub komórkę |
.success |
Wskazuje udane lub pozytywne działanie |
.info |
Wskazuje neutralną zmianę informacyjną lub działanie |
.warning |
Wskazuje ostrzeżenie, które może wymagać uwagi |
.danger |
Wskazuje na niebezpieczne lub potencjalnie negatywne działanie |
| # | Nagłówek kolumny | Nagłówek kolumny | Nagłówek kolumny |
|---|---|---|---|
| 1 | Zawartość kolumny | Zawartość kolumny | Zawartość kolumny |
| 2 | Zawartość kolumny | Zawartość kolumny | Zawartość kolumny |
| 3 | Zawartość kolumny | Zawartość kolumny | Zawartość kolumny |
| 4 | Zawartość kolumny | Zawartość kolumny | Zawartość kolumny |
| 5 | Zawartość kolumny | Zawartość kolumny | Zawartość kolumny |
| 6 | Zawartość kolumny | Zawartość kolumny | Zawartość kolumny |
| 7 | Zawartość kolumny | Zawartość kolumny | Zawartość kolumny |
| 8 | Zawartość kolumny | Zawartość kolumny | Zawartość kolumny |
| 9 | Zawartość kolumny | Zawartość kolumny | Zawartość kolumny |
<!-- On rows -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>
<!-- On cells (`td` or `th`) -->
<tr>
<td class="active">...</td>
<td class="success">...</td>
<td class="warning">...</td>
<td class="danger">...</td>
<td class="info">...</td>
</tr>Nadawanie znaczenia technologiom wspomagającym
Użycie koloru w celu nadania znaczenia wierszowi tabeli lub pojedynczej komórce zapewnia jedynie wizualne wskazanie, które nie zostanie przekazane użytkownikom technologii wspomagających — takich jak czytniki ekranu. Upewnij się, że informacje oznaczone kolorem wynikają z samej treści (widoczny tekst w odpowiednim wierszu/komórce tabeli) lub są zawarte w inny sposób, np. dodatkowy tekst ukryty w .sr-onlyklasie.
Responsywne tabele
Twórz responsywne tabele, zawijając dowolne .table, .table-responsiveaby przewijały się w poziomie na małych urządzeniach (poniżej 768 pikseli). Podczas oglądania czegokolwiek większego niż 768px nie zobaczysz żadnej różnicy w tych tabelach.
Przycinanie/obcinanie w pionie
Responsywne tabele korzystają z narzędzia overflow-y: hidden, które odcina wszelkie treści wykraczające poza dolne lub górne krawędzie tabeli. W szczególności może to odciąć menu rozwijane i inne widżety innych firm.
Firefox i zestawy pól
Firefox ma trochę niezręcznego stylu zestawu pól width, który koliduje z responsywną tabelą. Nie można tego obejść bez hackowania specyficznego dla Firefoksa, którego nie zapewniamy w Bootstrap:
@-moz-document url-prefix() {
fieldset { display: table-cell; }
}Aby uzyskać więcej informacji, przeczytaj tę odpowiedź na temat przepełnienia stosu .
| # | Nagłówek tabeli | Nagłówek tabeli | Nagłówek tabeli | Nagłówek tabeli | Nagłówek tabeli | Nagłówek tabeli |
|---|---|---|---|---|---|---|
| 1 | Komórka tabeli | Komórka tabeli | Komórka tabeli | Komórka tabeli | Komórka tabeli | Komórka tabeli |
| 2 | Komórka tabeli | Komórka tabeli | Komórka tabeli | Komórka tabeli | Komórka tabeli | Komórka tabeli |
| 3 | Komórka tabeli | Komórka tabeli | Komórka tabeli | Komórka tabeli | Komórka tabeli | Komórka tabeli |
| # | Nagłówek tabeli | Nagłówek tabeli | Nagłówek tabeli | Nagłówek tabeli | Nagłówek tabeli | Nagłówek tabeli |
|---|---|---|---|---|---|---|
| 1 | Komórka tabeli | Komórka tabeli | Komórka tabeli | Komórka tabeli | Komórka tabeli | Komórka tabeli |
| 2 | Komórka tabeli | Komórka tabeli | Komórka tabeli | Komórka tabeli | Komórka tabeli | Komórka tabeli |
| 3 | Komórka tabeli | Komórka tabeli | Komórka tabeli | Komórka tabeli | Komórka tabeli | Komórka tabeli |
<div class="table-responsive">
<table class="table">
...
</table>
</div>Formularze
Podstawowy przykład
Poszczególne kontrolki formularzy automatycznie otrzymują pewien globalny styl. Wszystkie elementy tekstowe <input>, <textarea>i <select>z .form-controlsą width: 100%;domyślnie ustawione na. Owiń etykiety i elementy sterujące, .form-groupaby uzyskać optymalne odstępy.
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>Nie mieszaj grup formularzy z grupami wejściowymi
Nie mieszaj grup formularzy bezpośrednio z grupami wejściowymi . Zamiast tego zagnieżdż grupę wejściową wewnątrz grupy formularzy.
Formularz wbudowany
Dodaj .form-inlinedo formularza (który nie musi być a <form>) dla kontrolek wyrównanych do lewej i blokowych. Dotyczy to tylko formularzy w rzutniach o szerokości co najmniej 768 pikseli.
Może wymagać niestandardowych szerokości
Dane wejściowe i selekcje zostały width: 100%;domyślnie zastosowane w Bootstrap. W formularzach wbudowanych resetujemy to, aby width: auto;wiele kontrolek mogło znajdować się w tym samym wierszu. W zależności od układu mogą być wymagane dodatkowe niestandardowe szerokości.
Zawsze dodawaj etykiety
Czytniki ekranu będą miały problemy z formularzami, jeśli nie dodasz etykiety do każdego wejścia. W przypadku tych formularzy wbudowanych możesz ukryć etykiety za pomocą .sr-onlyklasy. Istnieją dalsze alternatywne metody umieszczania etykiety dla technologii wspomagających, takie jak aria-labelatrybut lub aria-labelledby. titleJeśli żaden z nich nie występuje, czytniki ekranu mogą skorzystać z placeholderatrybutu, jeśli jest on obecny, ale należy pamiętać, że nie zaleca się używania placeholdergo jako zamiennika dla innych metod oznaczania.
<form class="form-inline">
<div class="form-group">
<label for="exampleInputName2">Name</label>
<input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
</div>
<div class="form-group">
<label for="exampleInputEmail2">Email</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="[email protected]">
</div>
<button type="submit" class="btn btn-default">Send invitation</button>
</form><form class="form-inline">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail3">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword3">Password</label>
<input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-default">Sign in</button>
</form><form class="form-inline">
<div class="form-group">
<label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
<div class="input-group">
<div class="input-group-addon">$</div>
<input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
<div class="input-group-addon">.00</div>
</div>
</div>
<button type="submit" class="btn btn-primary">Transfer cash</button>
</form>Forma pozioma
Użyj predefiniowanych klas siatki Bootstrap, aby wyrównać etykiety i grupy kontrolek formularza w układzie poziomym, dodając .form-horizontaldo formularza (co nie musi być <form>). W ten sposób zmienia .form-groupsię s, aby zachowywał się jak wiersze siatki, więc nie ma potrzeby stosowania .row.
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>Obsługiwane elementy sterujące
Przykłady standardowych kontrolek formularza obsługiwanych w przykładowym układzie formularza.
Wejścia
Najpopularniejsza kontrolka formularza, tekstowe pola wprowadzania. Obejmuje obsługę wszystkich typów HTML5: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, i color.
Wymagana deklaracja typu
Dane wejściowe będą w pełni stylizowane tylko wtedy, gdy typezostaną prawidłowo zadeklarowane.
<input type="text" class="form-control" placeholder="Text input">Grupy wejściowe
Aby dodać zintegrowany tekst lub przyciski przed i/lub za dowolnym tekstem <input>, sprawdź komponent grupy wejściowej .
Obszar tekstowy
Formant formularza, który obsługuje wiele wierszy tekstu. W razie potrzeby zmień rowsatrybut.
<textarea class="form-control" rows="3"></textarea>Pola wyboru i radia
Pola wyboru służą do wyboru jednej lub kilku opcji z listy, podczas gdy radia służą do wyboru jednej opcji z wielu.
Obsługiwane są wyłączone pola wyboru i radia, ale aby wyświetlić „niedozwolony” kursor po najechaniu kursorem na element nadrzędny <label>, musisz dodać .disabledklasę do elementu nadrzędnego .radio, .radio-inline, .checkboxlub .checkbox-inline.
Domyślny (skumulowany)
<div class="checkbox">
<label>
<input type="checkbox" value="">
Option one is this and that—be sure to include why it's great
</label>
</div>
<div class="checkbox disabled">
<label>
<input type="checkbox" value="" disabled>
Option two is disabled
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
Option one is this and that—be sure to include why it's great
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
Option two can be something else and selecting it will deselect option one
</label>
</div>
<div class="radio disabled">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
Option three is disabled
</label>
</div>Wbudowane pola wyboru i radia
Użyj klas .checkbox-inlinelub .radio-inlinena serii pól wyboru lub radia, aby uzyskać elementy sterujące, które pojawiają się w tym samym wierszu.
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
</label>Pola wyboru i radia bez tekstu etykiety
Jeśli nie masz tekstu w <label>, dane wejściowe są umieszczane zgodnie z oczekiwaniami. Obecnie działa tylko na polach wyboru innych niż wbudowane i radiach. Pamiętaj, aby nadal podać jakąś formę etykiety dla technologii pomocniczych (na przykład używając aria-label).
<div class="checkbox">
<label>
<input type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
</label>
</div>Zaznacza
Zwróć uwagę, że wiele natywnych menu wyboru - a mianowicie w Safari i Chrome - ma zaokrąglone rogi, których nie można modyfikować za pomocą border-radiuswłaściwości.
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>W przypadku <select>kontrolek z multipleatrybutem domyślnie wyświetlanych jest wiele opcji.
<select multiple class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>Kontrola statyczna
Gdy musisz umieścić zwykły tekst obok etykiety formularza w formularzu, użyj .form-control-staticklasy na <p>.
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<p class="form-control-static">[email protected]</p>
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
</div>
</form><form class="form-inline">
<div class="form-group">
<label class="sr-only">Email</label>
<p class="form-control-static">[email protected]</p>
</div>
<div class="form-group">
<label for="inputPassword2" class="sr-only">Password</label>
<input type="password" class="form-control" id="inputPassword2" placeholder="Password">
</div>
<button type="submit" class="btn btn-default">Confirm identity</button>
</form>Stan skupienia
Usuwamy domyślne outlinestyle w niektórych kontrolkach formularzy i stosujemy box-shadoww ich miejsce dla :focus.
:focusStan demonstracyjny
Powyższe przykładowe dane wejściowe używają niestandardowych stylów w naszej dokumentacji, aby zademonstrować :focusstan na .form-control.
Stan niepełnosprawny
Dodaj disabledatrybut logiczny do danych wejściowych, aby zapobiec interakcji użytkownika. Nieaktywne wejścia są jaśniejsze i dodają not-allowedkursor.
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>Wyłączone zestawy pól
Dodaj disabledatrybut do a, <fieldset>aby wyłączyć wszystkie kontrolki <fieldset>naraz.
Zastrzeżenie dotyczące funkcjonalności linków w<a>
Domyślnie przeglądarki traktują wszystkie natywne kontrolki formularzy ( <input>i elementy) wewnątrz a <select>jako wyłączone, zapobiegając interakcji klawiatury i myszy na nich. Jeśli jednak formularz zawiera również elementy, otrzymają one tylko styl . Jak wspomniano w sekcji o stanie wyłączenia przycisków (a konkretnie w podsekcji dotyczącej elementów kotwicy), ta właściwość CSS nie jest jeszcze ustandaryzowana i nie jest w pełni obsługiwana w Operze 18 i starszych ani w Internet Explorerze 11 i wygrała nie uniemożliwia użytkownikom klawiatury skupienia się na tych linkach ani ich aktywowania. Aby być bezpiecznym, użyj niestandardowego JavaScript, aby wyłączyć takie linki.<button><fieldset disabled><a ... class="btn btn-*">pointer-events: none
Kompatybilność z różnymi przeglądarkami
Chociaż Bootstrap zastosuje te style we wszystkich przeglądarkach, Internet Explorer 11 i starsze wersje nie obsługują w pełni disabledatrybutu na <fieldset>. Użyj niestandardowego JavaScript, aby wyłączyć zestaw pól w tych przeglądarkach.
<form>
<fieldset disabled>
<div class="form-group">
<label for="disabledTextInput">Disabled input</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
</div>
<div class="form-group">
<label for="disabledSelect">Disabled select menu</label>
<select id="disabledSelect" class="form-control">
<option>Disabled select</option>
</select>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Can't check this
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</fieldset>
</form>Stan tylko do odczytu
Dodaj readonlyatrybut logiczny do danych wejściowych, aby zapobiec modyfikacji wartości danych wejściowych. Wejścia tylko do odczytu są jaśniejsze (podobnie jak wejścia wyłączone), ale zachowują standardowy kursor.
<input class="form-control" type="text" placeholder="Readonly input here…" readonly>Tekst pomocy
Tekst pomocy na poziomie bloku dla kontrolek formularza.
Kojarzenie tekstu pomocy z kontrolkami formularza
Tekst pomocy powinien być jawnie powiązany z kontrolką formularza, do której się odnosi przy użyciu aria-describedbyatrybutu. Zapewni to, że technologie wspomagające — takie jak czytniki ekranu — będą ogłaszać ten tekst pomocy, gdy użytkownik skupi się lub przejdzie do kontrolki.
<label class="sr-only" for="inputHelpBlock">Input with help text</label>
<input type="text" id="inputHelpBlock" class="form-control" aria-describedby="helpBlock">
...
<span id="helpBlock" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>Stany walidacji
Bootstrap zawiera style walidacji dla stanów błędu, ostrzeżenia i powodzenia w kontrolkach formularza. Aby użyć, dodaj .has-warning, .has-errorlub .has-successdo elementu nadrzędnego. Każdy .control-label, .form-controli .help-blockw tym elemencie otrzyma style walidacji.
Przekazywanie stanu walidacji technologiom wspomagającym i użytkownikom z daltonizmem
Używanie tych stylów sprawdzania poprawności do oznaczania stanu kontrolki formularza zapewnia jedynie wizualne wskazanie oparte na kolorach, które nie będzie przekazywane użytkownikom technologii pomocniczych — takich jak czytniki ekranu — ani użytkownikom nierozróżniającym kolorów.
Upewnij się, że podano również alternatywne wskazanie stanu. Na przykład, możesz dołączyć wskazówkę dotyczącą stanu w samym <label>tekście kontrolki formularza (tak jak w poniższym przykładzie kodu), dołączyć Glyphicon (z odpowiednim tekstem alternatywnym przy użyciu .sr-onlyklasy - zobacz przykłady Glyphicon ) lub podać dodatkowy blok tekstu pomocy . Zwłaszcza w przypadku technologii wspomagających nieprawidłowe kontrolki formularzy można również przypisać do aria-invalid="true"atrybutu.
<div class="form-group has-success">
<label class="control-label" for="inputSuccess1">Input with success</label>
<input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2">
<span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
</div>
<div class="form-group has-warning">
<label class="control-label" for="inputWarning1">Input with warning</label>
<input type="text" class="form-control" id="inputWarning1">
</div>
<div class="form-group has-error">
<label class="control-label" for="inputError1">Input with error</label>
<input type="text" class="form-control" id="inputError1">
</div>
<div class="has-success">
<div class="checkbox">
<label>
<input type="checkbox" id="checkboxSuccess" value="option1">
Checkbox with success
</label>
</div>
</div>
<div class="has-warning">
<div class="checkbox">
<label>
<input type="checkbox" id="checkboxWarning" value="option1">
Checkbox with warning
</label>
</div>
</div>
<div class="has-error">
<div class="checkbox">
<label>
<input type="checkbox" id="checkboxError" value="option1">
Checkbox with error
</label>
</div>
</div>Z opcjonalnymi ikonami
Możesz także dodać opcjonalne ikony opinii, dodając .has-feedbackikonę i odpowiednią ikonę.
<input class="form-control">Ikony opinii działają tylko z elementami tekstowymi .
Ikony, etykiety i grupy wejściowe
Ręczne pozycjonowanie ikon opinii jest wymagane w przypadku wejść bez etykiety oraz w przypadku grup wejść z dodatkiem po prawej stronie. Zachęcamy do podawania etykiet dla wszystkich danych wejściowych ze względu na ułatwienia dostępu. Jeśli chcesz uniemożliwić wyświetlanie etykiet, ukryj je w .sr-onlyklasie. Jeśli musisz zrezygnować z etykiet, dostosuj topwartość ikony opinii. W przypadku grup wejściowych dostosuj rightwartość do odpowiedniej wartości piksela w zależności od szerokości dodatku.
Przekazywanie znaczenia ikony technologiom wspomagającym
Aby mieć pewność, że technologie wspomagające — takie jak czytniki ekranu — prawidłowo przekazują znaczenie ikony, należy dołączyć do .sr-onlyklasy dodatkowy ukryty tekst i wyraźnie powiązać go z kontrolką formularza, do której się odnosi aria-describedby. Alternatywnie upewnij się, że znaczenie (na przykład fakt, że istnieje ostrzeżenie dla określonego pola wprowadzania tekstu) jest przekazywane w innej formie, takiej jak zmiana tekstu rzeczywistego <label>skojarzonego z kontrolką formularza.
Chociaż poniższe przykłady już wspominają stan walidacji ich odpowiednich kontrolek formularza w samym <label>tekście, powyższa technika (używanie .sr-onlytekstu i aria-describedby) została uwzględniona w celach ilustracyjnych.
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess2">Input with success</label>
<input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess2Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-warning has-feedback">
<label class="control-label" for="inputWarning2">Input with warning</label>
<input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status">
<span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
<span id="inputWarning2Status" class="sr-only">(warning)</span>
</div>
<div class="form-group has-error has-feedback">
<label class="control-label" for="inputError2">Input with error</label>
<input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status">
<span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
<span id="inputError2Status" class="sr-only">(error)</span>
</div>
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputGroupSuccess1">Input group with success</label>
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
</div>
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
</div>Opcjonalne ikony w formularzach poziomych i wbudowanych
<form class="form-horizontal">
<div class="form-group has-success has-feedback">
<label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="inputSuccess3" aria-describedby="inputSuccess3Status">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess3Status" class="sr-only">(success)</span>
</div>
</div>
<div class="form-group has-success has-feedback">
<label class="control-label col-sm-3" for="inputGroupSuccess2">Input group with success</label>
<div class="col-sm-9">
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" id="inputGroupSuccess2" aria-describedby="inputGroupSuccess2Status">
</div>
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputGroupSuccess2Status" class="sr-only">(success)</span>
</div>
</div>
</form><form class="form-inline">
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess4">Input with success</label>
<input type="text" class="form-control" id="inputSuccess4" aria-describedby="inputSuccess4Status">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess4Status" class="sr-only">(success)</span>
</div>
</form>
<form class="form-inline">
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputGroupSuccess3">Input group with success</label>
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" id="inputGroupSuccess3" aria-describedby="inputGroupSuccess3Status">
</div>
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputGroupSuccess3Status" class="sr-only">(success)</span>
</div>
</form>Opcjonalne ikony z ukrytymi .sr-onlyetykietami
Jeśli używasz .sr-onlyklasy do ukrywania kontrolki formularza <label>(zamiast używania innych opcji etykietowania, takich jak aria-labelatrybut), Bootstrap automatycznie dostosuje położenie ikony po jej dodaniu.
(powodzenie)
@
(powodzenie)
<div class="form-group has-success has-feedback">
<label class="control-label sr-only" for="inputSuccess5">Hidden label</label>
<input type="text" class="form-control" id="inputSuccess5" aria-describedby="inputSuccess5Status">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess5Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-success has-feedback">
<label class="control-label sr-only" for="inputGroupSuccess4">Input group with success</label>
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" id="inputGroupSuccess4" aria-describedby="inputGroupSuccess4Status">
</div>
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputGroupSuccess4Status" class="sr-only">(success)</span>
</div>Kontroluj rozmiar
Ustaw wysokości za pomocą klas, takich jak .input-lg, i ustaw szerokości za pomocą klas kolumn siatki, takich jak .col-lg-*.
Dobór wysokości
Twórz wyższe lub krótsze kontrolki formularzy, które pasują do rozmiarów przycisków.
<input class="form-control input-lg" type="text" placeholder=".input-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control input-sm" type="text" placeholder=".input-sm">
<select class="form-control input-lg">...</select>
<select class="form-control">...</select>
<select class="form-control input-sm">...</select>Rozmiary grup w formie poziomej
Szybko zmieniaj rozmiary etykiet i kontrolek formularzy .form-horizontal, dodając .form-group-lglub .form-group-sm.
<form class="form-horizontal">
<div class="form-group form-group-lg">
<label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>
<div class="col-sm-10">
<input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input">
</div>
</div>
<div class="form-group form-group-sm">
<label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label>
<div class="col-sm-10">
<input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input">
</div>
</div>
</form>Rozmiary kolumn
Zawijaj dane wejściowe w kolumny siatki lub dowolny niestandardowy element nadrzędny, aby łatwo wymusić żądane szerokości.
<div class="row">
<div class="col-xs-2">
<input type="text" class="form-control" placeholder=".col-xs-2">
</div>
<div class="col-xs-3">
<input type="text" class="form-control" placeholder=".col-xs-3">
</div>
<div class="col-xs-4">
<input type="text" class="form-control" placeholder=".col-xs-4">
</div>
</div>guziki
Tagi przycisków
Użyj klas przycisków na elemencie <a>, <button>lub .<input>
<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">Użycie specyficzne dla kontekstu
Podczas gdy klasy przycisków mogą być używane na elementach <a>i <button>, tylko <button>elementy są obsługiwane w naszych komponentach nav i navbar.
Linki działające jak przyciski
Jeśli <a>elementy są używane jako przyciski – uruchamiające funkcje na stronie, zamiast przechodzenia do innego dokumentu lub sekcji na bieżącej stronie – należy im również nadać odpowiedni role="button".
Renderowanie w różnych przeglądarkach
W ramach najlepszych praktyk zdecydowanie zalecamy używanie <button>elementu, gdy tylko jest to możliwe, aby zapewnić dopasowanie renderowania w różnych przeglądarkach.
Między innymi w Firefoksie <30 jest błąd , który uniemożliwia nam ustawienie przycisków opartych line-heightna bazie <input>, przez co nie są one dokładnie dopasowane do wysokości innych przycisków w Firefoksie.
Opcje
Użyj dowolnej z dostępnych klas przycisków, aby szybko utworzyć przycisk ze stylem.
<!-- Standard button -->
<button type="button" class="btn btn-default">Default</button>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary</button>
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success</button>
<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">Info</button>
<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">Warning</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">Danger</button>
<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">Link</button>Nadawanie znaczenia technologiom wspomagającym
Użycie koloru w celu nadania znaczenia przyciskowi zapewnia jedynie wizualne wskazanie, które nie zostanie przekazane użytkownikom technologii wspomagających – takich jak czytniki ekranu. Upewnij się, że informacje oznaczone kolorem są oczywiste z samej treści (widoczny tekst przycisku) lub są zawarte w inny sposób, np. dodatkowy tekst ukryty z .sr-onlyklasą.
Rozmiary
Masz ochotę na większe czy mniejsze guziki? Dodaj .btn-lg, .btn-smlub .btn-xsdla dodatkowych rozmiarów.
<p>
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-default btn-lg">Large button</button>
</p>
<p>
<button type="button" class="btn btn-primary">Default button</button>
<button type="button" class="btn btn-default">Default button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-default btn-sm">Small button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-xs">Extra small button</button>
<button type="button" class="btn btn-default btn-xs">Extra small button</button>
</p>Utwórz przyciski na poziomie bloku — te, które obejmują całą szerokość elementu nadrzędnego — dodając .btn-block.
<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>Stan aktywny
Przyciski będą wyglądać na wciśnięte (z ciemniejszym tłem, ciemniejszym obramowaniem i cieniem), gdy są aktywne. W przypadku <button>elementów odbywa się to poprzez :active. W przypadku <a>elementów robimy to za pomocą .active. Możesz jednak użyć .activeon <button>s (i dołączyć aria-pressed="true"atrybut), jeśli musisz programowo zreplikować stan aktywny.
Element przycisku
Nie musisz dodawać :active, ponieważ jest to pseudoklasa, ale jeśli chcesz wymusić ten sam wygląd, dodaj .active.
<button type="button" class="btn btn-primary btn-lg active">Primary button</button>
<button type="button" class="btn btn-default btn-lg active">Button</button>Element kotwicy
Dodaj .activeklasę do <a>przycisków.
<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg active" role="button">Link</a>Stan niepełnosprawny
Spraw, aby przyciski wyglądały na niemożliwe do kliknięcia, przywracając je za pomocą opacity.
Element przycisku
Dodaj disabledatrybut do <button>przycisków.
<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>Kompatybilność z różnymi przeglądarkami
Jeśli dodasz disabledatrybut do <button>, Internet Explorer 9 i niższe wersje będą renderować tekst w kolorze szarym z paskudnym cieniem tekstu, którego nie możemy naprawić.
Element kotwicy
Dodaj .disabledzajęcia do<a>przycisków.
<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>Używamy .disabledtutaj jako klasy użytkowej, podobnej do zwykłej .activeklasy, więc nie jest wymagany przedrostek.
Zastrzeżenie dotyczące funkcjonalności łącza
Ta klasa używa pointer-events: nonedo próby wyłączenia funkcjonalności linków <a>s, ale ta właściwość CSS nie jest jeszcze ustandaryzowana i nie jest w pełni obsługiwana w Operze 18 i starszych ani w Internet Explorerze 11. Ponadto, nawet w przeglądarkach, które obsługują pointer-events: none, klawiatura nawigacja pozostaje nienaruszona, co oznacza, że widzący użytkownicy klawiatury i użytkownicy technologii wspomagających nadal będą mogli aktywować te łącza. Aby być bezpiecznym, użyj niestandardowego JavaScript, aby wyłączyć takie linki.
Obrazy
Responsywne obrazy
Obrazy w Bootstrap 3 mogą być responsywne dzięki dodaniu .img-responsiveklasy. Dotyczy to max-width: 100%;i height: auto;do display: block;obrazu, aby ładnie skalował się do elementu rodzica.
Aby wyśrodkować obrazy, które używają tej .img-responsiveklasy, użyj .center-blockzamiast .text-center. Zobacz sekcję klas pomocniczych, aby uzyskać więcej informacji na temat .center-blockużycia.
Obrazy SVG i IE 8-10
W przeglądarce Internet Explorer 8-10 obrazy SVG z .img-responsivemają nieproporcjonalną wielkość. Aby to naprawić, dodaj width: 100% \9;w razie potrzeby. Bootstrap nie stosuje tego automatycznie, ponieważ powoduje to komplikacje w przypadku innych formatów obrazów.
<img src="..." class="img-responsive" alt="Responsive image">Kształty obrazu
Dodaj klasy do <img>elementu, aby łatwo stylizować obrazy w dowolnym projekcie.
Kompatybilność z różnymi przeglądarkami
Pamiętaj, że Internet Explorer 8 nie obsługuje zaokrąglonych rogów.
<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">Zajęcia pomocnicze
Kolory kontekstowe
Przekazuj znaczenie kolorem dzięki garstce klas użytkowych akcentujących. Mogą one również zostać zastosowane do linków i przyciemniają się po najechaniu myszą, tak jak nasze domyślne style linków.
Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
Nullam id dolor id nibh ultricies vehicula ut id elit.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
Mecenas sed diam eget risus varius blandit sit amet non magna.
Etiam porta sem malesuada magna mollis euismod.
Donec ullamcorper nulla non metus auctor fringilla.
<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>Radzenie sobie ze specyfiką
Czasami klas nacisku nie można zastosować ze względu na specyfikę innego selektora. W większości przypadków wystarczającym obejściem jest zawinięcie tekstu w <span>klasę.
Nadawanie znaczenia technologiom wspomagającym
Użycie koloru w celu dodania znaczenia zapewnia jedynie wizualne wskazanie, które nie zostanie przekazane użytkownikom technologii wspomagających – takich jak czytniki ekranu. Upewnij się, że informacje oznaczone kolorem są albo oczywiste z samej treści (kolory kontekstowe są używane tylko w celu wzmocnienia znaczenia, które jest już obecne w tekście/znaczniku), albo są dołączone za pomocą alternatywnych środków, takich jak dodatkowy tekst ukryty z .sr-onlyklasą .
Tła kontekstowe
Podobnie jak w przypadku kontekstowych klas kolorów tekstu, łatwo ustaw tło elementu na dowolną klasę kontekstową. Komponenty zakotwiczenia przyciemniają się po najechaniu myszą, podobnie jak klasy tekstowe.
Nullam id dolor id nibh ultricies vehicula ut id elit.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
Mecenas sed diam eget risus varius blandit sit amet non magna.
Etiam porta sem malesuada magna mollis euismod.
Donec ullamcorper nulla non metus auctor fringilla.
<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>Radzenie sobie ze specyfiką
Czasami klas tła kontekstowego nie można zastosować ze względu na specyfikę innego selektora. W niektórych przypadkach wystarczającym obejściem jest zawinięcie zawartości elementu w <div>klasę.
Nadawanie znaczenia technologiom wspomagającym
Podobnie jak w przypadku kolorów kontekstowych , upewnij się, że wszelkie znaczenie przekazywane przez kolor jest również przekazywane w formacie, który nie jest wyłącznie prezentacyjny.
Zamknij ikonę
Użyj ogólnej ikony zamykania, aby odrzucić treści, takie jak modalne i alerty.
<button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>Karety
Użyj karetek, aby wskazać funkcjonalność i kierunek listy rozwijanej. Zauważ, że domyślna karetka zostanie automatycznie odwrócona w menu rozwijanych .
<span class="caret"></span>Szybkie pływanie
Przesuń element w lewo lub w prawo za pomocą klasy. !importantjest uwzględniony, aby uniknąć problemów ze specyficznością. Klasy mogą być również używane jako mixiny.
<div class="pull-left">...</div>
<div class="pull-right">...</div>// Classes
.pull-left {
float: left !important;
}
.pull-right {
float: right !important;
}
// Usage as mixins
.element {
.pull-left();
}
.another-element {
.pull-right();
}Wyśrodkuj bloki treści
Ustaw element na display: blocki wyśrodkuj za pomocą margin. Dostępny jako mixin i klasa.
<div class="center-block">...</div>// Class
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
// Usage as a mixin
.element {
.center-block();
}Clearfix
Łatwo wyczyść floats, dodając .clearfix do elementu nadrzędnego . Wykorzystuje micro clearfix spopularyzowany przez Nicolasa Gallaghera. Może być również używany jako mixin.
<!-- Usage as a class -->
<div class="clearfix">...</div>// Mixin itself
.clearfix() {
&:before,
&:after {
content: " ";
display: table;
}
&:after {
clear: both;
}
}
// Usage as a mixin
.element {
.clearfix();
}Pokazywanie i ukrywanie treści
Wymuś pokazanie lub ukrycie elementu ( w tym dla czytników ekranu ) za pomocą klas .showi . .hiddenTe klasy służą !importantdo unikania konfliktów swoistości, podobnie jak quick floats . Są dostępne tylko do przełączania poziomów bloku. Mogą być również używane jako mixiny.
.hidejest dostępny, ale nie zawsze wpływa na czytniki ekranu i jest przestarzały w wersji 3.0.1. Użyj .hiddenlub .sr-onlyzamiast.
Ponadto .invisiblemoże służyć do przełączania tylko widoczności elementu, co oznacza, że displaynie jest on modyfikowany i element może nadal wpływać na przepływ dokumentu.
<div class="show">...</div>
<div class="hidden">...</div>// Classes
.show {
display: block !important;
}
.hidden {
display: none !important;
}
.invisible {
visibility: hidden;
}
// Usage as mixins
.element {
.show();
}
.another-element {
.hidden();
}Czytnik ekranu i zawartość nawigacji za pomocą klawiatury
Ukryj element na wszystkich urządzeniach z wyjątkiem czytników ekranu za pomocą .sr-only. Połącz .sr-onlyz .sr-only-focusable, aby ponownie pokazać element, gdy jest on zaznaczony (np. przez użytkownika korzystającego tylko z klawiatury). Niezbędne do przestrzegania najlepszych praktyk dotyczących ułatwień dostępu . Mogą być również używane jako mixiny.
<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>// Usage as a mixin
.skip-navigation {
.sr-only();
.sr-only-focusable();
}Wymiana obrazu
Użyj .text-hideklasy lub domieszki, aby zastąpić zawartość tekstową elementu obrazem tła.
<h1 class="text-hide">Custom heading</h1>// Usage as a mixin
.heading {
.text-hide();
}Responsywne narzędzia
Aby przyspieszyć programowanie przyjazne dla urządzeń mobilnych, użyj tych klas narzędzi do wyświetlania i ukrywania treści według urządzenia za pomocą zapytania o media. Dołączone są również klasy użytkowe do przełączania treści po wydrukowaniu.
Staraj się używać ich w ograniczonym zakresie i unikaj tworzenia zupełnie różnych wersji tej samej witryny. Zamiast tego użyj ich do uzupełnienia prezentacji każdego urządzenia.
Dostępne klasy
Użyj jednej lub kombinacji dostępnych klas, aby przełączać zawartość między punktami przerwania widocznego obszaru.
| Bardzo małe urządzeniaTelefony (<768px) | Małe urządzeniaTablety (≥768 pikseli) | Średnie urządzeniaKomputery stacjonarne (≥992px) | Duże urządzeniaKomputery stacjonarne (≥1200px) | |
|---|---|---|---|---|
.visible-xs-* |
Widoczny | Ukryty | Ukryty | Ukryty |
.visible-sm-* |
Ukryty | Widoczny | Ukryty | Ukryty |
.visible-md-* |
Ukryty | Ukryty | Widoczny | Ukryty |
.visible-lg-* |
Ukryty | Ukryty | Ukryty | Widoczny |
.hidden-xs |
Ukryty | Widoczny | Widoczny | Widoczny |
.hidden-sm |
Widoczny | Ukryty | Widoczny | Widoczny |
.hidden-md |
Widoczny | Widoczny | Ukryty | Widoczny |
.hidden-lg |
Widoczny | Widoczny | Widoczny | Ukryty |
Od wersji 3.2.0 .visible-*-*klasy dla każdego punktu przerwania występują w trzech odmianach, po jednej dla każdej displaywartości właściwości CSS wymienionej poniżej.
| Grupa zajęć | CSSdisplay |
|---|---|
.visible-*-block |
display: block; |
.visible-*-inline |
display: inline; |
.visible-*-inline-block |
display: inline-block; |
Tak więc, na przykład dla bardzo małych ( xs) ekranów, dostępne .visible-*-*klasy to: .visible-xs-block, .visible-xs-inline, i .visible-xs-inline-block.
Klasy .visible-xs, .visible-sm, .visible-mdi .visible-lgrównież istnieją, ale są przestarzałe w wersji 3.2.0 . Są one w przybliżeniu równoważne z .visible-*-block, z wyjątkiem dodatkowych specjalnych przypadków przełączania <table>powiązanych elementów.
Zajęcia z druku
Podobnie jak w przypadku zwykłych klas responsywnych, używaj ich do przełączania treści do druku.
| Klasy | Przeglądarka | Wydrukować |
|---|---|---|
.visible-print-block.visible-print-inline.visible-print-inline-block |
Ukryty | Widoczny |
.hidden-print |
Widoczny | Ukryty |
Klasa .visible-printrównież istnieje, ale jest przestarzała w wersji 3.2.0. Jest to w przybliżeniu równoważne .visible-print-block, z wyjątkiem dodatkowych szczególnych przypadków dla <table>powiązanych elementów.
Przypadki testowe
Zmień rozmiar przeglądarki lub załaduj na różnych urządzeniach, aby przetestować responsywne klasy narzędzi.
Widoczne na...
Zielone znaczniki wyboru wskazują, że element jest widoczny w bieżącej rzutni.
Bardzo mały
✔ Widoczny na x-small
Mały
✔ Widoczny na małym
Średni
✔ Widoczny na średnim
Wielki
✔ Widoczny na dużym
✔ Widoczny na x-small i small
✔ Widoczny na średnich i dużych
✔ Widoczny na x-small i medium
✔ Widoczny na małych i dużych
✔ Widoczny na x-małym i dużym
✔ Widoczny na małych i średnich
Ukryty na...
Tutaj zielone znaczniki wskazują również, że element jest ukryty w bieżącej rzutni.
Korzystanie z Less
CSS Bootstrap jest zbudowany na Less, preprocesorze z dodatkowymi funkcjami, takimi jak zmienne, domieszki i funkcje do kompilowania CSS. Ci, którzy chcą używać źródłowych plików Less zamiast naszych skompilowanych plików CSS, mogą skorzystać z wielu zmiennych i domieszek, których używamy w całym frameworku.
Zmienne siatki i mixiny są omówione w sekcji Grid system .
Kompilowanie Bootstrapa
Bootstrapa można używać na co najmniej dwa sposoby: ze skompilowanym CSS lub ze źródłowymi plikami Less. Aby skompilować pliki Less, zapoznaj się z sekcją Wprowadzenie, aby dowiedzieć się, jak skonfigurować środowisko programistyczne do uruchamiania niezbędnych poleceń.
Narzędzia do kompilacji stron trzecich mogą działać z Bootstrap, ale nie są obsługiwane przez nasz główny zespół.
Zmienne
Zmienne są używane w całym projekcie jako sposób na scentralizowanie i współdzielenie często używanych wartości, takich jak kolory, odstępy lub stosy czcionek. Aby uzyskać pełny opis, zobacz Customizer .
Zabarwienie
Z łatwością korzystaj z dwóch schematów kolorów: skali szarości i semantyki. Kolory w skali szarości zapewniają szybki dostęp do często używanych odcieni czerni, podczas gdy semantyka obejmuje różne kolory przypisane do znaczących wartości kontekstowych.
@gray-darker: lighten(#000, 13.5%); // #222
@gray-dark: lighten(#000, 20%); // #333
@gray: lighten(#000, 33.5%); // #555
@gray-light: lighten(#000, 46.7%); // #777
@gray-lighter: lighten(#000, 93.5%); // #eee@brand-primary: darken(#428bca, 6.5%); // #337ab7
@brand-success: #5cb85c;
@brand-info: #5bc0de;
@brand-warning: #f0ad4e;
@brand-danger: #d9534f;Użyj dowolnych z tych zmiennych kolorów bez zmian lub ponownie przypisz je do bardziej znaczących zmiennych dla swojego projektu.
// Use as-is
.masthead {
background-color: @brand-primary;
}
// Reassigned variables in Less
@alert-message-background: @brand-info;
.alert {
background-color: @alert-message-background;
}Rusztowanie
Garść zmiennych do szybkiego dostosowywania kluczowych elementów szkieletu witryny.
// Scaffolding
@body-bg: #fff;
@text-color: @black-50;Spinki do mankietów
Z łatwością dopasuj swoje linki do odpowiedniego koloru, używając tylko jednej wartości.
// Variables
@link-color: @brand-primary;
@link-hover-color: darken(@link-color, 15%);
// Usage
a {
color: @link-color;
text-decoration: none;
&:hover {
color: @link-hover-color;
text-decoration: underline;
}
}Zauważ, że @link-hover-colorużywa funkcji, kolejnego niesamowitego narzędzia od Less, aby automagicznie stworzyć odpowiedni kolor najechania kursorem. Możesz użyć darken, lighten, saturatei desaturate.
Typografia
Z łatwością ustaw krój pisma, rozmiar tekstu, interlinię i inne elementy za pomocą kilku szybkich zmiennych. Bootstrap wykorzystuje je również w celu zapewnienia łatwych domieszek typograficznych.
@font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-family-serif: Georgia, "Times New Roman", Times, serif;
@font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
@font-family-base: @font-family-sans-serif;
@font-size-base: 14px;
@font-size-large: ceil((@font-size-base * 1.25)); // ~18px
@font-size-small: ceil((@font-size-base * 0.85)); // ~12px
@font-size-h1: floor((@font-size-base * 2.6)); // ~36px
@font-size-h2: floor((@font-size-base * 2.15)); // ~30px
@font-size-h3: ceil((@font-size-base * 1.7)); // ~24px
@font-size-h4: ceil((@font-size-base * 1.25)); // ~18px
@font-size-h5: @font-size-base;
@font-size-h6: ceil((@font-size-base * 0.85)); // ~12px
@line-height-base: 1.428571429; // 20/14
@line-height-computed: floor((@font-size-base * @line-height-base)); // ~20px
@headings-font-family: inherit;
@headings-font-weight: 500;
@headings-line-height: 1.1;
@headings-color: inherit;Ikony
Dwie szybkie zmienne do dostosowywania lokalizacji i nazwy pliku ikon.
@icon-font-path: "../fonts/";
@icon-font-name: "glyphicons-halflings-regular";składniki
Komponenty w całym Bootstrap wykorzystują niektóre domyślne zmienne do ustawiania wspólnych wartości. Oto najczęściej używane.
@padding-base-vertical: 6px;
@padding-base-horizontal: 12px;
@padding-large-vertical: 10px;
@padding-large-horizontal: 16px;
@padding-small-vertical: 5px;
@padding-small-horizontal: 10px;
@padding-xs-vertical: 1px;
@padding-xs-horizontal: 5px;
@line-height-large: 1.33;
@line-height-small: 1.5;
@border-radius-base: 4px;
@border-radius-large: 6px;
@border-radius-small: 3px;
@component-active-color: #fff;
@component-active-bg: @brand-primary;
@caret-width-base: 4px;
@caret-width-large: 5px;Mieszanki dostawców
Domieszki dostawców to domieszki, które pomagają obsługiwać wiele przeglądarek, włączając wszystkie odpowiednie przedrostki dostawców w skompilowanym CSS.
Rozmiar pudełka
Zresetuj model pudełka komponentów za pomocą jednego miksera. Aby zapoznać się z kontekstem, zapoznaj się z tym pomocnym artykułem Mozilli .
Mixin jest przestarzały w wersji 3.2.0 wraz z wprowadzeniem Autoprefixera. Aby zachować kompatybilność wsteczną, Bootstrap będzie nadal używał domieszki wewnętrznie aż do Bootstrap v4.
.box-sizing(@box-model) {
-webkit-box-sizing: @box-model; // Safari <= 5
-moz-box-sizing: @box-model; // Firefox <= 19
box-sizing: @box-model;
}Zaokrąglone rogi
Obecnie wszystkie nowoczesne przeglądarki obsługują właściwość bez prefiksu border-radius. W związku z tym nie ma .border-radius()domieszek, ale Bootstrap zawiera skróty do szybkiego zaokrąglania dwóch rogów po określonej stronie obiektu.
.border-top-radius(@radius) {
border-top-right-radius: @radius;
border-top-left-radius: @radius;
}
.border-right-radius(@radius) {
border-bottom-right-radius: @radius;
border-top-right-radius: @radius;
}
.border-bottom-radius(@radius) {
border-bottom-right-radius: @radius;
border-bottom-left-radius: @radius;
}
.border-left-radius(@radius) {
border-bottom-left-radius: @radius;
border-top-left-radius: @radius;
}Cienie w pudełku (upuszczanie)
Jeśli docelowi odbiorcy korzystają z najnowszych i najlepszych przeglądarek i urządzeń, pamiętaj, aby po prostu korzystać z box-shadowusługi samodzielnie. Jeśli potrzebujesz wsparcia dla starszych urządzeń z systemem Android (w wersji wcześniejszej 4) i iOS (w wersji starszej niż iOS 5), użyj przestarzałej mieszanki, aby wybrać wymagany -webkitprefiks.
Mixin jest przestarzały w wersji 3.1.0, ponieważ Bootstrap oficjalnie nie obsługuje przestarzałych platform, które nie obsługują standardowej właściwości. Aby zachować kompatybilność wsteczną, Bootstrap będzie nadal używał domieszki wewnętrznie aż do Bootstrap v4.
Upewnij się, że używasz rgba()kolorów w swoich cieniach, aby jak najlepiej komponowały się z tłem.
.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
-webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
box-shadow: @shadow;
}Przejścia
Wiele mieszanek dla elastyczności. Ustaw wszystkie informacje o przejściu za pomocą jednego lub określ osobne opóźnienie i czas trwania zgodnie z potrzebami.
Domieszki są przestarzałe w wersji 3.2.0 wraz z wprowadzeniem Autoprefixera. Aby zachować kompatybilność wsteczną, Bootstrap będzie nadal używał domieszek wewnętrznie aż do Bootstrap v4.
.transition(@transition) {
-webkit-transition: @transition;
transition: @transition;
}
.transition-property(@transition-property) {
-webkit-transition-property: @transition-property;
transition-property: @transition-property;
}
.transition-delay(@transition-delay) {
-webkit-transition-delay: @transition-delay;
transition-delay: @transition-delay;
}
.transition-duration(@transition-duration) {
-webkit-transition-duration: @transition-duration;
transition-duration: @transition-duration;
}
.transition-timing-function(@timing-function) {
-webkit-transition-timing-function: @timing-function;
transition-timing-function: @timing-function;
}
.transition-transform(@transition) {
-webkit-transition: -webkit-transform @transition;
-moz-transition: -moz-transform @transition;
-o-transition: -o-transform @transition;
transition: transform @transition;
}Transformacje
Obracaj, skaluj, przesuwaj (przesuwaj) lub pochylaj dowolny obiekt.
Domieszki są przestarzałe w wersji 3.2.0 wraz z wprowadzeniem Autoprefixera. Aby zachować kompatybilność wsteczną, Bootstrap będzie nadal używał domieszek wewnętrznie aż do Bootstrap v4.
.rotate(@degrees) {
-webkit-transform: rotate(@degrees);
-ms-transform: rotate(@degrees); // IE9 only
transform: rotate(@degrees);
}
.scale(@ratio; @ratio-y...) {
-webkit-transform: scale(@ratio, @ratio-y);
-ms-transform: scale(@ratio, @ratio-y); // IE9 only
transform: scale(@ratio, @ratio-y);
}
.translate(@x; @y) {
-webkit-transform: translate(@x, @y);
-ms-transform: translate(@x, @y); // IE9 only
transform: translate(@x, @y);
}
.skew(@x; @y) {
-webkit-transform: skew(@x, @y);
-ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
transform: skew(@x, @y);
}
.translate3d(@x; @y; @z) {
-webkit-transform: translate3d(@x, @y, @z);
transform: translate3d(@x, @y, @z);
}
.rotateX(@degrees) {
-webkit-transform: rotateX(@degrees);
-ms-transform: rotateX(@degrees); // IE9 only
transform: rotateX(@degrees);
}
.rotateY(@degrees) {
-webkit-transform: rotateY(@degrees);
-ms-transform: rotateY(@degrees); // IE9 only
transform: rotateY(@degrees);
}
.perspective(@perspective) {
-webkit-perspective: @perspective;
-moz-perspective: @perspective;
perspective: @perspective;
}
.perspective-origin(@perspective) {
-webkit-perspective-origin: @perspective;
-moz-perspective-origin: @perspective;
perspective-origin: @perspective;
}
.transform-origin(@origin) {
-webkit-transform-origin: @origin;
-moz-transform-origin: @origin;
-ms-transform-origin: @origin; // IE9 only
transform-origin: @origin;
}Animacje
Pojedynczy mixin do używania wszystkich właściwości animacji CSS3 w jednej deklaracji i innych mixinów dla indywidualnych właściwości.
Domieszki są przestarzałe w wersji 3.2.0 wraz z wprowadzeniem Autoprefixera. Aby zachować kompatybilność wsteczną, Bootstrap będzie nadal używał domieszek wewnętrznie aż do Bootstrap v4.
.animation(@animation) {
-webkit-animation: @animation;
animation: @animation;
}
.animation-name(@name) {
-webkit-animation-name: @name;
animation-name: @name;
}
.animation-duration(@duration) {
-webkit-animation-duration: @duration;
animation-duration: @duration;
}
.animation-timing-function(@timing-function) {
-webkit-animation-timing-function: @timing-function;
animation-timing-function: @timing-function;
}
.animation-delay(@delay) {
-webkit-animation-delay: @delay;
animation-delay: @delay;
}
.animation-iteration-count(@iteration-count) {
-webkit-animation-iteration-count: @iteration-count;
animation-iteration-count: @iteration-count;
}
.animation-direction(@direction) {
-webkit-animation-direction: @direction;
animation-direction: @direction;
}Nieprzezroczystość
Ustaw przezroczystość dla wszystkich przeglądarek i zapewnij filterrezerwę dla IE8.
.opacity(@opacity) {
opacity: @opacity;
// IE8 filter
@opacity-ie: (@opacity * 100);
filter: ~"alpha(opacity=@{opacity-ie})";
}Tekst zastępczy
Podaj kontekst dla kontrolek formularza w każdym polu.
.placeholder(@color: @input-color-placeholder) {
&::-moz-placeholder { color: @color; } // Firefox
&:-ms-input-placeholder { color: @color; } // Internet Explorer 10+
&::-webkit-input-placeholder { color: @color; } // Safari and Chrome
}Kolumny
Generuj kolumny za pomocą CSS w jednym elemencie.
.content-columns(@width; @count; @gap) {
-webkit-column-width: @width;
-moz-column-width: @width;
column-width: @width;
-webkit-column-count: @count;
-moz-column-count: @count;
column-count: @count;
-webkit-column-gap: @gap;
-moz-column-gap: @gap;
column-gap: @gap;
}Gradienty
Z łatwością zamień dowolne dwa kolory w gradient tła. Przejdź bardziej zaawansowany i ustaw kierunek, użyj trzech kolorów lub użyj gradientu promieniowego. Za pomocą jednego domieszki otrzymujesz wszystkie potrzebne składnie z prefiksami.
#gradient > .vertical(#333; #000);
#gradient > .horizontal(#333; #000);
#gradient > .radial(#333; #000);Możesz także określić kąt standardowego dwukolorowego gradientu liniowego:
#gradient > .directional(#333; #000; 45deg);Jeśli potrzebujesz gradientu w stylu fryzjerskim, to też jest łatwe. Wystarczy określić jeden kolor, a nałożymy półprzezroczysty biały pasek.
#gradient > .striped(#333; 45deg);Podnieś stawkę i zamiast tego użyj trzech kolorów. Ustaw pierwszy kolor, drugi kolor, zatrzymanie koloru drugiego koloru (wartość procentowa, np. 25%) i trzeci kolor za pomocą tych domieszek:
#gradient > .vertical-three-colors(#777; #333; 25%; #000);
#gradient > .horizontal-three-colors(#777; #333; 25%; #000);Heads-up! Jeśli kiedykolwiek będziesz musiał usunąć gradient, pamiętaj, aby usunąć wszystkie filterdodane przez Ciebie elementy specyficzne dla IE. Możesz to zrobić, używając .reset-filter()domieszki obok background-image: none;.
Mieszanki użytkowe
Domieszki użytkowe to domieszki, które łączą niepowiązane ze sobą właściwości CSS, aby osiągnąć określony cel lub zadanie.
Clearfix
Zapomnij o dodawaniu class="clearfix"do dowolnego elementu i zamiast tego dodaj .clearfix()domieszkę tam, gdzie to konieczne. Wykorzystuje micro clearfix od Nicolasa Gallaghera .
// Mixin
.clearfix() {
&:before,
&:after {
content: " ";
display: table;
}
&:after {
clear: both;
}
}
// Usage
.container {
.clearfix();
}Centrowanie w poziomie
Szybko wyśrodkuj dowolny element w jego rodzicu. Wymaga widthlub max-widthdo ustawienia.
// Mixin
.center-block() {
display: block;
margin-left: auto;
margin-right: auto;
}
// Usage
.container {
width: 940px;
.center-block();
}Pomocnicy doboru rozmiaru
Łatwiej określaj wymiary obiektu.
// Mixins
.size(@width; @height) {
width: @width;
height: @height;
}
.square(@size) {
.size(@size; @size);
}
// Usage
.image { .size(400px; 300px); }
.avatar { .square(48px); }Obszary tekstowe o zmiennym rozmiarze
Łatwo skonfiguruj opcje zmiany rozmiaru dla dowolnego obszaru tekstowego lub dowolnego innego elementu. Domyślnie normalne zachowanie przeglądarki ( both).
.resizable(@direction: both) {
// Options: horizontal, vertical, both
resize: @direction;
// Safari fix
overflow: auto;
}Obcinanie tekstu
Łatwo obcinaj tekst za pomocą wielokropka za pomocą jednego domieszki. Wymaga, aby element był blocklub był na inline-blockpoziomie.
// Mixin
.text-overflow() {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
// Usage
.branch-name {
display: inline-block;
max-width: 200px;
.text-overflow();
}Obrazy siatkówki
Określ dwie ścieżki obrazu i wymiary obrazu @1x, a Bootstrap dostarczy zapytanie o media @2x. Jeśli masz wiele obrazów do wyświetlenia, rozważ ręczne napisanie kodu CSS obrazu siatkówki w jednym zapytaniu o media.
.img-retina(@file-1x; @file-2x; @width-1x; @height-1x) {
background-image: url("@{file-1x}");
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and ( min--moz-device-pixel-ratio: 2),
only screen and ( -o-min-device-pixel-ratio: 2/1),
only screen and ( min-device-pixel-ratio: 2),
only screen and ( min-resolution: 192dpi),
only screen and ( min-resolution: 2dppx) {
background-image: url("@{file-2x}");
background-size: @width-1x @height-1x;
}
}
// Usage
.jumbotron {
.img-retina("/img/bg-1x.png", "/img/bg-2x.png", 100px, 100px);
}Korzystanie z Sassa
Chociaż Bootstrap jest zbudowany na Less, ma również oficjalny port Sass . Utrzymujemy go w osobnym repozytorium GitHub i obsługujemy aktualizacje za pomocą skryptu konwersji.
Co jest zawarte
Ponieważ port Sass ma osobne repozytorium i obsługuje nieco inną publiczność, zawartość projektu znacznie różni się od głównego projektu Bootstrap. Dzięki temu port Sass jest kompatybilny z jak największą liczbą systemów opartych na Sass.
| Ścieżka | Opis |
|---|---|
lib/ |
Kod klejnotu Rubiego (konfiguracja Sass, integracja z Railsami i Compassem) |
tasks/ |
Skrypty konwertera (włączanie upstream Less do Sass) |
test/ |
Testy kompilacji |
templates/ |
Manifest pakietu kompasu |
vendor/assets/ |
Sass, JavaScript i pliki czcionek |
Rakefile |
Zadania wewnętrzne, takie jak prowizja i konwersja |
Odwiedź repozytorium GitHub portu Sass, aby zobaczyć te pliki w akcji.
Instalacja
Aby uzyskać informacje o tym, jak zainstalować i używać Bootstrap for Sass, zapoznaj się z repozytorium GitHub readme . Jest to najbardziej aktualne źródło i zawiera informacje do użytku z projektami Rails, Compass i standardowymi projektami Sass.