Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Bootstrap este un set de instrumente de la Twitter conceput pentru a porni dezvoltarea de aplicații web și site-uri.
Include CSS și HTML de bază pentru tipografie, formulare, butoane, tabele, grile, navigare și multe altele.
Alertă tocilar: Bootstrap este construit cu Mai puțin și a fost proiectat să funcționeze de la început cu browserele moderne în minte.
Pentru a începe cel mai rapid și mai ușor, doar copiați acest fragment în pagina dvs. web.
Un fan al folosirii Less? Nicio problemă, doar clonează repo-ul și adaugă aceste linii:
Descărcați, bifurcați, extrageți, probleme de fișiere și multe altele cu depozitul oficial Bootstrap de pe Github.
În prezent v1.3.0
În trecut, inginerii de la Twitter au folosit aproape orice bibliotecă cu care erau familiarizați pentru a îndeplini cerințele front-end. Bootstrap a început ca un răspuns la provocările prezentate. Cu ajutorul multor oameni minunați, Bootstrap a crescut semnificativ.
Citiți mai multe pe dev.twitter.com ›
Bootstrap este testat și acceptat în browserele moderne majore, cum ar fi Chrome, Safari, Internet Explorer și Firefox.
Bootstrap vine complet cu șabloane CSS compilate, necompilate și exemple.
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.
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>
Imbricați conținutul dvs., dacă este necesar, creând o .row
coloană existentă.
- <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>
Î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ă.
Variabilele necesare pentru a modifica sistemul de grilă în prezent rezidă toate în preboot.less
.
Variabil | Valoare implicită | Descriere |
---|---|---|
@gridColumns |
16 | Numărul de coloane din grilă |
@gridColumnWidth |
40px | Lățimea fiecărei coloane din grilă |
@gridGutterWidth |
20px | Spațiul negativ dintre fiecare coloană |
@siteWidth |
Suma calculată a tuturor coloanelor și jgheaburilor | Folosim o potrivire de bază pentru a număra numărul de coloane și jgheaburi și pentru a seta lățimea .fixed-container() mixin-ului. |
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!
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>
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>
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.
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.
Folosind accent, adrese și abrevieri
<strong>
<em>
<address>
<abbr>
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 .
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.
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.
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.
<blockquote>
<p>
<small>
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>
<ul>
<ul.unstyled>
<ol>
dl
<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.
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.
Element | Rezultat |
---|---|
<code> |
Într-o linie de text ca aceasta, codul dvs. împachetat va arăta ca acest >html< element. |
<pre> |
<div> <h1>Titul</h1> <p>Ceva chiar aici...</p> </div> Notă: Asigurați-vă că păstrați codul în |
<pre class="prettyprint"> |
Folosind biblioteca google-code-prettify, blocurile dvs. de cod obțin un stil vizual ușor diferit și evidențierea automată a sintaxei. <div> <h1> Titlu </h1> <p> Ceva aici... </p> </div> Descărcați google-code-prettify și vedeți citiți-mă pentru modul de utilizare. |
<span class="label">
Atrageți atenția sau semnalați orice expresie din textul dvs. corporal.
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:
Eticheta | Rezultat |
---|---|
<span class="label">Default</span> |
Mod implicit |
<span class="label success">New</span> |
Nou |
<span class="label warning">Warning</span> |
Avertizare |
<span class="label important">Important</span> |
Important |
<span class="label notice">Notice</span> |
Înștiințare |
Afișați miniaturi de diferite dimensiuni pe pagini cu o amprentă HTML redusă și stiluri minime.
Miniaturile din .media-grid
poate 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 .span6
coloanelor.
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>
<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>
.
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 |
- <tabel>
- ...
- </tabel>
Fă-ți un pic de fantezie cu mesele adăugând dungi zebră - doar adaugă .zebra-striped
clasa.
# | Nume | Numele de familie | Limba |
---|---|---|---|
1 | niste | unu | Engleză |
2 | Joe | Pachet de sase | Engleză |
3 | Stu | Adâncitură | Cod |
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>
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 |
---|---|---|---|
2 | Joe | Pachet de sase | Engleză |
3 | Stu | Adâncitură | Cod |
1 | Ta | unu | Engleză |
- <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>
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.
Adăugați .form-stacked
la 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.
Personalizați orice formă input
, select
, sau textarea
lăț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
, .small
etc.
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 .primary
clasă albastră, o .info
clasă albastru deschis, o clasă verde .success
și o clasă roșie .danger
.
Stilurile de butoane pot fi aplicate oricărei .btn
aplicații. De obicei, veți dori să le aplicați numai elementelor <a>
, <button>
, și selectate <input>
. Iată cum arată:
Vrei nasturi mai mari sau mai mici? Ai de gând!
Pentru butoanele care nu sunt active sau sunt dezactivate de aplicație dintr-un motiv sau altul, utilizați starea dezactivată. Asta .disabled
pentru link-uri și :disabled
pentru <button>
elemente.
.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.
- <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>
.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ă.
- <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>
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.
Un corp frumos…
Twipsies sunt foarte utile pentru a ajuta un utilizator confuz și pentru a-l îndrepta în direcția corectă.
Lorem ipsum dolar sit amet illo error ipsum veritatis aut iste perspiciatis iste voluptas natus illo quasi odit aut natus consequuntur consequuntur, aut natus illo voluptatem odit perspiciatis laudantium rem doloremque totam voluptas. Voluptasdicta eaque beatae aperiam ut enim voluptatem explicabo explicabo, voluptas quia odit fugit accusantium totam totam architecto explicabo sit quasi fugit fugit, totam doloremque unde sunt sed dicta quae accusantium fugit voluptas nemo voluptas voluptatem rem quae aut veritatis quasi quae.
Utilizați popover-urile pentru a furniza informații subtextuale unei pagini fără a afecta aspectul.
Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
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!
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.
Fişier | Descriere |
---|---|
bootstrap-modal.js | Pluginul nostru Modal este o interpretare super subțire a pluginului tradițional modal js! Am avut o grijă deosebită să includem doar funcționalitatea strictă de care avem nevoie la Twitter. |
bootstrap-alerts.js | Pluginul de alertă este o clasă foarte mică pentru adăugarea unei funcționalități apropiate alertelor. |
bootstrap-dropdown.js | Acest plugin este pentru adăugarea interacțiunii drop-down la bara de sus bootstrap sau la navigațiile cu file. |
bootstrap-scrollspy.js | Pluginul ScrollSpy este pentru adăugarea unui navigator cu actualizare automată bazat pe poziția de defilare în bara de sus a bootstrap. |
bootstrap-tabs.js | Acest plugin adaugă o filă rapidă, dinamică și o funcționalitate de pilule pentru a parcurge conținutul local. |
bootstrap-twipsy.js | Bazat pe excelentul plugin jQuery.tipsy scris de Jason Frame; twipsy este o versiune actualizată, care nu se bazează pe imagini, folosește css3 pentru animații și atribute de date pentru stocarea locală a titlurilor! |
bootstrap-popover.js | Pluginul popover oferă o interfață simplă pentru adăugarea de popover la aplicația dvs. Extinde pluginul boostrap-twipsy.js , așa că asigurați-vă că luați și acel fișier atunci când includeți popover-uri în proiectul dvs.! |
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 .
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.
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" href = "less/bootstrap.less" media = "all" />
- <script src = "js/less-1.1.3.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.
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.
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;
- // Grila de referință
- @basefont : 13px ;
- @de bază : 18px ;
Less oferă și un alt stil de comentare pe lângă /* ... */
sintaxa normală a CSS.
- // Acesta este un comentariu
- /* Acesta este și un comentariu */
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 fibox-shadow
, gradienți între browsere, stive de fonturi și multe altele. Mai jos este o mostră de mix-uri care sunt incluse cu Bootstrap.
- #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 ;
- }
- ...
- }
- #gradient {
- ...
- . 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
- fundal - imagine : linear - gradient ( @startColor , @endColor ); // Standardul
- }
- ...
- }
Fă-ți fantezie și efectuează puțină matematică pentru a genera mixuri flexibile și puternice, cum ar fi cel de mai jos.
- // Griditude
- @gridColumns : 16 ;
- @gridColumnWidth : 40px ;
- @gridGutterWidth : 20px ;
- @siteWidth : ( @gridColumns * @gridColumnWidth ) + ( @gridGutterWidth * ( @gridColumns - 1 ));
- // Faceți niște coloane
- . coloane ( @columnSpan : 1 ) {
- lățime : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));
- }
După ce modificați .less
fișierele din /lib/, va trebui să le recompilați pentru a regenera fișierele bootstrap-*.*.*.css și bootstrap-*.*.*.min.css. Dacă trimiteți o cerere de extragere la GitHub, trebuie să recompilați întotdeauna.
Metodă | Pași |
---|---|
Nod cu makefile | Instalați compilatorul de linie de comandă less cu npm rulând următoarea comandă: $ npm install mai puțin Odată instalat, rulați În plus, dacă aveți watchr instalat, puteți rula |
Javascript | Descărcați cel mai recent Less.js și includeți calea către acesta (și Bootstrap) în fișierul
Pentru a recompila fișierele .less, salvați-le și reîncărcați pagina. Less.js le compilează și le stochează în stocarea locală. |
Linie de comanda | Dacă aveți deja instalat instrumentul de linie de comandă less, pur și simplu rulați următoarea comandă: $ lessc ./lib/bootstrap.less > bootstrap.css Asigurați-vă că includeți |
Mai puțin aplicație pentru Mac | Aplicația neoficială pentru Mac urmărește directoarele fișierelor .less și compilează codul în fișiere locale după fiecare salvare a unui fișier .less urmărit. Dacă doriți, puteți comuta preferințele în aplicație pentru minimizarea automată și în ce director ajung fișierele compilate. |