Nga tauira tere-timata

Kei te hiahia etahi tauira tere? Tirohia enei tauira taketake kua whakauruhia e matou:

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

Nga pou kohanga

Kohangahia to ihirangi ki te hiahia koe ma te hanga .rowi tetahi waahanga kei roto i te tīwae tīariari.

He tauira o nga pou kohanga

<div class = "rarangi" > 
  <div class = "span12" > 
    Taumata 1 o te tīwae
    <div class = "rarangi" > 
      <div class = "span6" > 
        Taumata 2
      </div>
      <div class = "span6" > 
        Taumata 2
      </div>
    </div>
  </div>
</div>

Hurihia to ake matiti

I hangaia ki Bootstrap he maha nga taurangi hei whakarite i te punaha matiti 940px taunoa. Ma te iti o te whakaritenga, ka taea e koe te whakarereke i te rahi o nga pou, o ratou awaawa, me te ipu e noho ana.

Kei roto i te matiti

Ko nga taurangi e hiahiatia ana hei whakarereke i te punaha matiti kei roto katoa i tenei wa preboot.less.

Inaianei ki te whakarite

Ko te whakarereke i te matiti ko te huri i nga @grid-*taurangi e toru me te whakahiato ano i nga konae Iti.

Ka tae mai a Bootstrap ki te hapai i te punaha matiti tae atu ki te 24 nga pou; ko te taunoa he 16 noa iho. Anei te ahua o to taurangi matiti ki te matiti 24-tīwae.

@gridColumns : 24 ;       
@gridColumnWidth : 20px ;   
@gridGutterWidth : 20px ;   

Kia whakahiatohia, ka whakatauhia koe!

Te whakatakotoranga pumau

Ko te taunoa me te ngawari 940px-whanui, te whakatakotoranga i waenganui mo tetahi paetukutuku, wharangi ranei e whakaratohia ana e te kotahi <div.container>.

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

Te whakatakotoranga wai

He rerekee, he anga wharangi wai ngawari me te iti me te teitei-whanui me te paetaha maui. He pai mo nga taupānga me nga tuhinga.

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

Ko te katoa o te matiti patopato kei runga i nga taurangi iti e rua i roto i ta maatau konae preboot.less: @basefontme @baseline. Ko te tuatahi ko te rahi o te momotuhi i whakamahia puta noa, ko te tuarua ko te teitei o te raina turanga.

Ka whakamahia e matou aua taurangi, me etahi o te pangarau, ki te hanga i nga tawhē, nga papa, me nga teitei raina o o maatau momo katoa me etahi atu.

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…

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>) hei tohu i te hiranga atu, i te whakanui ranei o tetahi kupu, rerenga korero ranei e pa ana ki te kape a tawhio noa. Whakamahia <strong>mo te hiranga me te whakanui <em>i te ahotea .

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.

Tuhipoka: He pai tonu te whakamahi <b>me <i>nga tohu i roto i te HTML5, karekau e tika kia whakaingoatia kia maia me te titaha (ahakoa mena he huanga kupu ake, whakamahia). <b>Ko te tikanga ki te whakanui i nga kupu, kinga kianga ranei me te kore e whakaatu i te hiranga atu, engari <i>ko te nuinga mo te reo, kupu hangarau, aha atu.

Wāhitau

Ka <address>whakamahia te huānga mo nga korero whakapā mo tona tupuna tata, mo te katoa o te mahi. Anei nga tauira e rua mo te whakamahi:

Tuhipoka: Ko ia rarangi i roto i te <address>me mutu ki te wehenga raina ( <br />) me takai ranei ki te tohu taumata-paraka (hei tauira, <p>) kia tika ai te hanga i nga ihirangi.

Whakapoto

Mo nga whakapoto me nga acronyms, whakamahia te <abbr>tohu ( <acronym>kua 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> <small>

Me pehea te whakahua

Hei whakauru i te kupu poraka, takai <blockquote>me <p>nga <small>tohu. Whakamahia te <small>huānga ki te whakahua i to punanga ka whiwhi koe i te riipene em —i mua.

Kei te noho tonu koe, ka whakatauhia e koe. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

Takuta Julius Hibbert

<blockquote>
  <p> Ko te tikanga o te noho tahi, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. </p>
  <iti> Takuta Julius Hibbert </small>
</blockquote>

Kore ota<ul>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Tauoti molestie lorem me massa
• Facilisis in 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 noho amet erat nunc
• Eget porttitor lorem

Kore-ahua<ul.unstyled>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Tauoti molestie lorem me massa
• Facilisis in 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 noho amet erat nunc
• Eget porttitor lorem

Kua whakahaua<ol>

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

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.

Waehere

<code> <pre>

Pimp to waehere ki te ahua me nga tohu ngawari e rua. Mo te tino whakamataku ma te javascript, tohua te whare pukapuka prettify waehere a Google ka oti koe.

Waehere whakaatu

Waehere, poraka o nga mahanga noa ranei, ka taea te whakaatu me te ahua ma te takai i te tohu tika. Mo nga poraka waehere e hora ana i nga raina maha, whakamahia te <pre>huānga. Mo te waehere raina, whakamahia te <code>huānga.

<div>
  <h1>Pūpoko</h1>
  <p>He mea kei konei...</p>
</div>

<div> <h1> Pane </h1> <p> He mea kei konei... </p> </div>
  
  

Ngā tapanga rōraina

<span class="label">

Whakanuia te aro ki te kara ranei i tetahi kianga kei roto i to tuhinga tinana.

Tapahia tetahi mea

I hiahiatia tetahi o enei mea hou hou! he haki nui ranei ina tuhi waehere? Inaianei kei a koe. Anei nga mea kei roto i te taunoa:

Mātiti pāpāho

Whakaatuhia nga karakōnui he rereke te rahi ki runga i nga wharangi he iti te tapuwae HTML me nga momo iti.

Tauira karakōnui

.media-gridKa taea te rahi o nga karakōnui o roto , engari he pai ake te mahi ina mapi tika ki te punaha matiti Bootstrap i hangaia. Ko nga whanui atahanga penei i te 90, 210, me te 330 ka whakakotahi me etahi pika o te papaa kia rite ki te rahi o te .span2, .span4, me .span6te rahi o te pou.

Nui

Waenga

Iti

Whakawaeheretia ratou

He ngawari te whakamahi i nga matiti pāpāho me te ngawari ki te taha tohu. Ko o raatau rahi kei runga i te rahi o nga whakaahua kua whakauruhia.

<ul class = "media-grid" > 
  <li>
    <a href = "#" > 
      <img class = "karakōnui" src = "https://placehold.it/330x230" alt = "" >   
    </a>
  </li>
  <li>
    <a href = "#" > 
      <img class = "karakōnui" src = "https://placehold.it/330x230" alt = "" >   
    </a>
  </li>
</ul>

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 <thead>ahua 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 <tbody>a 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.

<tepu>
  ...
</table>

Tauira: Hetere-tere

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

Tuhipoka: Ko te Zebra-striping he whakapainga ahu whakamua kaore i te waatea mo nga kaitirotiro tawhito penei i te IE8 me raro.

<table class = "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.

<script src = "js/jquery/jquery.tablesorter.min.js" ></script> 
<hōtuhi > 
  $ ( mahi () { 
    $ ( "tepu#sortTableExample" ). kaiwhakarite ripanga ({ sortList : [[ 1 , 0 ]] });  
  });
</script>
<table class = "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.

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.

Puka rahinga mara

Whakaritea tetahi ahua input, select, textareawhanui ranei ma te taapiri i etahi akomanga ki to tohu.

Mai i te v1.3.0, kua taapirihia e matou nga karaehe rahi e pa ana ki te matiti mo nga huānga puka. Tena koa whakamahia enei mo nga akomanga o naianei .mini, .small, etc.

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.

Ko nga patene katoa ka taunoa ki te ahua hina hina, engari he maha nga karaehe mahi ka taea te tono mo nga momo tae rereke. Kei roto i enei karaehe he karaehe kahurangi .primary, he karaehe puru-maama, he .infokaraehe matomato .success, he karaehe whero .danger.

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 <input>nga 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 <button>huā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 te taapiri i nga takahanga ki to nav. Tirohia te nav tuarua kei runga ake nei (whakatikaa matau) kia kite pehea te mahi. liKei te tautoko hoki nga tohu whakaheke .activemo te whakaatu i nga whiringa wharangi o naianei.

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ā
• Whakataka iho
  • Hononga tuarua
  • He mea ke atu i konei
  • He hononga ano

<ul 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" > 
  <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>

Nga kongakonga taro

Ka whakamahia te whakatere paraoa hei huarahi whakaatu ki nga kaiwhakamahi kei roto ratou i tetahi taupānga, i tetahi pae ranei, engari kaua mo te whakatere tuatahi.

• Kainga

• Kāinga /
• Wharangi waenganui

• Kāinga /
• Whārangi Waenganui /
• Ko tetahi atu

• Kāinga /
• Whārangi Waenganui /
• Ko tetahi atu /
• Kei konei koe

<ul class = "te taro" > 
  <li><a href = "#" > Kāinga </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > Wharangi Waenganui </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > Tetahi atu </a> <span class = "divider" > / </span></li>   
  <li class = "active" > Kei konei koe </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" > 
  <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

.alert-message

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

Tikina te javascript »

Waehere tauira

<div class = "whakatupato matohi-karere" > 
  <a class = "close" href = "#" > × </a>  
  <p><strong> Guacamole Tapu! </strong> He pai ake te tirotiro i a koe ano, kaore koe i te tino pai. </p>
</div>

Paraka nga karere

.alert-message.block-message

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.

Tikina te javascript »

Waehere tauira

<div class = "whakatupato-karere paraka-karere whakatupato" > 
  <a class = "close" href = "#" > × </a>  
  <p><strong> Guacamole Tapu! He whakatupato tenei! </strong> He pai ake te tirotiro i a koe ano, kaore koe i te tino pai. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. </p>
  <div class = "maohi-mahi" > 
    <a class = "btn small" href = "#" > Take this action </a> <a class = "btn small" href = "#" > Me mahi ranei tenei </a>     
  </div>
</div>

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.

Tikina te javascript »

Aki taputapu

He tino whai hua nga Twipsies mo te awhina i te kaiwhakamahi pohehe me te tohu i a raatau ki te huarahi tika.

Tikina te javascript »

Popovers

Whakamahia nga pouvers hei whakarato i nga korero kupuroto ki tetahi wharangi me te kore e pa ki te tahora.

Tikina te javascript »

Te timatanga

Ko te whakauru i te javascript me te whare pukapuka Bootstrap he tino ngawari. Kei raro nei ka tirohia e matou nga kaupapa me te whakarato ki a koe etahi taputapu whakamataku kia timata koe!

Tirohia nga tuhinga javascript »

He aha kei roto

Whakaorangia etahi o nga waahanga tuatahi a Bootstrap me nga taputapu ritenga hou e mahi tahi ana me te jQuery me te Ender . Ka whakatenatena koe ki te whakawhānui me te whakarerekē i a raatau kia rite ki o hiahia whanaketanga motuhake.

He tika te javascript?

Kao! I hangaia a Bootstrap i te tuatahi hei whare pukapuka CSS. Ka whakaratohia e tenei javascript he paparanga tauwhitiwhiti taketake ki runga ake o nga momo whakauru.

Heoi, mo te hunga e hiahia ana ki te javascript, kua whakaratohia e matou nga monomai i runga ake nei hei awhina i a koe ki te mohio me pehea te whakauru i a Bootstrap ki te javascript me te hoatu ki a koe he whiringa tere, maamaa mo te mahi taketake i tenei wa tonu.

Mo etahi atu korero me te kite i etahi whakaaturanga ora, tirohia to maatau wharangi tuhinga mono .