Mātiti taunoa

Ko te punaha matiti taunoa kua whakaratohia hei waahanga o Bootstrap he matiti 940px te whanui 16-tīwae. He reka o te punaha matiti 960 rongonui, engari karekau he tawhwhw/padding i te taha maui me te taha matau.

Tauira tohu matiti

Ka rite ki te whakaatu i konei, ka taea te hanga i tetahi tahora taketake me nga "tīwae" e rua, ka horahia e ia he maha o nga pou turanga 16 i tautuhia e matou hei waahanga o to maatau punaha tukutuku. Tirohia nga tauira i raro nei mo etahi atu rereketanga.

<div class="row">
  <div class = "span6 tīwae" > 
    ...
  </div>
  <div class = "span10 tīwae" > 
    ...
  </div>
</div>

Te whakatakotoranga pumau

He 940px taketake te whanui, te whakatakotoranga ipu kei waenganui mo tetahi waahi, wharangi ranei.

<tinana>
  <div class = "putea" > 
    ...
  </div>
</tinana>

Te whakatakotoranga wai

He hanganga wharangi wē, wē rānei me te iti me te teitei-whanui me te paetaha maui. He pai mo nga taupānga.

<tinana>
  <div class = "ipu-wai" > 
    <div class = "paetaha" > 
      ...
    </div>
    <div class = "ihirangi" > 
      ...
    </div>
  </div>
</tinana>

Nga upoko me te kape

He aroraa patopato paerewa mo te hanga i o wharangi paetukutuku.

h1. Pane 1

h2. Pane 2

h3. Pane 3

h4. Pane 4

h5. Pane 5

h6. Pane 6

Kowae tauira

Ko te ahua o te ahua o te ahua o te ahua o te whakapaipai. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ko te ingoa o nga mea katoa ka taea e koe.

Tauira pane He pane iti...

Ka taea hoki te taapiri i nga upoko iti me te <strong>me<em>

Misc. huānga

Ma te whakakaha, nga wahitau, me nga whakapoto

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

Ahea te whakamahi

Me whakamahi nga tohu tohu ( <strong>me <em>) ki te taapiri i te wehewehenga ataata i waenga i tetahi kupu, kianga ranei me tona kape huri noa. Whakamahia <strong>mo te aro o mua, <em>mo te aro kikokore me nga taitara.

Te aroraa i roto i te hoê paratarafa

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.

Wāhitau

Ka addresswhakamahia te huānga mo—i whakaaro koe!—nga wahitau. Anei te ahua:

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

Tuhipoka: Ko ia rarangi i roto i tetahi addressme mutu ki te wehenga-raina ( <br />) kia tika ai te hanga i nga korero i te mea e panuihia ana i roto i te ao tuuturu kaore he momo momo.

Whakapoto

Mo nga whakapoto me nga acronyms, whakamahia te abbrtohu ( acronymkua whakakorehia i te HTML5 ). Tuhia te puka poto ki roto i te tohu ka tautuhi i te taitara mo te ingoa katoa.

Poraka korero

<blockquote> <p> <cite>

Kia mau ki te takai blockquotei o tohu paragraphme o citetohu. Ki te whakahua i tetahi puna, whakamahia te citehuānga. Ko te CSS ka whakahua aunoa i tetahi ingoa me te tohu em (—).

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

Takuta Julius Hibbert

Kore ota<ul>

• Jeremy Bixby
• Robert Dezure
• Josh Washington
• Anton Kapene
• Ko aku hoa o te kapa
  • George Castanza
  • Jerry Seinfeld
  • Cosmo Kramer
  • Elaine Bennis
  • Newman
• Hoani Hakopa
• Paora Pierce
• Kevin Garnett

Kore-ahua<ul.unstyled>

• Jeremy Bixby
• Robert Dezure
• Josh Washington
• Anton Kapene
• Ko aku hoa o te kapa
  • George Castanza
  • Jerry Seinfeld
  • Cosmo Kramer
  • Elaine Bennis
  • Newman
• Hoani Hakopa
• Paora Pierce
• Kevin Garnett

Kua whakahaua<ol>

1. Jeremy Bixby
2. Robert Dezure
3. Josh Washington
4. Anton Kapene
5. Ko aku hoa o te kapa
   1. George Castanza
   2. Jerry Seinfeld
   3. Cosmo Kramer
   4. Elaine Bennis
   5. Newman
6. Hoani Hakopa
7. Paora Pierce
8. Kevin Garnett

Whakaahuatangadl

Nga rarangi whakaahuatanga

Ko te rarangi whakaahuatanga he tino pai mo te tautuhi kupu.

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.

Te hanga tepu

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

He rawe nga tepu—mo nga mea maha. Ko nga ripanga nui, engari, me iti te aroha tohu ki te whai hua, te tauine, me te panui (i te taumata waehere). Anei etahi tohutohu hei awhina.

I nga wa katoa, takai i nga pane o te poupou ki roto i te theadahua ko te naakapa he thead> tr> th.

He rite ki nga pane o te poupou, me takai nga ihirangi tinana katoa o to ripanga ki roto i te tbodya na reira ko to hierarchy tbody> tr> td.

Tauira: Ngā kāhua ripanga taunoa

Ka whakaingoatia nga ripanga katoa me nga taitapa nui anake hei whakarite i te panui me te pupuri i te hanganga. Kaore he take ki te taapiri i etahi atu karaehe, huanga ranei.

#	Ingoa Tuatahi	Ingoa Whakamutunga	Reo
1	Ko etahi	Kotahi	Ingarihi
2	Joe	Poka ono	Ingarihi
3	Stu	Dent	Waehere

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

Tauira: Hetere-tere

Kia pai ki o ripanga ma te taapiri i te zebra-striping—tapiri noa te .zebra-stripedkaraehe.

#	Ingoa Tuatahi	Ingoa Whakamutunga	Reo
1	Ko etahi	Kotahi	Ingarihi
2	Joe	Poka ono	Ingarihi
3	Stu	Dent	Waehere

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

Tauira: Zebra-striped w/ TableSorter.js

Ma te tango i te tauira o mua, ka whakapai ake i te whaihua o a maatau ripanga ma te whakarato i nga mahi tohatoha ma te jQuery me te monomai Ripanga . Patohia te pane o te tīwae hei huri i te kōmaka.

#	Ingoa Tuatahi	Ingoa Whakamutunga	Reo
1	To	Kotahi	Ingarihi
2	Joe	Poka ono	Ingarihi
3	Stu	Dent	Waehere

<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 = "kuputuhi/javascript" > 
  $ ( tuhinga ). kua rite ( mahi () { 
    $ ( "tepu#sortTableExample" ). kaiwhakarite ripanga ( { Rarangirangirangi : [[ 1 , 0 ]]} );   
  });
</script>
<table class = "tepu noa zebra-striped" > 
  ...
</table>

Ngā kāhua taunoa

Ko nga puka katoa ka tukuna he momo taunoa hei whakaatu ma te panui me te tauine. Ka whakaratohia nga ahua mo nga whakaurunga kuputuhi, nga rarangi tohu, nga waahanga kuputuhi, nga patene reo irirangi me nga pouakataki, me nga paatene.

He tauira pakiwaitara puka

X-Tauru Nui

Tīpakohia

1 2 3 4 5

Tīpakohia

1 2 3 4 5

Tāuru kore e taea te whakatika

Ētahi Uara Here

Kua Monohia te Whakauru

X-Tauru Nui

He iti o te kupu awhina

He tauira pakiwaitara puka

Kuputuhi kua tohua

@

Pouakataki kua tohua

Pouakataki kua apitihia

Tāuru Kōnae

He tauira pakiwaitara puka

Rarangi o nga Kōwhiringa

• Ko te whiringa tuatahi ko tenei me tera—me whakauru he aha i pai ai
• Ko te kōwhiringa tuarua ka taea te tirotiro me te whakauru ki nga hua puka
• Ko te whiringa tuatoru ka taea—ae, i whakaaro koe—ka tirohia ano ka whakauruhia ki nga hua puka
• Ko te kōwhiringa tuawhā e kore e taea te taki i te mea kua monokia.

Tuhipoka: Ka karapotia e nga tapanga nga whiringa katoa mo nga waahi paato nui ake me te ahua pai ake.

Awhe Ra

ki Ko nga wa katoa ka whakaatuhia hei Waa Paerewa Moananui-a-Kiwa (GMT -08:00).

Textarea

Poraka o te kupu awhina hei whakaahua i te mara i runga ake mena e tika ana.

Rarangi o nga Kōwhiringa

• Ko te whiringa tuatahi ko tenei me tera—me whakauru he aha i pai ai
• Ko te kōwhiringa tuarua ka taea te tirotiro me te whakauru ki nga hua puka

Tiaki Huringa Whakakore

Puka tāpae

Tāpirihia .form-stackedki te HTML o tō puka ka whai tapanga koe ki runga ake o ā rātou āpure, kaua ki te taha mauī. Ka pai tenei ki te poto o puka, e rua ranei nga pou whakauru mo nga puka taumaha ake.

He tauira pakiwaitara puka

X-Tauru Nui

Tīpakohia

1 2 3 4 5

He tauira pakiwaitara puka

Rarangi o nga Kōwhiringa

• Ko te whiringa tuatahi ko tenei me tera—me whakauru he aha i pai ai
• Ko te kōwhiringa tuarua ka taea te tirotiro me te whakauru ki nga hua puka

Tuhipoka: Ka karapotia e nga tapanga nga whiringa katoa mo nga waahi paato nui ake me te ahua pai ake.

Tiaki Huringa Whakakore

Patene

Hei tikanga, ka whakamahia nga paatene mo nga mahi ka whakamahia nga hononga mo nga taonga. Hei tauira, "Tikiake" he paatene me te "mahi hou" he hononga.

Katoa nga paatene taunoa ki te ahua hina hina, engari he .primarykaraehe kahurangi kei te waatea. I tua atu, ko te huri i o ake ahua he ngawari te peasy.

Patene tauira

Ka taea te whakamahi i nga momo paatene ki tetahi mea me te .btntono. Ko te tikanga ka hiahia koe ki te hoatu i enei ki te a, button, me te kowhiri i inputnga huānga. Anei te ahua:

Rahi rereke

Kei te pirangi koe ki nga paatene nui, iti ake ranei? Kia whai!

Te ahua haua

Mo nga patene karekau i te kaha, kua monoa ranei e te taupānga mo tetahi take, whakamahia te ahua haua. Mo nga .disabledhononga me :disablednga buttonhuānga.

Hononga

Patene

He aha tena

Ko ta matou pae runga he pae pumau e mau ana i te waitohu paetukutuku, te ingoa ranei, te whakatere tuatahi, me te puka rapu.

Ka taea te whakarite

Ko nga huānga katoa o roto, me te pae runga katoa, he mea whiriwhiri. Ka taea e koe te kowhiri ki te whakauru i te moko/ingoa, nav, rapu, me te nav tuarua—he huinga ranei o tera.

Kua whakauruhia nga whakaheke

Hei waahanga o te whakaterenga matua, kua whakauruhia e matou te kaha ki a koe ki te taapiri i nga takahanga ki to nav. Tirohia te nav tuarua kei runga ake nei (whakatikaa matau) kia kite pehea te mahi.

Ripa me nga pire

Waihangahia te whakatere tuarua ngawari me te ul. Hurihia i waenga i nga ripa me nga pire ma te taapiri i te karaehe e tika ana.

He pai mo nga waahanga-iti o te ihirangi penei i a maatau wharangi tautuhinga kaute me nga raarangi kaiwhakamahi mo te takahuri i waenga i nga wharangi rite nga ihirangi. E waatea ana i roto i nga momo ripa, pire ranei.

• Kainga
• Kōtaha
• Nga Karere
• Tautuhinga
• Whakapā

<ul class="ripa"> class = "ripa" >
  <li class = "active" ><a href = "" > Home </a> </li>  
  <li><a href = "" > Kōtaha </a> </li> 
  <li><a href = "" > Nga Karere </a> </li> 
  <li><a href = "" > Tautuhinga </a> </li> 
  <li><a href = "" > Whakapā </a> </li> 
</ul>

• Kainga
• Kōtaha
• Nga Karere
• Tautuhinga
• Whakapā

<ul class="pire"> class = "pire" >
  <li class = "active" ><a href = "" > Home </a> </li>  
  <li><a href = "" > Kōtaha </a> </li> 
  <li><a href = "" > Nga Karere </a> </li> 
  <li><a href = "" > Tautuhinga </a> </li> 
  <li><a href = "" > Whakapā </a> </li> 
</ul>

whakawhārangi

Ko te whakaingoatanga tino ngawari me te ahua iti na Rdio. Ko te poraka nui he uaua ki te ngaro, he ngawari te tauine, me te whakarato i nga waahi paato nui.

<div class = "whakawhārangi"> class = "whakawhārangi" >
  <ul>
    <li class = "kua monoa i mua" ><a href = "" > ← Tuhinga o mua </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>

Matohi taketake

Ko nga karere raina-kotahi hei whakaatu i te rahua, te rahua, te angitu ranei o tetahi mahi. He pai rawa mo nga puka.

Paraka nga karere

Mo nga karere e hiahia ana ki te whakamaarama, kei a matou nga matohi momo whiti. He tino pai enei mo te pupuhi ake i nga karere hapa roa, te whakatupato i te kaiwhakamahi mo te mahi e tatari ana, me te whakaatu korero noa mo te aro nui ki te wharangi.

Modal

Ko nga tauira—nga korero, pouaka rama ranei—he pai mo nga mahi horopaki i nga waahi he mea nui kia mau tonu te horopaki papamuri.

Popovers

Whakamahia nga popovers hei whakarato korero kupu-roto ki tetahi wharangi me te kore e whai tahora.

I hangaia a Bootstrap me te Preboot , he kohinga tuwhera-puna o nga ranunga me nga taurangi hei whakamahi tahi me te Iti , he kaiwhakatikatika CSS mo te whanaketanga paetukutuku tere me te ngawari.

Tirohia te pehea i whakamahia ai e matou a Preboot i Bootstrap me pehea e taea ai e koe te whakamahi mena ka whiriwhiri koe ki te whakahaere Iti i runga i to kaupapa e whai ake nei.

Me pehea te whakamahi

Whakamahia tenei whiringa ki te whakamahi katoa i nga taurangi Iti a Bootstrap, whakauru, me te kohanga i roto i te CSS ma te javascript i to tirotiro.

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

Kaore koe e rongo i te otinga .js? Whakamātauria te taupānga Iti Mac ka whakamahi ranei i te Node.js ki te whakahiato ina tukuna e koe to waehere.

He aha kei roto

Anei etahi o nga mea nui o nga mea kei roto i Twitter Bootstrap hei waahanga o Bootstrap. Haere ki te paetukutuku Bootstrap, ki te whaarangi kaupapa Github ranei ki te tango me te ako atu.

Taurangi tae

Ko nga taurangi i te Iti he tino pai mo te pupuri me te whakahou i to mahunga CSS kore utu. Ina hiahia koe ki te huri i tetahi uara tae, i tetahi uara e whakamahia ana, whakahōuhia ki te waahi kotahi ka oti koe.

// Hononga
@linkColor : #8b59c2;         
@linkColorHover :     pouri ( @linkColor , 10 ); 
// Kerei
@pango : #000;             
@grayDark :           mama ( @pango , 25 %); 
@hina :               mama ( @pango , 50 %); 
@grayLight :          mama ( @pango , 70 %); 
@grayLighter :        mama ( @pango , 90 %); 
@white : #fff;             
// Nga Tae Nako
@puru : #08b5fb;              
@matomato : #46a546;             
@whero : #9d261d;               
@kōwhai : #ffc40d ;            
@karaka : #f89406;            
@mawhero : #c3325f;              
@papura : #7a43b6;            
// Raina turanga
@baseline : 20px ;          

Te korero

Ka whakaratohia ano e Iti tetahi atu momo korero hei taapiri atu ki te /* ... */wetereo noa a CSS.

// He korero tenei
/* He korero ano tenei */

Whakaranuhia te wazoo

Ko nga Mixins kei roto, he waahanga ranei mo te CSS, ka taea e koe te whakakotahi i tetahi poraka waehere ki te kotahi. He rawe mo nga taonga kua tohua ki mua i te kaihoko penei box-shadowi te , te rōnaki whakawhiti-tirotiro, te taapu momotuhi, me etahi atu. Kei raro nei he tauira o nga ranunga kua whakauruhia ki a Bootstrap.

Tāpae momotuhi

#momotuhi {
  . poto ( @taimaha : noa , @rahi : 14px , @lineHeight : 20px ) {     
    momotuhi - rahi : @rahi ; 
    momotuhi - taumaha : @weight ; 
    raina - teitei : @lineHeight ; 
  }
  . sans - serif ( @taimaha : noa , @rahi : 14px , @lineHeight : 20px ) {     
    momotuhi - whanau : "Helvetica Neue" , ​​Helvetica , Arial , sans - serif ;   
    momotuhi - rahi : @rahi ; 
    momotuhi - taumaha : @weight ; 
    raina - teitei : @lineHeight ; 
  }
  . serif ( @taumaha : noa , @rahi : 14px , @lineHeight : 20px ) {     
    momotuhi - whanau : "Georgia" , Times New Roman , Times , sans - serif ;     
    momotuhi - rahi : @rahi ; 
    momotuhi - taumaha : @weight ; 
    raina - teitei : @lineHeight ; 
  }
  . mokowātahi ( @taumaha : noa , @rahi : 12px , @lineHeight : 20px ) {     
    momotuhi - whanau : "Monaco" , Courier New , monospace ;   
    momotuhi - rahi : @rahi ; 
    momotuhi - taumaha : @weight ; 
    raina - teitei : @lineHeight ; 
  }
}

Rōnaki

#rōnaki {
  . whakapae ( @startColor : #555, @endColor: #333) { 
    papamuri - tae : @endColor ; 
    papamuri - tukurua : tukurua - x ;
    papamuri - atahanga : - khtml - rōnaki ( rārangi , mauī runga , runga matau , mai i ( @startColor ), ki ( @endColor )); // Kaitukino   
    papamuri - atahanga : - moz - raina - rōnaki ( maui , @startColor , @endColor ); // FF 3.6+    
    papamuri - atahanga : - ms - raina - rōnaki ( maui , @startColor , @endColor ); // IE10    
    papamuri - atahanga : - webkit - rōnaki ( rārangi , maui ki runga , runga matau , tae - mutu ( 0 %, @startColor ), tae - mutu ( 100 %, @endColor )); // Safari 4+, Chrome 2+    
    papamuri - atahanga : - kete tukutuku - raina - rōnaki ( maui , @startColor , @endColor ); // Safari 5.1+, Chrome 10+    
    papamuri - atahanga : - o - raina - rōnaki ( maui , @startColor , @endColor ); // Opera 11.10    
    - ms - tātari : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor ); // IE8+  
    tātari : e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor )); // IE6 & IE7 
    papamuri - atahanga : raina - rōnaki ( maui , @startColor , @endColor ); // Le paerewa   
  }
  . poutū ( @startColor : #555, @endColor: #333) { 
    papamuri - tae : @endColor ; 
    papamuri - tukurua : tukurua - x ;
    papamuri - atahanga : - khtml - rōnaki ( rārangi , mauī runga , maui raro , mai i ( @startColor ), ki ( @endColor )); // Kaitukino   
    papamuri - atahanga : - moz - raina - rōnaki ( @startColor , @endColor ); // FF 3.6+   
    papamuri - atahanga : - ms - raina - rōnaki ( @startColor , @endColor ); // IE10   
    papamuri - atahanga : - webkit - rōnaki ( rārangi , maui ki runga , maui ki raro , tae - mutu ( 0 %, @startColor ), tae - mutu ( 100 %, @endColor )); // Safari 4+, Chrome 2+    
    papamuri - atahanga : - kete tukutuku - raina - rōnaki ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+   
    papamuri - atahanga : - o - raina - rōnaki ( @startColor , @endColor ); // Opera 11.10   
    - ms - tātari : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor ); // IE8+  
    tātari : e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor )); // IE6 & IE7 
    papamuri - atahanga : raina - rōnaki ( @startColor , @endColor ); // Te paerewa  
  }
  . aronga ( @startColor : #555, @endColor: #333, @deg: 45deg) { 
    ...
  }
  . poutū - toru - tae ( @startColor : #00b3ee, @midColor: #7a43b6, @colorStop: 0.5, @endColor: #c3325f) { 
    ...
  }
}

Nga mahi me te punaha matiti

Kia pai ki te mahi i etahi mahi pangarau hei whakaputa i nga whakaranu ngawari me te kaha penei i raro nei.

// Mātiti
@gridColumns : 16 ;       
@gridColumnWidth : 40px ;   
@gridGutterWidth : 20px ;   
// Pūnaha Mātiti
. ipu {
  whanui : @siteWidth ; 
  tawhē : 0 auto ;  
  . whakatika marama ();
}
. tīwae ( @columnSpan : 1 ) {  
  whakaatu : rōraina ; 
  mānu : maui ;
  whanui : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));         
  tawhē - mauī : @gridGutterWidth ; 
  &: tuatahi - tamaiti {
    taha maui : 0 ; _ 
  }
}
. whitiwhiti ( @columnOffset : 1 ) {  
  margin-left: (@gridColumnWidth * @columnOffset) + (@gridGutterWidth * (@columnOffset - 1)) !important;
}