Default na grid

Ang default na grid system na ibinigay bilang bahagi ng Bootstrap ay isang 940px na lapad na 16-column na grid. Isa itong lasa ng sikat na 960 grid system, ngunit walang karagdagang margin/padding sa kaliwa at kanang bahagi.

Halimbawang grid markup

Gaya ng ipinapakita dito, maaaring gumawa ng pangunahing layout gamit ang dalawang "column," bawat isa ay sumasaklaw sa isang bilang ng 16 na pundasyong column na tinukoy namin bilang bahagi ng aming grid system. Tingnan ang mga halimbawa sa ibaba para sa higit pang mga variation.

<div class="row"> class = "row" >
  <div class = "span6 na hanay" > 
    ...
  </div>
  <div class = "span10 column" > 
    ...
  </div>
</div>

Nakapirming layout

Isang pangunahing 940px na lapad, nakasentro na layout ng lalagyan para sa halos anumang site o page.

<katawan>
  <div class = "lalagyan" > 
    ...
  </div>
</body>

Layout ng likido

Isang nababaluktot na likido o likidong istraktura ng pahina na may min- at max-width at isang sidebar sa kaliwang bahagi. Mahusay para sa mga app.

<katawan>
  <div class = "container-fluid" > 
    <div class = "sidebar" > 
      ...
    </div>
    <div class = "nilalaman" > 
      ...
    </div>
  </div>
</body>

Mga pamagat at kopya

Isang karaniwang typographic hierarchy para sa pagbubuo ng iyong mga webpage.

h1. Pamagat 1

h2. Pamagat 2

h3. Pamagat 3

h4. Pamagat 4

h5. Pamagat 5

h6. Pamagat 6

Halimbawang talata

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.

Halimbawang heading May sub-heading...

Maaari ka ring magdagdag ng mga subheading na may <strong>at<em>

Misc. mga elemento

Paggamit ng diin, mga address, at mga pagdadaglat

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

Kailan gagamitin

Ang mga tag ng diin ( <strong>at <em>) ay dapat gamitin upang magdagdag ng visual na pagkakaiba sa pagitan ng isang salita o parirala at ang nakapaligid na kopya nito. Gamitin <strong>para sa simpleng lumang atensyon at <em>para sa makinis na atensyon at mga pamagat.

Diin sa isang talata

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.

Mga address

Ginagamit ang addresselemento para sa—hulaan mo!—mga address. Narito ang hitsura nito:

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

Tandaan: Ang bawat linya sa isang addressay dapat magtapos sa isang line-break ( <br />) upang maayos na buuin ang nilalaman habang ito ay binabasa sa totoong buhay nang walang anumang istilong inilapat.

Mga pagdadaglat

Para sa mga pagdadaglat at acronym, gamitin ang abbrtag ( acronymay hindi na ginagamit sa HTML5 ). Ilagay ang shorthand form sa loob ng tag at magtakda ng pamagat para sa kumpletong pangalan.

Blockquotes

<blockquote> <p> <cite>

Tiyaking balutin ang iyong blockquotepaligid paragraphat citemga tag. Kapag nagbabanggit ng pinagmulan, gamitin ang citeelemento. Ang CSS ay awtomatikong magpapauna sa isang pangalan na may em dash (—).

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

Dr. Julius Hibbert

Hindi nakaayos<ul>

• Jeremy Bixby
• Robert Dezure
• Josh Washington
• Anton Capresi
• Mga Team mate ko
  • George Castanza
  • Jerry Seinfeld
  • Cosmo Kramer
  • Elaine Bennis
  • Bagong tao
• John Jacob
• Paul Pierce
• Kevin Garnett

Walang istilo<ul.unstyled>

• Jeremy Bixby
• Robert Dezure
• Josh Washington
• Anton Capresi
• Mga Team mate ko
  • George Castanza
  • Jerry Seinfeld
  • Cosmo Kramer
  • Elaine Bennis
  • Bagong tao
• John Jacob
• Paul Pierce
• Kevin Garnett

Inutusan<ol>

1. Jeremy Bixby
2. Robert Dezure
3. Josh Washington
4. Anton Capresi
5. Mga Team mate ko
   1. George Castanza
   2. Jerry Seinfeld
   3. Cosmo Kramer
   4. Elaine Bennis
   5. Bagong tao
6. John Jacob
7. Paul Pierce
8. Kevin Garnett

Paglalarawandl

Mga listahan ng paglalarawan

Ang isang listahan ng paglalarawan ay perpekto para sa pagtukoy ng mga termino.

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.

Pagbuo ng mga mesa

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

Mahusay ang mga mesa—para sa maraming bagay. Gayunpaman, ang magagandang talahanayan ay nangangailangan ng kaunting pag-ibig sa markup upang maging kapaki-pakinabang, nasusukat, at nababasa (sa antas ng code). Narito ang ilang mga tip upang makatulong.

Palaging balutin ang iyong mga header ng column sa isang theadtulad na hierarchy ay thead> tr> th.

Katulad ng mga header ng column, ang lahat ng nilalaman ng katawan ng iyong talahanayan ay dapat na nakabalot sa isang tbodyupang ang iyong hierarchy ay tbody> tr> td.

Halimbawa: Mga default na istilo ng talahanayan

Ang lahat ng mga talahanayan ay awtomatikong mai-istilo na may mga mahahalagang hangganan lamang upang matiyak ang pagiging madaling mabasa at mapanatili ang istraktura. Hindi na kailangang magdagdag ng mga karagdagang klase o katangian.

#	Pangalan	Huling pangalan	Wika
1	Ang ilan	Isa	Ingles
2	Joe	Anim na pack	Ingles
3	Stu	Dent	Code

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

Halimbawa: Zebra-striped

Maging medyo magarbo sa iyong mga talahanayan sa pamamagitan ng pagdaragdag ng zebra-striping—idagdag lang ang .zebra-stripedklase.

#	Pangalan	Huling pangalan	Wika
1	Ang ilan	Isa	Ingles
2	Joe	Anim na pack	Ingles
3	Stu	Dent	Code

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

Halimbawa: Zebra-striped w/ TableSorter.js

Sa pagkuha sa nakaraang halimbawa, pinapabuti namin ang pagiging kapaki-pakinabang ng aming mga talahanayan sa pamamagitan ng pagbibigay ng pag-uuri ng functionality sa pamamagitan ng jQuery at ang Tablesorter plugin. I-click ang anumang header ng column upang baguhin ang pag-uuri.

#	Pangalan	Huling pangalan	Wika
1	Iyong	Isa	Ingles
2	Joe	Anim na pack	Ingles
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" > 
  $ ( dokumento ). handa na ( function () { 
    $ ( "table#sortTableExample" ). tablesorter ( { sortList : [[ 1 , 0 ]]} );   
  });
</script>
<table class = "common-table zebra-striped" > 
  ...
</table>

Mga default na istilo

Ang lahat ng mga form ay binibigyan ng mga default na istilo upang ipakita ang mga ito sa isang nababasa at nasusukat na paraan. Ibinibigay ang mga istilo para sa mga text input, mga piling listahan, mga textarea, mga radio button at checkbox, at mga button.

Halimbawa ng anyo ng alamat

X-Malaking Input

Pumili

1 2 3 4 5

Pumili

1 2 3 4 5

Hindi Mae-edit na Input

Ilang Halaga Dito

Naka-disable na Input

X-Malaking Input

Maliit na snippet ng text ng tulong

Halimbawa ng anyo ng alamat

Prepended na Teksto

@

Prepended na Checkbox

Nakadugtong na Checkbox

File Input

Halimbawa ng anyo ng alamat

Listahan ng mga Opsyon

• Ang opsyon isa ay ito at iyon—siguraduhing isama kung bakit ito mahusay
• Ang opsyon na dalawa ay maaari ding suriin at isama sa mga resulta ng form
• Ang pagpipiliang tatlo ay maaari—oo, nahulaan mo na—masuri din at isama sa mga resulta ng form
• Ang apat na opsyon ay hindi maaaring suriin dahil ito ay hindi pinagana.

Tandaan: Ang mga label ay pumapalibot sa lahat ng mga opsyon para sa mas malalaking lugar ng pag-click at isang mas magagamit na form.

Saklaw ng Petsa

sa Ang lahat ng oras ay ipinapakita bilang Pacific Standard Time (GMT -08:00).

Textarea

Block ng text ng tulong upang ilarawan ang field sa itaas kung kinakailangan.

Listahan ng mga Opsyon

• Ang opsyon isa ay ito at iyon—siguraduhing isama kung bakit ito mahusay
• Ang opsyon na dalawa ay maaari ding suriin at isama sa mga resulta ng form

I-save ang mga pagbabago Kanselahin

Mga nakasalansan na form

Idagdag .form-stackedsa HTML ng iyong form at magkakaroon ka ng mga label sa ibabaw ng kanilang mga field sa halip na sa kanilang kaliwa. Mahusay itong gumagana kung maikli ang iyong mga form o mayroon kang dalawang column ng mga input para sa mas mabibigat na form.

Halimbawa ng anyo ng alamat

X-Malaking Input

Pumili

1 2 3 4 5

Halimbawa ng anyo ng alamat

Listahan ng mga Opsyon

• Ang opsyon isa ay ito at iyon—siguraduhing isama kung bakit ito mahusay
• Ang opsyon na dalawa ay maaari ding suriin at isama sa mga resulta ng form

Tandaan: Ang mga label ay pumapalibot sa lahat ng mga opsyon para sa mas malalaking lugar ng pag-click at isang mas magagamit na form.

I-save ang mga pagbabago Kanselahin

Mga Pindutan

Bilang isang convention, ang mga button ay ginagamit para sa mga aksyon habang ang mga link ay ginagamit para sa mga bagay. Halimbawa, ang "I-download" ay maaaring isang button at ang "kamakailang aktibidad" ay maaaring isang link.

Default ang lahat ng button sa isang light grey na istilo, ngunit .primaryavailable ang isang asul na klase. Dagdag pa, ang pag-roll ng iyong sariling mga estilo ay madaling peasy.

Mga halimbawang pindutan

Maaaring ilapat ang mga istilo ng button sa anumang bagay na may .btninilapat. Karaniwang gugustuhin mong ilapat ang mga ito sa a, button, at mga piling inputelemento lamang. Narito ang hitsura nito:

Mga kahaliling laki

Gusto mo ba ng mas malaki o mas maliit na mga pindutan? Gawin mo ito!

Estadong may kapansanan

Para sa mga button na hindi aktibo o hindi pinagana ng app para sa isang dahilan o iba pa, gamitin ang disabled na estado. Iyon ay .disabledpara sa mga link at :disabledpara sa mga buttonelemento.

Mga link

Mga Pindutan

Ano ito

Ang aming topbar ay isang nakapirming bar na naglalaman ng logo o pangalan ng website, pangunahing nabigasyon, at form ng paghahanap.

Nako-customize

Ang lahat ng elemento sa loob, at ang buong topbar din, ay opsyonal. Maaari mong piliing magsama ng logo/pangalan, nav, paghahanap, at pangalawang nav—o anumang kumbinasyon niyan.

Kasama ang mga dropdown

Bilang bahagi ng pangunahing nabigasyon, isinama namin ang kakayahan para sa iyo na magdagdag ng mga dropdown sa iyong nav. Tingnan ang pangalawang nav sa itaas (naka-align sa kanan) upang makita kung paano ito ginagawa.

Mga tab at tabletas

Lumikha ng simpleng pangalawang nabigasyon gamit ang isang ul. Magpalit sa pagitan ng mga tab o tableta sa pamamagitan ng pagdaragdag ng naaangkop na klase.

Mahusay para sa mga sub-section ng nilalaman tulad ng aming mga pahina ng mga setting ng account at mga timeline ng user para sa pagpapalipat-lipat sa pagitan ng mga pahina ng katulad na nilalaman. Magagamit sa mga istilo ng tab o tableta.

• Bahay
• Profile
• Mga mensahe
• Mga setting
• Makipag-ugnayan

<ul class="tabs"> class = "mga tab" >
  <li class = "active" ><a href = "" > Home </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 = "" > Makipag -ugnayan sa </a></li> 
</ul>

• Bahay
• Profile
• Mga mensahe
• Mga setting
• Makipag-ugnayan

<ul class="pills"> class = "pills" >
  <li class = "active" ><a href = "" > Home </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 = "" > Makipag -ugnayan sa </a></li> 
</ul>

Pagbilang ng pahina

Ultra simplistic at minimally istilong pagination na inspirasyon ng Rdio. Ang malaking bloke ay mahirap makaligtaan, madaling masusukat, at nagbibigay ng malalaking lugar ng pag-click.

<div class="pagination"> class = "pagbilang ng pahina" >
  <ul>
    <li class = "prev disabled" ><a href = "" > ← Nakaraang </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 = "next" ><a href = "" > Next → </a></li>  
  </ul>
</div>

Mga pangunahing alerto

Isang linyang mensahe para sa pag-highlight ng kabiguan, posibleng pagkabigo, o tagumpay ng isang aksyon. Lalo na kapaki-pakinabang para sa mga form.

I-block ang mga mensahe

Para sa mga mensaheng nangangailangan ng kaunting paliwanag, mayroon kaming mga alerto sa istilo ng talata. Ang mga ito ay perpekto para sa pagbubula ng mas mahabang mga mensahe ng error, babala sa isang gumagamit ng isang nakabinbing aksyon, o pagpapakita lamang ng impormasyon para sa higit na diin sa pahina.

Mga modal

Ang mga modal—mga dialog o lightbox—ay mahusay para sa mga aksyong ayon sa konteksto sa mga sitwasyon kung saan mahalagang mapanatili ang konteksto ng background.

Mga Popover

Gumamit ng mga popover upang magbigay ng subtextual na impormasyon sa isang pahina nang hindi nagsasagawa ng layout.

Binuo ang Bootstrap gamit ang Preboot , isang open-source pack ng mga mixin at variable na gagamitin kasabay ng Less , isang CSS preprocessor para sa mas mabilis at mas madaling pag-develop ng web.

Tingnan kung paano namin ginamit ang Preboot sa Bootstrap at kung paano mo ito magagamit kung pipiliin mong magpatakbo ng Mas kaunti sa iyong susunod na proyekto.

Paano ito gamitin

Gamitin ang opsyong ito upang lubos na magamit ang Mga Mas kaunting variable, mixin, at nesting ng Bootstrap sa CSS sa pamamagitan ng javascript sa iyong 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 = "all" />    
<script type = "text/javascript" src = "js/less-1.0.41.min.js" ></script>  

Hindi nararamdaman ang .js na solusyon? Subukan ang Less Mac app o gamitin ang Node.js para mag-compile kapag na-deploy mo ang iyong code.

Ano ang kasama

Narito ang ilan sa mga highlight ng kung ano ang kasama sa Twitter Bootstrap bilang bahagi ng Bootstrap. Tumungo sa website ng Bootstrap o pahina ng proyekto ng Github para mag-download at matuto pa.

Mga variable ng kulay

Ang mga variable sa Less ay perpekto para sa pagpapanatili at pag-update ng iyong CSS nang walang sakit sa ulo. Kapag gusto mong baguhin ang value ng kulay o value na madalas gamitin, i-update ito sa isang lugar at nakatakda ka na.

// Mga link
@linkColor : #8b59c2;         
@linkColorHover :     darken ( @linkColor , 10 ); 
// Mga Gray
@black : #000;             
@grayDark :           gumaan ( @black , 25 %); 
@gray :               lumiwanag ( @black , 50 %); 
@grayLight :          gumaan ( @black , 70 %); 
@grayLighter :        gumaan ( @black , 90 %); 
@white : #fff;             
// Mga Kulay ng Accent
@blue : #08b5fb;              
@berde : #46a546;             
@pula : #9d261d;               
@dilaw : #ffc40d;            
@orange : #f89406;            
@pink : #c3325f;              
@purple : #7a43b6;            
// Baseline
@baseline : 20px ;          

Nagkomento

Nagbibigay din ang Less ng isa pang istilo ng pagkomento bilang karagdagan sa normal na /* ... */syntax ng CSS.

// Ito ay isang komento
/* Comment din ito */

Pinaghahalo ang wazoo

Ang mga mixin ay karaniwang kasama o mga partial para sa CSS, na nagbibigay-daan sa iyong pagsamahin ang isang bloke ng code sa isa. Mahusay ang mga ito para sa mga prefix na katangian ng vendor tulad ng box-shadow, mga cross-browser gradient, font stack, at higit pa. Nasa ibaba ang isang sample ng mga mixin na kasama sa Bootstrap.

Mga stack ng font

#font {
  . shorthand ( @weight : normal , @size : 14px , @lineHeight : 20px ) {     
laki ng     font : @size ; 
    font - timbang : @timbang ; 
    linya - taas : @lineHeight ; 
  }
  . sans - serif ( @weight : normal , @size : 14px , @lineHeight : 20px ) {     
    font - pamilya : "Helvetica Neue" , ​​Helvetica , Arial , sans - serif ;   
laki ng     font : @size ; 
    font - timbang : @timbang ; 
    linya - taas : @lineHeight ; 
  }
  . serif ( @weight : normal , @size : 14px , @lineHeight : 20px ) {     
    font - pamilya : "Georgia" , Times New Roman , Times , sans - serif ;     
laki ng     font : @size ; 
    font - timbang : @timbang ; 
    linya - taas : @lineHeight ; 
  }
  . monospace ( @weight : normal , @size : 12px , @lineHeight : 20px ) {     
    font - family : "Monaco" , Courier New , monospace ;   
laki ng     font : @size ; 
    font - timbang : @timbang ; 
    linya - taas : @lineHeight ; 
  }
}

Mga gradient

#gradient {
  . pahalang ( @startColor : #555, @endColor: #333) { 
    background - kulay : @endColor ; 
    background - ulitin : ulitin - x ;
    background - image : - khtml - gradient ( linear , left top , right top , from ( @startColor ), to ( @endColor )); // Mananakop   
    background - imahe : - moz - linear - gradient ( kaliwa , @startColor , @endColor ); // FF 3.6+    
    background - imahe : - ms - linear - gradient ( kaliwa , @startColor , @endColor ); // IE10    
    background - imahe : - webkit - gradient ( linear , left top , right top , color - stop ( 0 %, @startColor ), color - stop ( 100 %, @endColor )); // Safari 4+, Chrome 2+    
    background - imahe : - webkit - linear - gradient ( kaliwa , @startColor , @endColor ); // Safari 5.1+, Chrome 10+    
    background - imahe : - o - linear - gradient ( kaliwa , @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 at IE7 
    background - imahe : linear - gradient ( kaliwa , @startColor , @endColor ); // Ang pamantayan   
  }
  . patayo ( @startColor : #555, @endColor: #333) { 
    background - kulay : @endColor ; 
    background - ulitin : ulitin - x ;
    background - image : - khtml - gradient ( linear , left top , left bottom , from ( @startColor ), to ( @endColor )); // Mananakop   
    background - imahe : - moz - linear - gradient ( @startColor , @endColor ); // FF 3.6+   
    background - larawan : - ms - linear - gradient ( @startColor , @endColor ); // IE10   
    background - imahe : - webkit - gradient ( linear , left top , left bottom , color - stop ( 0 %, @startColor ), color - stop ( 100 %, @endColor )); // Safari 4+, Chrome 2+    
    background - imahe : - webkit - linear - gradient ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+   
    background - larawan : - 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 at IE7 
    background - larawan : linear - gradient ( @startColor , @endColor ); // Ang pamantayan  
  }
  . direksyon ( @startColor : #555, @endColor: #333, @deg: 45deg) { 
    ...
  }
  . patayo - tatlong - kulay ( @startColor : #00b3ee, @midColor: #7a43b6, @colorStop: 0.5, @endColor: #c3325f) { 
    ...
  }
}

Mga operasyon at grid system

Maging magarbo at magsagawa ng ilang matematika upang makabuo ng nababaluktot at makapangyarihang mga mix tulad ng nasa ibaba.

// Griditude
@gridColumns : 16 ;       
@gridColumnWidth : 40px ;   
@gridGutterWidth : 20px ;   
// Grid system
. lalagyan {
  lapad : @siteWidth ; 
  margin : 0 auto ;  
  . clearfix ();
}
. mga hanay ( @columnSpan : 1 ) {  
  display : inline ; 
  lumutang : kaliwa ;
  lapad : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));         
  margin - kaliwa : @gridGutterWidth ; 
  &: unang - anak {
    margin - kaliwa : 0 ; 
  }
}
. offset ( @columnOffset : 1 ) {  
  margin - kaliwa : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) ! mahalaga ;          
}