Przykłady szybkiego startu

Potrzebujesz szybkich szablonów? Sprawdź te podstawowe przykłady, które zebraliśmy:

Domyślna siatka

Domyślny system siatki dostarczany w ramach Bootstrap to 16-kolumnowa siatka o szerokości 940 pikseli. Jest to posmak popularnego systemu siatki 960, ale bez dodatkowego marginesu/wyściółki po lewej i prawej stronie.

Przykładowy znacznik siatki

Jak pokazano tutaj, podstawowy układ można utworzyć za pomocą dwóch „kolumn”, z których każda obejmuje 16 podstawowych kolumn, które zdefiniowaliśmy jako część naszego systemu siatki. Zobacz przykłady poniżej, aby uzyskać więcej odmian.

<div class = "wiersz" > 
  <div class = "span6" > 
    ...
  </div>
  <div class = "span10" > 
    ...
  </div>
</div>

Zagnieżdżanie kolumn

Zagnieżdżaj zawartość, jeśli musisz, tworząc .roww istniejącej kolumnie.

Przykład zagnieżdżonych kolumn

<div class = "wiersz" > 
  <div class = "span12" > 
    Poziom 1 kolumny
    <div class = "wiersz" > 
      <div class = "span6" > 
        Poziom 2
      </div>
      <div class = "span6" > 
        Poziom 2
      </div>
    </div>
  </div>
</div>

Rzuć własną siatkę

W Bootstrap wbudowana jest garść zmiennych do dostosowywania domyślnego systemu siatki 940px. Przy odrobinie dostosowania możesz zmienić rozmiar kolumn, ich rynny i pojemnik, w którym się znajdują.

Wewnątrz siatki

Wszystkie zmienne potrzebne do zmodyfikowania systemu siatki znajdują się obecnie w preboot.less.

Teraz dostosować

Modyfikowanie siatki oznacza zmianę trzech @grid-*zmiennych i ponowną kompilację plików Less.

Bootstrap jest wyposażony do obsługi systemu siatkowego z maksymalnie 24 kolumnami; wartość domyślna to tylko 16. Oto, jak zmienne siatki wyglądałyby dostosowane do siatki 24-kolumnowej.

@siatkaKolumny : 24 ;       
@gridColumnWidth : 20px ;   
@gridGutterSzerokość : 20px ;   

Po ponownej kompilacji zostaniesz ustawiony!

Naprawiono układ

Domyślny i prosty układ o szerokości 940 pikseli, wyśrodkowany dla niemal każdej witryny lub strony dostarczonej przez pojedynczą witrynę <div.container>.

<ciało>
  <div class = "kontener" > 
    ...
  </div>
</body>

Układ płynny

Alternatywna, elastyczna struktura strony płynnej z minimalną i maksymalną szerokością oraz lewym paskiem bocznym. Świetne dla aplikacji i dokumentów.

<ciało>
  <div class = "pojemnik-płyn" > 
    <div class = "pasek boczny" > 
      ...
    </div>
    <div class = "treść" > 
      ...
    </div>
  </div>
</body>

Nagłówki i kopia

Standardowa hierarchia typograficzna do strukturyzowania stron internetowych.

Cała siatka typograficzna oparta jest na dwóch zmiennych Less w naszym pliku preboot.less: @basefonti @baseline. 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.

h1. Nagłówek 1

h2. Nagłówek 2

h3. Nagłówek 3

h4. Nagłówek 4

h5. Nagłówek 5

h6. Nagłówek 6

Przykładowy akapit

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.

Przykładowy nagłówek Zawiera podtytuł…

Różne elementy

Używanie wyróżnień, adresów i skrótów

<strong> <em> <address> <abbr>

Kiedy użyć

Znaczniki wyróżnienia ( <strong>i <em>) powinny być używane do wskazania dodatkowego znaczenia lub podkreślenia słowa lub frazy w stosunku do otaczającej go kopii. Używaj <strong>dla ważności i nacisku <em>na stres .

Akcent w akapicie

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: nadal można używać tagów <b>i <i>tagów w HTML5 i nie muszą one być odpowiednio pogrubione i pochylone (chociaż jeśli istnieje element bardziej semantyczny, użyj go). <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.

Adresy

Element <address>służy do informacji kontaktowych dla najbliższego przodka lub całej pracy. Oto dwa przykłady tego, jak można go użyć:

Uwaga: Każdy wiersz w a <address>musi kończyć się podziałem wiersza ( <br />) lub być owinięty znacznikiem blokowym (np. <p>), aby prawidłowo ustrukturyzować treść.

Skróty

W przypadku skrótów i akronimów użyj <abbr>tagu ( <acronym>jest przestarzały w HTML5 ). Umieść skrócony formularz w tagu i ustaw tytuł dla pełnego imienia i nazwiska.

Cytaty blokowe

<blockquote> <p> <small>

Jak cytować

Aby dołączyć cytat blokowy, zawiń i <blockquote>dodaj tagi. Użyj elementu, aby zacytować swoje źródło, a przed nim pojawi się myślnik .<p><small><small>&mdash;

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

dr Julius Hibbert

<cytat blokowy>
  <p> Lorem ipsum dolor sit amet, konsektetur adipisująca elita. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. </p>
  <small> Dr Julius Hibbert </small>
</blockquote>

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

Opisdl

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.

Kod

<code> <pre>

Dostosuj swój kod w dobrym stylu za pomocą dwóch prostych tagów. Aby uzyskać jeszcze więcej niesamowitości dzięki javascript, wrzuć bibliotekę upiększania kodu Google i gotowe.

Przedstawiam kod

Kod, bloki lub tylko urywki można wyświetlać ze stylem, umieszczając je w odpowiednim tagu. W przypadku bloków kodu obejmujących wiele wierszy użyj <pre>elementu. W przypadku kodu wbudowanego użyj <code>elementu.

<div>
  <h1>Nagłówek</h1>
  <p>Coś tutaj...</p>
</div>

<div> <h1> Nagłówek </h1> <p> Coś tutaj... </p> </div>
  
  

Etykiety wbudowane

<span class="label">

Zwróć uwagę lub oflaguj dowolne wyrażenie w tekście głównym.

Oznacz wszystko

Kiedykolwiek potrzebowałeś jednego z tych fantazyjnych Nowość! lub Ważne flagi podczas pisania kodu? Cóż, teraz je masz. Oto, co jest zawarte domyślnie:

Siatka mediów

Wyświetlaj miniatury o różnych rozmiarach na stronach o małej ilości miejsca w HTML i minimalnych stylach.

Przykładowe miniatury

Miniatury w pliku .media-gridmogą mieć dowolny rozmiar, ale działają najlepiej, gdy są mapowane bezpośrednio do wbudowanego systemu siatki Bootstrap. Szerokości obrazu, takie jak 90, 210 i 330, łączą się z kilkoma pikselami dopełnienia, aby równać się rozmiarom kolumn .span2, .span4i ..span6

Wielki

Średni

Mały

Kodowanie ich

Siatki multimedialne są łatwe w użyciu i dość proste po stronie znaczników. Ich wymiary są oparte wyłącznie na wielkości dołączonych obrazów.

<ul class = "media-grid" > 
  <li>
    <a href = "#" > 
      <img class = "thumbnail" src = "https://placehold.it/330x230" alt = "" >   
    </a>
  </li>
  <li>
    <a href = "#" > 
      <img class = "thumbnail" src = "https://placehold.it/330x230" alt = "" >   
    </a>
  </li>
</ul>

Budowanie stołów

<table> <thead> <tbody> <tr> <th> <td> <colspan> <caption>

Stoły są świetne — do wielu rzeczy. Jednak świetne tabele wymagają odrobiny miłości do znaczników, aby były użyteczne, skalowalne i czytelne (na poziomie kodu). Oto kilka wskazówek, które pomogą.

Zawsze zawijaj nagłówki kolumn w <thead>taki sposób, że hierarchia to <thead>> <tr>> <th>.

Podobnie jak w przypadku nagłówków kolumn, cała zawartość treści tabeli powinna być otoczona w taki sposób <tbody>, aby Twoja hierarchia była <tbody>> <tr>> <td>.

Przykład: Domyślne style tabel

Wszystkie tabele będą automatycznie stylizowane tylko z niezbędnymi obramowaniami, aby zapewnić czytelność i zachować strukturę. Nie ma potrzeby dodawania dodatkowych klas ani atrybutów.

<tabela>
  ...
</table>

Przykład: w paski zebry

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

Uwaga: Zebra-striping to progresywne ulepszenie niedostępne w starszych przeglądarkach, takich jak IE8 i starsze.

< klasa tabeli = "w paski zebry" > 
...
</table>

Przykład: w paski zebry z TableSorter.js

Biorąc poprzedni przykład, poprawiamy użyteczność naszych tabel, udostępniając funkcjonalność sortowania za pomocą jQuery i wtyczki Tablesorter . Kliknij nagłówek dowolnej kolumny, aby zmienić sortowanie.

<script src = "js/jquery/jquery.tablesorter.min.js" ></script> 
<skrypt > 
  $ ( funkcja () { 
    $ ( "table#sortTableExample" ). sorter tabel ({ sortList : [[ 1 , 0 ]] });  
  });
</script>
< klasa tabeli = "w paski zebry" > 
  ...
</table>

Style domyślne

Wszystkim formularzom nadawane są domyślne style, aby zaprezentować je w czytelny i skalowalny sposób. Dostępne są style dla wprowadzania tekstu, list wyboru, obszarów tekstowych, przycisków radiowych i pól wyboru oraz przycisków.

Ułożone formularze

Dodaj .form-stackeddo kodu HTML formularza, a otrzymasz etykiety nad ich polami, a nie po lewej stronie. Działa to świetnie, jeśli Twoje formularze są krótkie lub masz dwie kolumny danych wejściowych dla cięższych formularzy.

Rozmiary pól formularza

Dostosuj dowolny formularz input, selectlub textareaszerokość, dodając tylko kilka klas do znaczników.

W wersji 1.3.0 dodaliśmy klasy rozmiarów oparte na siatce dla elementów formularzy. Użyj ich zamiast istniejących klas .mini, .small, itp.

guziki

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

Wszystkie przyciski mają domyślnie jasnoszary styl, ale wiele klas funkcjonalnych można zastosować dla różnych stylów kolorów. Klasy te obejmują klasę niebieską .primary, klasę jasnoniebieską .info, klasę zieloną .successi klasę czerwoną .danger.

Przykładowe przyciski

Style przycisków można zastosować do wszystkiego, co ma .btnzastosowane. Zazwyczaj będziesz chciał zastosować je tylko do elementów <a>, <button>i select <input>. Oto jak to wygląda:

Alternatywne rozmiary

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

Stan niepełnosprawny

W przypadku przycisków, które nie są aktywne lub zostały wyłączone przez aplikację z tego czy innego powodu, użyj stanu wyłączonego. To .disableddotyczy linków i :disabledelementów <button>.

Spinki do mankietów

guziki

Co to jest

Nasz górny pasek to stały pasek, w którym znajduje się logo lub nazwa witryny, główna nawigacja i formularz wyszukiwania.

Konfigurowalny

Wszystkie elementy w obrębie, a także cały pasek górny, są opcjonalne. Możesz wybrać logo/nazwę, nawigację, wyszukiwanie i dodatkową nawigację — lub dowolną ich kombinację.

Zawiera listy rozwijane

W ramach głównej nawigacji uwzględniliśmy możliwość dodawania list rozwijanych do nawigacji. Sprawdź dodatkowy nawigator powyżej (wyrównany do prawej), aby zobaczyć, jak to się robi. liTagi rozwijane obsługują również .activewyświetlanie bieżącego wyboru strony.

Tabletki i pigułki

Utwórz prostą nawigację dodatkową za pomocą <ul>. Przełączaj się między zakładkami lub tabletkami, dodając odpowiednią klasę.

Świetnie nadaje się do podsekcji treści, takich jak nasze strony ustawień konta i osie czasu użytkownika, do przełączania się między stronami o podobnej treści. Dostępne w wersji z zakładkami lub pigułkami.

• Dom
• Profil
• Wiadomości
• Ustawienia
• Kontakt
• Upuścić
  • Link dodatkowy
  • Coś jeszcze tutaj
  • Kolejny link

<ul class = "tabulatory" > 
  <li class = "active" ><a href = "#"> Strona główna </a> </li>  
  <li><a href = "#"> Profil </a> </li> 
  <li><a href = "#"> Wiadomości </a> </li> 
  <li><a href = "#"> Ustawienia </a> </li> 
  <li><a href = "#"> Kontakt </a> </li> 
</ul>

• Dom
• Profil
• Wiadomości
• Ustawienia
• Kontakt

<ul class = "pigułki" > 
  <li class = "active" ><a href = "#"> Strona główna </a> </li>  
  <li><a href = "#"> Profil </a> </li> 
  <li><a href = "#"> Wiadomości </a> </li> 
  <li><a href = "#"> Ustawienia </a> </li> 
  <li><a href = "#"> Kontakt </a> </li> 
</ul>

Bułka tarta

Nawigacja Breadcrumb służy do pokazywania użytkownikom, gdzie się znajdują w aplikacji lub witrynie, ale nie do podstawowej nawigacji.

• Dom

• Strona główna /
• Strona środkowa

• Strona główna /
• Strona środkowa /
• Inny

• Strona główna /
• Strona środkowa /
• Kolejny /
• Jesteś tutaj

<ul class = "bułka tarta" > 
  <li><a href = "#"> Strona główna </a> < span class = "dzielnik" > / </span></li>   
  <li><a href = "#"> Strona środkowa </a> <span class = "dzielnik" > / </span></li>   
  <li><a href = "#"> Kolejny </a> < span class = "dzielnik" > / </span></li>   
  <li class = "aktywny" > Jesteś tutaj </li> 
</ul>

Paginacja

Ultra uproszczona i minimalistycznie stylizowana paginacja inspirowana Rdio. Duży blok jest trudny do przeoczenia, łatwo skalowalny i zapewnia duże obszary kliknięcia.

<div class = "paginacja" > 
  <ul>
    <li class = "poprzednia wyłączona" ><a href = "#" > ← Poprzedni </a></li>  
    <li class = "aktywny" ><a href = "#" > 1   </a></li>
    <li><a href = "#" > 2 </a></li> 
    <li><a href = "#" > 3 </a></li> 
    <li><a href = "#" > 4 ​​</a></li> 
    <li><a href = "#" > 5 </a></li> 
    <li class = "next" ><a href = "#" > Dalej → </a></li>  
  </ul>
</div>

Alerty podstawowe

.alert-message

Komunikaty jednowierszowe dla podkreślenia niepowodzenia, możliwego niepowodzenia lub sukcesu działania. Szczególnie przydatne do formularzy.

Pobierz javascript »

Przykładowy kod

<div class = "ostrzeżenie komunikatu ostrzegawczego" > 
  <a class = "zamknij" href = "#" > × </a>  
  <p><strong> Święty guacamole! </strong> Najlepiej sprawdź sam, nie wyglądasz zbyt dobrze.</p>
</div>

Blokuj wiadomości

.alert-message.block-message

W przypadku wiadomości, które wymagają nieco wyjaśnienia, mamy alerty dotyczące stylu akapitu. Są idealne do bulgotania dłuższych komunikatów o błędach, ostrzegania użytkownika o oczekującej akcji lub po prostu prezentowania informacji w celu zwiększenia nacisku na stronę.

Pobierz javascript »

Przykładowy kod

<div class = "alert-message block-message warning" > 
  <a class = "zamknij" href = "#" > × </a>  
  <p><strong> Święty guacamole! To jest ostrzeżenie! </strong> Najlepiej sprawdź sam, nie wyglądasz zbyt dobrze. Nulla vitae elit libero, pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. </p>
  <div class = "alert-actions" > 
    <a class = "btn small" href = "#"> Wykonaj to działanie </a> <a class = "btn small" href = "#" > Lub zrób to </a>     
  </div>
</div>

Modalne

Modały — okna dialogowe lub lightboxy — doskonale nadają się do działań kontekstowych w sytuacjach, w których ważne jest zachowanie kontekstu tła.

Pobierz javascript »

Podpowiedzi

Twipsy są bardzo przydatne, aby pomóc zdezorientowanemu użytkownikowi i skierować go we właściwym kierunku.

Pobierz javascript »

Popovery

Użyj okienek popover, aby podać informacje podtekstowe na stronie bez wpływu na układ.

Pobierz javascript »

Rozpoczęcie pracy

Integracja javascriptu z biblioteką Bootstrap jest bardzo łatwa. Poniżej omówimy podstawy i udostępnimy kilka niesamowitych wtyczek na dobry początek!

Wyświetl dokumentację JavaScript »

Co jest zawarte

Ożyw niektóre z podstawowych komponentów Bootstrap za pomocą nowych niestandardowych wtyczek, które współpracują z jQuery i Ender . Zachęcamy do ich rozszerzania i modyfikowania pod kątem konkretnych potrzeb rozwojowych.

Czy javascript jest konieczny?

Nie! Bootstrap został zaprojektowany przede wszystkim jako biblioteka CSS. Ten javascript zapewnia podstawową warstwę interaktywną na wierzchu dołączonych stylów.

Jednak dla tych, którzy potrzebują javascriptu, udostępniliśmy powyższe wtyczki, które pomogą Ci zrozumieć, jak zintegrować Bootstrap z javascriptem i zapewnić szybką, lekką opcję podstawowej funkcjonalności.

Aby uzyskać więcej informacji i zobaczyć niektóre wersje demonstracyjne na żywo, zapoznaj się z naszą stroną dokumentacji wtyczek .