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 ut id elit.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.

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:

Przykładowe skróty

Skróty są stylizowane wielkimi literami i jasną kropkowaną dolną krawędzią. Mają również kursor pomocy po najechaniu kursorem, dzięki czemu użytkownicy mają dodatkowe wskazanie, że coś zostanie pokazane po najechaniu.

HTML to najlepsza rzecz od czasów krojonego chleba.

Skrót atrybutu słowa to attr .

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

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

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

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

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

Ktoś sławny w Body of work

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

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

Ktoś sławny w Body of work

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.

W linii

Zawijaj wbudowane fragmenty kodu za pomocą <code>.

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

Blok podstawowy

Użyj <pre>dla wielu wierszy kodu. Pamiętaj, aby zamienić wszystkie karetki na ich znaki Unicode, aby zapewnić prawidłowe renderowanie.

<p>Tutaj przykładowy tekst...</p>

<pre>
  <p>Przykładowy tekst tutaj...</p>
</pre>

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

Upiększ Google

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

<p> Przykładowy tekst tutaj... </p>

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

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

<tabela>
  <głowa>
    <tr>
      <th> … </th>
      <th> … </th>
    </tr>
  </head>
  <tbody>
    <tr>
      <td> … </td>
      <td> … </td>
    </tr>
  </tbody>
</table>

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

< klasa tabeli = "tabela" > 
  …
</table>

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

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

<table class = "table table-striped" > 
  …
</table>

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

<table class = "tabela z obramowaniem tabeli" > 
  …
</table>

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

<table class = "tabela skondensowana" > 
  …
</table>

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

<table class = "tabela w paski tabela-obramowana tabela-skondensowana" > 
  ...
</table>

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:

• Pionowo (domyślnie)
• 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.

W wersji 2.0 mamy lżejsze i inteligentniejsze domyślne ustawienia stylów formularzy. Bez dodatkowych znaczników, tylko kontrolki formularzy.

Odzwierciedlając domyślne style WebKit, po prostu dodaj, .form-searchaby uzyskać dodatkowe zaokrąglone pola wyszukiwania.

Wejścia są na poziomie bloku, aby rozpocząć. Dla .form-inlinei .form-horizontalużywamy inline-block.

Co jest zawarte

Po lewej stronie znajdują się 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

Nowe ustawienia domyślne z v2.0

Do wersji 1.4 domyślne style formularzy Bootstrapa wykorzystywały układ poziomy. W Bootstrap 2 usunęliśmy to ograniczenie, aby mieć inteligentniejsze, bardziej skalowalne ustawienia domyślne dla dowolnej formy.

Przeprojektowane stany przeglądarki

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.

<zestaw pól
  class = "błąd grupy kontrolnej" >
  …
</fieldset>

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 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 .

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.

Do kotew i formularzy

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

Uwaga: wszystkie przyciski muszą zawierać .btnklasę. Aby zachować spójność , należy zastosować style przycisków <button>i <a>elementy.

Wiele rozmiarów

Masz ochotę na większe czy mniejsze guziki? Mają na to!

Akcja podstawowa Akcja

Akcja podstawowa Akcja

Stan niepełnosprawny

Dla nieaktywnych przycisków użyj .btn-disableddla linków i :disableddla <button>elementów.

Akcja podstawowa Akcja

Akcja podstawowa Akcja

Kompatybilność z różnymi przeglądarkami

W IE9 zmniejszamy gradient na wszystkich przyciskach na rzecz zaokrąglonych rogów, ponieważ IE9 nie przycina gradientów tła do rogów.

Pokrewny, IE9 jankesuje wyłączone buttonelementy, renderując tekst na szaro z paskudnym cieniem tekstu — niestety nie możemy tego naprawić.

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ć

W wersji 2.0.0 zdecydowaliśmy się użyć <i>tagu dla wszystkich naszych ikon, ale nie mają one klasy przypadku — tylko wspólny prefiks. Aby użyć, umieść następujący kod w dowolnym miejscu:

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

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

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

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

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ę.

Odświeżać Wymeldować się Usuwać

Komentarz Ustawienia Więcej informacji