Podstawowy CSS

Na szczycie rusztowania podstawowe elementy HTML są stylizowane i wzbogacane o rozszerzalne klasy, aby zapewnić świeży, spójny wygląd.

Nagłówki i treść tekstu

Skala typograficzna

Cała siatka typograficzna oparta jest na dwóch zmiennych Less w naszym pliku Variable.less: @baseFontSizei @baseLineHeight. Pierwszy to podstawowy rozmiar czcionki używany w całym tekście, a drugi to podstawowa wysokość linii.

Używamy tych zmiennych i trochę matematyki do tworzenia marginesów, dopełnień i wysokości linii wszystkich naszych typów i nie tylko.

Przykładowy tekst treści

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.

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.

h1. Nagłówek 1

h2. Nagłówek 2

h3. Nagłówek 3

h4. Nagłówek 4

h5. Nagłówek 5
h6. Nagłówek 6

Nacisk, adres i skrót

Element Stosowanie Opcjonalny
<strong> Za podkreślenie fragmentu tekstu z ważnymi Nic
<em> Do podkreślania fragmentu tekstu ze stresem Nic
<abbr> Zawija skróty i akronimy, aby wyświetlić rozszerzoną wersję po najechaniu myszą

Uwzględnij opcjonalny titleatrybut dla tekstu rozszerzonego

Użyj .initialismclass dla skrótów pisanych wielkimi literami.
<address> Aby uzyskać informacje kontaktowe najbliższego przodka lub całej pracy Zachowaj formatowanie, kończąc wszystkie wiersze znakiem<br>

Używanie nacisku

Fusce dapibus , tellus ac cursus commodo , tortor mauris condimentum nibh , ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero, pharetra augue.

Uwaga: Zapraszam do używania <b>i <i>w HTML5, ale ich użycie nieco się zmieniło. <b>ma na celu podkreślenie słów lub fraz bez przekazywania dodatkowego znaczenia, podczas gdy <i>dotyczy głównie głosu, terminów technicznych itp.

Przykładowe adresy

Oto dwa przykłady wykorzystania <address>tagu:

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
Imię i nazwisko
[email protected]

Przykładowe skróty

Skróty z titleatrybutem mają dolną granicę z jasnymi kropkami i kursor pomocy po najechaniu myszą. Daje to użytkownikom dodatkową wskazówkę, że coś zostanie pokazane po najechaniu myszą.

Dodaj initialismklasę do skrótu, aby zwiększyć harmonię typograficzną, nadając jej nieco mniejszy rozmiar tekstu.

HTML to najlepsza rzecz od czasów krojonego chleba.

Skrót atrybutu słowa to attr .

Cytaty blokowe

Element Stosowanie Opcjonalny
<blockquote> Element blokowy do cytowania treści z innego źródła

Dodaj citeatrybut dla źródłowego adresu URL

Użyj .pull-lefti .pull-rightklasy dla opcji pływających
<small> Opcjonalny element do dodania cytatu skierowanego do użytkownika, zazwyczaj autora z tytułem pracy Umieść <cite>wokół tytułu lub nazwy źródła

Aby dołączyć cytat blokowy, owiń <blockquote>dowolny kod HTML jako cytat. W przypadku prostych cytatów zalecamy <p>.

Dołącz opcjonalny <small>element, aby zacytować swoje źródło, a otrzymasz &mdash;przed nim myślnik do celów stylizacji.

  1. <cytat blokowy>
  2. <p> Lorem ipsum dolor sit amet, konsektetur adipisująca elita. Liczba całkowita posuere erat a ante venenatis. </p>
  3. <small> Ktoś sławny </small>
  4. </blockquote>

Przykładowe cytaty blokowe

Domyślne cytaty mają następujący styl:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Liczba całkowita posuere erat a ante venenatis.

Ktoś sławny w Body of work

Aby umieścić cytat blokowy po prawej stronie, dodaj class="pull-right":

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Liczba całkowita posuere erat a ante venenatis.

Ktoś sławny w Body of work

Listy

Niezamówiony

<ul>

  • 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

Bez stylu

<ul class="unstyled">

  • 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

Zamówione

<ol>

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipisująca elita
  3. Integer molestie lorem w massa
  4. Facilisis w pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem

Opis

<dl>

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.

Opis poziomy

<dl class="dl-horizontal">

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.

Heads-up! Poziome listy opisów skrócą terminy, które są zbyt długie, aby zmieściły się w lewej kolumnie text-overflow. W węższych rzutniach zmienią się na domyślny układ piętrowy.

W linii

Zawijaj wbudowane fragmenty kodu za pomocą <code>.

  1. Na przykład <code> sekcja </ code > powinna być opakowana jako inline .

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>
  1. <pre>
  2. <p>Przykładowy tekst tutaj...</p>
  3. </pre>

Uwaga: pamiętaj, aby umieścić kod w <pre>tagach jak najbliżej lewej strony; wyrenderuje wszystkie karty.

Możesz opcjonalnie dodać .pre-scrollableklasę, która ustawi maksymalną wysokość na 350px i zapewni pasek przewijania na osi y.

Upiększ Google

Weź ten sam <pre>element i dodaj dwie opcjonalne klasy, aby uzyskać ulepszone renderowanie.

  1. <p> Przykładowy tekst tutaj... </p>
  1. <pre class = "ładny druk
  2. płótno" >
  3. <p>Przykładowy tekst tutaj...</p>
  4. </pre>

Pobierz google-code-prettify i zobacz plik Readme, aby dowiedzieć się, jak używać.

Znaczniki tabeli

Etykietka Opis
<table> Element opakowujący do wyświetlania danych w formacie tabelarycznym
<thead> Element kontenera dla wierszy nagłówka tabeli ( <tr>) do etykietowania kolumn tabeli
<tbody> Element kontenera dla wierszy tabeli ( <tr>) w treści tabeli
<tr> Element kontenera dla zestawu komórek tabeli ( <td>lub <th>), który pojawia się w jednym wierszu
<td> Domyślna komórka tabeli
<th> Specjalna komórka tabeli dla etykiet kolumn (lub wierszy, w zależności od zakresu i położenia)
Musi być użyta w obrębie a<thead>
<caption> Opis lub podsumowanie zawartości tabeli, szczególnie przydatne dla czytników ekranu
  1. <tabela>
  2. <głowa>
  3. <tr>
  4. <th> </th>
  5. <th> </th>
  6. </tr>
  7. </head>
  8. <tbody>
  9. <tr>
  10. <td> </td>
  11. <td> </td>
  12. </tr>
  13. </tbody>
  14. </table>

Opcje stołu

Nazwa Klasa Opis
Domyślna Nic Bez stylów, tylko kolumny i wiersze
Podstawowy .table Tylko poziome linie między rzędami
Graniczy .table-bordered Zaokrągla rogi i dodaje zewnętrzną granicę
Zebra-pasek .table-striped Dodaje jasnoszary kolor tła do nieparzystych wierszy (1, 3, 5 itd.)
Skondensowany .table-condensed Przecina pionowe dopełnienie na pół, od 8px do 4px, w obrębie wszystkich tdi thelementów

Przykładowe tabele

1. Domyślne style tabeli

Tabele są automatycznie stylizowane tylko z kilkoma obramowaniami, aby zapewnić czytelność i zachować strukturę. W wersji 2.0 .tableklasa jest wymagana.

  1. < klasa tabeli = "tabela" >
  2. </table>
# Imię Nazwisko Nazwa użytkownika
1 Ocena Otto @mdo
2 Jakub Thornton @tłuszcz
3 Larry ptak @świergot

2. Stół w paski

Wykreuj swoje stoły, dodając paski zebry — po prostu dodaj .table-stripedklasę.

Uwaga: tabele w paski używają :nth-childselektora CSS i nie są dostępne w IE7-IE8.

  1. <table class = "table table-striped" >
  2. </table>
# Imię Nazwisko Nazwa użytkownika
1 Ocena Otto @mdo
2 Jakub Thornton @tłuszcz
3 Larry ptak @świergot

3. Stół z obramowaniem

Dodaj obramowania wokół całego stołu i zaokrąglone rogi ze względów estetycznych.

  1. <table class = "tabela z obramowaniem tabeli" >
  2. </table>
# Imię Nazwisko Nazwa użytkownika
1 Ocena Otto @mdo
Ocena Otto @oczywiście
2 Jakub Thornton @tłuszcz
3 Larry ptak @świergot

4. Skondensowany stół

Spraw, aby Twoje tabele były bardziej zwarte, dodając .table-condensedklasę, aby zmniejszyć wypełnienie komórek tabeli o połowę (od 8 do 4 pikseli).

  1. <table class = "tabela skondensowana" >
  2. </table>
# Imię Nazwisko Nazwa użytkownika
1 Ocena Otto @mdo
2 Jakub Thornton @tłuszcz
3 Larry ptak @świergot

5. Połącz je wszystkie!

Możesz łączyć dowolne klasy stołów, aby uzyskać inny wygląd, korzystając z dowolnej z dostępnych klas.

  1. <table class = "tabela w paski tabela-obramowana tabela-skondensowana" >
  2. ...
  3. </table>
Pełne imię i nazwisko
# Imię Nazwisko Nazwa użytkownika
1 Ocena Otto @mdo
2 Jakub Thornton @tłuszcz
3 Larry ptak @świergot

Elastyczny HTML i CSS

Najlepszą częścią formularzy w Bootstrap jest to, że wszystkie dane wejściowe i kontrolki wyglądają świetnie, niezależnie od tego, jak je zbudujesz w swoich znacznikach. Nie jest wymagany zbędny kod HTML, ale dostarczamy wzorce dla tych, którzy tego potrzebują.

Bardziej skomplikowane układy zawierają zwięzłe i skalowalne klasy ułatwiające stylizację i wiązanie wydarzeń, dzięki czemu jesteś objęty na każdym kroku.

W zestawie cztery układy

Bootstrap obsługuje cztery typy układów formularzy:

  • Pionowa (domyślna)
  • Szukaj
  • W linii
  • Poziomy

Różne typy układów formularzy wymagają pewnych zmian w znacznikach, ale same kontrolki pozostają i zachowują się tak samo.

Stany kontrolne i nie tylko

Formularze Bootstrap zawierają style dla wszystkich podstawowych kontrolek formularza, takich jak input, textarea i select, których można się spodziewać. Ale zawiera również wiele niestandardowych komponentów, takich jak dołączane i dołączane dane wejściowe oraz obsługa list pól wyboru.

Stany, takie jak błąd, ostrzeżenie i sukces, są uwzględniane dla każdego typu kontrolki formularza. Dołączone są również style dla wyłączonych kontrolek.

Cztery rodzaje form

Bootstrap zapewnia proste znaczniki i style dla czterech stylów popularnych formularzy internetowych.

Nazwa Klasa Opis
Pionowa (domyślna) .form-vertical (nie wymagane) Ułożone, wyrównane do lewej etykiety nad elementami sterującymi
W linii .form-inline Etykieta wyrównana do lewej i wbudowane bloki sterujące zapewniają kompaktowy styl
Szukaj .form-search Bardzo zaokrąglone wprowadzanie tekstu dla typowej estetyki wyszukiwania
Poziomy .form-horizontal Unieś etykiety wyrównane do lewej i do prawej w tym samym wierszu, co elementy sterujące

Przykładowe formularze używające tylko kontrolek formularza, bez dodatkowych znaczników

Podstawowa forma

Inteligentne i lekkie ustawienia domyślne bez dodatkowych znaczników.

Przykładowy tekst pomocy na poziomie bloku tutaj.

  1. < klasa formularza = "dobrze" >
  2. <label> Nazwa etykiety </label>
  3. <input type = „text” class = „span3” symbol zastępczy = „Wpisz coś…” >
  4. <span class = "help-block" > Przykładowy tekst pomocy na poziomie bloku tutaj. </span>
  5. <label class = "pole wyboru" >
  6. <input type = "checkbox" > Sprawdź mnie
  7. </label>
  8. <button type = "prześlij" class = "btn" > Prześlij </button>
  9. </form>

Formularz wyszukiwania

Dodaj .form-searchdo formularza i .search-querydo input.

  1. <form class = "well form-search" >
  2. <input type = „text” class = „input-medium search-query” >
  3. <button type = "submit" class = "btn" > Szukaj </button>
  4. </form>

Formularz wbudowany

Dodaj .form-inline, aby doprecyzować wyrównanie w pionie i odstępy kontrolek formularza.

  1. <form class = "well form-inline" >
  2. <input type = „text” class = „input-small” symbol zastępczy = „Email” >
  3. <input type = „password” class = „input-small” symbol zastępczy = „Password” >
  4. <label class = "pole wyboru" >
  5. <input type = "checkbox" > Zapamiętaj mnie
  6. </label>
  7. <button type = "submit" class = "btn" > Zaloguj się </button>
  8. </form>

Formy poziome

Po prawej stronie pokazane są wszystkie obsługiwane przez nas domyślne kontrolki formularzy. Oto lista punktowana:

  • wprowadzanie tekstu (tekst, hasło, e-mail itp.)
  • pole wyboru
  • radio
  • Wybierz
  • wielokrotny wybór
  • plik wejściowy
  • obszar tekstowy

Oprócz dowolnego tekstu, wszelkie dane wejściowe oparte na tekście HTML5 wyglądają tak.

Przykładowy znacznik

Biorąc pod uwagę powyższy przykładowy układ formularza, oto znacznik skojarzony z pierwszym wejściem i grupą kontrolną. Do stylizacji wymagane są wszystkie klasy .control-group, .control-label, i ..controls

  1. < klasa formularza = "forma-pozioma" >
  2. <zestaw pól>
  3. <legend> Tekst legendy </legend>
  4. <div class = "grupa kontrolna" >
  5. <label class = "etykieta-kontrolna" for = "input01" > Wprowadzanie tekstu </label>
  6. <div class = "kontrole" >
  7. <input type = „text” class = „input-xlarge” id = „input01” >
  8. <p class = "help-block" > Pomocniczy tekst pomocy </p>
  9. </div>
  10. </div>
  11. </fieldset>
  12. </form>

Stany kontroli formularzy

Bootstrap zawiera style dla skoncentrowanych i disabledstanów obsługiwanych przez przeglądarkę. Usuwamy domyślny Webkit outlinei stosujemy box-shadoww jego miejsce :focus.


Walidacja formularza

Zawiera również style walidacji błędów, ostrzeżeń i sukcesu. Aby użyć, dodaj klasę błędu do otoczenia .control-group.

  1. <zestaw pól
  2. class = "błąd grupy kontrolnej" >
  3. </fieldset>
Jakaś wartość tutaj
Coś mogło pójść nie tak
Popraw błąd
Hurra!
Hurra!

Rozszerzenie kontroli formularza

Dołącz i dołącz dane wejściowe

Grupy danych wejściowych — z dołączonym lub dołączonym tekstem — zapewniają łatwy sposób na zapewnienie większego kontekstu wprowadzanym tekstom. Świetnymi przykładami są znak @ dla nazw użytkowników Twittera lub $ dla finansów.


Pola wyboru i radia

Do wersji 1.4 Bootstrap wymagał dodatkowych znaczników wokół pól wyboru i radia, aby je układać. Teraz jest to prosta kwestia powtórzenia tego <label class="checkbox">, co otacza <input type="checkbox">.

Obsługiwane są również wbudowane pola wyboru i radia. Po prostu dodaj .inlinedo dowolnego .checkboxlub .radioi gotowe.


Formularze wbudowane i dołącz/dołącz

Aby użyć dodawania lub dołączania danych wejściowych w formularzu wbudowanym, należy umieścić .add-oni inputw tym samym wierszu, bez spacji.


Tekst pomocy do formularza

Aby dodać tekst pomocy do danych wejściowych formularza, dołącz tekst pomocy wbudowanej z <span class="help-inline">lub blok tekstu pomocy z <p class="help-block">po elemencie input .

Użyj tych samych .span*klas z systemu siatki dla rozmiarów wejściowych.

Możesz także użyć klas statycznych, które nie są mapowane na siatkę, nie dostosowują się do responsywnych stylów CSS ani nie uwzględniają różnych typów kontrolek (np. inputvs. select).

@

Oto tekst pomocy

0,00
Oto więcej tekstu pomocy
$ 0,00

Uwaga: Etykiety otaczają wszystkie opcje dla znacznie większych obszarów kliknięcia i bardziej użytecznej formy.

Przycisk klasa ="" Opis
btn Standardowy szary przycisk z gradientem
btn btn-primary Zapewnia dodatkową wizualną wagę i identyfikuje podstawową akcję w zestawie przycisków
btn btn-info Używany jako alternatywa dla domyślnych stylów
btn btn-success Wskazuje udane lub pozytywne działanie
btn btn-warning Wskazuje, że należy zachować ostrożność przy tym działaniu
btn btn-danger Wskazuje na niebezpieczne lub potencjalnie negatywne działanie
btn btn-inverse Alternatywny ciemnoszary przycisk, niezwiązany z akcją semantyczną lub użyciem

Przyciski akcji

Zgodnie z konwencją przyciski powinny być używane tylko do działań, podczas gdy hiperłącza mają być używane do obiektów. Na przykład „Pobierz” powinien być przyciskiem, a „Ostatnia aktywność” powinien być linkiem.

Style przycisków można stosować do wszystkiego, do czego .btnzastosowano klasę. Jednak zazwyczaj będziesz chciał zastosować je tylko do elementów <a>i .<button>

Kompatybilność z różnymi przeglądarkami

IE9 nie przycina gradientów tła w zaokrąglonych rogach, więc je usuwamy. Pokrewny, IE9 jankesuje wyłączone buttonelementy, renderując tekst na szaro z paskudnym cieniem tekstu, którego nie możemy naprawić.

Wiele rozmiarów

Masz ochotę na większe czy mniejsze guziki? Dodaj .btn-large, .btn-smalllub .btn-minidla dwóch dodatkowych rozmiarów.


Stan niepełnosprawny

W przypadku nieaktywnych przycisków dodaj .disabledklasę do łączy i disabledatrybut dla <button>elementów.

Główny link Połączyć

Heads-up! Używamy .disabledtutaj jako klasy użytkowej, podobnej do zwykłej .activeklasy, więc nie jest wymagany przedrostek.

Jedna klasa, wiele tagów

Użyj .btnklasy na elemencie <a>, <button>lub .<input>

Połączyć
  1. <a class = "btn" href = ""> Link </a> _
  2. < klasa przycisku = typ „btn” = „prześlij” >
  3. Przycisk
  4. </button>
  5. <input class = "btn" type = "button"
  6. wartość = "Wejście" >
  7. < klasa wejściowa = typ „btn” = „prześlij”
  8. wartość = „Prześlij” >

W ramach najlepszej praktyki spróbuj dopasować element do kontekstu, aby zapewnić dopasowanie renderowania w różnych przeglądarkach. Jeśli masz input, użyj <input type="submit">dla swojego przycisku.

  • ikona-szkło
  • ikona-muzyka
  • wyszukiwanie ikon
  • ikona-koperta
  • ikona-serce
  • ikona-gwiazda
  • ikona-gwiazda-pusta
  • ikona-użytkownik
  • ikona-film
  • ikona-th-duża
  • ikona-th
  • ikona-th-lista
  • ikona-ok
  • ikona-usuń
  • ikona-powiększanie
  • ikona-oddalanie
  • ikona wyłączenia
  • ikona-sygnał
  • ikona-kog
  • ikona-śmieci
  • ikona-domu
  • ikona-plik
  • ikona-czas
  • ikona-droga
  • ikona-pobierz-alt
  • ikona-pobierz
  • przesyłanie-ikony
  • ikona-skrzynka odbiorcza
  • ikona-play-circle
  • ikona-powtórz
  • ikona-odśwież
  • ikona-lista-alt
  • ikona blokady
  • ikona-flaga
  • słuchawki-ikony
  • ikona-wyłączenie głośności
  • ikona-głośność-ciszej
  • ikona-zwiększanie głośności
  • ikona-qrcode
  • ikona-kod kreskowy
  • ikona-tag
  • ikona-tagi
  • ikona-książka
  • ikona-zakładka
  • ikona-print
  • ikona-aparat
  • ikona-czcionka
  • ikona pogrubiona
  • ikona-kursywa
  • ikona-tekst-wysokość
  • szerokość-tekstu-ikony
  • ikona-wyrównaj-do-lewej
  • ikona-wyrównaj-środek
  • ikona-wyrównaj-do-prawo
  • ikona-wyrównaj-wyrównaj
  • lista ikon
  • ikona-wcięcie-lewe
  • ikona-wcięcie-prawo
  • ikona-facetime-wideo
  • ikona-obraz
  • ikona-ołówek
  • ikona-mapa-znacznik
  • ikona-dostosuj
  • ikona-odcień
  • ikona-edytuj
  • ikona-share
  • sprawdzanie ikon
  • ikona-ruch
  • ikona krok wstecz
  • ikona-szybko do tyłu
  • ikona wstecz
  • odtwarzanie ikon
  • ikona-pauza
  • ikona-stop
  • ikona do przodu
  • ikona-szybkie przewijanie do przodu
  • ikona-krok-do przodu
  • wysuwanie ikon
  • ikona-jodełka-lewo
  • ikona-chevron-prawo
  • ikona-plus-znak
  • ikona-minus-znak
  • ikona-usuń-znak
  • ikona-ok-znak
  • ikona-pytanie-znak
  • ikona-informacja-znak
  • ikona-zrzut ekranu
  • ikona-usuń-okrąg
  • ikona-ok-okrąg
  • ikona-ban-krąg
  • ikona-strzałka-w lewo
  • ikona-strzałka-w prawo
  • ikona-strzałka-w górę
  • ikona-strzałka-w dół
  • ikona-share-alt
  • ikona-zmiana rozmiaru-pełna
  • ikona-zmiana rozmiaru-mała
  • ikona-plus
  • ikona-minus
  • ikona-gwiazdka
  • ikona-wykrzyknik-znak
  • ikona-prezent
  • ikona-liść
  • ikona-ogień
  • ikona-oko-otwarte
  • ikona-zamknij oko
  • ikona-znak-ostrzegawczy
  • ikona-płaszczyzna
  • ikona-kalendarz
  • ikona-losowa
  • ikona-komentarz
  • ikona-magnes
  • ikona-chevron-up
  • ikona-chevron-w dół
  • ikona-retweet
  • koszyk-ikona
  • ikona-folder-zamknij
  • ikona-folder-otwarty
  • ikona zmiany rozmiaru w pionie
  • ikona-zmiana rozmiaru-pozioma
  • ikona-HDD
  • ikona-bullhorn
  • ikona-dzwonek
  • ikona-certyfikat
  • ikona-kciuki w górę
  • ikona-kciuki-w dół
  • ikona-ręka-prawo
  • ikona-strona-lewa
  • ikona dłoni w górę
  • ikona w dół
  • ikona-koło-strzałka-w prawo
  • ikona-koło-strzałka-w lewo
  • ikona-kółko-strzałka w górę
  • ikona-kółko-strzałka-w dół
  • ikona-globus
  • ikona-klucz
  • ikona-zadania
  • filtr-ikona
  • aktówka-ikona
  • ikona-pełny ekran

Zbudowany jako sprite

Zamiast sprawiać, że każda ikona jest dodatkowym żądaniem, skompilowaliśmy je w sprite — kilka obrazów w jednym pliku, który używa CSS do pozycjonowania obrazów za pomocą background-position. To jest ta sama metoda, której używamy na Twitter.com i sprawdziła się dla nas.

Wszystkie klasy ikon są poprzedzone prefiksem, .icon-aby zapewnić prawidłowe rozmieszczenie nazw i zakres, podobnie jak inne nasze komponenty. Pomoże to uniknąć konfliktów z innymi narzędziami.

Glyphicons umożliwił nam korzystanie z zestawu Niziołków z naszego zestawu narzędzi open-source, o ile podamy link i autorstwo tutaj, w dokumentacji. Proszę rozważyć zrobienie tego samego w swoich projektach.

Jak używać

Bootstrap używa <i>znacznika dla wszystkich ikon, ale nie mają one klasy wielkości liter — tylko wspólny prefiks. Aby użyć, umieść następujący kod w dowolnym miejscu:

  1. <i class = "icon-search" ></i>

Dostępne są również style dla odwróconych (białych) ikon, przygotowane z jedną dodatkową klasą:

  1. <i class = „ikona-wyszukiwanie ikona-biała” ></i>

Do wyboru jest 140 klas dla twoich ikon. Wystarczy dodać <i>tag z odpowiednimi klasami i gotowe. Pełną listę znajdziesz w sprites.less lub tutaj, w tym dokumencie.

Heads-up! Używając obok ciągów tekstu, jak w przyciskach lub linkach nawigacyjnych, pamiętaj o pozostawieniu spacji po <i>tagu, aby zapewnić prawidłowe odstępy.

Przypadków użycia

Ikony są świetne, ale gdzie ich użyć? Oto kilka pomysłów:

  • Jako wizualizacje do nawigacji na pasku bocznym
  • Dla nawigacji opartej wyłącznie na ikonach
  • Przyciski pomagające przekazać znaczenie czynności
  • Z linkami do udostępniania kontekstu w miejscu docelowym użytkownika

Zasadniczo wszędzie, gdzie możesz umieścić <i>tag, możesz umieścić ikonę.

Przykłady

Używaj ich w przyciskach, grupach przycisków dla paska narzędzi, nawigacji lub dołączonych danych wejściowych formularza.