Fa'ata'ita'iga vave amata

Manaomia ni fa'ata'ita'iga vave? Siaki nei fa'ata'ita'iga fa'avae ua matou tu'u fa'atasi:

Fa'asologa masani

O le fa'aogaina o le fa'aogaina o le fa'aogaina o se vaega o le Bootstrap o le 940px lautele 16-koluma fa'asologa. O se tofo o le lauiloa 960 grid system, ae aunoa ma se faʻaopoopoga faaopoopo / padding i le itu agavale ma taumatau.

Fa'ata'ita'iga fa'ailoga fa'asologa

E pei ona fa'aalia iinei, e mafai ona fausia se fa'atulagaga fa'avae i "koluma" e lua, e ta'itasi ta'itasi i se numera o koluma fa'avae e 16 na matou fa'amatalaina o se vaega o la matou fa'asologa o fa'asologa. Va'ai fa'ata'ita'iga o lo'o i lalo mo nisi suiga.

<div class = "laina" > 
  <div class = "span6" > 
    ...
  </div>
  <div class = "span10" > 
    ...
  </div>
</div>

Koluma faamoega

Fa'aputu lau anotusi pe a mana'omia e ala ile fatuina o se .rowi totonu ole koluma o iai.

Fa'ata'ita'iga o koluma fa'amoega

<div class = "laina" > 
  <div vasega = "span12" > 
    Laasaga 1 o le koluma
    <div class = "laina" > 
      <div class = "span6" > 
        Laasaga 2
      </div>
      <div class = "span6" > 
        Laasaga 2
      </div>
    </div>
  </div>
</div>

Ta'avale lau lava fa'asologa

Fausia i totonu o le Bootstrap o ni nai fesuiaiga mo le faʻavasegaina o le faʻaogaina o le 940px grid system. Faatasi ai ma sina faʻavasegaga, e mafai ona e suia le tele o koluma, o latou alavai, ma le atigipusa latou te nonofo ai.

I totonu o le faasologa

O fesuiaiga e manaʻomia e faʻaleleia ai le faʻaogaina o le grid system i le taimi nei o loʻo nonofo uma i totonu preboot.less.

Le taimi nei e fa'avasega

O le suia o le faʻasologa o lona uiga o le suia o suiga e tolu @grid-*ma toe tuʻufaʻatasia le Less faila.

O le Bootstrap e sau e faʻapipiʻiina e faʻatautaia se faiga faʻasologa e oʻo atu i le 24 koluma; o le faaletonu e na'o le 16. O le auala lea e foliga fa'apitoa ai au fesuiaiga i se laina 24-koluma.

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

O le taimi lava e toe faʻaopoopoina ai, o le ae setiina!

Fa'atulaga lelei

Le fa'aletonu ma faigofie 940px-lautele, fa'atonuga fa'atotonu mo na'o so'o se 'upega tafa'ilagi po'o itulau e tu'uina atu e se tasi <div.container>.

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

Fua fa'atulagaina

O se isi mea, fetuutuuna'i le fausaga o itulau sua ma le laititi ma le maualuga-lautele ma le itu tauagavale. Lelei mo apps ma docs.

<tino>
  <div class = "container-fluid" > 
    <div class = "sidebar" > 
      ...
    </div>
    <div class = "anotusi" > 
      ...
    </div>
  </div>
</tino>

Ulutala & kopi

Ose fa'atonuga fa'akomipiuta mo le fa'atulagaina o au itulau uepi.

O le fa'asologa fa'asologa atoa e fa'avae i luga ole lua Less variables i la tatou faila preboot.less: @basefontma @baseline. O le mea muamua o le fa'amaufa'ailoga faavae-tele o lo'o fa'aogaina atoa ma le lona lua o le laina-maualuga fa'avae.

Matou te faʻaogaina na fesuiaiga, ma nisi numera, e fatu ai pito, paddings, ma laina-maualuga o matou ituaiga uma ma sili atu.

h1. Ulutala 1

h2. Ulutala 2

h3. Ulutala 3

h4. Ulutala 4

h5. Ulutala 5

h6. Ulutala 6

Faataitaiga parakalafa

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.

Ulutala fa'ata'ita'iga E iai so'a ulutala...

Misc. elemene

Fa'aaogā fa'amamafa, tuatusi, & fa'apuupuuga

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

Le taimi e faʻaaoga ai

E tatau ona fa'aoga fa'ailoga fa'amamafa ( <strong>ma <em>) e fa'ailoa ai le fa'aopoopoina o le taua po'o le fa'amamafa o se upu po'o se fasifuaitau e fa'atatau i lona kopi o lo'o si'omia. Fa'aoga <strong>mo le taua ma <em>mo le fa'amamafaina.

Faamamafa i se parakalafa

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.

Fa'aaliga: E lelei lava le fa'aoga <b>ma <i>fa'ailoga ile HTML5 ma e le mana'omia ona fa'ailoga mata'utia ma fa'amaufa'ailoga, i le fa'asologa (e ui o lo'o i ai se elemene sili atu fa'aoga, fa'aoga). <b>e fa'atatau e fa'amanino ai upu po'o fasifuaitau e aunoa ma le fa'ailoaina atu o le taua fa'aopoopo, ae <i>tele lava mo leo, upu fa'apitoa, ma isi.

Tulaga

O le <address>elemene e faʻaaogaina mo faʻamatalaga faʻafesoʻotaʻi mo lona tuaa lata ane, poʻo le tino atoa o galuega. O faʻataʻitaʻiga nei e lua o le auala e mafai ai ona faʻaaogaina:

Fa'aaliga: O laina ta'itasi i totonu e <address>tatau ona fa'ai'u i se laina-motu ( <br />) po'o le afifiina i se fa'ailoga poloka poloka (fa'ata'ita'iga, <p>) e fa'atulaga lelei ai le anotusi.

Faapuupuuga

Mo fa'apu'upu'u ma fa'apuupuuga, fa'aoga le fa'ailoga <abbr>( <acronym>ua fa'ate'aina ile HTML5 ). Tuu le fomu faapuupuu i totonu o le pine ma seti se ulutala mo le igoa atoa.

Blockquotes

<blockquote> <p> <small>

E faapefea ona sii mai

E aofia ai se poloka upusii, afifi <blockquote>solo <p>ma <small>pine. Fa'aoga le <small>elemene e ta'u mai ai lau puna'oa ma o le ae mauaina se fa'ailoga i —luma atu.

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>
  <tama> Dr. Julius Hibbert </ laiti>
</blockquote>

Le fa'atonu<ul>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Integer molestie lorem ma masa
• 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 nofo amet erat nunc
• Eget porttitor lorem

Le fa'ailoga<ul.unstyled>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Integer molestie lorem ma masa
• 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 nofo amet erat nunc
• Eget porttitor lorem

Fa'atonu<ol>

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

Fa'amatalagadl

Lisi fa'amatalaga

Ole lisi fa'amatalaga e lelei atoatoa mo le fa'amalamalamaina o upu.

Euismod

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

Donec id elit non mi porta gravida and eget metus.

Malesuada porta

Etiam porta sem malesuada magna mollis euismod.

Code

<code> <pre>

Pimp lau code i sitaili ma ni pine faigofie se lua. Mo le sili atu le mata'utia e ala i le javascript, tu'u i totonu le Google's code prettify library ma ua e seti.

Tuuina atu le code

Fa'ailoga, poloka o pe na'o snippets i totonu, e mafai ona fa'aalia i sitaili na'o le afifiina o le pine sa'o. Mo poloka o fa'ailoga e tele laina, fa'aoga le <pre>elemene. Mo code inline, fa'aoga le <code>elemene.

<div>
  <h1> Ulutala</h1>
  <p>E iai se mea iinei...</p>
</div>

<div> <h1> Ulutala </h1> <p> O se mea iinei... </p> </div>
  
  

Fa'ailoga i totonu

<span class="label">

Va'ai fa'alogo pe fu'a so'o se fasifuaitau i lau tusitusiga o lou tino.

Faailoga soo se mea

Sa mana'omia se tasi o na mea fou fou! po'o Fu'a taua pe a tusia code? Ia, o lea ua ia te oe. O mea nei o lo'o aofia ai ile fa'aletonu:

Fa'asalalauga fa'asalalau

Fa'aali ata 'ese'ese le lapopo'a i luga o itulau e maualalo le tulagavae HTML ma sitaili laiti.

Fa'ata'ita'iga ata

O ata i totonu .media-gride mafai ona i ai so'o se lapo'a, ae sili ona lelei pe a fa'afanua sa'o i le faiga fa'asologa o Bootstrap. O le lautele o ata e pei o le 90, 210, ma le 330 e tu'ufa'atasia ma ni nai pika o padding e tutusa ma le .span2, .span4, ma le .span6koluma tetele.

Tele

Alafua

Laiti

Fa'ailogaina i latou

Media grids e faigofie ona faʻaoga ma faigofie ile itu faʻailoga. O latou fua e faʻatatau i le tele o ata o loʻo aofia ai.

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

Fausia laulau

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

E lelei laulau-mo le tele o mea. O laulau tetele, e ui i lea, e manaʻomia sina faʻailoga alofa ina ia aoga, faʻaleleia, ma mafai ona faitau (i le tulaga code). O nai fautuaga nei e fesoasoani ai.

Ia afifi i taimi uma lau ulutala koluma i se <thead>tulaga e faapea o le fa'atonu o <thead>le > <tr>> <th>.

E tutusa ma ulutala koluma, o mea uma o le tino o lau laulau e tatau ona afifi i totonu o le <tbody>mea lea o lau fa'asologa o <tbody>le > <tr>> <td>.

Faataitaiga: Sitaili laulau masani

O laulau uma o le a otometi lava ona fa'apipi'iina na'o tuaoi taua e fa'amautinoa ai le faitau ma fa'atumauina le fausaga. Leai se mana'oga e fa'aopoopo nisi vasega po'o uiga.

< laulau>
  ...
</ laulau>

Faataitaiga: Sebra-strid

Fai sina fa'afiafiaga i au laulau e ala i le fa'aopoopoina o le zebra-striping—na'o le fa'aopoopoina o le .zebra-stripedvasega.

Manatua: Zebra-striping o se faʻaleleia atili e le o avanoa mo suʻesuʻega matutua e pei o le IE8 ma lalo.

< vasega laulau = "sebra-striped" > 
...
</ laulau>

Faataitaiga: Sebra-striped w/ TableSorter.js

O le faia o le faʻataʻitaʻiga muamua, matou te faʻaleleia le aoga oa matou laulau e ala i le tuʻuina atu o galuega faʻavasega e ala i le jQuery ma le Tablesorter plugin. Kiliki so'o se ulutala o le koluma e sui ai le fa'avasega.

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

Sitaili masani

O fomu uma ua tu'uina atu sitaili fa'aletonu e tu'uina atu i se auala e mafai ona faitau ma fa'alautele. Ua saunia sitaili mo mea e fai ai tusitusiga, filifili lisi, vaega o tusitusiga, fa'amau leitio ma pusa siaki, ma fa'amau.

Fa'aputu fomu

Fa'aopoopo .form-stackedi le HTML o lau fomu ma e iai sau fa'ailoga i luga o latou fanua nai lo le agavale. E aoga tele pe afai e pupuu au fomu pe lua au koluma o mea e fai mo pepa mamafa.

Fa'atumu fanua tetele

Fa'asinomaga so'o se fomu input, select, po'o textareale lautele e ala i le fa'aopoopoina o ni nai vasega i lau fa'ailoga.

E pei o le v1.3.0, ua matou faʻaopoopoina vasega faʻavae faʻavae mo elemene faʻavae. Fa'amolemole fa'aoga nei i luga o vasega o lo'o iai .mini, .small, etc.

Fa'amau

I le avea ai o se tauaofiaga, e faʻaogaina faʻamau mo gaioiga aʻo faʻaoga fesoʻotaʻiga mo mea faitino. Mo se fa'ata'ita'iga, o le "Download" e mafai ona avea ma fa'amau ma "gaoioiga lata mai" e mafai ona avea ma so'oga.

O fa'amau uma e le mafai i se sitaili lanu efuefu, ae o le tele o vasega aoga e mafai ona fa'aoga mo sitaili lanu eseese. O nei vasega e aofia ai se .primaryvasega lanumoana, se vasega moli-lanu moana .info, se vasega lanu meamata .success, ma se vasega mumu .danger.

Faataitaiga faamau

E mafai ona fa'aoga sitaili fa'amau i so'o se mea e .btnfa'aoga. E masani lava e te mana'o e fa'aoga nei mea i na'o <a>, <button>, ma filifili <input>elemene. O lona uiga la:

Su'i lapopoa

Mana'o i fa'amau tetele pe la'ititi? Fai i ai!

Tulaga le atoatoa

Mo fa'amau e le o fa'agaoioia pe fa'aletonu e le app mo se tasi mafua'aga po'o se isi, fa'aoga le tulaga le atoatoa. E .disabledmo sooga ma :disabledmo <button>elemene.

So'oga

Fa'amau

O le a

O la matou pito i luga o se pa fa'amau e tu'u ai le logo po'o le igoa o le upega tafa'ilagi, fa'asaga muamua, ma le fomu su'esu'e.

Customizable

O elemene uma i totonu, ma le pito i luga atoa, e filifili. E mafai ona e filifili e aofia ai se logo/igoa, nav, search, ma se lua nav—poʻo soʻo se tuufaatasiga o lena mea.

E aofia ai fa'alalolalo

I le avea ai o se vaega o le fa'atautaiga autu, ua matou fa'aopoopoina le agava'a mo oe e fa'aopoopo ai fa'alalo i lalo i lau nav. Siaki le pito lona lua i luga (fa'aoga taumatau) e va'ai pe fa'apefea ona fai. liE lagolagoina fo'i fa'ailoga dropdowns .activemo le fa'aalia o le itulau o lo'o iai nei.

Tabs ma fualaau

Fausia se folauga lona lua faigofie ma se <ul>. Fesuiai i le va o laupepa poʻo fualaau e ala i le faʻaopoopoina o le vasega talafeagai.

Lelei mo vaega laiti o anotusi e pei o matou itulau fa'atulagaina o tala ma taimi fa'aoga mo le feso'ota'i i le va o itulau fa'apei o mea. E maua i sitaili fa'amau po'o pili.

• Aiga
• Tala'aga
• Feau
• Fa'atonu
• Fa'afeso'ota'i
• Pa'u i lalo
  • So'oga lona lua
  • O se isi mea iinei
  • O le isi so'oga

<ul class = "tabs" > 
  <li class = "active" ><a href = "#" > Home </a></li>  
  <li><a href = "#" > Tala'aga </a></li> 
  <li><a href = "#" > Savali </a></li> 
  <li><a href = "#" > Fa'atonu </a></li> 
  <li><a href = "#" > Fa'afeso'ota'i </a></li> 
</ul>

• Aiga
• Tala'aga
• Feau
• Fa'atonu
• Fa'afeso'ota'i

<ul class = "pills" > 
  <li class = "active" ><a href = "#" > Home </a></li>  
  <li><a href = "#" > Tala'aga </a></li> 
  <li><a href = "#" > Savali </a></li> 
  <li><a href = "#" > Fa'atonu </a></li> 
  <li><a href = "#" > Fa'afeso'ota'i </a></li> 
</ul>

O falaoamata

E fa'aogaina le fa'ata'ita'iga Breadcrumb o se auala e fa'aali atu ai i tagata fa'aoga le mea o lo'o iai i totonu o se app po'o se saite, ae le mo le fa'atauga muamua.

• Aiga

• Aiga /
• Itulau ogatotonu

• Aiga /
• Itulau ogatotonu /
• O le isi

• Aiga /
• Itulau ogatotonu /
• O le isi /
• Ua e iinei

<ul class = "falaoa" > 
  <li><a href = "#" > Aiga </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > Itulau ogatotonu </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > O le isi </a> <span class = "divider" > / </span></li>   
  <li class = "active" > Ua e iinei </li> 
</ul>

Itulautusi

Fa'akomupiuta e sili ona faigofie ma laititi na fa'auluina e Rdio. O le poloka tele e faigata ona misi, faigofie ona faʻaleleia, ma maua ai vaega tetele kiliki.

<div class = "fa'asinomaga" > 
  <ul>
    <li vasega = "mua'i le atoatoa" ><a href = "#" > ← Muamua </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>

Fa'aliga fa'avae

.alert-message

Fe'au laina e tasi mo le fa'ailoaina o le fa'aletonu, fa'aletonu, po'o le manuia o se gaioiga. Aemaise le aoga mo fomu.

Maua le javascript »

Fa'ata'ita'iga code

<div class = "alaala-fe'au lapata'iga" > 
  <a class = "close" href = "#" > × </a>  
  <p><strong> Pa'ia guacamole! </strong> Sili siaki oe lava ia, e te le o lelei tele. </p>
</div>

poloka fe'au

.alert-message.block-message

Mo fe'au e mana'omia sina fa'amatalaga, o lo'o i ai a matou fa'aaliga sitaili parakalafa. O nei mea e lelei atoatoa mo le faʻatupuina o feʻau sese umi, lapataia se tagata faʻaoga i se gaioiga o loʻo faʻatali, pe naʻo le tuʻuina atu o faʻamatalaga mo le faʻamamafa atili i luga o le itulau.

Maua le javascript »

Fa'ata'ita'iga code

<div class = "alaala-fe'au poloka-fe'au lapata'iga" > 
  <a class = "close" href = "#" > × </a>  
  <p><strong> Pa'ia guacamole! O se lapataiga lea! </strong> Sili siaki oe lava ia, e te le o lelei tele. Nulla vitae elit libero, a pharetra augue. O le mea moni, o le mea lea na tupu, o le mea lea e tasi. </p>
  <div class = "talatala-gaioiga" > 
    <a class = "btn small" href = "#" > Fai le gaioiga lea </a> <a class = "btn small" href = "#" > Pe fai lenei mea </a>     
  </div>
</div>

Modal

Modals—fa'atalanoaga po'o pusa moli-e lelei tele mo fa'atinoga fa'atatau i tulaga e taua ai le fa'atumauina o le tala fa'asolopito.

Maua le javascript »

Mea faigaluega

Twipsies e sili ona aoga mo le fesoasoani i se tagata le mautonu ma faasino i latou i le itu saʻo.

Maua le javascript »

Popovers

Fa'aoga popovers e tu'uina atu ai fa'amatalaga fa'amatalaga i se itulau e aunoa ma le a'afiaina o le fa'atulagaina.

Maua le javascript »

Amata

O le tuʻufaʻatasia o le javascript ma le faletusi Bootstrap e matua faigofie lava. I lalo ifo matou te faʻavasega mea faʻavae ma tuʻuina atu ia te oe ni plugins mataʻutia e amata ai oe!

Va'ai javascript docs »

O mea e aofia ai

Aumai nisi o vaega autu a Bootstrap i le ola faʻatasi ma faʻapipiʻi masani fou e galulue ma jQuery ma Ender . Matou te fa'amalosia oe e fa'alautele ma toe fa'aleleia e fa'atatau i ou mana'oga fa'apitoa tau atina'e.

E mana'omia le javascript?

Leai! Bootstrap ua mamanuina muamua ma sili e avea ma faletusi CSS. O lenei javascript o loʻo tuʻuina atu ai se faʻavae fesoʻotaʻiga i luga o sitaili o loʻo aofia ai.

Ae ui i lea, mo i latou e manaʻomia le javascript, matou te tuʻuina atu plugini o loʻo i luga e fesoasoani ia te oe ia malamalama pe faʻafefea ona tuʻufaʻatasia le Bootstrap ma le javascript ma tuʻuina atu ia te oe se filifiliga vave, mama mo le galuega autu i le taimi lava lena.

Mo nisi faʻamatalaga ma vaʻai i nisi o faʻataʻitaʻiga ola, faʻamolemole faʻafesoʻotaʻi la matou itulau faʻamaumauga faʻapipiʻi .