Esempii di partenza rapida

Avete bisognu di mudelli rapidi? Scuprite questi esempi basi chì avemu riunitu:

Griglia predeterminata

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.

Esempiu di marcatura di griglia

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

Culonni di nidificazione

Nidificate u vostru cuntenutu se duvete creendu un .rowin una colonna esistente.

Esempiu di colonne nidificate

<div class = "fila" > 
  <div class = "span12" > 
    Livellu 1 di a colonna
    <div class = "fila" > 
      <div class = "span6" > 
        Livellu 2
      </div>
      <div class = "span6" > 
        Livellu 2
      </div>
    </div>
  </div>
</div>

Roll a vostra propria griglia

Custruitu in Bootstrap sò una manciata di variabili per persunalizà u sistema di griglia 940px predeterminatu. Cù un pocu di persunalizazione, pudete mudificà a dimensione di e culonne, i so canali, è u cuntainer in quale residenu.

Dentru a griglia

I variàbili necessarii per mudificà u sistema di griglia attualmente tutti residenu in preboot.less.

Avà per persunalizà

Mudificà a griglia significa cambià e trè @grid-*variàbili è recompilà i schedari Less.

Bootstrap vene equipatu per trattà un sistema di griglia cù sin'à 24 colonne; u predeterminatu hè solu 16. Eccu cumu e vostre variàbili di griglia pareranu persunalizate à una griglia di 24 colonne.

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

Una volta ricompilatu, sarete stabilitu!

Disposizione fissa

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>

Disposizione fluida

Una struttura di pagina fluida alternativa è flessibile cù larghezza minima è massima è una barra laterale sinistra. Grande per app è documenti.

<corpu>
  <div class = "container-fluid" > 
    <div class = "sidebar" > 
      ...
    </div>
    <div class = "cuntenutu" > 
      ...
    </div>
  </div>
</corpu>

Intestazioni è copia

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

h1. Titre 1

h2. Titre 2

h3. Titre 3

h4. Titre 4

h5. Titre 5

h6. Titre 6

Esempiu paràgrafu

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.

Esempiu di intestazione Hà sottotitulu...

Misc. elementi

Utilizendu enfasi, indirizzi è abbreviazioni

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

Quandu aduprà

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 l'impurtanza è <em>per l'enfasi di u stress .

Enfasi in un paràgrafu

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.

Indirizzi

L' <address>elementu hè utilizatu per l'infurmazioni di cuntattu per u so antenatu più vicinu, o tuttu u corpu di u travagliu. Eccu dui esempi di cumu si pò esse usatu:

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.

Abbreviazioni

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.

Blockquotes

<blockquote> <p> <small>

Cumu cita

Per include un blockquote, avvolge <blockquote>è <p>tag <small>. Aduprate l' <small>elementu per cite 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

<quote di bloccu>
  <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>

Senza ordine<ul>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Integer molestie lorem à 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

Unstyled<ul.unstyled>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Integer molestie lorem à 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

Cumandatu<ol>

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Integer molestie lorem à 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

Descrizzionedl

Lista di descrizzione

Una lista di descrizzione hè perfetta per definisce i termini.

Euismod

Vestibulum id ligula porta felis euismod sempre 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.

Codice

<code> <pre>

Pimp u vostru codice in stile cù dui tag simplici. Per ancu più fantastichi attraversu javascript, lasciate in a libreria di Google Prettify di codice è avete stabilitu.

Presentazione di u codice

U codice, i blocchi di o solu snippets in linea, ponu esse affissati cù stile solu cù l'imballaggio in u tag ghjusta. Per i blocchi di codice spanning multiple lines, utilizate l' <pre>elementu. Per codice inline, utilizate l' <code>elementu.

<div>
  <h1>Intestazione</h1>
  <p>Qualcosa quì...</p>
</div>

<div> <h1> Intestazione </h1> <p> Qualcosa quì ... </p> </div>
  
  

Etichette in linea

<span class="label">

Chjamate l'attenzione o signalate qualsiasi frase in u vostru testu di corpu.

Etichettate qualcosa

Mai avutu bisognu di unu di quelli fantastichi Novu! o Bandiere impurtanti quandu scrive u codice? Ebbè, avà li avete. Eccu ciò chì hè inclusu per difettu:

Griglia media

Mostra miniature di diverse dimensioni in pagine cù una impronta HTML bassa è stili minimi.

Esempiu di miniature

I miniature in u .media-gridpò esse di qualsiasi dimensione, ma funzionanu megliu quandu sò mappati direttamente à u sistema di griglia Bootstrap integratu. Larghezze di l'imaghjini cum'è 90, 210 è 330 si combinanu cù uni pochi di pixel di padding per uguali à e dimensioni di colonna .span2, .span4, è ..span6

Grande

Medium

Picculu

Li codificà

E griglie di media sò faciuli d'utilizà è piuttostu simplici in u latu di marcatura. E so dimensioni sò basate solu nantu à a dimensione di l'imaghjini inclusi.

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

Custruì tavulini

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

Esempiu: Stili di tabella predeterminati

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.

<tavula>
  ...
</table>

Esempiu: Zebra-striped

Fate un pocu di fantasia cù i vostri tavulini aghjunghjendu zebra-striping - basta aghjunghje a .zebra-stripedclassa.

Nota: Zebra-striping hè un miglioramentu progressiu micca dispunibule per i navigatori più vechji cum'è IE8 è sottu.

<table class = "zebra-striped" > 
...
</table>

Esempiu: Zebra-striped w/ TableSorter.js

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.

<script src = "js/jquery/jquery.tablesorter.min.js" ></script> 
<script > 
  $ ( funzione () { 
    $ ( "table#sortTableExample" ). tablesorter ({ sortList : [[ 1 , 0 ]] });  
  });
</script>
<table class = "zebra-striped" > 
  ...
</table>

Stili predeterminati

Tutte e forme sò datu stili predeterminati per presentà in una manera leggibile è scalabile. Stili sò furniti per inputs di testu, selezziunà listi, aree di testu, buttoni di radiu è caselle di verificazione, è buttoni.

Forme impilate

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.

Forme dimensioni di u campu

Personalizà ogni forma input, select, otextarea larghezza aghjustendu solu uni pochi di classi à u vostru marcatu.

Da a v1.3.0, avemu aghjustatu e classi di dimensionamentu basatu in griglia per elementi di forma. Per piacè aduprate queste nantu à e classi esistenti .mini, .smalletc.

Bottoni

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 .primaryclassa blu, una .infoclassa azzurra, una classe verde .successè una .dangerclasse rossa.

Esempi di buttoni

Stili di buttone pò esse appiicati à qualsiasi cosa cù l' .btnapplicata. Di genere, vulete applicà questi solu à elementi <a>, <button>, è selezziunate . <input>Eccu cumu si vede:

Taglie alternate

Vulete i buttoni più grande o più chjucu? Amparate!

Statu disattivatu

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è .disabledper ligami è :disabledper <button>elementi.

Ligami

Bottoni

Chi hè què

A nostra barra superiore hè una barra fissa chì accoglie u logò o nome di un situ web, a navigazione primaria è a forma di ricerca.

Customizable

Tutti l'elementi in l'internu, è ancu tutta a barra superiore, sò opzionali. Pudete sceglie di include un logò / nome, nav, ricerca, è un nav secundariu - o qualsiasi cumminazione di questu.

Dropdown inclusi

Cum'è parte di a navigazione principale, avemu inclusu a capacità per voi di aghjunghje dropdowns à u vostru navigatore. Verificate u navigatore secundariu sopra (allineatu à destra) per vede cumu hè fattu. I tag dropdowns supportanu liancu .activeper mostrà a selezzione di pagina attuale.

Tabulature è pastiglie

Crea una navigazione secundaria simplice cù un <ul>. Scambià trà tabulazioni o pillole aghjunghjendu a classa adatta.

Ideale per sottosezioni di cuntenutu cum'è e nostre pagine di cunfigurazione di u contu è i tempi di l'utilizatori per bascà trà e pagine di cuntenutu simili. Disponibile in stili tabulati o pilule.

• A casa
• Prufilu
• Missaghji
• Settings
• Cuntattu
• Dropdown
  • Link secundariu
  • Qualcosa altru quì
  • Un altru ligame

<ul class = "tabs" > 
  <li class = "active" ><a href = "#" > Home </a></li>  
  <li><a href = "#" > Profilu </a></li> 
  <li><a href = "#" > Missaghji </a></li> 
  <li><a href = "#" > Settings </a></li> 
  <li><a href = "#" > Cuntattu </a></li> 
</ul>

• A casa
• Prufilu
• Missaghji
• Settings
• Cuntattu

<ul class = "pillole" > 
  <li class = "active" ><a href = "#" > Home </a></li>  
  <li><a href = "#" > Profilu </a></li> 
  <li><a href = "#" > Missaghji </a></li> 
  <li><a href = "#" > Settings </a></li> 
  <li><a href = "#" > Cuntattu </a></li> 
</ul>

Breadcrumbs

A navigazione di breadcrumb hè aduprata cum'è un modu per vede l'utilizatori induve si trovanu in una app o un situ, ma micca per a navigazione primaria.

• A casa

• Home /
• Pagina media

• Home /
• pagina media /
• Un altru

• Home /
• pagina media /
• un altru /
• Siate quì

<ul class = "breadcrumb" > 
  <li><a href = "#" > Home </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > Pagina media </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > Un altru </a> <span class = "divider" > / </span></li>   
  <li class = "active" > Siate quì </li> 
</ul>

Paginazione

Paginazione ultra semplicistica e minimale ispirata da Rdio. U grande bloccu hè difficiule di missu, facilmente scalabile, è furnisce grandi spazii di clic.

<div class = "paginazione" > 
  <ul>
    <li class = "prev disattivata" ><a href = "#" > ← Previous </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 = "#" > Next → </a></li>  
  </ul>
</div>

Avvisi basi

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

Pigliate u javascript »

Esempiu di codice

<div class = "avvisu di messagiu d'alerta" > 
  <a class = "close" href = "#" > × </a>  
  <p><strong> Santu guacamole ! </strong> U megliu verificate voi stessu, ùn site micca troppu bellu. </p>
</div>

Bloccà i missaghji

.alert-message.block-message

Per i missaghji chì necessitanu un pocu di spiegazione, avemu avvisi di stile di paragrafu. Quessi sò perfetti per sbulicà i missaghji di errore più longu, avvistendu un utilizatore di una azione pendente, o solu presentà infurmazioni per più enfasi in a pagina.

Pigliate u javascript »

Esempiu di codice

<div class = "avvisu di messagiu di bloccu di messagiu d'alerta" > 
  <a class = "close" href = "#" > × </a>  
  <p><strong> Santu guacamole ! Questu hè un avvisu ! </strong> U megliu verificate voi stessu, ùn site micca troppu bellu. 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 = "#" > Fate sta azione </a> <a class = "btn small" href = "#" > O fate questu </a>     
  </div>
</div>

Modali

Modali - dialoghi o lightbox - sò grandi per l'azzioni cuntestuali in situazioni induve hè impurtante chì u cuntestu di fondo sia mantinutu.

Pigliate u javascript »

Tooltips

I Twipsies sò super utili per aiutà un utilizatore confusu è indicà in a direzione ghjusta.

Pigliate u javascript »

Popovers

Aduprate popovers per furnisce infurmazioni subtextuale à una pagina senza affettà u layout.

Pigliate u javascript »

Accuminciari

L'integrazione di javascript cù a libreria Bootstrap hè super faciule. Quì sottu andemu nantu à i principii è furniscevi alcuni plugins fantastichi per avè principiatu!

Vede i documenti javascript »

Ciò chì hè inclusu

Portate alcuni di i cumpunenti primari di Bootstrap à a vita cù novi plugins persunalizati chì travaglianu cù jQuery è Ender . Vi incuragemu à estenderli è mudificà per adattà à i vostri bisogni di sviluppu specifichi.

Hè necessariu javascript?

Innò ! Bootstrap hè pensatu prima di tuttu per esse una biblioteca CSS. Stu javascript furnisce una strata interattiva di basa sopra à i stili inclusi.

Tuttavia, per quelli chì anu bisognu di javascript, avemu furnitu i plugins sopra per aiutà à capisce cumu integrà Bootstrap cù javascript è per dà una opzione rapida è ligera per e funziunalità di basa subitu.

Per più infurmazione è per vede alcune demo in diretta, fate riferimentu à a nostra pagina di documentazione di plugin .