Kadriyaj default

Sistèm kadriyaj default yo bay kòm yon pati nan Bootstrap se yon griy 940px lajè 16-kolòn. Li se yon gou nan sistèm nan kadriyaj popilè 960, men san yo pa Marge adisyonèl / padding sou bò gòch ak bò dwat yo.

Egzanp kadriyaj maketing

Jan yo montre la a, yo ka kreye yon layout debaz ak de "kolòn," yo chak kouvri yon kantite 16 kolòn fondamantal nou defini kòm yon pati nan sistèm kadriyaj nou an. Gade egzanp ki anba yo pou plis varyasyon.

<div class="ranje"> klas = "ranje" >
  <div class = "span6 columns" > 
    ...
  </div>
  <div class = "span10 columns" > 
    ...
  </div>
</div>

Layout fiks

Yon debaz 940px lajè, santre veso layout pou prèske nenpòt sit oswa paj.

<kò>
  <div class = "kontenè" > 
    ...
  </div>
</kò>

Layout likid

Yon likid likid oswa estrikti paj likid ak min- ak max-lajè ak yon bò gòch. Gwo pou apps.

<kò>
  <div class = "kontenè-likid" > 
    <div class = "sidebar" > 
      ...
    </div>
    <div class = "kontni" > 
      ...
    </div>
  </div>
</kò>

Tit ak kopi

Yon yerachi tipografik estanda pou estrikti paj wèb ou yo.

h1. Tit 1

h2. Tit 2

h3. Tit 3

h4. Tit 4

h5. Tit 5

h6. Tit 6

Egzanp paragraf

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus ak magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Egzanp tit Gen sou-tit...

Ou ka ajoute tou soutit ak <strong>ak la<em>

Misk. eleman

Sèvi ak anfaz, adrès, ak abrevyasyon

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

Lè pou itilize

Tag anfaz ( <strong>ak <em>) ta dwe itilize pou ajoute distenksyon vizyèl ant yon mo oswa yon fraz ak kopi ki antoure li. Itilize <strong>pou atansyon fin vye granmoun ak <em>pou atansyon slick ak tit.

Anfaz nan yon paragraf

Fusce dapibus , tellus ac cursus commodo , tortor mauris condimentum nibh , ut fermentum massa justo sit amet risus. Mecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue.

Adrès

Eleman addressan itilize pou—ou te devine li!—adrès. Men ki jan li sanble:

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

Remak: Chak liy nan yon addressdwe fini ak yon liy-break ( <br />) byen estriktire kontni an jan yo li nan lavi reyèl san yo pa nenpòt estil aplike.

Abreviyasyon yo

Pou abrevyasyon ak akwonim, sèvi ak abbrtag ( acronymse depreche nan HTML5 ). Mete fòm kout la nan tag la epi mete yon tit pou non konplè a.

Blockquotes

<blockquote> <p> <cite>

Asire ou ke ou vlope blockquotealantou ou paragraphak citetags. Lè w ap site yon sous, sèvi ak citeeleman an. CSS la pral otomatikman prefas yon non ak yon priz em (—).

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

Doktè Julius Hibbert

San lòd<ul>

• Jeremy Bixby
• Robert Dezure
• Josh Washington
• Anton Capresi
• Kanmarad ekip mwen yo
  • George Castanza
  • Jerry Seinfeld
  • Cosmo Kramer
  • Elaine Bennis
  • Newman
• Jan Jakòb
• Paul Pierce
• Kevin Garnett

Unstyled<ul.unstyled>

• Jeremy Bixby
• Robert Dezure
• Josh Washington
• Anton Capresi
• Kanmarad ekip mwen yo
  • George Castanza
  • Jerry Seinfeld
  • Cosmo Kramer
  • Elaine Bennis
  • Newman
• Jan Jakòb
• Paul Pierce
• Kevin Garnett

Kòmande<ol>

1. Jeremy Bixby
2. Robert Dezure
3. Josh Washington
4. Anton Capresi
5. Kanmarad ekip mwen yo
   1. George Castanza
   2. Jerry Seinfeld
   3. Cosmo Kramer
   4. Elaine Bennis
   5. Newman
6. Jan Jakòb
7. Paul Pierce
8. Kevin Garnett

Deskripsyondl

Lis deskripsyon yo

Yon lis deskripsyon pafè pou defini tèm.

Euismod

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

Bati tab

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

Tablo yo gwo-pou anpil bagay. Gwo tab, sepandan, bezwen yon ti jan nan renmen maketing yo dwe itil, évolutive, ak lizib (nan nivo kòd). Men kèk konsèy pou ede.

Toujou vlope tèt kolòn ou yo nan yon theadfason ki yerachi se thead> tr> th.

Menm jan ak tèt kolòn yo, tout kontni kò tab ou a ta dwe vlope nan yon tbodykonsa yerachi ou a tbody> tr> td.

Egzanp: Styles tab default

Tout tab yo pral otomatikman estile ak sèlman fwontyè esansyèl yo asire lizibilite epi kenbe estrikti. Pa bezwen ajoute klas oswa atribi siplemantè.

#	Premye Non	Siyati	Lang
1	Gen kèk	Youn	angle
2	Joe	Sixpack	angle
3	Stu	Dent	Kòd

<table class="common-table"> klas = "tab komen" >
  ...
</tab>

Egzanp: Zèb-ray

Jwenn yon ti kras anpenpan ak tab ou lè w ajoute zebra-striping-jis ajoute .zebra-stripedklas la.

#	Premye Non	Siyati	Lang
1	Gen kèk	Youn	angle
2	Joe	Sixpack	angle
3	Stu	Dent	Kòd

<table class="common-table zebra-striped"> klas = "komen-tab zebra-ray" >
...
</tab>

Egzanp: Zebra-ray w/ TableSorter.js

Pran egzanp anvan an, nou amelyore itilite tab nou yo lè nou bay fonksyonalite klasman atravè jQuery ak Plugin Tablesorter . Klike sou tèt nenpòt kolòn pou chanje klasman an.

#	Premye Non	Siyati	Lang
1	Ou	Youn	angle
2	Joe	Sixpack	angle
3	Stu	Dent	Kòd

<script type="text/javascript" src="js/jquery/jquery.tablesorter.min.js"></script> tip = "tèks/javascript" src = "js/jquery/jquery.tablesorter.min.js" ></script> 
<script type = "tèks/javascript" > 
  $ ( dokiman ). pare ( fonksyon () { 
    $ ( "tab#sortTableExample" ). tablesorter ( { sortList : [[ 1 , 0 ]]} );   
  });
</script>
<table class = "tablo komen zebra-ray" > 
  ...
</tab>

Estil default

Tout fòm yo bay estil default yo prezante yo nan yon fason lizib ak évolutive. Yo bay estil pou antre tèks, lis chwazi, zòn tèks, bouton radyo ak kaz, ak bouton.

Egzanp fòm lejand

X-Gwo Antre

Chwazi

1 2 3 4 5

Chwazi

1 2 3 4 5

Antre ki pa kapab modifye

Gen kèk valè isit la

Enfim Antre

X-Gwo Antre

Ti bout tèks èd

Egzanp fòm lejand

Tèks devan

@

Bwat pou tcheke devan

Ansanm kaz

Antre dosye

Egzanp fòm lejand

Lis Opsyon yo

• Opsyon youn se sa a ak sa—asire w ou mete poukisa li gwo
• Opsyon de ka tcheke tou epi enkli nan rezilta fòm yo
• Opsyon twa ka—wi, ou te devine li—tou dwe tcheke epi enkli nan rezilta fòm yo
• Opsyon kat pa ka tcheke paske li enfim.

Remak: Etikèt antoure tout opsyon yo pou zòn klike pi gwo ak yon fòm ki pi itil.

Dat Range

pou Tout lè yo montre kòm tan Abitan Creole (GMT -08:00).

Textarea

Blòk tèks èd pou dekri jaden an pi wo a si sa nesesè.

Lis Opsyon yo

• Opsyon youn se sa a ak sa—asire w ou mete poukisa li gwo
• Opsyon de ka tcheke tou epi enkli nan rezilta fòm yo

Sove Chanjman yo Anile

Fòm anpile

Ajoute .form-stackedHTML fòm ou a epi w ap gen etikèt sou tèt jaden yo olye pou yo sou bò gòch yo. Sa a travay anpil si fòm ou yo kout oswa ou gen de kolòn nan entrain pou fòm pi lou.

Egzanp fòm lejand

X-Gwo Antre

Chwazi

1 2 3 4 5

Egzanp fòm lejand

Lis Opsyon yo

• Opsyon youn se sa a ak sa—asire w ou mete poukisa li gwo
• Opsyon de ka tcheke tou epi enkli nan rezilta fòm yo

Remak: Etikèt antoure tout opsyon yo pou zòn klike pi gwo ak yon fòm ki pi itil.

Sove Chanjman yo Anile

Bouton

Kòm yon konvansyon, bouton yo itilize pou aksyon pandan y ap lyen yo itilize pou objè yo. Pou egzanp, "Download" ta ka yon bouton ak "aktivite ki sot pase" ta ka yon lyen.

Tout bouton yo default nan yon style gri limyè, men yon .primaryklas ble ki disponib. Anplis de sa, woule estil pwòp ou yo se fasil peasy.

Egzanp bouton

Styles bouton yo ka aplike nan nenpòt bagay ak .btnaplike a. Tipikman ou pral vle aplike sa yo nan sèlman a, button, ak inputeleman chwazi. Men ki jan li sanble:

Lòt gwosè

Anpenpan bouton ki pi gwo oswa pi piti? Gen nan li!

Eta andikape

Pou bouton ki pa aktif oswa ki enfim nan aplikasyon an pou yon rezon oswa yon lòt, sèvi ak eta a andikape. Sa a .disabledpou lyen ak :disabledpou buttoneleman.

Lyen

Bouton

Kisa li ye

Topbar nou an se yon ba fiks ki mete logo oswa non yon sit entènèt, navigasyon prensipal, ak fòm rechèch.

Customizable

Tout eleman ki nan, ak tout bar top la tou, yo opsyonèl. Ou ka chwazi pou mete yon logo/non, navigasyon, rechèch, ak yon navigasyon segondè—oswa nenpòt konbinezon sa a.

Dropdowns enkli

Kòm yon pati nan navigasyon prensipal la, nou te enkli kapasite pou ou ajoute dropdowns nan nav ou. Tcheke navigasyon segondè ki anwo a (kiline adwat) pou wè ki jan li fè.

Tabs ak grenn

Kreye senp navigasyon segondè ak yon ul. Boukante ant tab oswa grenn lè w ajoute klas ki apwopriye a.

Bon pou sous-seksyon nan kontni tankou paj paramèt kont nou yo ak delè itilizatè yo pou chanje ant paj tankou kontni. Disponib nan estil tabbed oswa pilil.

• Lakay
• Profile
• Mesaj
• Anviwònman
• Kontakte

<ul class="tabs"> klas = "onglè" >
  <li class = "active" ><a href = "" > Kay </a></li>  
  <li><a href = "" > Pwofil </a></li> 
  <li><a href = "" > Mesaj </a></li> 
  <li><a href = "" > Anviwònman </a></li> 
  <li><a href = "" > Kontakte </a></li> 
</ul>

• Lakay
• Profile
• Mesaj
• Anviwònman
• Kontakte

<ul class="grenn"> klas = "grenn" >
  <li class = "active" ><a href = "" > Kay </a></li>  
  <li><a href = "" > Pwofil </a></li> 
  <li><a href = "" > Mesaj </a></li> 
  <li><a href = "" > Anviwònman </a></li> 
  <li><a href = "" > Kontakte </a></li> 
</ul>

Papyaj

Ultra senplist ak minim estile pagination enspire pa Rdio. Gwo blòk la difisil pou rate, fasil évolutive, epi li bay gwo zòn klike sou.

<div class="pagination"> klas = "pagination" >
  <ul>
    <li class = "prev enfim" ><a href = "" > ← Previous </a></li>  
    <li klas = "aktif" ><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>

Alèt debaz yo

Mesaj yon sèl liy pou mete aksan sou echèk, echèk posib, oswa siksè nan yon aksyon. Patikilyèman itil pou fòm.

Bloke mesaj yo

Pou mesaj ki mande yon ti eksplikasyon, nou gen alèt style paragraf. Sa yo pafè pou ebulisyon mesaj erè ki pi long, avèti yon itilizatè sou yon aksyon annatant, oswa jis prezante enfòmasyon pou plis anfaz sou paj la.

Modal

Modèl-dyalòg oswa bwat limyè-yo bon pou aksyon kontèks nan sitiyasyon kote li enpòtan pou kontèks background yo kenbe.

Popovers

Sèvi ak popovers pou bay enfòmasyon subtext nan yon paj san yo pa afekte layout.

Bootstrap te bati ak Preboot , yon pake sous louvri nan mixin ak varyab yo dwe itilize ansanm ak Less , yon preprosesè CSS pou devlopman entènèt pi rapid ak pi fasil.

Tcheke ki jan nou itilize Preboot nan Bootstrap ak ki jan ou ka sèvi ak li si ou chwazi kouri mwens sou pwochen pwojè ou a.

Ki jan yo sèvi ak li

Sèvi ak opsyon sa a pou fè tout itilizasyon Bootstrap a Less variables, mixins, ak nidifikasyon nan CSS atravè javascript nan navigatè ou a.

<link rel="stylesheet/less" type="text/css" href="less/bootstrap.less" media="all" /> rel = "stylesheet/mwens" tip = "tèks/css" href = "mwens/bootstrap.less" medya = "tout" />    
<script type = "text/javascript" src = "js/less-1.0.41.min.js" ></script>  

Ou pa santi solisyon .js la? Eseye aplikasyon Less Mac oswa itilize Node.js pou konpile lè w ap deplwaye kòd ou a.

Ki sa ki enkli

Men kèk nan sa ki enkli nan Twitter Bootstrap kòm yon pati nan Bootstrap. Ale sou sit entènèt Bootstrap la oswa paj pwojè Github pou telechaje ak aprann plis.

Varyab koulè

Varyab nan Less yo pafè pou kenbe ak ajou CSS maltèt ou gratis. Lè ou vle chanje yon valè koulè oswa yon valè yo itilize souvan, mete ajou li nan yon sèl plas epi w ap fikse.

// Lyen
@linkColor : #8b59c2;         
@linkColorHover :     fè nwa ( @linkColor , 10 ); 
// Gri
@nwa : #000;             
@grayDark :           aleje ( @black , 25 %); 
@gri :               aleje ( @nwa , 50 %); 
@grayLight :          aleje ( @nwa , 70 %); 
@grayLighter :        aleje ( @nwa , 90 %); 
@blan : #fff;             
// Koulè aksan
@ble : #08b5fb;              
@vèt : #46a546;             
@wouj : #9d261d;               
@jòn : #ffc40d;            
@orange : #f89406;            
@woz : #c3325f;              
@vyolèt : #7a43b6;            
// Debaz
@debaz : 20px ;          

Kòmantè

Mwens tou bay yon lòt style nan kòmantè anplis /* ... */sentaks nòmal CSS la.

// Sa a se yon kòmantè
/* Sa a se yon kòmantè tou */

Mixins moute wazoo a

Mixins yo fondamantalman gen ladan oswa pasyèl pou CSS, ki pèmèt ou konbine yon blòk nan kòd nan yon sèl. Yo bon pou pwopriyete prefiks machann tankou box-shadow, gradyan kwa-navigatè, pil font, ak plis ankò. Anba la a se yon echantiyon nan mixin yo ki enkli ak Bootstrap.

Pile font

#font {
  . steno ( @pwa : nòmal , @size : 14px , @lineHeight : 20px ) {     
    font - size : @size ; 
    font - pwa : @weight ; 
    liy - wotè : @lineHeight ; 
  }
  . sans - serif ( @weight : nòmal , @size : 14px , @lineHeight : 20px ) {     
    font - family : "Helvetica Neue" , ​​Helvetica , Arial , sans - serif ;   
    font - size : @size ; 
    font - pwa : @weight ; 
    liy - wotè : @lineHeight ; 
  }
  . serif ( @weight : nòmal , @size : 14px , @lineHeight : 20px ) {     
    font - family : "Georgia" , Times New Roman , Times , sans - serif ;     
    font - size : @size ; 
    font - pwa : @weight ; 
    liy - wotè : @lineHeight ; 
  }
  . monospace ( @weight : nòmal , @size : 12px , @lineHeight : 20px ) {     
    font - family : "Monaco" , Courier New , monospace ;   
    font - size : @size ; 
    font - pwa : @weight ; 
    liy - wotè : @lineHeight ; 
  }
}

Gradyan

#gradyan {
  . orizontal ( @startColor : #555, @endColor : #333) { 
    background - koulè : @endColor ; 
    background - repete : repete - x ;
    background - imaj : - khtml - gradyan ( lineyè , gòch anwo , dwat anwo , soti nan ( @startColor ), rive nan ( @endColor )); // Konkerè   
    background - imaj : - moz - lineyè - gradyan ( agoch ​​, @startColor , @endColor ); // FF 3.6+    
    background - imaj : - ms - lineyè - gradyan ( agoch ​​, @startColor , @endColor ); // IE10    
    background - imaj : - webkit - gradyan ( lineyè , gòch anwo , dwat anwo , koulè - sispann ( 0 %, @startColor ), koulè - sispann ( 100 %, @endColor )); // Safari 4+, Chrome 2+    
    background - imaj : - webkit - lineyè - gradyan ( agoch ​​, @startColor , @endColor ); // Safari 5.1+, Chrome 10+    
    background - imaj : - o - lineyè - gradyan ( agoch ​​, @startColor , @endColor ); // Opera 11.10    
    - ms - filtre : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor ); // IE8+  
    filtre : e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor )); // IE6 & IE7 
    background - imaj : lineyè - gradyan ( agoch ​​, @startColor , @endColor ); // Le standard   
  }
  . vètikal ( @startColor : #555, @endColor : #333) { 
    background - koulè : @endColor ; 
    background - repete : repete - x ;
    background - imaj : - khtml - gradyan ( lineyè , gòch anwo , gòch anba , soti nan ( @startColor ), rive nan ( @endColor )); // Konkerè   
    background - imaj : - moz - lineyè - gradyan ( @startColor , @endColor ); // FF 3.6+   
    background - imaj : - ms - lineyè - gradyan ( @startColor , @endColor ); // IE10   
    background - imaj : - webkit - gradyan ( lineyè , gòch anwo , gòch anba , koulè - sispann ( 0 %, @startColor ), koulè - sispann ( 100 %, @endColor )); // Safari 4+, Chrome 2+    
    background - imaj : - webkit - lineyè - gradyan ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+   
    background - imaj : - o - lineyè - gradyan ( @startColor , @endColor ); // Opera 11.10   
    - ms - filtre : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor ); // IE8+  
    filtre : e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor )); // IE6 & IE7 
    background - imaj : lineyè - gradyan ( @startColor , @endColor ); // Estanda a  
  }
  . direksyon ( @startColor : #555, @endColor: #333, @deg: 45deg) { 
    ...
  }
  . vètikal - twa - koulè ( @startColor : #00b3ee, @midColor: #7a43b6, @colorStop: 0.5, @endColor: #c3325f) { 
    ...
  }
}

Operasyon ak sistèm kadriyaj

Jwenn anpenpan epi fè kèk matematik pou jenere melanj fleksib ak pwisan tankou sa ki anba a.

// Gritid
@gridColumns : 16 ;       
@gridColumnWidth : 40px ;   
@gridGutterWidth : 20px ;   
// Sistèm kadriyaj
. veso {
  lajè : @siteWidth ; 
  maj : 0 oto ;  
  . clearfix ();
}
. kolòn ( @columnSpan : 1 ) {  
  ekspozisyon : inline ; 
  flote : gòch ;
  lajè : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));         
  maj - gòch : @gridGutterWidth ; 
  &: premye - pitit {
    maj - gòch : 0 ; 
  }
}
. konpanse ( @columnOffset : 1 ) {  
  margin - left : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) ! enpòtan ;          
}