Exemple de pornire rapidă

Ai nevoie de niște șabloane rapide? Consultați aceste exemple de bază pe care le-am reunit:

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 = "rând" > 
  <div class = "span6" > 
    ...
  </div>
  <div class = "span10" > 
    ...
  </div>
</div>

Cuibări coloane

Imbricați conținutul dvs., dacă este necesar, creând o .rowcoloană existentă.

Exemplu de coloane imbricate

<div class = "rând" > 
  <div class = "span12" > 
    Nivelul 1 al coloanei
    <div class = "rând" > 
      <div class = "span6" > 
        Nivelul 2
      </div>
      <div class = "span6" > 
        Nivelul 2
      </div>
    </div>
  </div>
</div>

Rotiți propria grilă

În Bootstrap sunt încorporate o mână de variabile pentru personalizarea sistemului de grilă implicit de 940px. Cu un pic de personalizare, puteți modifica dimensiunea coloanelor, jgheaburile acestora și containerul în care se află.

În interiorul rețelei

Variabilele necesare pentru a modifica sistemul de grilă în prezent rezidă toate în preboot.less.

Acum pentru a personaliza

Modificarea grilei înseamnă schimbarea celor trei @grid-*variabile și recompilarea fișierelor Less.

Bootstrap este echipat pentru a gestiona un sistem de grilă cu până la 24 de coloane; valoarea implicită este doar 16. Iată cum ar arăta variabilele dvs. de grilă personalizate la o grilă cu 24 de coloane.

@gridColumns : 24 ;       
@gridColumnWidth : 20px ;   
@gridGutterWidth : 20px ;   

Odată recompilat, veți fi gata!

Aspect fix

Aspectul prestabilit și simplu, lat de 940 px, centrat, pentru aproape orice site web sau pagină furnizată de un singur <div.container>.

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

Dispunerea fluidului

O structură alternativă, flexibilă a paginii, cu lățimi minime și maxime și o bară laterală din stânga. Excelent pentru aplicații și documente.

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

Titluri și copiere

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

Întreaga grilă tipografică se bazează pe două variabile Less din fișierul nostru preboot.less: @basefontși @baseline. Prima este dimensiunea fontului de bază folosită pe tot parcursul, iar a doua este înălțimea liniei de bază.

Folosim acele variabile și ceva matematică pentru a crea marginile, umpluturile și înălțimile liniilor de toate tipurile noastre și altele.

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

Diverse elemente

Folosind accent, adrese și abrevieri

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

Când să utilizați

Etichetele de accentuare ( <strong>și <em>) trebuie folosite pentru a indica importanța suplimentară sau accentul unui cuvânt sau expresie în raport cu copia din jur. Utilizați <strong>pentru importanță și <em>pentru accentuarea stresului .

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.

Notă: este încă în regulă să utilizați <b>și <i>etichetele în HTML5 și nu trebuie să fie scrise în stil aldine și respectiv italic (deși dacă există un element mai semantic, folosiți-l). <b>este menit să evidențieze cuvinte sau expresii fără a transmite o importanță suplimentară, în timp ce <i>este mai ales pentru voce, termeni tehnici etc.

Adrese

Elementul <address>este utilizat pentru informațiile de contact pentru cel mai apropiat strămoș al său sau pentru întregul corp de lucru. Iată două exemple despre cum ar putea fi utilizat:

Notă: Fiecare linie dintr-un <address>trebuie să se încheie cu o întrerupere de linie ( <br />) sau să fie înfășurată într-o etichetă la nivel de bloc (de exemplu, <p>) pentru a structura corect conținutul.

Abrevieri

Pentru abrevieri și acronime, utilizați <abbr>eticheta ( <acronym>este depreciată în HTML5 ). Puneți formularul de prescurtare în etichetă și setați un titlu pentru numele complet.

Citate bloc

<blockquote> <p> <small>

Cum să citez

Pentru a include un blockquote, înfășurați <blockquote>și <p>etichetați <small>. Utilizați <small>elementul pentru a vă cita sursa și veți primi o liniuță em —înainte.

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

Dr. Julius Hibbert

<blockquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. </p>
  <small> Dr. Julius Hibbert </small>
</blockquote>

Neordonat<ul>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Integer molestie lorem at massa
• Facilisis in pretium nisl aliquet
• Nulla volutpat aliquam velit
  • Phasellus 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

Nestilat<ul.unstyled>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Integer molestie lorem at massa
• Facilisis in pretium nisl aliquet
• Nulla volutpat aliquam velit
  • Phasellus 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

Ordonat<ol>

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

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.

Cod

<code> <pre>

Proxenetează-ți codul în stil cu două etichete simple. Pentru și mai multă frumusețe prin javascript, introduceți biblioteca de coduri Google Prettify și gata.

Prezentarea codului

Codul, blocurile sau doar fragmentele inline pot fi afișate cu stil doar prin împachetarea etichetei potrivite. Pentru blocurile de cod care se întind pe mai multe linii, utilizați <pre>elementul. Pentru codul inline, utilizați <code>elementul.

<div>
  <h1>Titul</h1>
  <p>Ceva chiar aici...</p>
</div>

<div> <h1> Titlu </h1> <p> Ceva aici... </p> </div>
  
  

Etichete inline

<span class="label">

Atrageți atenția sau semnalați orice expresie din textul dvs. corporal.

Etichetați orice

Am avut vreodată nevoie de unul dintre acei Noua fantezie! sau steaguri importante la scrierea codului? Ei bine, acum le ai. Iată ce este inclus în mod implicit:

Grila media

Afișați miniaturi de diferite dimensiuni pe pagini cu o amprentă HTML redusă și stiluri minime.

Exemple de miniaturi

Miniaturile din .media-gridpoate avea orice dimensiune, dar funcționează cel mai bine atunci când sunt mapate direct la sistemul de grilă Bootstrap încorporat. Lățimile imaginii precum 90, 210 și 330 se combină cu câțiva pixeli de umplutură pentru a egala dimensiunile .span2, .span4, și .span6coloanelor.

Mare

Mediu

Mic

Codându-le

Grilele media sunt ușor de utilizat și destul de simple pe partea de marcare. Dimensiunile lor se bazează exclusiv pe dimensiunea imaginilor incluse.

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

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ă <thead>astfel încât ierarhia să fie <thead>> <tr>> <th>.

Similar antetelor coloanelor, tot conținutul corpului tabelului ar trebui să fie împachetat într-un <tbody>astfel 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.

<tabel>
  ...
</tabel>

Exemplu: cu dungi de zebră

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

Notă: Zebra-striping este o îmbunătățire progresivă, care nu este disponibilă pentru browserele mai vechi, cum ar fi IE8 și cele mai vechi.

< clasa de masă = „zebr-dungi” > 
...
</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.

<script src = „js/jquery/jquery.tablesorter.min.js” ></script> 
<script > 
  $ ( funcția () { 
    $ ( "tabel#sortTableExample" ). tablesorter ({ sortList : [[ 1 , 0 ]] });  
  });
</script>
< clasa de masă = „zebr-dungi” > 
  ...
</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.

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.

Dimensiunile câmpurilor de formulare

Personalizați orice formă input, select, sau textarealățime adăugând doar câteva clase la marcaj.

Începând cu v1.3.0, am adăugat clasele de dimensionare bazate pe grilă pentru elementele de formular. Vă rugăm să utilizați acestea peste clasele existente .mini, .smalletc.

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 o serie de clase funcționale pot fi aplicate pentru diferite stiluri de culoare. Aceste clase includ o .primaryclasă albastră, o .infoclasă albastru deschis, o clasă verde .successși o clasă roșie .danger.

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

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. liEtichetele dropdowns acceptă și .activeafișarea selecției paginii curente.

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
• Scapă jos
  • Legătură secundară
  • Altceva aici
  • Un alt link

<ul class = "tabs" > 
  <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 = "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>

Firimituri de pâine

Navigarea prin breadcrumb este folosită ca o modalitate de a arăta utilizatorilor unde se află într-o aplicație sau un site, dar nu pentru navigarea principală.

• Acasă

• Acasă /
• Pagina din mijloc

• Acasă /
• Pagina din mijloc /
• Încă unul

• Acasă /
• Pagina din mijloc /
• Inca una /
• Eşti aici

<ul class = "breadcrumb" > 
  <li><a href = "#" > Acasă </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > Pagina din mijloc </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > Încă unul </a> <span class = "divider" > / </span></li>   
  <li class = "active" > Sunteți aici </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 = "paginare" > 
  <ul>
    <li class = "prev disabled" ><a href = "#" > ← Anterior </a></li>  
    <li class = "active" ><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ă

.alert-message

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

Obțineți javascript »

Exemplu de cod

<div class = "avertizare cu mesaje de alertă" > 
  <a class = "close" href = "#" > × </a>  
  <p><strong> Sfinte guacamole! </strong> Cel mai bine verifică-te, nu arăți prea bine. </p>
</div>

Blocați mesajele

.alert-message.block-message

Pentru mesajele care necesită un pic de explicație, avem alerte de stil de paragraf. Acestea sunt perfecte pentru a difuza 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ă.

Obțineți javascript »

Exemplu de cod

<div class = "avertisment de blocare a mesajului de alertă" > 
  <a class = "close" href = "#" > × </a>  
  <p><strong> Sfinte guacamole! Acesta este un avertisment! </strong> Cel mai bine verifică-te, nu arăți prea bine. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. </p>
  <div class = "alert-actions" > 
    <a class = "btn small" href = "#" > Efectuați această acțiune </a> <a class = "btn small" href = "#" > Sau procedați astfel </a>     
  </div>
</div>

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.

Obțineți javascript »

Sfaturi instrumente

Twipsies sunt foarte utile pentru a ajuta un utilizator confuz și pentru a-l îndrepta în direcția corectă.

Obțineți javascript »

Popovers

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

Obțineți javascript »

Noțiuni de bază

Integrarea javascriptului cu biblioteca Bootstrap este foarte ușoară. Mai jos trecem peste elementele de bază și vă oferim câteva plugin-uri minunate pentru a începe!

Vizualizați documente javascript »

Ce este inclus

Dați viață unora dintre componentele principale ale Bootstrap cu noi plugin-uri personalizate care funcționează cu jQuery și Ender . Vă încurajăm să le extindeți și să le modificați pentru a se potrivi nevoilor dumneavoastră specifice de dezvoltare.

Este necesar javascript?

Nu! Bootstrap este conceput în primul rând pentru a fi o bibliotecă CSS. Acest javascript oferă un strat interactiv de bază peste stilurile incluse.

Cu toate acestea, pentru cei care au nevoie de javascript, am furnizat pluginurile de mai sus pentru a vă ajuta să înțelegeți cum să integrați Bootstrap cu javascript și pentru a vă oferi imediat o opțiune rapidă și ușoară pentru funcționalitatea de bază.

Pentru mai multe informații și pentru a vedea câteva demonstrații live, consultați pagina noastră de documentație a pluginului .