Istwa

Nan premye jou Twitter yo, enjenyè yo te itilize prèske nenpòt bibliyotèk yo te abitye avèk yo pou satisfè egzijans front-end. Bootstrap te kòmanse kòm yon repons a defi yo te prezante ak devlopman rapidman akselere pandan premye Hackweek Twitter la.

Avèk èd ak fidbak anpil enjenyè nan Twitter, Bootstrap te grandi anpil pou li anglobe non sèlman estil debaz yo, men modèl konsepsyon devan pi elegant ak dirab.

Li plis sou dev.twitter.com ›

Sipò navigatè

Bootstrap teste ak sipòte nan gwo navigatè modèn tankou Chrome, Safari, Internet Explorer, ak Firefox.

• Dènye Safari
• Dènye Google Chrome
• Firefox 4+
• Internet Explorer 7+
• Opera 11

Ki sa ki enkli

Bootstrap vini konplè ak konpile CSS, non, ak modèl egzanp.

• Tout fichye .mwens orijinal yo
• Konplètman konpile ak minified CSS
• Ranpli dokimantasyon styleguide
• Egzanp paj modèl (plis ap vini byento)

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

Layout fiks

Defo ak senp 940px lajè, Layout santre pou prèske nenpòt sitwèb oswa paj ki ofri pa yon sèl <div.container>.

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

Layout likid

Yon altènatif, fleksib estrikti paj likid ak min- ak max-lajè ak yon bò gòch. Bon pou aplikasyon ak dokiman.

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

Tout kadriyaj tipografik la baze sou de Less variables nan fichye preboot.less nou an: @basefontak @baseline. Premye a se gwosè font de baz yo itilize nan tout e dezyèm lan se wotè liy debaz la.

Nou itilize varyab sa yo, ak kèk matematik, pou kreye maj yo, paddings, ak liy-wotè nan tout kalite nou yo ak plis ankò.

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

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 endike plis enpòtans oswa anfaz yon mo oswa yon fraz anrapò ak kopi ki antoure l. Itilize <strong>pou enpòtans ak <em>pou mete aksan sou estrès .

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.

Remak: Li toujou oke pou itilize <b>ak <i>tag nan HTML5 epi yo pa bezwen estile fonse ak italik, respektivman (byenke si gen yon eleman plis semantik, sèvi ak li). <b>se vle di yo mete aksan sou mo oswa fraz san yo pa transmèt plis enpòtans, pandan y ap <i>se sitou pou vwa, tèm teknik, elatriye.

Adrès

Se <address>eleman nan itilize pou enfòmasyon kontak pou zansèt ki pi pre li yo, oswa tout kò travay la. 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 <address>dwe fini ak yon kase liy ( <br />) oswa yo dwe vlope nan yon etikèt nivo blòk (egzanp, <p>) pou byen estriktire kontni an.

Abreviyasyon yo

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

Blockquotes

<blockquote> <p> <small>

Ki jan yo site

Pou enkli yon blockquote, vlope <blockquote>ak <p>tags <small>. Sèvi ak <small>eleman nan site sous ou a epi w ap jwenn yon priz em —anvan li.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

Doktè Julius Hibbert

San lòd<ul>

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

Kòmande<ol>

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

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 <thead>fason 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 <tbody>konsa 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

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

Remak: Zebra-striping se yon amelyorasyon pwogresif ki pa disponib pou pi gran navigatè tankou IE8 ak anba a.

<table class = "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 src = "js/jquery/jquery.tablesorter.min.js" ></script> 
<script > 
  $ ( fonksyon () { 
    $ ( "tab#sortTableExample" ). tablesorter ({ sortList : [[ 1 , 0 ]] });  
  });
</script>
<table class = "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 se yon lòt bagay epi chwazi li pral deseleksyone opsyon 1

  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

X-Gwo Antre

Ti bout tèks èd

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 pa default nan yon style gri limyè, men yon kantite klas fonksyonèl ka aplike pou diferan estil koulè. Klas sa yo genyen yon .primaryklas ble, yon klas ble limyè .info, yon klas vèt .successak yon klas wouj .danger. 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 <input>eleman 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 <button>eleman.

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
• Dropdown
  • Segondè lyen
  • Yon lòt bagay isit la
  • Yon lòt lyen

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

div.alert-message

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

div.alert-message.block-message

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.

Konsèy zouti

Twipsies yo trè itil pou ede yon itilizatè konfonn epi montre yo nan bon direksyon an.

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" href = "less/bootstrap.less" media = "all" />    
<script src = "js/less-1.1.3.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

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;            
 
// Kadriyaj debaz
@basefont : 13px ;          
@debaz : 18px ;          

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    
    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   
    background - imaj : lineyè - gradyan ( @startColor , @endColor ); // Estanda a  
  }
  . direksyon ( @startColor : #555, @endColor: #333, @deg: 45deg) { 
    ...
  }
  . vètikal - twa - koulè ( @startColor : #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @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 ;   
@siteWidth : ( @gridColumns * @gridColumnWidth ) + ( @gridGutterWidth * ( @gridColumns - 1 ));                 
 
// Sistèm kadriyaj
. veso {
  lajè : @siteWidth ; 
  maj : 0 oto ;  
  . clearfix ();
}
. kolòn ( @columnSpan : 1 ) {  
  lajè : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));         
}
. konpanse ( @columnOffset : 1 ) {  
  margin - left : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) + @extraSpace ;           
}