Tauine patopato

Ko te katoa o te matiti patopato e ahu mai ana i runga i nga taurangi iti e rua i roto i a maatau konae variables.less: @baseFontSizeme @baseLineHeight. 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.

He tauira tinana

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.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.

Te whakamahi i te whakanui

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: Kaua e pai ki te whakamahi <b>me <i>te HTML5, engari he paku rereke te whakamahinga. <b>Ko te tikanga ki te whakanui i nga kupu, kinga kianga ranei me te kore e kawe i te hiranga atu i <i>te nuinga o te waa mo te reo, kupu hangarau, aha atu.

Tauira wāhitau

Anei nga tauira e rua mo te whakamahi i te <address>tohu:

He tauira whakapoto

Ko nga kupu whakapoto ka whakaingoatia ki te kupu matua me te taitapa iraiti o raro. He pehu awhina ano ta ratou i runga i te whakaparo kia whai tohu ano nga kaiwhakamahi ka whakaatuhia he mea i runga i te whakaparo.

Ko te HTML te mea pai mai i te taro tapatapahi.

He whakapototanga o te kupu huanga ko attr .

Hei whakauru i tetahi poraka, takai <blockquote>tetahi HTML hei korero. Mo nga korero tika ka tūtohu matou he <p>.

Whakauruhia he <small>huānga hei whakahua i to punanga ka whiwhi koe i te tohu em —i mua i a koe mo nga kaupapa whakaahua.

<blockquote>
  <p> Ko te tikanga o te noho tahi, consectetur adipiscing elit. Integer posuere erat a ante venenatis. </p>
  <small> He tangata rongonui </small>
</blockquote>

Ko nga korukī poraka taunoa kua whakaingoatia penei:

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

He tangata rongonui i roto i te tinana mahi

Hei rewa i to korero poraka ki te taha matau, taapirihia class="pull-right":

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

He tangata rongonui i roto i te tinana mahi

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

Whakaahuatanga

<dl>

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.

Raina

Takaia nga mahanga rarangi-roto o te waehere ki te <code>.

Hei tauira , <code> wāhanga </ code > me takai hei rōraina .  

Poraka taketake

Whakamahia <pre>mo nga rarangi maha o te waehere. Kia mahara ki te huri i nga tohu ki o raatau tohu unicode mo te whakaputa tika.

<p>Tauira kupu ki konei...</p>

<mua>
  <p>Tauira kupu ki konei...</p>
</pre>

Tuhipoka: Kia mau tonu te waehere i roto i <pre>nga tūtohu kia tata ki te taha maui ka taea; ka tukuna e ia nga ripa katoa.

Google Whakaahua

Tangohia te <pre>huānga kotahi ka taapirihia kia rua nga karaehe hei taapiri ake.

<p> Tauira kupu ki konei... </p>

<pre class = "prettyprint 
     rarangi ingoa" >
  <p>Tauira kupu ki konei...</p>
</pre>

Tangohia a google-code-prettify ka tirohia te panui mo te whakamahi.

<tepu>
  <mahunga>
    <tr>
      <th> … </th>
      <th> … </th>
    </tr>
  </head>
  <te tinana>
    <tr>
      <td> … </td>
      <td> … </td>
    </tr>
  </tbody>
</table>

Ka whakaingoatia nga ripanga me etahi taitapa hei whakarite i te panui me te pupuri i te hanganga. Ki te 2.0, .tableka hiahiatia te akomanga.

<table class = "tepu" > 
  …
</table>

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

Tuhipoka: Ka whakamahi nga ripanga Sprited i te :nth-childkaiwhiri CSS, kaore i te waatea i IE7-IE8.

<table class = "tepu ripanga-waapahia" > 
  …
</table>

Tāpirihia nga taitapa huri noa i te teepu katoa me nga kokonga porotaka mo nga kaupapa rerehua.

<table class = "taitapa ripanga" > 
  …
</table>

Whakapaipai ake o papapu ma te taapiri i te .table-condensedkaraehe ki te tapahi i nga papaa putau tepu kia haurua (mai i te 8px ki te 4px).

<table class = "table table-condensed" > 
  …
</table>

Kaua e pai ki te whakakotahi i tetahi o nga karaehe tepu ki te whakatutuki i nga ahua rereke ma te whakamahi i tetahi o nga karaehe e waatea ana.

<table class = "table table-striped table-bordered table-condensed" > 
  ...
</table>

HTML me CSS ngawari

Ko te mea pai mo nga puka kei Bootstrap ko te ahua pai o o whakaurunga me o mana whakahaere ahakoa pehea te hanga i a koe ki to tohu. Kaore he HTML nui e hiahiatia, engari ka whakaratohia e matou nga tauira mo te hunga e hiahia ana.

Ko nga whakatakotoranga uaua ake ka tae mai me nga karaehe poto me te tauineine mo te hanga ngawari me te here takahanga, no reira ka kapi koe i ia hikoinga.

E wha nga whakatakotoranga kei roto

Ka tae mai a Bootstrap me te tautoko mo nga momo whakatakotoranga ahua e wha:

• Poutū (taunoa)
• Rapu
• Raina
• Whakapae

Ko nga momo tahora puka rereke me whakarereke ki te tohu tohu, engari ka noho tonu nga mana whakahaere me te rite tonu te mahi.

Nga mana whakahaere me etahi atu

Kei roto i nga puka a Bootstrap nga ahua mo nga mana puka turanga katoa penei i te whakaurunga, te waahanga kuputuhi, me te kowhiri e hiahia ana koe. Engari ka tae mai me te maha o nga waahanga ritenga penei i te taapiri me te whakauru whakauru me te tautoko mo nga rarangi pouakataki.

Ko nga whenua penei i te he, te whakatupato, me te angitu kua whakauruhia mo ia momo mana puka. Kei roto ano ko nga momo mo nga mana haua.

Ma te v2.0, he maamaa ake, he maamaa ake hoki nga taunoa mo nga momo ahua. Kaore he tohu taapiri, ko nga mana whakahaere noa.

Ma te whakaata i nga momo WebKit taunoa, taapiri noa .form-searchmo etahi atu mara rapu porotaka.

Ko nga whakauru he taumata paraka hei timata. Mo .form-inlinea .form-horizontal, ka whakamahia e matou te paraka-roto.

He aha kei roto

Kei te taha maui ko nga mana puka taunoa katoa e tautokohia ana e matou. Anei te rarangi matā:

• whakauru kupu (kuputuhi, kupuhipa, imeera, aha atu)
• pouakataki
• reo irirangi
• whiriwhiri
• whiriwhiri maha
• urunga kōnae
• textarea

Nga taunoa hou me te v2.0

Tae atu ki te v1.4, ko nga momo ahua taunoa a Bootstrap i whakamahi i te whakatakotoranga whakapae. Ma te Bootstrap 2, i tangohia e matou taua herenga kia pai ake te mohio, kia nui ake nga taunoa mo nga momo ahua.

Ko nga ahuatanga o te kaitirotiro hou

E whakaatu ana a Bootstrap i nga momo ahua mo te arotahi me disablednga kawanatanga e tautokohia ana e te tirotiro. Ka tangohia e matou te kete Tukutuku taunoa outlineka hoatu he tohu box-shadowki tona waahi mo :focus.

Whakamana puka

Kei roto hoki nga momo whakamana mo nga hapa, nga whakatupato, me te angitu. Hei whakamahi, taapirihia te karaehe hapa ki te a tawhio noa .control-group.

<te huinga mara
  class = "hape whakahaere-rōpū" >
  …
</fieldset>

Taapiri me te taapiri i nga whakaurunga

Ko nga roopu whakauru—me nga tuhinga taapiri, kua taapirihia ranei—he huarahi ngawari ki te hoatu horopaki ake mo o whakaurunga. Ko nga tauira pai ko te tohu @ mo nga ingoa kaiwhakamahi Twitter, $ ranei mo nga putea.

Pouakataki me nga reo irirangi

Tae atu ki te v1.4, ka hiahiatia e Bootstrap he tohu taapiri huri noa i nga pouakataki me nga reo irirangi hei tapae. Inaianei, he mea ngawari ki te whakahoki ano i te <label class="checkbox">e takai ana i te <input type="checkbox">.

Ka tautokohia nga pouakataki me nga reo irirangi. Me tapiri noa .inlineki tetahi .checkbox, .radioka oti ranei koe.

Puka Raina ka apiti/whakamua

Ki te whakamahi i te prepend, te taapiri ranei i nga whakaurunga i roto i te puka raina, me tuu te .add-onme inputki te raina kotahi, kaua he mokowhiti.

Puka kupu awhina

Hei taapiri i nga kupu awhina mo o whakaurunga puka, whakauruhia he kuputuhi awhina raina me <span class="help-inline">tetahi paraka kupu awhina ranei kei <p class="help-block">muri i te huānga whakauru.

Patene mo nga mahi

Hei tikanga, me whakamahi noa nga paatene mo nga mahi ka whakamahia nga honongaitua mo nga mea. Hei tauira, ko te "Tikiake" he paatene, ko te "mahi o naianei" hei hono.

Mo nga punga me nga puka

Ka taea te whakamahi i nga momo paatene ki tetahi mea me te .btntono. Heoi, ko te tikanga ka hiahia koe ki te tono i enei ki nga waahanga <a>me <button>nga waahanga anake.

Tuhipoka: Me whakauru nga paatene katoa ki te .btnakomanga. Me hoatu nga momo paatene <button>me <a>nga huānga kia rite tonu.

Rahi maha

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

Mahi tuatahi Mahi

Mahi tuatahi Mahi

Te ahua haua

Mo nga patene haua, whakamahia .btn-disabledmo nga hononga me :disablednga <button>huānga.

Mahi tuatahi Mahi

Mahi tuatahi Mahi

Hototahi pūtirotiro whakawhiti

I te IE9, ka makahia te rōnaki ki runga i nga patene katoa hei pai mo nga kokonga porotaka na te mea kaore a IE9 e tapahi i nga rōnaki papamuri ki nga kokonga.

E pa ana, ka whakakorehia e te IE9 nga buttonhuānga hauā, ka whakahinahia te kuputuhi me te atarangi-tuhinga kino—heoi karekau e taea te whakatika i tenei.

I hangaia hei sprite

Engari ki te hanga i nga tohu katoa hei tono taapiri, kua whakahiatohia e matou ki roto i te sprite—he paihere o nga whakaahua kei roto i te konae kotahi e whakamahi ana i te CSS ki te tuu i nga whakaahua ki te background-position. Ko te tikanga ano tenei e whakamahia ana e matou i runga i Twitter.com a kua pai te mahi mo matou.

Ko nga karaehe tohu katoa kua tohua .icon-mo te mokowāingoa tika me te scoping, he rite ki o maatau waahanga. Ka awhina tenei ki te karo i nga tautohetohe me etahi atu taputapu.

Kua tukuna mai e Glyphicons ki a maatau te whakamahi i nga huinga Halflings i roto i ta maatau kete taputapu puna tuwhera mena ka tukuna he hononga me te nama ki konei i roto i nga tuhinga. Tena koa whakaaro kia pera ano i o kaupapa.

Me pehea te whakamahi

Ma te v2.0.0, kua whiriwhiria e matou ki te whakamahi i tetahi <i>tohu mo o maatau ata katoa, engari karekau he karaehe keehi—he tohu tuatahi noa iho. Hei whakamahi, tuhia te waehere e whai ake nei mo nga waahi katoa:

<i class = "icon-search" ></i> 

He ahua ano kei te waatea mo nga tohu hurihuri (ma), kua rite me tetahi atu karaehe:

<i class = "icon-search icon-white" ></i> 

He 120 nga karaehe hei whiriwhiri mo o tohu. Taapiri noa he <i>tohu me nga karaehe tika ka oti koe. Ka kitea e koe te rarangi katoa i roto i te sprites.less , kei konei ranei i tenei tuhinga.

Whakamahia nga keehi

He rawe nga tohu, engari kei hea te whakamahi? Anei etahi whakaaro:

• Hei tirohanga mo to whakatere paetaha
• Mo te whakaterenga tohu-a-ira
• Mo nga patene hei awhina i te kawe i te tikanga o tetahi mahi
• Me nga hononga ki te tiri i te horopaki ki te ūnga o te kaiwhakamahi

Ko te tikanga, ki nga waahi katoa ka taea e koe te whakatakoto <i>tohu, ka taea e koe te whakatakoto tohu.

Tāmata Takitaki Mukua

Kōrero Tautuhinga He korero ano