CSS
Globalne ustawienia CSS, podstawowe elementy HTML stylizowane i wzbogacone o rozszerzalne klasy oraz zaawansowany system siatki.
Globalne ustawienia CSS, podstawowe elementy HTML stylizowane i wzbogacone o rozszerzalne klasy oraz zaawansowany system siatki.
Poznaj najważniejsze elementy infrastruktury Bootstrap, w tym nasze podejście do lepszego, szybszego i silniejszego tworzenia stron internetowych.
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>
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=no
do 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">
Bootstrap ustawia podstawowe globalne style wyświetlania, typografii i łączy. W szczególności:
background-color: #fff;
nabody
@font-family-base
, @font-size-base
, i @line-height-base
atrybutów jako naszej bazy typograficznej@link-color
i zastosuj podkreślenia linków tylko na:hover
Te style można znaleźć w scaffolding.less
.
Aby usprawnić renderowanie w różnych przeglądarkach, używamy Normalize.css , projektu autorstwa Nicolasa Gallaghera i Jonathana Neala .
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 padding
i nie tylko, żaden pojemnik nie jest możliwy do zagnieżdżenia.
Użyj .container
dla responsywnego kontenera o stałej szerokości.
<div class="container">
...
</div>
Użyj .container-fluid
dla kontenera o pełnej szerokości, obejmującego całą szerokość widocznego obszaru.
<div class="container-fluid">
...
</div>
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 .
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:
.container
(stała szerokość) lub .container-fluid
(pełna szerokość) w celu prawidłowego wyrównania i wypełnienia..row
i, .col-xs-4
są dostępne do szybkiego tworzenia układów siatek. Mniej domieszek może być również użytych do bardziej semantycznych układów.padding
. To dopełnienie jest przesunięte w wierszach dla pierwszej i ostatniej kolumny o ujemny margines na .row
s..col-xs-4
..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.
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-width
aby 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) { ... }
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 |
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
.
<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>
Zmień dowolny układ siatki o stałej szerokości w układ o pełnej szerokości, zmieniając najbardziej zewnętrzny .container
na .container-fluid
.
<div class="container-fluid">
<div class="row">
...
</div>
</div>
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.
<!-- 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>
Buduj na poprzednim przykładzie, tworząc jeszcze bardziej dynamiczne i zaawansowane układy z .col-sm-*
klasami tabletów.
<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>
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.
<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>
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 .clearfix
i naszych responsywnych klas narzędziowych .
<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>
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-4
porusza się .col-md-4
po czterech kolumnach.
<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-0
klasami.
<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>
Aby zagnieździć zawartość z domyślną siatką, dodaj nową .row
i 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).
<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>
Łatwo zmieniaj kolejność naszych wbudowanych kolumn siatki za pomocą klas modyfikujących .col-md-push-*
i ..col-md-pull-*
<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>
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 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;
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));
}
}
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>
Dostępne są wszystkie nagłówki HTML <h1>
od <h6>
. .h1
dostępne są .h6
ró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 .small
klasy.
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>
Globalna wartość domyślna Bootstrapa font-size
to 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>
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>
Skala typograficzna opiera się na dwóch zmiennych Less w zmiennych.less : @font-size-base
i @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.
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.
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>
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>
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>
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.
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-size
dla elementów zagnieżdżonych <small>
.
Możesz alternatywnie użyć elementu wbudowanego .small
w 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>
Do podkreślania fragmentu tekstu grubszą czcionką.
Poniższy fragment tekstu jest renderowany jako tekst pogrubiony .
<strong>rendered as bold text</strong>
Za podkreślenie fragmentu tekstu kursywą.
Poniższy fragment tekstu jest renderowany kursywą .
<em>rendered as italicized text</em>
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.
Ł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>
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>
Stylizowana implementacja elementu HTML <abbr>
dla skrótów i akronimów, aby wyświetlić rozszerzoną wersję po najechaniu myszą. Skróty z title
atrybutem 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 atrybutu słowa to attr .
<abbr title="attribute">attr</abbr>
Dodaj .initialism
do 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>
Przedstaw dane kontaktowe najbliższego przodka lub całej pracy. Zachowaj formatowanie, kończąc wszystkie wiersze na <br>
.
<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>
Do cytowania bloków treści z innego źródła w Twoim dokumencie.
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>
Zmiany stylu i treści dla prostych wariacji normy <blockquote>
.
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>
Dodaj .blockquote-reverse
dla cytatu blokowego z treścią wyrównaną do prawej.
<blockquote class="blockquote-reverse">
...
</blockquote>
Lista pozycji, w których kolejność wyraźnie nie ma znaczenia.
<ul>
<li>...</li>
</ul>
Lista pozycji, w których kolejność ma znaczenie.
<ol>
<li>...</li>
</ol>
Usuń domyślny list-style
i 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.
<ul class="list-unstyled">
<li>...</li>
</ul>
Umieść wszystkie elementy listy w jednej linii z display: inline-block;
lekkim wypełnieniem.
<ul class="list-inline">
<li>...</li>
</ul>
Lista terminów wraz z powiązanymi opisami.
<dl>
<dt>...</dt>
<dd>...</dd>
</dl>
Ułóż terminy i opisy <dl>
obok siebie. Rozpoczyna się skumulowany jak domyślny <dl>
s, ale gdy pasek nawigacyjny się rozszerza, zrób to.
<dl class="dl-horizontal">
<dt>...</dt>
<dd>...</dd>
</dl>
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.
Zawijaj wbudowane fragmenty kodu za pomocą <code>
.
<section>
powinien być opakowany jako inline.
For example, <code><section></code> should be wrapped as inline.
Użyj , <kbd>
aby wskazać dane wejściowe, które są zwykle wprowadzane za pomocą klawiatury.
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>
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-scrollable
klasę, która ustawi maksymalną wysokość na 350px i zapewni pasek przewijania na osi y.
Do wskazania zmiennych użyj <var>
znacznika.
y = m x + b
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
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>
W przypadku podstawowych stylów — lekkie wypełnienie i tylko poziome dzielniki — dodaj klasę bazową .table
do 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>
Służy .table-striped
do dodawania pasków zebry do dowolnego wiersza tabeli w <tbody>
.
Tabele w paski są stylizowane za pomocą :nth-child
selektora 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>
Dodaj .table-bordered
dla 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>
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>
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>
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>
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-only
klasie.
Twórz responsywne tabele, zawijając dowolne .table
, .table-responsive
aby 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.
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 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>
Poszczególne kontrolki formularzy automatycznie otrzymują pewien globalny styl. Wszystkie elementy tekstowe <input>
, <textarea>
i <select>
z .form-control
są width: 100%;
domyślnie ustawione na. Owiń etykiety i elementy sterujące, .form-group
aby 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 bezpośrednio z grupami wejściowymi . Zamiast tego zagnieżdż grupę wejściową wewnątrz grupy formularzy.
Dodaj .form-inline
do 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.
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.
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-only
klasy. Istnieją dalsze alternatywne metody umieszczania etykiety dla technologii wspomagających, takie jak aria-label
atrybut lub aria-labelledby
. title
Jeśli żaden z nich nie występuje, czytniki ekranu mogą skorzystać z placeholder
atrybutu, jeśli jest on obecny, ale należy pamiętać, że nie zaleca się używania placeholder
go 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>
Użyj predefiniowanych klas siatki Bootstrap, aby wyrównać etykiety i grupy kontrolek formularza w układzie poziomym, dodając .form-horizontal
do formularza (co nie musi być <form>
). W ten sposób zmienia .form-group
się 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>
Przykłady standardowych kontrolek formularza obsługiwanych w przykładowym układzie formularza.
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
.
Dane wejściowe będą w pełni stylizowane tylko wtedy, gdy type
zostaną prawidłowo zadeklarowane.
<input type="text" class="form-control" placeholder="Text input">
Aby dodać zintegrowany tekst lub przyciski przed i/lub za dowolnym tekstem <input>
, sprawdź komponent grupy wejściowej .
Formant formularza, który obsługuje wiele wierszy tekstu. W razie potrzeby zmień rows
atrybut.
<textarea class="form-control" rows="3"></textarea>
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ć .disabled
klasę do elementu nadrzędnego .radio
, .radio-inline
, .checkbox
lub .checkbox-inline
.
<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>
Użyj klas .checkbox-inline
lub .radio-inline
na 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>
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>
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-radius
wł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 multiple
atrybutem 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>
Gdy musisz umieścić zwykły tekst obok etykiety formularza w formularzu, użyj .form-control-static
klasy 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>
Usuwamy domyślne outline
style w niektórych kontrolkach formularzy i stosujemy box-shadow
w ich miejsce dla :focus
.
:focus
Stan demonstracyjnyPowyższe przykładowe dane wejściowe używają niestandardowych stylów w naszej dokumentacji, aby zademonstrować :focus
stan na .form-control
.
Dodaj disabled
atrybut logiczny do danych wejściowych, aby zapobiec interakcji użytkownika. Nieaktywne wejścia są jaśniejsze i dodają not-allowed
kursor.
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
Dodaj disabled
atrybut do a, <fieldset>
aby wyłączyć wszystkie kontrolki <fieldset>
naraz.
<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
Chociaż Bootstrap zastosuje te style we wszystkich przeglądarkach, Internet Explorer 11 i starsze wersje nie obsługują w pełni disabled
atrybutu 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>
Dodaj readonly
atrybut 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 na poziomie bloku dla kontrolek formularza.
Tekst pomocy powinien być jawnie powiązany z kontrolką formularza, do której się odnosi przy użyciu aria-describedby
atrybutu. 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>
Bootstrap zawiera style walidacji dla stanów błędu, ostrzeżenia i powodzenia w kontrolkach formularza. Aby użyć, dodaj .has-warning
, .has-error
lub .has-success
do elementu nadrzędnego. Każdy .control-label
, .form-control
i .help-block
w tym elemencie otrzyma style walidacji.
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-only
klasy - 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>
Możesz także dodać opcjonalne ikony opinii, dodając .has-feedback
ikonę i odpowiednią ikonę.
<input class="form-control">
Ikony opinii działają tylko z elementami tekstowymi .
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-only
klasie. Jeśli musisz zrezygnować z etykiet, dostosuj top
wartość ikony opinii. W przypadku grup wejściowych dostosuj right
wartość do odpowiedniej wartości piksela w zależności od szerokości dodatku.
Aby mieć pewność, że technologie wspomagające — takie jak czytniki ekranu — prawidłowo przekazują znaczenie ikony, należy dołączyć do .sr-only
klasy 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-only
tekstu 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>
<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>
.sr-only
etykietamiJeśli używasz .sr-only
klasy do ukrywania kontrolki formularza <label>
(zamiast używania innych opcji etykietowania, takich jak aria-label
atrybut), Bootstrap automatycznie dostosuje położenie ikony po jej dodaniu.
<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>
Ustaw wysokości za pomocą klas, takich jak .input-lg
, i ustaw szerokości za pomocą klas kolumn siatki, takich jak .col-lg-*
.
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>
Szybko zmieniaj rozmiary etykiet i kontrolek formularzy .form-horizontal
, dodając .form-group-lg
lub .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>
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>
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">
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.
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"
.
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-height
na bazie <input>
, przez co nie są one dokładnie dopasowane do wysokości innych przycisków w Firefoksie.
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>
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-only
klasą.
Masz ochotę na większe czy mniejsze guziki? Dodaj .btn-lg
, .btn-sm
lub .btn-xs
dla 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>
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ć .active
on <button>
s (i dołączyć aria-pressed="true"
atrybut), jeśli musisz programowo zreplikować stan aktywny.
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>
Dodaj .active
klasę 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>
Spraw, aby przyciski wyglądały na niemożliwe do kliknięcia, przywracając je za pomocą opacity
.
Dodaj disabled
atrybut 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>
Jeśli dodasz disabled
atrybut 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ć.
Dodaj .disabled
zaję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 .disabled
tutaj jako klasy użytkowej, podobnej do zwykłej .active
klasy, więc nie jest wymagany przedrostek.
Ta klasa używa pointer-events: none
do 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 w Bootstrap 3 mogą być responsywne dzięki dodaniu .img-responsive
klasy. 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-responsive
klasy, użyj .center-block
zamiast .text-center
. Zobacz sekcję klas pomocniczych, aby uzyskać więcej informacji na temat .center-block
użycia.
W przeglądarce Internet Explorer 8-10 obrazy SVG z .img-responsive
mają 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">
Dodaj klasy do <img>
elementu, aby łatwo stylizować obrazy w dowolnym projekcie.
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">
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>
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ę.
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-only
klasą .
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>
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ę.
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.
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>
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>
Przesuń element w lewo lub w prawo za pomocą klasy. !important
jest 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();
}
Ustaw element na display: block
i 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();
}
Łatwo wyczyść float
s, 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();
}
Wymuś pokazanie lub ukrycie elementu ( w tym dla czytników ekranu ) za pomocą klas .show
i . .hidden
Te klasy służą !important
do 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.
.hide
jest dostępny, ale nie zawsze wpływa na czytniki ekranu i jest przestarzały w wersji 3.0.1. Użyj .hidden
lub .sr-only
zamiast.
Ponadto .invisible
może służyć do przełączania tylko widoczności elementu, co oznacza, że display
nie 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();
}
Ukryj element na wszystkich urządzeniach z wyjątkiem czytników ekranu za pomocą .sr-only
. Połącz .sr-only
z .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();
}
Użyj .text-hide
klasy 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();
}
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.
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 display
wartoś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-md
i .visible-lg
ró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.
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-print
ró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.
Zmień rozmiar przeglądarki lub załaduj na różnych urządzeniach, aby przetestować responsywne klasy narzędzi.
Zielone znaczniki wyboru wskazują, że element jest widoczny w bieżącej rzutni.
Tutaj zielone znaczniki wskazują również, że element jest ukryty w bieżącej rzutni.
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 .
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 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 .
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;
}
Garść zmiennych do szybkiego dostosowywania kluczowych elementów szkieletu witryny.
// Scaffolding
@body-bg: #fff;
@text-color: @black-50;
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-color
używa funkcji, kolejnego niesamowitego narzędzia od Less, aby automagicznie stworzyć odpowiedni kolor najechania kursorem. Możesz użyć darken
, lighten
, saturate
i desaturate
.
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;
Dwie szybkie zmienne do dostosowywania lokalizacji i nazwy pliku ikon.
@icon-font-path: "../fonts/";
@icon-font-name: "glyphicons-halflings-regular";
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;
Domieszki dostawców to domieszki, które pomagają obsługiwać wiele przeglądarek, włączając wszystkie odpowiednie przedrostki dostawców w skompilowanym CSS.
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;
}
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;
}
Jeśli docelowi odbiorcy korzystają z najnowszych i najlepszych przeglądarek i urządzeń, pamiętaj, aby po prostu korzystać z box-shadow
usł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 -webkit
prefiks.
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;
}
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;
}
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;
}
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;
}
Ustaw przezroczystość dla wszystkich przeglądarek i zapewnij filter
rezerwę dla IE8.
.opacity(@opacity) {
opacity: @opacity;
// IE8 filter
@opacity-ie: (@opacity * 100);
filter: ~"alpha(opacity=@{opacity-ie})";
}
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
}
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;
}
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 filter
dodane przez Ciebie elementy specyficzne dla IE. Możesz to zrobić, używając .reset-filter()
domieszki obok background-image: none;
.
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.
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();
}
Szybko wyśrodkuj dowolny element w jego rodzicu. Wymaga width
lub max-width
do ustawienia.
// Mixin
.center-block() {
display: block;
margin-left: auto;
margin-right: auto;
}
// Usage
.container {
width: 940px;
.center-block();
}
Ł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); }
Ł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;
}
Łatwo obcinaj tekst za pomocą wielokropka za pomocą jednego domieszki. Wymaga, aby element był block
lub był na inline-block
poziomie.
// Mixin
.text-overflow() {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
// Usage
.branch-name {
display: inline-block;
max-width: 200px;
.text-overflow();
}
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);
}
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.
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.
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.