Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Bootstrap hè un toolkit da Twitter pensatu per kickstart u sviluppu di webapps è siti.
Include CSS basi è HTML per a tipografia, forme, buttoni, tavule, griglie, navigazione è più.
Nerd alert: Bootstrap hè custruitu cù Less è hè statu cuncepitu per travaglià fora di a porta cù i navigatori muderni in mente.
Per u principiu più rapidu è faciule, basta copiate stu snippet in a vostra pagina web.
Un fan di utilizà Less? Nisun prublema, basta clone u repo è aghjunghje queste linee:
Scaricate, forchetta, tirate, prublemi di schedari, è più cù u repo ufficiale di Bootstrap in Github.
In i primi tempi di Twitter, l'ingegneri anu utilizatu quasi tutte e librerie chì eranu familiarizati per risponde à i requisiti di front-end. Bootstrap hà iniziatu cum'è una risposta à e sfide presentate è u sviluppu acceleratu rapidamente durante a prima Hackweek di Twitter.
Cù l'aiutu è i feedback di parechji ingegneri in Twitter, Bootstrap hè cresciutu significativamente per cumprende micca solu stili basi, ma mudelli di design front-end più eleganti è durable.
Leghjite più nantu à dev.twitter.com ›
Bootstrap hè pruvatu è supportatu in i principali navigatori muderni cum'è Chrome, Safari, Internet Explorer è Firefox.
Bootstrap vene cumpletu cù CSS compilati, micca compilati è mudelli di esempiu.
U sistema di griglia predeterminatu furnitu cum'è parte di Bootstrap hè una griglia larga 940px di 16 colonne. Hè un sapori di u famosu sistema di griglia 960, ma senza u margine / padding supplementu nantu à i lati manca è destra.
Cum'è mostratu quì, un layout di basa pò esse creatu cù duie "columne", ognuna spanning un numeru di e 16 culonni fundamentali chì avemu definitu cum'è parte di u nostru sistema di griglia. Vede l'esempii sottu per più variazioni.
- <div class = "fila" >
- <div class = "span6 columns" >
- ...
- </div>
- <div class = "span10 columns" >
- ...
- </div>
- </div>
U layout predeterminatu è simplice 940px-wide, centratu per quasi ogni situ web o pagina furnita da un unicu <div.container>
.
- <corpu>
- <div class = "container" >
- ...
- </div>
- </corpu>
Una struttura di pagina fluida alternativa è flessibile cù larghezza minima è massima è una barra laterale di sinistra. Grande per app è documenti.
- <corpu>
- <div class = "container-fluid" >
- <div class = "sidebar" >
- ...
- </div>
- <div class = "cuntenutu" >
- ...
- </div>
- </div>
- </corpu>
Una gerarchia tipografica standard per a strutturazione di e vostre pagine web.
L'intera griglia tipografica hè basatu annantu à dui Less variabili in u nostru schedariu preboot.less: @basefont
è @baseline
. U primu hè a dimensione di fonti di basa utilizata in tuttu è u sicondu hè l'altezza di a linea di basa.
Adupremu quelli variàbili, è qualchì matematica, per creà i marghjini, i paddings è l'altezza di linea di tutti i nostri tipi è più.
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.
Utilizendu enfasi, indirizzi è abbreviazioni
<strong>
<em>
<address>
<abbr>
I tag di enfasi ( <strong>
è <em>
) deve esse usatu per indicà l'impurtanza supplementu o l'enfasi di una parolla o frase relative à a so copia circundante. Aduprà <strong>
per impurtanza è <em>
per enfasi di stress .
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, a pharetra augue.
Nota: Hè sempre bè d'utilizà <b>
è <i>
tag in HTML5 è ùn deve micca esse stilati in grassu è corsu, rispettivamente (ancu se ci hè un elementu più semanticu, aduprate). <b>
hè destinatu à mette in risaltu parolle o frasi senza trasmette impurtanza addiziale, mentre chì <i>
hè soprattuttu per voce, termini tecnichi, etc.
L' <address>
elementu hè utilizatu per l'infurmazioni di cuntattu per u so antenatu più vicinu, o tuttu u corpu di u travagliu. Eccu cumu si vede:
Nota: Ogni linea in un <address>
deve finisce cù una linea-break ( <br />
) o esse impannillata in un tag à livellu di bloccu (per esempiu, <p>
) per strutturà bè u cuntenutu.
Per l'abbreviazioni è l'acronimi, utilizate l' <abbr>
etichetta ( <acronym>
hè deprecated in HTML5 ). Mettite a forma di shorthand in u tag è stabilisce un titulu per u nome cumpletu.
<blockquote>
<p>
<small>
Per include un blockquote, avvolge <blockquote>
è <p>
tag <small>
. Aduprate l' <small>
elementu per citate a vostra fonte è avete da ottene un dash em —
prima.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
Dr Julius Hibbert
<ul>
<ul.unstyled>
<ol>
dl
<table>
<thead>
<tbody>
<tr>
<th>
<td>
<colspan>
<caption>
I tavulini sò grandi - per parechje cose. Grandi tavule, però, anu bisognu di un pocu di markup love per esse utili, scalabili è leghjite (à u livellu di codice). Eccu uni pochi di cunsiglii per aiutà.
Imbulighjate sempre i vostri intestazioni di colonna in un <thead>
tali chì a ghjerarchia hè <thead>
> <tr>
> <th>
.
Simile à l'intestazione di a colonna, tuttu u cuntenutu di u corpu di a vostra tavula deve esse impannillatu in una <tbody>
manera chì a vostra ghjerarchia hè <tbody>
> <tr>
> <td>
.
Tutte e tavule seranu automaticamente stilate cù solu i cunfini essenziali per assicurà a leggibilità è mantene a struttura. Ùn ci hè bisognu di aghjunghje classi o attributi extra.
# | Nomu | Casata | Lingua |
---|---|---|---|
1 | Certi | Unu | Inglese |
2 | Joe | Sixpack | Inglese |
3 | Stu | Dent | Codice |
- <tavula>
- ...
- </table>
Fate un pocu di fantasia cù i vostri tavulini aghjunghjendu zebra-striping - basta aghjunghje a .zebra-striped
classa.
# | Nomu | Casata | Lingua |
---|---|---|---|
1 | Certi | Unu | Inglese |
2 | Joe | Sixpack | Inglese |
3 | Stu | Dent | Codice |
Nota: Zebra-striping hè una migliione progressiva micca dispunibile per i navigatori più vechji cum'è IE8 è sottu.
- <table class = "zebra-striped" >
- ...
- </table>
Pigliendu l'esempiu precedente, migliurà l'utilità di e nostre tavule furnite una funziunalità di sorte via jQuery è u plugin Tablesorter . Cliccate nantu à l'intestazione di qualsiasi colonna per cambià a sorta.
# | Nomu | Casata | Lingua |
---|---|---|---|
1 | U vostru | Unu | Inglese |
2 | Joe | Sixpack | Inglese |
3 | Stu | Dent | Codice |
- <script src = "js/jquery/jquery.tablesorter.min.js" ></script>
- <script >
- $ ( funzione () {
- $ ( "table#sortTableExample" ). tablesorter ({ sortList : [[ 1 , 0 ]] });
- });
- </script>
- <table class = "zebra-striped" >
- ...
- </table>
Tutte e forme sò datu stili predeterminati per presentà in una manera leggibile è scalabile. Stili sò furniti per input di testu, selezziunà listi, aree di testu, buttoni di radiu è caselle di verificazione, è buttoni.
Aghjunghjite .form-stacked
à l'HTML di u vostru furmulariu è avete etichette nantu à i so campi invece di a so manca. Questu funziona bè se i vostri formi sò brevi o avete duie colonne di input per forme più pesanti.
Comu cunvenzione, i buttoni sò usati per l'azzioni mentre i ligami sò usati per l'uggetti. Per esempiu, "Download" puderia esse un buttone è "attività recente" puderia esse un ligame.
Tutti i buttoni predeterminate à un stilu grisgiu chjaru, ma una quantità di classi funziunali ponu esse appiicati per stili di culore diffirenti. Queste classi includenu una .primary
classa blu, una .info
classa azzurra, una classe verde .success
è una .danger
classe rossa. In più, rotulà i vostri stili hè faciule faciule.
Stili di buttone pò esse appiicati à qualsiasi cosa cù l' .btn
applicata. Di genere, vulete applicà questi solu à elementi <a>
, <button>
, è selezziunate . <input>
Eccu cumu si vede:
Vulete i buttoni più grande o più chjucu? Amparate!
Per i buttoni chì ùn sò micca attivi o chì sò disattivati da l'app per una ragione o un altru, utilizate u statu disattivatu. Hè .disabled
per ligami è :disabled
per <button>
elementi.
div.alert-message
Missaghji in una linea per mette in risaltu u fallimentu, u fallimentu pussibule, o u successu di una azzione. Particularmente utile per e forme.
div.alert-message.block-message
Per i missaghji chì necessitanu un pocu di spiegazione, avemu avvisi di stile di paragrafu. Quessi sò perfetti per sparghje i missaghji di errore più longu, avvistendu un utilizatore di una azione pendente, o solu presentà infurmazioni per più enfasi in a pagina.
Modali - dialoghi o lightbox - sò grandi per l'azzioni cuntestuali in situazioni induve hè impurtante chì u cuntestu di fondo sia mantinutu.
Un bellu corpu...
I Twipsies sò super utili per aiutà un utilizatore confusu è indicà in a direzione ghjusta.
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.
Aduprate popovers per furnisce infurmazione subtextuale à una pagina senza affettà u layout.
Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Bootstrap hè statu custruitu cù Preboot , un pacchettu open-source di mixins è variàbili per esse usatu in cunjunzione cù Less , un preprocessore CSS per un sviluppu web più veloce è più faciule.
Scuprite cumu avemu usatu Preboot in Bootstrap è cumu pudete fà usu di ellu duvete sceglie di eseguisce Less in u vostru prossimu prughjettu.
Aduprate sta opzione per sfruttà pienamente e variabili Meno di Bootstrap, mixins è nesting in CSS via javascript in u vostru navigatore.
- <link rel = "stylesheet/less" href = "less/bootstrap.less" media = "all" />
- <script src = "js/less-1.1.3.min.js" ></script>
Ùn sentu micca a suluzione .js? Pruvate l'app Less Mac o utilizate Node.js per cumpilà quandu implementate u vostru codice.
Eccu alcuni di i punti culminanti di ciò chì hè inclusu in Twitter Bootstrap cum'è parte di Bootstrap. Andate à u situ web di Bootstrap o a pagina di u prugettu Github per scaricà è amparà di più.
Variabili in Less sò perfetti per mantene è aghjurnà u vostru CSS senza mal di testa. Quandu vulete cambià un valore di culore o un valore spessu usatu, aghjurnà in un locu è site stabilitu.
- // Ligami
- @linkColor : #8b59c2;
- @linkColorHover : scurisce ( @linkColor , 10 );
- // Grigi
- @negru : #000;
- @grayDark : illuminate ( @black , 25 %);
- @grisgiu : illuminate ( @negru , 50 %);
- @grayLight : illuminate ( @black , 70 %);
- @grayLighter : illuminate ( @black , 90 %);
- @biancu : #fff;
- // Accent Colors
- @blu : #08b5fb;
- @verde : #46a546;
- @red : #9d261d;
- @giallo : #ffc40d;
- @orange : #f89406;
- @rosa : #c3325f;
- @viola : #7a43b6;
- // Griglia di basa
- @basefont : 13px ;
- @baseline : 18px ;
/* ... */
Less furnisce ancu un altru stile di cumentu in più di a sintassi normale di CSS .
- // Questu hè un cumentu
- /* Questu hè ancu un cumentu */
I mixins sò basicamente include o parziali per CSS, chì vi permettenu di cumminà un bloccu di codice in unu. Sò fantastichi per e proprietà prefissate di u venditore cum'è box-shadow
, gradienti cross-browser, pile di fonti, è più. Quì sottu hè una mostra di i mixins chì sò inclusi cù Bootstrap.
- #font {
- . stenografia ( @weight : normale , @size : 14px , @lineHeight : 20px ) {
- font - size : @size ;
- font - pesu : @pesu ;
- line - height : @lineHeight ;
- }
- . sans - serif ( @weight : normale , @size : 14px , @lineHeight : 20px ) {
- famiglia di fonti : " Helvetica Neue" , Helvetica , Arial , sans - serif ;
- font - size : @size ;
- font - pesu : @pesu ;
- line - height : @lineHeight ;
- }
- . serif ( @pesu : normale , @size : 14px , @lineHeight : 20px ) {
- font - family : "Georgia" , Times New Roman , Times , sans - serif ;
- font - size : @size ;
- font - pesu : @pesu ;
- line - height : @lineHeight ;
- }
- . monospace ( @weight : normale , @size : 12px , @lineHeight : 20px ) {
- font - family : "Monaco" , Courier New , monospace ;
- font - size : @size ;
- font - pesu : @pesu ;
- line - height : @lineHeight ;
- }
- }
- #gradiente {
- . horizontale ( @startColor : #555, @endColor : #333) {
- fondo - culore : @endColor ;
- fondo - ripetiri : ripetiri - x ;
- background - image : - khtml - gradient ( lineare , left top , right top , from ( @startColor ), à ( @endColor )); // Cunqueror
- fondo - imagine : - moz - linear - gradient ( left , @startColor , @endColor ); // FF 3.6+
- fondo - imagine : - ms - linear - gradient ( left , @startColor , @endColor ); // IE10
- fondo - imagine : - webkit - gradiente ( lineare , in cima a manca, in cima à a diritta , colore - stop ( 0 % , @startColor ), culore - stop ( 100 %, @endColor )); // Safari 4+, Chrome 2+
- fondo - imagine : - webkit - linear - gradient ( left , @startColor , @endColor ); // Safari 5.1+, Chrome 10+
- fondo - imagine : - o - linear - gradient ( left , @startColor , @endColor ); // Opera 11.10
- fondo - imagine : linear - gradient ( left , @startColor , @endColor ); // Le standard
- }
- . verticale ( @startColor : #555, @endColor : #333) {
- fondo - culore : @endColor ;
- fondo - ripetiri : ripetiri - x ;
- fondo - imagine : - khtml - gradiente ( lineare , in cima à a manca , in fondu à a manca , da ( @startColor ), à ( @endColor )); // Cunqueror
- fondo - imagine : - moz - linear - gradient ( @startColor , @endColor ); // FF 3.6+
- fondo - imagine : - ms - linear - gradient ( @startColor , @endColor ); // IE10
- fondo - imagine : - webkit - gradiente ( lineare , in cima à sinistra , in fondu in fondu , culore - stop ( 0 %, @startColor ), culore - stop ( 100 %, @endColor )); // Safari 4+, Chrome 2+
- fondo - imagine : - webkit - linear - gradient ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+
- fondo - imagine : - o - linear - gradient ( @startColor , @endColor ); // Opera 11.10
- fondo - imagine : linear - gradient ( @startColor , @endColor ); // U standard
- }
- . direzionale ( @startColor : #555, @endColor: #333, @deg: 45deg) {
- ...
- }
- . verticale - trè - culori ( @startColor : #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) {
- ...
- }
- }
Fate fantasia è eseguite qualchì matematica per generà mixin flessibili è putenti cum'è quellu quì sottu.
- // Griditude
- @gridColumns : 16 ;
- @gridColumnWidth : 40px ;
- @gridGutterWidth : 20px ;
- @siteWidth : ( @gridColumns * @gridColumnWidth ) + ( @gridGutterWidth * ( @gridColumns - 1 ));
- // Sistema di griglia
- . container {
- larghezza : @siteWidth ;
- margin : 0 auto ;
- . clearfix ();
- }
- . colonnes ( @columnSpan : 1 ) {
- larghezza : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));
- }
- . offset ( @columnOffset : 1 ) {
- margin - left : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) + @extraSpace ;
- }