Grilă implicită

Sistemul de grilă implicit furnizat ca parte a Bootstrap este o grilă cu 16 coloane lățime de 940 pixeli. Este o aromă a popularului sistem de grilă 960, dar fără marjă/căptușeală suplimentară pe părțile din stânga și din dreapta.

Exemplu de marcare a grilei

După cum se arată aici, un aspect de bază poate fi creat cu două „coloane”, fiecare acoperind un număr dintre cele 16 coloane de bază pe care le-am definit ca parte a sistemului nostru de grilă. Consultați exemplele de mai jos pentru mai multe variante.

<div class="row">
  <div class = "span6 columns" > 
    ...
  </div>
  <div class = "span10 coloane" > 
    ...
  </div>
</div>

Aspect fix

Un aspect de bază de container de 940 px lățime, centrat pentru aproape orice site sau pagină.

<corp>
  <div class = "container" > 
    ...
  </div>
</corp>

Dispunerea fluidului

O structură flexibilă de pagină fluidă sau lichidă cu lățimi minime și maxime și o bară laterală din stânga. Excelent pentru aplicații.

<corp>
  <div class = "container-fluid" > 
    <div class = "bară laterală" > 
      ...
    </div>
    <div class = "conținut" > 
      ...
    </div>
  </div>
</corp>

Titluri și copie

O ierarhie tipografică standard pentru structurarea paginilor dvs. web.

h1. Titlul 1

h2. Titlul 2

h3. Titlul 3

h4. Titlul 4

h5. Titlul 5

h6. Titlul 6

Exemplu de paragraf

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.

Exemplu de titlu Are subtitlu...

De asemenea, puteți adăuga subtitluri cu <strong>și<em>

Diverse elemente

Folosind accent, adrese și abrevieri

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

Când să utilizați

Etichetele de accentuare ( <strong>și <em>) ar trebui folosite pentru a adăuga distincție vizuală între un cuvânt sau o expresie și copia din jur. Utilizați <strong>pentru atenția veche și <em>pentru atenție și titluri.

Accentuarea într-un paragraf

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

Adrese

Elementul addresseste folosit pentru — ați ghicit! — adrese. Iată cum arată:

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890

Notă: Fiecare rând dintr-un addressmust se termină cu o întrerupere de linie ( <br />) pentru a structura corect conținutul, așa cum este citit în viața reală, fără stiluri aplicate.

Abrevieri

Pentru abrevieri și acronime, utilizați abbreticheta ( acronymeste depreciată în HTML5 ). Puneți formularul de prescurtare în etichetă și setați un titlu pentru numele complet.

Citate bloc

<blockquote> <p> <cite>

Asigurați-vă că vă înfășurați blockquoteși paragraphetichetați cite. Când citați o sursă, utilizați citeelementul. CSS va prefața automat un nume cu o liniuță em (—).

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...

Dr. Julius Hibbert

Neordonat<ul>

• Jeremy Bixby
• Robert Dezure
• Josh Washington
• Anton Capresi
• Coechipierii mei
  • George Castanza
  • Jerry Seinfeld
  • Cosmo Kramer
  • Elaine Bennis
  • Om nou
• Ioan Iacob
• Paul Pierce
• Kevin Garnett

Nestilat<ul.unstyled>

• Jeremy Bixby
• Robert Dezure
• Josh Washington
• Anton Capresi
• Coechipierii mei
  • George Castanza
  • Jerry Seinfeld
  • Cosmo Kramer
  • Elaine Bennis
  • Om nou
• Ioan Iacob
• Paul Pierce
• Kevin Garnett

Ordonat<ol>

1. Jeremy Bixby
2. Robert Dezure
3. Josh Washington
4. Anton Capresi
5. Coechipierii mei
   1. George Castanza
   2. Jerry Seinfeld
   3. Cosmo Kramer
   4. Elaine Bennis
   5. Om nou
6. Ioan Iacob
7. Paul Pierce
8. Kevin Garnett

Descrieredl

Liste de descriere

O listă de descriere este perfectă pentru definirea termenilor.

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.

Construirea meselor

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

Mesele sunt grozave - pentru o mulțime de lucruri. Cu toate acestea, tabelele grozave au nevoie de un pic de dragoste pentru marcaj pentru a fi utile, scalabile și lizibile (la nivel de cod). Iată câteva sfaturi pentru a vă ajuta.

Întotdeauna înfășurați anteturile de coloană theadastfel încât ierarhia să fie thead> tr> th.

Similar antetelor coloanelor, tot conținutul corpului tabelului ar trebui să fie împachetat într-un tbodyastfel de ierarhie să fie tbody> tr> td.

Exemplu: stiluri implicite de tabel

Toate tabelele vor fi stilate automat doar cu marginile esențiale pentru a asigura lizibilitatea și menținerea structurii. Nu este nevoie să adăugați clase sau atribute suplimentare.

#	Nume	Numele de familie	Limba
1	niste	unu	Engleză
2	Joe	Pachet de sase	Engleză
3	Stu	Adâncitură	Cod

<table class="common-table"> class = "common-table" >
  ...
</tabel>

Exemplu: cu dungi de zebră

Fă-ți un pic de fantezie cu mesele adăugând dungi zebră - doar adaugă .zebra-stripedclasa.

#	Nume	Numele de familie	Limba
1	niste	unu	Engleză
2	Joe	Pachet de sase	Engleză
3	Stu	Adâncitură	Cod

<table class="common-table zebra-striped"> clasa = "de masă comună cu dungi zebră" >
...
</tabel>

Exemplu: zebră cu dungi cu TableSorter.js

Luând exemplul anterior, îmbunătățim utilitatea tabelelor noastre oferind funcționalitate de sortare prin jQuery și pluginul Tablesorter . Faceți clic pe antetul oricărei coloane pentru a schimba sortarea.

#	Nume	Numele de familie	Limba
1	Ta	unu	Engleză
2	Joe	Pachet de sase	Engleză
3	Stu	Adâncitură	Cod

<script type="text/javascript" src="js/jquery/jquery.tablesorter.min.js"></script> tip = "text/javascript" src = "js/jquery/jquery.tablesorter.min.js" ></script> 
<script type = "text/javascript" > 
  $ ( document ). gata ( funcția () { 
    $ ( "tabel#sortTableExample" ). tablesorter ( { sortList : [[ 1 , 0 ]]} );   
  });
</script>
< clasa de masă = „de masă comună cu dungi de zebră” > 
  ...
</tabel>

Stiluri implicite

Toate formularele au stiluri implicite pentru a le prezenta într-un mod lizibil și scalabil. Sunt furnizate stiluri pentru introducerea textului, listele de selectare, zonele de text, butoanele radio și casetele de selectare și butoanele.

Exemplu de legendă a formularului

Intrare X-Large

Selectați

1 2 3 4 5

Selectați

1 2 3 4 5

Intrare needitabilă

O valoare aici

Intrare dezactivată

Intrare X-Large

Mic fragment de text de ajutor

Exemplu de legendă a formularului

Text în prealabil

@

Casetă de selectare antepusă

Casetă de selectare adăugată

Fișier de intrare

Exemplu de legendă a formularului

Lista de opțiuni

• Opțiunea unu este aceasta și aceea - asigurați-vă că includeți de ce este grozav
• Opțiunea a doua poate fi, de asemenea, verificată și inclusă în rezultatele formularului
• Opțiunea trei poate fi, de asemenea, verificată și inclusă în rezultatele formularului, da, ați ghicit
• Opțiunea patru nu poate fi verificată deoarece este dezactivată.

Notă: Etichetele înconjoară toate opțiunile pentru zone de clic mult mai mari și o formă mai utilizabilă.

Interval de date

la Toate orele sunt afișate ca Ora standard a Pacificului (GMT -08:00).

Textarea

Bloc de text de ajutor pentru a descrie câmpul de mai sus, dacă este necesar.

Lista de opțiuni

• Opțiunea unu este aceasta și aceea - asigurați-vă că includeți de ce este grozav
• Opțiunea a doua poate fi, de asemenea, verificată și inclusă în rezultatele formularului

Salvează modificările Anulare

Formulare stivuite

Adăugați .form-stackedla HTML-ul formularului dvs. și veți avea etichete în partea de sus a câmpurilor lor, nu în stânga lor. Acest lucru funcționează excelent dacă formularele sunt scurte sau aveți două coloane de intrări pentru formularele mai grele.

Exemplu de legendă a formularului

Intrare X-Large

Selectați

1 2 3 4 5

Exemplu de legendă a formularului

Lista de opțiuni

• Opțiunea unu este aceasta și aceea - asigurați-vă că includeți de ce este grozav
• Opțiunea a doua poate fi, de asemenea, verificată și inclusă în rezultatele formularului

Notă: Etichetele înconjoară toate opțiunile pentru zone de clic mult mai mari și o formă mai utilizabilă.

Salvează modificările Anulare

Butoane

Ca convenție, butoanele sunt folosite pentru acțiuni, în timp ce linkurile sunt folosite pentru obiecte. De exemplu, „Descărcare” ar putea fi un buton, iar „activitate recentă” ar putea fi un link.

Toate butoanele sunt implicite într-un stil gri deschis, dar .primaryeste disponibilă o clasă albastră. În plus, rularea propriilor stiluri este ușor.

Exemple de butoane

Stilurile de butoane pot fi aplicate oricărei .btnaplicații. De obicei, veți dori să le aplicați numai elementelor a, button, și selectate input. Iată cum arată:

Mărimi alternative

Vrei nasturi mai mari sau mai mici? Ai de gând!

Stare dezactivată

Pentru butoanele care nu sunt active sau sunt dezactivate de aplicație dintr-un motiv sau altul, utilizați starea dezactivată. Asta .disabledpentru link-uri și :disabledpentru buttonelemente.

Legături

Butoane

Ce este

Bara noastră de sus este o bară fixă ​​care găzduiește sigla sau numele unui site web, navigarea principală și formularul de căutare.

Personalizat

Toate elementele din interior, precum și întreaga bară de sus, sunt opționale. Puteți alege să includeți o siglă/nume, navigare, căutare și o navigare secundară sau orice combinație a acestora.

Mențiuni derulante incluse

Ca parte a navigației principale, am inclus posibilitatea de a adăuga meniuri derulante în navigația dvs. Verificați navigarea secundară de mai sus (aliniată la dreapta) pentru a vedea cum se face.

Tablete și pastile

Creați o navigare secundară simplă cu un ul. Schimbați între comprimate sau pastile adăugând clasa corespunzătoare.

Excelent pentru sub-secțiuni de conținut, cum ar fi paginile noastre cu setările contului și cronologia utilizatorilor pentru comutarea între paginile cu conținut similar. Disponibil în stiluri cu file sau pilule.

• Acasă
• Profil
• Mesaje
• Setări
• a lua legatura

<ul class="tabs"> clasa = "file" >
  <li class = "active" ><a href = "" > Acasă </a></li>  
  <li><a href = "" > Profil </a></li> 
  <li><a href = "" > Mesaje </a></li> 
  <li><a href = "" > Setări </a></li> 
  <li><a href = "" > Contact </a></li> 
</ul>

• Acasă
• Profil
• Mesaje
• Setări
• a lua legatura

<ul class="pills"> clasa = "pastile" >
  <li class = "active" ><a href = "" > Acasă </a></li>  
  <li><a href = "" > Profil </a></li> 
  <li><a href = "" > Mesaje </a></li> 
  <li><a href = "" > Setări </a></li> 
  <li><a href = "" > Contact </a></li> 
</ul>

Paginare

Paginare ultra simplistă și cu stil minimal inspirată de Rdio. Blocul mare este greu de ratat, ușor de scalat și oferă zone mari de clic.

<div class="pagination"> clasa = "paginare" >
  <ul>
    <li class = "anterior dezactivat" ><a href = "" > ← Anterior </a></li>  
    <li class = "activ" ><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 = "" > Următorul → </a></li>  
  </ul>
</div>

Alerte de bază

Mesaje pe o singură linie pentru a evidenția eșecul, posibilul eșec sau succesul unei acțiuni. Deosebit de util pentru formulare.

Blocați mesajele

Pentru mesajele care necesită un pic de explicație, avem alerte de stil de paragraf. Acestea sunt perfecte pentru a afișa mesaje de eroare mai lungi, pentru a avertiza un utilizator cu privire la o acțiune în așteptare sau pentru a prezenta doar informații pentru mai mult accent pe pagină.

Modale

Modalurile – dialogurile sau casetele luminose – sunt excelente pentru acțiuni contextuale în situațiile în care este important ca contextul de fundal să fie menținut.

Popovers

Utilizați popover-urile pentru a furniza informații subtextuale unei pagini fără a afecta aspectul.

Bootstrap a fost construit cu Preboot , un pachet open-source de mixuri și variabile care poate fi utilizat împreună cu Less , un preprocesor CSS pentru o dezvoltare web mai rapidă și mai ușoară.

Vedeți cum am folosit Preboot în Bootstrap și cum îl puteți folosi dacă alegeți să rulați Less în următorul proiect.

Cum să-l folosească

Utilizați această opțiune pentru a folosi pe deplin variabilele, mixurile și imbricarea mai puține din Bootstrap în CSS prin javascript în browser.

<link rel="stylesheet/less" type="text/css" href="less/bootstrap.less" media="all" /> rel = "stylesheet/less" type = "text/css" href = "less/bootstrap.less" media = "all" />    
<script type = "text/javascript" src = "js/less-1.0.41.min.js" ></script>  

Nu simți soluția .js? Încercați aplicația Less Mac sau utilizați Node.js pentru a compila atunci când implementați codul.

Ce este inclus

Iată câteva dintre cele mai importante elemente incluse în Twitter Bootstrap ca parte a Bootstrap. Accesați site-ul web Bootstrap sau pagina proiectului Github pentru a descărca și a afla mai multe.

Variabile de culoare

Variabilele din Less sunt perfecte pentru menținerea și actualizarea fără dureri de cap CSS. Când doriți să schimbați o valoare de culoare sau o valoare utilizată frecvent, actualizați-o într-un singur loc și ești gata.

// Linkuri
@linkColor : #8b59c2;         
@linkColorHover :     întuneca ( @linkColor , 10 ); 
// Cenușii
@negru : #000;             
@grayDark :           lumina ( @negru , 25 %); 
@gri :               lumina ( @negru , 50 %); 
@grayLight :          lumina ( @negru , 70 %); 
@grayLighter :        lumina ( @negru , 90 %); 
@alb : #fff;             
// Culori de accent
@albastru : #08b5fb;              
@verde : #46a546;             
@roșu : #9d261d ;               
@galben : #ffc40d;            
@orange : #f89406;            
@roz : #c3325f;              
@violet : #7a43b6;            
// De bază
@de bază : 20px ;          

Comentând

Less oferă, de asemenea, un alt stil de comentare în plus față de /* ... */sintaxa normală a CSS.

// Acesta este un comentariu
/* Acesta este și un comentariu */

Amestecă wazoo-ul

Mixin-urile sunt practic include sau parțiale pentru CSS, permițându-vă să combinați un bloc de cod într-unul singur. Sunt grozave pentru proprietățile prefixate de furnizor, cum ar fi box-shadow, gradienți între browsere, stive de fonturi și multe altele. Mai jos este o mostră de mix-uri care sunt incluse cu Bootstrap.

Stive de fonturi

#font {
  . stenografie ( @greutate : normal , @dimensiune : 14px , @lineHeight : 20px ) {     
    font - size : @size ; 
    font - greutate : @greutate ; 
    linie - înălțime : @lineHeight ; 
  }
  . sans - serif ( @greutate : normal , @dimensiune : 14px , @lineHeight : 20px ) {     
    font - familie : "Helvetica Neue" , ​​Helvetica , Arial , sans - serif ;   
    font - size : @size ; 
    font - greutate : @greutate ; 
    linie - înălțime : @lineHeight ; 
  }
  . serif ( @greutate : normal , @dimensiune : 14px , @lineHeight : 20px ) {     
    font - familie : "Georgia" , Times New Roman , Times , sans - serif ;     
    font - size : @size ; 
    font - greutate : @greutate ; 
    linie - înălțime : @lineHeight ; 
  }
  . monospațiu ( @greutate : normal , @dimensiune : 12px , @lineHeight : 20px ) {     
    font - familie : "Monaco" , Courier New , monospace ;   
    font - size : @size ; 
    font - greutate : @greutate ; 
    linie - înălțime : @lineHeight ; 
  }
}

Gradiente

#gradient {
  . orizontală ( @startColor : #555, @endColor: #333) { 
    fundal - culoare : @endColor ; 
    fundal - repetare : repetare - x ;
    fundal - imagine : - khtml - gradient ( liniar , stânga sus , dreapta sus , de la ( @startColor ), la ( @endColor )); // Konqueror   
    fundal - imagine : - moz - linear - gradient ( stânga , @startColor , @endColor ); // FF 3.6+    
    fundal - imagine : - ms - linear - gradient ( stânga , @startColor , @endColor ); // IE10    
    fundal - imagine : - webkit - gradient ( liniar , stânga sus , dreapta sus , culoare - stop ( 0 %, @startColor ), culoare - stop ( 100 %, @endColor )); // Safari 4+, Chrome 2+    
    fundal - imagine : - webkit - linear - gradient ( stânga , @startColor , @endColor ); // Safari 5.1+, Chrome 10+    
    fundal - imagine : - o - linear - gradient ( stânga , @startColor , @endColor ); // Opera 11.10    
    - ms - filtru : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor ); // IE8+  
    filtru : e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1))" , @startColor , @endColor )); // IE6 și IE7 
    fundal - imagine : liniar - gradient ( stânga , @startColor , @endColor ); // Le standard   
  }
  . vertical ( @startColor : #555, @endColor: #333) { 
    fundal - culoare : @endColor ; 
    fundal - repetare : repetare - x ;
    fundal - imagine : - khtml - gradient ( liniar , stânga sus , stânga jos , de la ( @startColor ), la ( @endColor )); // Konqueror   
    fundal - imagine : - moz - linear - gradient ( @startColor , @endColor ); // FF 3.6+   
    fundal - imagine : - ms - linear - gradient ( @startColor , @endColor ); // IE10   
    fundal - imagine : - webkit - gradient ( liniar , stânga sus , stânga jos , culoare - stop ( 0 %, @startColor ), culoare - stop ( 100 %, @endColor )); // Safari 4+, Chrome 2+    
    fundal - imagine : - webkit - linear - gradient ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+   
    fundal - imagine : - o - linear - gradient ( @startColor , @endColor ); // Opera 11.10   
    - ms - filtru : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor ); // IE8+  
    filtru : e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0))" , @startColor , @endColor )); // IE6 și IE7 
    fundal - imagine : linear - gradient ( @startColor , @endColor ); // Standardul  
  }
  . direcțională ( @startColor : #555, @endColor: #333, @deg: 45deg) { 
    ...
  }
  . vertical - trei - culori ( @startColor : #00b3ee, @midColor: #7a43b6, @colorStop: 0.5, @endColor: #c3325f) { 
    ...
  }
}

Operațiuni și sistem de rețea

Fă captivant și efectuează niște matematici pentru a genera mixuri flexibile și puternice, cum ar fi cel de mai jos.

// Griditude
@gridColumns : 16 ;       
@gridColumnWidth : 40px ;   
@gridGutterWidth : 20px ;   
// Sistem grilă
. container {
  lățime : @siteWidth ; 
  marja : 0 auto ;  
  . clearfix ();
}
. coloane ( @columnSpan : 1 ) {  
  afisare : inline ; 
  plutire : stânga ;
  lățime : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));         
  margine - stânga : @gridGutterWidth ; 
  &: primul - copil {
    margine - stânga : 0 ; 
  }
}
. offset ( @columnOffset : 1 ) {  
  margine - stânga : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) ! important ;          
}