Default nga grid

Ang default grid system nga gihatag isip kabahin sa Bootstrap kay 940px ang gilapdon nga 16-column grid. Kini usa ka lami sa sikat nga 960 grid system, apan walay dugang nga margin/padding sa wala ug tuo nga kilid.

Pananglitan sa grid markup

Sama sa gipakita dinhi, ang usa ka sukaranan nga layout mahimong mahimo nga adunay duha ka "kolum," ang matag usa naglangkob sa usa ka gidaghanon sa 16 nga mga kolum nga pundasyon nga among gipasabut ingon bahin sa among sistema sa grid. Tan-awa ang mga pananglitan sa ubos alang sa dugang nga mga kalainan.

<div class="row">
  <div class = "span6 nga kolum" > 
    ...
  </div>
  <div class = "span10 nga mga kolum" > 
    ...
  </div>
</div>

Naayo nga layout

Usa ka sukaranan nga 940px ang gilapdon, nakasentro nga layout sa sulud alang sa bisan unsang site o panid.

<lawas>
  <div class = "sudlanan" > 
    ...
  </div>
</body>

Layout sa likido

Usa ka flexible fluid o liquid page structure nga adunay min-ug max-widths ug usa ka left-hand sidebar. Maayo alang sa mga app.

<lawas>
  <div class = "container-fluid" > 
    <div class = "sidebar" > 
      ...
    </div>
    <div class = "sulod" > 
      ...
    </div>
  </div>
</body>

Mga ulohan ug kopya

Usa ka sagad nga typographic hierarchy alang sa pag-istruktura sa imong mga webpage.

h1. Ulohan 1

h2. Ulohan 2

h3. Ulohan 3

h4. Ulohan 4

h5. Ulohan 5

h6. Ulohan 6

Pananglitan nga parapo

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.

Pananglitan nga ulohan Adunay sub-ulohan...

Mahimo usab nimong idugang ang mga subheading nga adunay <strong>ug<em>

Misc. mga elemento

Gamit ang emphasis, adres, ug abbreviation

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

Kanus-a gamiton

Ang mga tag sa emphasis ( <strong>ug <em>) kinahanglan gamiton aron makadugang sa makita nga kalainan tali sa usa ka pulong o hugpong sa mga pulong ug sa naglibot nga kopya niini. Gigamit <strong>alang sa yano nga daan nga atensyon ug <em>alang sa madanihon nga atensyon ug mga titulo.

Pagpasiugda sa usa ka parapo

Fusce dapibus , tellus ac cursus commodo , tortor mauris condimentum nibh , ut fermentum massa justo sit amet risus. Espesye sa tanom nga bulak ang Maecenas faucibus mollis interdum. Nulla vitae elit libero, usa ka pharetra augue.

Mga adres

Ang addresselemento gigamit alang sa—natag-an nimo!—mga adres. Ania ang hitsura niini:

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

Mubo nga sulat: Ang matag linya sa usa addresskinahanglan nga tapuson sa usa ka linya-break ( <br />) aron sa hustong pagkahan-ay sa sulod ingon nga kini gibasa sa tinuod nga kinabuhi nga walay bisan unsa nga estilo nga gigamit.

Mga minubo

Para sa mga abbreviation ug acronym, gamita ang abbrtag ( acronymwala na gamita sa HTML5 ). Ibutang ang shorthand nga porma sulod sa tag ug magbutang ug titulo para sa kompletong ngalan.

Blockquotes

<blockquote> <p> <cite>

Siguruha nga ibutang ang imong blockquotepalibot paragraphug citemga tag. Kung maghisgot ug tinubdan, gamita ang citeelemento. Ang CSS awtomatik nga mag-una sa usa ka ngalan nga adunay em dash (—).

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

Dr. Julius Hibbert

Wala ma-order<ul>

• Jeremy Bixby
• Robert Dezure
• Josh Washington
• Anton Capresi
• Akong mga Kauban sa Team
  • George Castanza
  • Jerry Seinfeld
  • Cosmo Kramer
  • Elaine Bennis
  • Newman
• John Jacob
• Paul Pierce
• Kevin Garnett

Dili istilo<ul.unstyled>

• Jeremy Bixby
• Robert Dezure
• Josh Washington
• Anton Capresi
• Akong mga Kauban sa Team
  • George Castanza
  • Jerry Seinfeld
  • Cosmo Kramer
  • Elaine Bennis
  • Newman
• John Jacob
• Paul Pierce
• Kevin Garnett

Nagmando<ol>

1. Jeremy Bixby
2. Robert Dezure
3. Josh Washington
4. Anton Capresi
5. Akong mga Kauban sa Team
   1. George Castanza
   2. Jerry Seinfeld
   3. Cosmo Kramer
   4. Elaine Bennis
   5. Newman
6. John Jacob
7. Paul Pierce
8. Kevin Garnett

Deskripsyondl

Mga lista sa paghulagway

Ang usa ka lista sa paghulagway perpekto alang sa pagtino sa mga termino.

Euismod

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

Donec id elit non mi porta gravida ug eget metus.

Malesuada porta

Etiam porta sem malesuada magna mollis euismod.

Pagtukod og mga lamesa

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

Nindot ang mga lamesa—alang sa daghang butang. Ang maayo nga mga lamesa, bisan pa, nanginahanglan gamay nga gugma sa markup aron mahimong mapuslanon, mabag-o, ug mabasa (sa lebel sa code). Ania ang pipila ka mga tip aron makatabang.

Kanunay ibutang ang imong mga ulohan sa kolum sa theadingon nga hierarchy mao ang thead> tr> th.

Sama sa mga ulohan sa kolum, ang tanan nga sulud sa lawas sa imong lamesa kinahanglan nga giputos sa usa tbodyaron ang imong hierarchy mao ang tbody> tr> td.

Pananglitan: Default nga mga estilo sa lamesa

Ang tanan nga mga lamesa awtomatikong i-istilo nga adunay hinungdanon nga mga utlanan aron masiguro ang pagkabasa ug pagpadayon sa istruktura. Dili kinahanglan nga magdugang dugang nga mga klase o mga hiyas.

#	Unang Ngalan	Apelyido	Pinulongan
1	Ang uban	Sa usa ka	English
2	Joe	Sixpack	English
3	Si Stu	Dent	Code

<table class="common-table"> class = "common-table" >
  ...
</table>

Pananglitan: Zebra-striped

Paglingaw og gamay sa imong mga lamesa pinaagi sa pagdugang og zebra-striping—idugang lang ang .zebra-stripedklase.

#	Unang Ngalan	Apelyido	Pinulongan
1	Ang uban	Sa usa ka	English
2	Joe	Sixpack	English
3	Si Stu	Dent	Code

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

Pananglitan: Zebra-striped w/ TableSorter.js

Pagkuha sa miaging pananglitan, among gipauswag ang kapuslanan sa among mga lamesa pinaagi sa paghatag ug paghan-ay nga gamit pinaagi sa jQuery ug ang Tablesorter plugin. Pag-klik sa bisan unsang ulohan sa kolum aron usbon ang klase.

#	Unang Ngalan	Apelyido	Pinulongan
1	Ang imong	Sa usa ka	English
2	Joe	Sixpack	English
3	Si 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" > 
  $ ( dokumento ). andam ( function () { 
    $ ( "table#sortTableExample" ). tablesorter ( { sortList : [[ 1 , 0 ]]} );   
  });
</script>
<table class = "common-table nga zebra-striped" > 
  ...
</table>

Default nga mga estilo

Ang tanan nga mga porma gihatagan ug default nga mga istilo aron ipakita kini sa usa ka mabasa ug masukod nga paagi. Gihatag ang mga istilo alang sa mga input sa teksto, pagpili sa mga lista, mga lugar sa teksto, mga buton sa radyo ug mga checkbox, ug mga buton.

Ehemplo nga porma sa alamat

X-Daghang Input

Pagpili

1 2 3 4 5

Pagpili

1 2 3 4 5

Dili Mausab nga Input

Pipila ka Bili Dinhi

Gibalda ang Input

X-Daghang Input

Gamay nga snippet sa text sa tabang

Ehemplo nga porma sa alamat

Giandam nga Teksto

@

Giandam nga Checkbox

Gidugang nga Checkbox

File Input

Ehemplo nga porma sa alamat

Listahan sa mga Opsyon

• Ang kapilian usa mao kini ug kana—siguruha nga iapil kung ngano nga kini maayo
• Ang opsyon nga duha mahimo usab nga susihon ug ilakip sa mga resulta sa porma
• Ang opsyon nga tulo mahimo—oo, nakatag-an ka niini—masusi usab ug iapil sa mga resulta sa porma
• Ang ikaupat nga kapilian dili masusi tungod kay kini gibabagan.

Mubo nga sulat: Ang mga label naglibot sa tanang mga opsyon alang sa mas dagkong mga lugar sa pag-klik ug usa ka mas magamit nga porma.

Sakop sa Petsa

sa Ang tanang oras gipakita isip Pacific Standard Time (GMT -08:00).

Textarea

Block sa tabang nga teksto aron ihulagway ang natad sa ibabaw kung gikinahanglan.

Listahan sa mga Opsyon

• Ang kapilian usa mao kini ug kana—siguruha nga iapil kung ngano nga kini maayo
• Ang opsyon nga duha mahimo usab nga susihon ug ilakip sa mga resulta sa porma

I-save ang mga Kausaban Pagkanselar

Mga porma nga gitapok

Idugang .form-stackedsa HTML sa imong porma ug aduna kay mga label sa ibabaw sa ilang mga field imbes sa ilang wala. Maayo kini kung ang imong mga porma mubo o ikaw adunay duha ka kolum sa mga input alang sa mas bug-at nga mga porma.

Ehemplo nga porma sa alamat

X-Daghang Input

Pagpili

1 2 3 4 5

Ehemplo nga porma sa alamat

Listahan sa mga Opsyon

• Ang kapilian usa mao kini ug kana—siguruha nga iapil kung ngano nga kini maayo
• Ang opsyon nga duha mahimo usab nga susihon ug ilakip sa mga resulta sa porma

Mubo nga sulat: Ang mga label naglibot sa tanang mga opsyon alang sa mas dagkong mga lugar sa pag-klik ug usa ka mas magamit nga porma.

I-save ang mga Kausaban Pagkanselar

Mga butones

Ingon usa ka kombensiyon, ang mga buton gigamit alang sa mga aksyon samtang ang mga link gigamit alang sa mga butang. Pananglitan, ang "Pag-download" mahimong usa ka buton ug ang "bag-o nga kalihokan" mahimo nga usa ka link.

Ang tanan nga mga buton default sa usa ka light gray nga istilo, apan adunay usa ka asul .primarynga klase. Dugang pa, ang pagpaligid sa imong kaugalingon nga mga istilo dali nga peasy.

Pananglitan nga mga buton

Ang mga istilo sa buton mahimong magamit sa bisan unsang butang nga adunay .btngipadapat. Kasagaran gusto nimo nga gamiton kini sa a, button, ug pilia inputnga mga elemento. Ania ang hitsura niini:

Alternatibo nga mga gidak-on

Gusto nga mas dako o mas gagmay nga mga buton? Himoa kini!

Baldado nga estado

Alang sa mga buton nga dili aktibo o gibabagan sa app tungod sa usa ka hinungdan o lain, gamita ang kahimtang nga adunay kapansanan. Kana .disabledalang sa mga link ug :disabledalang sa buttonmga elemento.

Mga link

Mga butones

Unsa ni

Ang among topbar usa ka pirmi nga bar nga nagbutang sa logo o ngalan sa usa ka website, panguna nga nabigasyon, ug porma sa pagpangita.

Mapasibo

Ang tanan nga mga elemento sa sulod, ug ang tibuuk nga topbar usab, opsyonal. Mahimo nimong pilion nga ilakip ang usa ka logo/ngalan, nav, pagpangita, ug usa ka ikaduha nga nav—o bisan unsang kombinasyon niana.

Gilakip ang mga dropdown

Isip kabahin sa nag-unang nabigasyon, among gilakip ang abilidad alang kanimo sa pagdugang sa mga dropdown sa imong nav. Tan-awa ang ikaduha nga nav sa ibabaw (naka-align sa tuo) aron makita kung giunsa kini nahimo.

Mga tab ug pills

Paghimo og yano nga sekondaryang nabigasyon nga adunay ul. Pagbayloay tali sa mga tab o pildoras pinaagi sa pagdugang sa angay nga klase.

Maayo alang sa mga sub-seksyon sa sulud sama sa among mga panid sa setting sa account ug mga timeline sa gumagamit alang sa pag-toggling tali sa mga panid sa parehas nga sulud. Anaa sa mga estilo sa tabbed o pildoras.

• Balay
• Profile
• Mga mensahe
• Mga setting
• Kontaka

<ul class="tabs"> class = "mga tab" >
  <li class = "aktibo" ><a href = "" > Panimalay </a></li>  
  <li><a href = "" > Profile </a></li> 
  <li><a href = "" > Mga Mensahe </a></li> 
  <li><a href = "" > Mga Setting </a></li> 
  <li><a href = "" > Kontaka </a></li> 
</ul>

• Balay
• Profile
• Mga mensahe
• Mga setting
• Kontaka

<ul class="pills"> klase = "pildoras" >
  <li class = "aktibo" ><a href = "" > Panimalay </a></li>  
  <li><a href = "" > Profile </a></li> 
  <li><a href = "" > Mga Mensahe </a></li> 
  <li><a href = "" > Mga Setting </a></li> 
  <li><a href = "" > Kontaka </a></li> 
</ul>

Pagination

Ultra simplistic ug minimally styled pagination dinasig sa Rdio. Ang dako nga bloke lisud makalimtan, dali nga masukod, ug naghatag daghang mga lugar sa pag-klik.

<div class="pagination"> class = "pagination" >
  <ul>
    <li class = "prev disabled" ><a href = "" > ← Kaniadto </a></li>  
    <li class = "aktibo" ><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 = "sunod" ><a href = "" > Sunod → </a></li>  
  </ul>
</div>

Panguna nga mga alerto

Usa ka linya nga mga mensahe alang sa pagpasiugda sa kapakyasan, posible nga kapakyasan, o kalampusan sa usa ka aksyon. Ilabi na mapuslanon alang sa mga porma.

I-block ang mga mensahe

Alang sa mga mensahe nga nanginahanglan gamay nga katin-awan, kami adunay mga alerto sa istilo sa parapo. Perpekto kini alang sa pagpamulak sa mas taas nga mga mensahe sa sayup, pagpahimangno sa usa ka tiggamit sa usa ka pending nga aksyon, o pagpresentar lang sa impormasyon alang sa dugang nga pagpasiugda sa panid.

Modal

Ang mga modala—mga diyalogo o mga lightbox—maayo alang sa konteksto nga mga aksyon sa mga sitwasyon diin importante nga ang background nga konteksto mamentinar.

Mga Popover

Gamita ang mga popover para maghatag ug subtextuwal nga impormasyon sa usa ka panid nga walay epekto sa layout.

Ang Bootstrap gitukod uban sa Preboot , usa ka open-source pack sa mga mixin ug variables nga gamiton inubanan sa Less , usa ka CSS preprocessor alang sa mas paspas ug mas sayon ​​nga web development.

Tan-awa kung giunsa namon gigamit ang Preboot sa Bootstrap ug kung giunsa nimo magamit kini kung imong pilion nga modagan ang Dili kaayo sa imong sunod nga proyekto.

Unsaon paggamit niini

Gamita kini nga opsyon aron hingpit nga gamiton ang Bootstrap's Less variables, mixins, ug nesting sa CSS pinaagi sa javascript sa imong browser.

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

Dili gibati ang .js nga solusyon? Sulayi ang Less Mac app o gamita ang Node.js sa pag-compile kung imong i-deploy ang imong code.

Unsa ang gilakip

Ania ang pipila sa mga highlight sa kung unsa ang gilakip sa Twitter Bootstrap isip bahin sa Bootstrap. Lakaw ngadto sa Bootstrap website o Github project page aron ma-download ug makakat-on pa.

Mga kausaban sa kolor

Ang mga variable sa Less perpekto alang sa pagpadayon ug pag-update sa imong CSS nga wala’y sakit sa ulo. Kung gusto nimo nga usbon ang usa ka kantidad sa kolor o usa ka kanunay nga gigamit nga kantidad, i-update kini sa usa ka lugar ug nabutang ka na.

// Mga link
@linkColor : #8b59c2;         
@linkColorHover :     mongitngit ( @linkColor , 10 ); 
// Mga Gray
@itom : #000;             
@grayDark :           pagpagaan ( @ itom , 25 %); 
@gray :               pagpagaan ( @itom , 50 %); 
@grayLight :          mogaan ( @black , 70 %); 
@grayLighter :        pagpagaan ( @itom , 90 %); 
@puti : #fff;             
// Mga Kolor sa Accent
@asul : #08b5fb;              
@berde : #46a546;             
@pula : #9d261d;               
@yellow : #ffc40d;            
@orange : #f89406;            
@pink : #c3325f;              
@purpura : #7a43b6;            
// Baseline
@baseline : 20px ;          

Nagkomento

Ang dili kaayo naghatag usab ug lain nga istilo sa pagkomento dugang sa normal nga /* ... */syntax sa CSS.

// Kini usa ka komento
/* Kini usa usab ka komento */

Gisagol ang wazoo

Ang mga mixin kasagaran naglakip o mga partial alang sa CSS, nga nagtugot kanimo sa paghiusa sa usa ka block sa code ngadto sa usa. Maayo kini alang sa mga prefix nga kabtangan sa vendor sama sa box-shadow, cross-browser gradients, font stack, ug uban pa. Sa ubos usa ka sample sa mga mixin nga gilakip sa Bootstrap.

Mga stack sa font

#font {
  . shorthand ( @weight : normal , @size : 14px , @lineHeight : 20px ) {     
    gidak-on sa font : @ gidak- on ; 
    font - gibug-aton : @timbang ; 
    linya - gitas-on : @lineHeight ; 
  }
  . sans - serif ( @gibug -aton : normal , @gidak-on : 14px , @lineHeight : 20px ) {     
    font - family : "Helvetica Neue" , ​​Helvetica , Arial , sans - serif ;   
    gidak-on sa font : @ gidak- on ; 
    font - gibug-aton : @timbang ; 
    linya - gitas-on : @lineHeight ; 
  }
  . serif ( @gibug -aton : normal , @gidak-on : 14px , @lineHeight : 20px ) {     
    font - family : "Georgia" , Times New Roman , Times , sans - serif ;     
    gidak-on sa font : @ gidak- on ; 
    font - gibug-aton : @timbang ; 
    linya - gitas-on : @lineHeight ; 
  }
  . monospace ( @bug -at : normal , @gidak-on : 12px , @lineHeight : 20px ) {     
    font - family : "Monaco" , Courier New , monospace ;   
    gidak-on sa font : @ gidak- on ; 
    font - gibug-aton : @timbang ; 
    linya - gitas-on : @lineHeight ; 
  }
}

Mga gradient

#gradient {
  . pinahigda ( @startColor : #555, @endColor: #333) { 
    background - kolor : @endColor ; 
    background - repeat : repeat - x ;
    background - hulagway : - khtml - gradient ( linear , left top , right top , gikan sa ( @startColor ), ngadto sa ( @endColor )); // Konqueror   
    background - hulagway : - moz - linear - gradient ( wala , @startColor , @endColor ); // FF 3.6+    
    background - hulagway : - ms - linear - gradient ( wala , @startColor , @endColor ); // IE10    
    background - hulagway : - webkit - gradient ( linear , left top , right top , color - stop ( 0 %, @startColor ), color - stop ( 100 %, @endColor )); // Safari 4+, Chrome 2+    
    background - hulagway : - webkit - linear - gradient ( wala , @startColor , @endColor ); // Safari 5.1+, Chrome 10+    
    background - hulagway : - o - linear - gradient ( wala , @startColor , @endColor ); // Opera 11.10    
    - ms - filter : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor ); // IE8+  
    filter : e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor )); // IE6 ug IE7 
    background - hulagway : linear - gradient ( wala , @startColor , @endColor ); // Ang standard   
  }
  . bertikal ( @startColor : #555, @endColor: #333) { 
    background - kolor : @endColor ; 
    background - repeat : repeat - x ;
    background - hulagway : - khtml - gradient ( linear , left top , left bottom , gikan sa ( @startColor ), ngadto sa ( @endColor )); // Konqueror   
    background - hulagway : - moz - linear - gradient ( @startColor , @endColor ); // FF 3.6+   
    background - hulagway : - ms - linear - gradient ( @startColor , @endColor ); // IE10   
    background - hulagway : - webkit - gradient ( linear , left top , left bottom , color - stop ( 0 %, @startColor ), color - stop ( 100 %, @endColor )); // Safari 4+, Chrome 2+    
    background - hulagway : - webkit - linear - gradient ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+   
    background - hulagway : - o - linear - gradient ( @startColor , @endColor ); // Opera 11.10   
    - ms - filter : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor ); // IE8+  
    filter : e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor )); // IE6 ug IE7 
    background - hulagway : linear - gradient ( @startColor , @endColor ); // Ang sumbanan  
  }
  . direksyon ( @startColor : #555, @endColor: #333, @deg: 45deg) { 
    ...
  }
  . bertikal - tulo - kolor ( @startColor : #00b3ee, @midColor: #7a43b6, @colorStop: 0.5, @endColor: #c3325f) { 
    ...
  }
}

Mga operasyon ug sistema sa grid

Pagmagarbohon ug paghimo og pipila ka matematika aron makamugna og flexible ug gamhanan nga mga mixin sama sa ubos.

// Griditude
@gridColumns : 16 ;       
@gridColumnWidth : 40px ;   
@gridGutterWidth : 20px ;   
// Sistema sa Grid
. sudlanan {
  gilapdon : @siteWidth ; 
  margin : 0 awto ;  
  . tin-aw nga pag-ayo ();
}
. mga kolum ( @columnSpan : 1 ) {  
  display : inline ; 
  lutaw : wala ;
  gilapdon : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));         
  margin - wala : @gridGutterWidth ; 
  &: unang - anak {
    margin - wala : 0 ; 
  }
}
. offset ( @columnOffset : 1 ) {  
  margin - wala : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) ! importante ;          
}