Historia

We wcześniejszych dniach Twittera inżynierowie wykorzystywali prawie każdą bibliotekę, którą znali, aby spełnić wymagania front-endu. Bootstrap powstał jako odpowiedź na wyzwania, które pojawiły się i rozwój szybko przyspieszył podczas pierwszego Hackweeku na Twitterze.

Dzięki pomocy i opiniom wielu inżynierów na Twitterze Bootstrap znacznie się rozwinął, obejmując nie tylko podstawowe style, ale także bardziej eleganckie i trwałe wzorce projektowe front-end.

Czytaj więcej na dev.twitter.com ›

Obsługa przeglądarki

Bootstrap jest testowany i obsługiwany w głównych nowoczesnych przeglądarkach, takich jak Chrome, Safari, Internet Explorer i Firefox.

• Najnowsze safari
• Najnowsza przeglądarka Google Chrome
• Firefox 4+
• Internet Explorer 7+
• Opera 11

Co jest zawarte

Bootstrap jest dostarczany w komplecie ze skompilowanymi szablonami CSS, nieskompilowanymi i przykładowymi szablonami.

• Wszystkie oryginalne pliki .less
• W pełni skompilowany i zminimalizowany CSS
• Kompletna dokumentacja przewodnika po stylach
• Przykładowy szablon strony (więcej wkrótce)

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 columns" > 
    ...
  </div>
  <div class = "span10 column" > 
    ...
  </div>
</div>

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 jak to wygląda:

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

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.

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.

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. Co więcej, zwijanie własnych stylizacji jest łatwe.

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.

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>

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

div.alert-message

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

Blokuj wiadomości

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

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.

Wskazówki dotyczące narzędzi

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

Popovery

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

Bootstrap został zbudowany przy użyciu Preboot , pakietu domieszek i zmiennych o otwartym kodzie źródłowym, których można używać w połączeniu z Less , preprocesorem CSS w celu szybszego i łatwiejszego tworzenia stron internetowych.

Sprawdź, jak wykorzystaliśmy Preboot w Bootstrap i jak możesz z niego skorzystać, jeśli zdecydujesz się uruchomić Less w swoim następnym projekcie.

Jak tego użyć

Użyj tej opcji, aby w pełni wykorzystać zmienne Bootstrap, domieszki i zagnieżdżanie w CSS za pomocą JavaScript w przeglądarce.

<link rel = "stylesheet/less" href = "less/bootstrap.less" media = "all" />    
<script src = "js/less-1.1.3.min.js" ></script> 

Nie czujesz rozwiązania .js? Wypróbuj aplikację Less Mac lub użyj Node.js do kompilacji podczas wdrażania kodu.

Co jest zawarte

Oto niektóre z najważniejszych elementów Twitter Bootstrap w ramach Bootstrap. Przejdź na stronę Bootstrap lub stronę projektu Github, aby pobrać i dowiedzieć się więcej.

Zmienne

Zmienne w Less są idealne do utrzymywania i aktualizowania Twojego CSS bez bólu głowy. Jeśli chcesz zmienić wartość koloru lub często używaną wartość, zaktualizuj ją w jednym miejscu i gotowe.

// Linki
@linkColor : #8b59c2;         
@linkColorHover :     przyciemnij ( @linkColor , 10 ); 
 
// Szarości
@czarny : #000;             
@grayDark :           rozjaśnij ( @czarny , 25 %); 
@szary :               rozjaśnij ( @czarny , 50 %); 
@grayLight :          rozjaśnij ( @czarny , 70 %); 
@grayLighter :        rozjaśnij ( @czarny , 90 %); 
@biały : #fff ;             
 
// Kolory akcentujące
@niebieski : #08b5fb;              
@ zielony : #46a546 ;             
@czerwony : #9d261d;               
@ żółty : #ffc40d ;            
@pomarańczowy : #f89406 ;            
@różowy : #c3325f ;              
@fioletowy : #7a43b6;            
 
// Siatka linii bazowych
@czcionka podstawowa : 13px ;          
@linia bazowa : 18px ;          

Komentowanie

Less zapewnia również inny styl komentowania oprócz normalnej /* ... */składni CSS.

// To jest komentarz
/* To też jest komentarz */

Mieszanka wazoo

Domieszki są w zasadzie dołączeniami lub częściami CSS, co pozwala na połączenie bloku kodu w jeden. Świetnie nadają się do właściwości z prefiksami dostawcy, takich jak box-shadow, gradienty w różnych przeglądarkach, stosy czcionek i nie tylko. Poniżej znajduje się próbka mixinów, które są zawarte w Bootstrap.

Stosy czcionek

#czcionka {
  . skrót ( @weight : normal , @size : 14px , @lineHeight : 20px ) {     
rozmiar -     czcionki : @rozmiar ; 
waga     czcionki : @waga ; _ 
wysokość     linii : @lineHeight ; _ 
  }
  . sans - serif ( @weight : normal , @size : 14px , @lineHeight : 20px ) {     
rodzina     czcionek : " Helvetica Neue" , ​​Helvetica , Arial , sans - serif ;   
rozmiar -     czcionki : @rozmiar ; 
waga     czcionki : @waga ; _ 
wysokość     linii : @lineHeight ; _ 
  }
  . szeryfowa ( @waga : normalna , @rozmiar : 14px , @lineHeight : 20px ) {     
    font - family : "Georgia" , Times New Roman , Times , sans - serif ;     
rozmiar -     czcionki : @rozmiar ; 
waga     czcionki : @waga ; _ 
wysokość     linii : @lineHeight ; _ 
  }
  . monospace ( @weight : normal , @size : 12px , @lineHeight : 20px ) {     
rodzina     czcionek : " Monaco" , Courier New , monospace ;   
rozmiar -     czcionki : @rozmiar ; 
waga     czcionki : @waga ; _ 
wysokość     linii : @lineHeight ; _ 
  }
}

Gradienty

#gradient {
  . poziomo ( @startColor : #555, @endColor: #333) { 
kolor     tła : @endColor ; _ 
    background - repeat : repeat - x ;
    background - image : - khtml - gradient ( linear , left top , right top , from ( @startColor ), do ( @endColor )); // Konqueror   
    background - image : -moz - linear - gradient ( po lewej , @startColor , @endColor ); // FF 3,6+    
    background - image : - ms - linear - gradient ( left , @startColor , @endColor ); // IE10    
    background - image : - webkit - gradient ( liniowy , lewa góra , prawa góra , kolor - stop ( 0 % , @startColor ), kolor - stop ( 100 % , @endColor ) ) ; // Safari 4+, Chrome 2+    
    background - image : -webkit - linear - gradient ( po lewej , @startColor , @endColor ); // Safari 5.1+, Chrome 10+    
    background - image : -o - linear - gradient ( lewo , @startColor , @endColor ) ; // Opera 11.10    
obraz w     tle : gradient liniowy ( lewy , @startColor , @endColor ) ; // Le standard   
  }
  . pionowo ( @startColor : #555, @endColor: #333) { 
kolor     tła : @endColor ; _ 
    background - repeat : repeat - x ;
    background - image : - khtml - gradient ( linear , left top , left bottom , od ( @startColor ), do ( @endColor )); // Konqueror   
    background - image : - moz - linear - gradient ( @startColor , @endColor ); // FF 3,6+   
    background - image : - ms - linear - gradient ( @startColor , @endColor ); // IE10   
    background - image : - webkit - gradient ( linear , left top , left bottom , color - stop ( 0 % , @startColor ), color - stop ( 100 % , @endColor ) ) ; // Safari 4+, Chrome 2+    
    background - image : - webkit - linear - gradient ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+   
    background - image : - o - linear - gradient ( @startColor , @endColor ); // Opera 11.10   
obraz w     tle : gradient liniowy ( @startColor , @endColor ) ; // Standard  
  }
  . kierunkowy ( @startColor : #555, @endColor: #333, @deg: 45deg) { 
    ...
  }
  . pionowe - trzy - kolory ( @startColor : #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) { 
    ...
  }
}

Operacje i system sieci

Wymyśl i wykonaj trochę matematyki, aby wygenerować elastyczne i potężne mixiny, takie jak ten poniżej.

// Siatka
@siatkaKolumny : 16 ;       
@gridColumnWidth : 40px ;   
@gridGutterSzerokość : 20px ;   
@siteWidth : ( @gridColumns * @gridColumnWidth ) + ( @gridGutterWidth * ( @gridColumns - 1 ));                 
 
// System siatki
. pojemnik {
  szerokość : @ SzerokośćWitryny ; 
  margines : 0 auto ;  
  . jasnefix ();
}
. kolumny ( @columnSpan : 1 ) {  
  szerokość : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));         
}
. przesunięcie ( @columnOffset : 1 ) {  
  margines lewy : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 ) ) + @extraSpace ;           
}