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 faia se fa'atulagaga fa'avae i "koluma" se lua, e ta'itasi ta'itasi i le aofa'i o koluma fa'avae e 16 na matou fa'amatalaina o se vaega o la matou fa'asologa. Va'ai fa'ata'ita'iga o lo'o i lalo mo nisi suiga.

<div class="row">
  <div class = "span6 koluma" > 
    ...
  </div>
  <div class = "span10 koluma" > 
    ...
  </div>
</div>

Fa'atulaga lelei

Ose fa'avae 940px lautele, fa'atūtonugalemu koneteina mo so'o se nofoaga po'o se itulau.

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

Fua fa'atulagaina

O se sua fe'avea'i po'o se fausaga o itulau vai ma le la'ititi ma le maualuga-lautele ma le itu agavale. Lelei mo polokalama.

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

Ulutala ma kopi

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

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

E mafai fo'i ona e fa'aopoopoina ulutala fa'atasi ma le <strong>ma<em>

Misc. elemene

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

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

Le taimi e fa'aoga ai

E tatau ona fa'aoga pine fa'amamafa ( <strong>ma <em>) e fa'aopoopo ai le va'aiga va'aia i le va o se upu po'o se fasifuaitau ma lona kopi o lo'o siomia ai. Fa'aoga <strong>mo le fa'alogo tuai ma <em>mo le fa'amatagofie ma fa'aliga .

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.

Tulaga

O le addresselemene e faʻaaogaina mo - na e mateina! - tuatusi. O lona uiga la:

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890

Fa'aaliga: O laina ta'itasi i totonu e addresstatau ona fa'ai'u i se laina-motu ( <br />) e fa'atulaga lelei ai le anotusi e pei ona faitauina i le olaga moni e aunoa ma se sitaili fa'aogaina.

Faapuupuuga

Mo fa'apuupuuga ma fa'apuupuuga, fa'aoga le abbrpine ( acronymua 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> <cite>

Ia mautinoa e afifi au ma blockquotepine . A ta'ua se puna, fa'aaoga le elemene. O le CSS o le a otometi lava ona faatomua se igoa ma se em dash (—).paragraphcitecite

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut laboure et dolore magna aliqua...

Dr. Julius Hibbert

Le fa'atonu<ul>

• Jeremy Bixby
• Robert Dezure
• Josh Uosigitone
• Anton Capresi
• O La'u Au Au
  • Siaosi Castanza
  • Jerry Seinfeld
  • Cosmo Kramer
  • Elaine Bennis
  • Newman
• Ioane Iakopo
• Paul Pierce
• Kevin Garnett

Le fa'ailoga<ul.unstyled>

• Jeremy Bixby
• Robert Dezure
• Josh Uosigitone
• Anton Capresi
• O La'u Au Au
  • Siaosi Castanza
  • Jerry Seinfeld
  • Cosmo Kramer
  • Elaine Bennis
  • Newman
• Ioane Iakopo
• Paul Pierce
• Kevin Garnett

Fa'atonu<ol>

1. Jeremy Bixby
2. Robert Dezure
3. Josh Uosigitone
4. Anton Capresi
5. O La'u Au Au
   1. Siaosi Castanza
   2. Jerry Seinfeld
   3. Cosmo Kramer
   4. Elaine Bennis
   5. Newman
6. Ioane Iakopo
7. Paul Pierce
8. Kevin Garnett

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.

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 ia e fesoasoani ai.

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

E tutusa ma ulutala koluma, o mea uma o le tino o lau laulau e tatau ona afifi i totonu o le tbodymea lea o lau fa'asologa o tbodyle > 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.

#	Igoa muamua	Fa'aiu	Gagana
1	O nisi	Tasi	Igilisi
2	Joe	Sixpack	Igilisi
3	Stu	Dent	Code

<table class="common-table"> vasega = "la'au masani" >
  ...
</ laulau>

Faataitaiga: Sebra-strid

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

#	Igoa muamua	Fa'aiu	Gagana
1	O nisi	Tasi	Igilisi
2	Joe	Sixpack	Igilisi
3	Stu	Dent	Code

<table class="common-table zebra-striped"> vasega = "la'au masani zebra-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.

#	Igoa muamua	Fa'aiu	Gagana
1	O lau	Tasi	Igilisi
2	Joe	Sixpack	Igilisi
3	Stu	Dent	Code

<script type="text/javascript" src="js/jquery/jquery.tablesorter.min.js"></script> type = "text/javascript" src = "js/jquery/jquery.tablesorter.min.js" ></script> 
<script type = "text/javascript" > 
  $ ( pepa ). sauni ( galuega ( ) { 
    $ ( "table#sortTableExample" ). tablesorter ( { sortList : [[ 1 , 0 ]]} );   
  });
</script>
< vasega laulau = "la'au masani zebra-striped" > 
  ...
</ laulau>

Sitaili masani

O fomu uma e tu'uina atu i 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, ki leitio ma pusa siaki, ma faamau.

Fa'ata'ita'iga fomu talatu'u

X-Fa'aaofia Tele

Filifili

1 2 3 4 5

Filifili

1 2 3 4 5

Fa'aulu e le mafai ona fa'asaoina

O Nisi Taua Lenei

Fa'atotonugalemu

X-Fa'aaofia Tele

La'ititi la'ititi o tusitusiga fesoasoani

Fa'ata'ita'iga fomu talatu'u

Tusitusi ua saunia

@

Pusa Siaki ua saunia

Fa'aopoopo Pusa Siaki

Fa'amatalaga faila

Fa'ata'ita'iga fomu talatu'u

Lisi o Filifiliga

• O le filifiliga muamua o le mea lea ma lena—ia mautinoa e aofia ai pe aisea e manaia ai
• E mafai fo'i ona siaki le filifiliga lua ma fa'aofi i fa'ai'uga
• O le filifiliga lona tolu e mafai—ioe, na e mateina—e siaki fo'i ma fa'aaofia i fa'ai'uga
• O le filifiliga fa e le mafai ona siaki ona e le atoatoa.

Fa'aaliga: Fa'ailoga o lo'o si'omia uma filifiliga mo le tele o vaega kiliki ma se fomu e sili atu ona fa'aoga.

Va'aiga o Aso

ia O taimi uma e fa'aalia o le Pacific Standard Time (GMT -08:00).

Textarea

Poloka o tusitusiga fesoasoani e faʻamatala ai le fanua o loʻo i luga pe a manaʻomia.

Lisi o Filifiliga

• O le filifiliga muamua o le mea lea ma lena—ia mautinoa e aofia ai pe aisea e manaia ai
• E mafai fo'i ona siaki le filifiliga lua ma fa'aofi i fa'ai'uga

Faasaoina Suiga Fa'aleaogaina

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'ata'ita'iga fomu talatu'u

X-Fa'aaofia Tele

Filifili

1 2 3 4 5

Fa'ata'ita'iga fomu talatu'u

Lisi o Filifiliga

• O le filifiliga muamua o le mea lea ma lena—ia mautinoa e aofia ai pe aisea e manaia ai
• E mafai fo'i ona siaki le filifiliga lua ma fa'aofi i fa'ai'uga

Fa'aaliga: Fa'ailoga o lo'o si'omia uma filifiliga mo le tele o vaega kiliki ma se fomu e sili atu ona fa'aoga.

Faasaoina Suiga Fa'aleaogaina

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 .primaryo lo'o avanoa le vasega lanumoana. Ma le isi, o le ta'avale a oe lava sitaili e faigofie lava.

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

So'oga

Fa'amau

O le a

O le matou pito i luga o se pa faʻamau e faʻapipiʻi ai le logo poʻo le igoa o le upega tafaʻilagi, faʻasalalauga 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 tu'ufa'atasiga 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.

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 fa'asologa o taimi mo tagata fa'aoga mo le fesuia'i i le va o itulau o mea fa'apenei. E maua i sitaili fa'amau po'o pili.

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

<ul class="tabs"> vasega = "tabs" >
  <li class = "active" ><a href = "" > Fale </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"> vasega = "fuala'au" >
  <li class = "active" ><a href = "" > Fale </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>

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="pagination"> vasega = "pagination" >
  <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

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.

poloka fe'au

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.

Modal

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

Popovers

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

Bootstrap na fausia ma Preboot , o se pusa tatala-puna o mixins ma fesuiaiga e faʻaoga faʻatasi ma Less , o se CSS preprocessor mo le vave ma faigofie le atinaʻeina o upega tafaʻilagi.

Siaki pe faʻafefea ona matou faʻaogaina Preboot i Bootstrap ma pe faʻapefea ona e faʻaogaina pe a e filifili e tamoʻe Less i lau isi poloketi.

Fa'afefea ona fa'aoga

Fa'aoga lenei filifiliga e fa'aoga atoatoa ai le Bootstrap's Less variables, mixins, ma le fa'amomoli i le CSS e ala i le javascript i lau su'esu'ega.

<link rel="stylesheet/less" type="text/css" href="less/bootstrap.less" media="all" /> rel = "stylesheet/less" type = "text/css" href = "less/bootstrap.less" media = "uma" />    
<script type = "text/javascript" src = "js/less-1.0.41.min.js" ></script>  

Le lagona le .js fofo? Taumafai le Less Mac app pe fa'aoga Node.js e fa'apipi'i pe ae fa'aogaina lau code.

O mea e aofia ai

O nisi nei o mea taua o mea o loʻo aofia i le Twitter Bootstrap o se vaega o Bootstrap. Ulu atu i luga ole upega tafaʻilagi a Bootstrap poʻo Github poloketi itulau e sii mai ma aʻoaʻo atili.

Su'ega lanu

Fesuiaiga i Less e lelei atoatoa mo le tausia ma le faʻafouina o lau CSS e leai se ulu. Afai e te manaʻo e sui se lanu lanu poʻo se faʻaoga masani, faʻafouina i se tasi nofoaga ma e te setiina.

// So'oga
@linkColor : #8b59c2;         
@linkColorHover :     pogisa ( @linkColor , 10 ); 
// Efuefu
@uliuli : #000;             
@grayDark :           fa'amama ( @black , 25 %); 
@gray :               fa'amama ( @black , 50 %); 
@grayLight :          fa'amama ( @black , 70 %); 
@grayLighter :        fa'amama ( @black , 90 %); 
@pa'epa'e : #fff;             
// Lanu Fa'ailoga
@blue : #08b5fb;              
@meamata : #46a546;             
@mumu : #9d261d;               
@samasama : #ffc40d;            
@ moli : #f89406;            
@pini : #c3325f;              
@violē : #7a43b6;            
// Fa'avae
@baseline : 20px ;          

Fa'amatalaga

Less e maua ai fo'i se isi sitaili o fa'amatalaga e fa'aopoopo i le /* ... */syntax masani a le CSS.

// O se faʻamatalaga lenei
/* O se faamatalaga foi lea */

Faafefiloi le wazoo

Mixins o lo'o aofia ai po'o ni vaega mo le CSS, e mafai ai ona e tu'ufa'atasia se poloka o le code i le tasi. E lelei tele mo mea fa'atau e fa'amuamua e pei o box-shadowle , fa'asolo su'esu'e fa'alili, fa'aputu vaitusi, ma isi mea. Lalo o se faʻataʻitaʻiga o mixins o loʻo aofia ai ma Bootstrap.

Fa'aputuga Font

#mataitusi {
  . fa'apuupuu ( @mamafa : masani , @tele : 14px , @lineHeight : 20px ) {     
    font - size : @size ; 
    vai - mamafa : @weight ; 
    laina - maualuga : @lineHeight ; 
  }
  . sans - serif ( @mamafa : masani , @tele : 14px , @lineHeight : 20px ) {     
    font - family : "Helvetica Neue" , ​​Helvetica , Arial , sans - serif ;   
    font - size : @size ; 
    vai - mamafa : @weight ; 
    laina - maualuga : @lineHeight ; 
  }
  . serif ( @mamafa : masani , @tele : 14px , @lineHeight : 20px ) {     
    font - family : "Georgia" , Times New Roman , Times , sans - serif ;     
    font - size : @size ; 
    vai - mamafa : @weight ; 
    laina - maualuga : @lineHeight ; 
  }
  . monospace ( @mamafa : masani , @tele : 12px , @lineHeight : 20px ) {     
    font - family : "Monaco" , Courier New , monospace ;   
    font - size : @size ; 
    vai - mamafa : @weight ; 
    laina - maualuga : @lineHeight ; 
  }
}

Gradients

#gradient {
  . faalava ( @startColor : #555, @endColor: #333) { 
    tua - lanu : @endColor ; 
    tua - toe fai : toe fai - x ;
    tua - ata : - khtml - gradient ( linear , agavale pito i luga , taumatau pito i luga , mai ( @startColor ), i ( @endColor )); // Fa'ato'ilalo   
    tua - ata : - moz - laina - gradient ( agavale , @startColor , @endColor ); // FF 3.6+    
    tua - ata : - ms - laina - gradient ( agavale , @startColor , @endColor ); // IE10    
    tua - ata : - webkit - gradient ( linear , agavale pito i luga , taumatau pito i luga , lanu - taofi ( 0 %, @startColor ), lanu - taofi ( 100 %, @endColor )); // Safari 4+, Chrome 2+    
    tua - ata : - webkit - laina - gradient ( agavale , @startColor , @endColor ); // Safari 5.1+, Chrome 10+    
    tua - ata : - o - laina - gradient ( agavale , @startColor , @endColor ); // Opera 11.10    
    - ms - faamama : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor ); // IE8+  
    faamama : e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor )); // IE6 & IE7 
    tua - ata : laina - gradient ( agavale , @startColor , @endColor ); // Le tulaga   
  }
  . tūsa'o ( @startColor : #555, @endColor: #333) { 
    tua - lanu : @endColor ; 
    tua - toe fai : toe fai - x ;
    tua - ata : - khtml - gradient ( linear , agavale pito i luga , agavale pito i lalo , mai ( @startColor ), i ( @endColor )); // Fa'ato'ilalo   
    tua - ata : - moz - laina - gradient ( @startColor , @endColor ); // FF 3.6+   
    tua - ata : - ms - laina - gradient ( @startColor , @endColor ); // IE10   
    tua - ata : - webkit - gradient ( linear , agavale pito i luga , agavale pito i lalo , lanu - taofi ( 0 %, @startColor ), lanu - taofi ( 100 %, @endColor )); // Safari 4+, Chrome 2+    
    tua - ata : - webkit - laina - gradient ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+   
    tua - ata : - o - laina - gradient ( @startColor , @endColor ); // Opera 11.10   
    - ms - faamama : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor ); // IE8+  
    faamama : e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor )); // IE6 & IE7 
    tua - ata : laina - gradient ( @startColor , @endColor ); // O le tulaga  
  }
  . faasinoala ( @startColor : #555, @endColor: #333, @deg: 45deg) { 
    ...
  }
  . tūsa'o - tolu - lanu ( @startColor : #00b3ee, @midColor: #7a43b6, @colorStop: 0.5, @endColor: #c3325f) { 
    ...
  }
}

Fa'agaioiga ma faiga fa'asologa

Fa'afiafia ma fa'atino ni numera e fa'atupu ai fefiloi fetu'una'i ma mamana e pei o lo'o i lalo.

// Griditude
@gridColumns : 16 ;       
@gridColumnWidth : 40px ;   
@gridGutterWidth : 20px ;   
// Grid System
. pusa {
  lautele : @siteWidth ; 
  pito : 0 ta'avale ;  
  . clearfix ();
}
. koluma ( @columnSpan : 1 ) {  
  fa'aaliga : totonu laina ; 
  opeopea : agavale ;
  lautele : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));         
  pito - agavale : @gridGutterWidth ; 
  &: muamua - tama {
    pito - agavale : 0 ; 
  }
}
. offset ( @columnOffset : 1 ) {  
  pito - agavale : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) ! taua ;          
}