Bootstrap

Tauira

Ka hangaia a Bootstrap ki runga i nga matiti 12-tīwae aro, nga whakatakotoranga, me nga waahanga.

Tautuhinga o te ao

Me hiahia momo tuhinga HTML5

Ka whakamahi a Bootstrap i etahi huānga HTML me etahi taonga CSS e hiahia ana ki te whakamahi i te momo tuhinga HTML5. Whakauruhia ki te timatanga o o kaupapa katoa.

  1. <!DOCTYPE html>
  2. <html lang = "en" > 
  3.   ...
  4. </html>

Tuhituhi me nga hononga

Ka whakatakotohia e Bootstrap nga whakaaturanga taketake o te ao, te tuhi tuhi, me nga momo hono. Ina koa, ko taatau:

  • Tangohia margini runga i te tinana
  • Whakatakotoria background-color: white;ki rungabody
  • Whakamahia te @baseFontFamily, @baseFontSize, me @baseLineHeightnga huanga hei turanga tuhi
  • Tautuhia te tae hono o te ao ma @linkColorte whakamahi i nga tohu hono ki runga anake:hover

Ka kitea enei momo i roto i te scaffolding.less .

Tautuhi ano ma te Whakanoa

Ki a Bootstrap 2, kua tukuna te poraka tautuhi tawhito mo Normalize.css , he kaupapa na Nicolas Gallagher me Jonathan Neal e kaha ana hoki i te HTML5 Boilerplate . Ahakoa ka whakamahia e matou te nuinga o Normalize i roto i to maatau reset.less , kua tangohia e matou etahi waahanga mo Bootstrap.

Pūnaha mātiti taunoa

He tauira matiti ora

Ko te punaha matiti Bootstrap taunoa e whakamahi ana i nga pou 12 , e hanga ana mo te ipu whanui 940px me te kore e whakahohea nga waahanga urupare . Ki te taapiri i te konae CSS whakautu, ka uru te matiti ki te 724px me te 1170px te whanui kei runga i to tauranga tirohanga. I raro i nga tauranga tirohanga 767px, ka rere nga pou, ka putu poutū.

1
1
1
1
1
1
1
1
1
2
3
4
4
5
9

HTML mātiti taketake

Mo te tahora pou e rua ngawari, hangahia he .rowme te taapiri i te maha o .span*nga pou e tika ana. I te mea he matiti 12-tīwae tenei, ka .span*horahia e ia he maha o aua pou 12, me te taapiri ake ki te 12 mo ia rarangi (te maha ranei o nga pou kei roto i te matua).

  1. <div class = "rarangi" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </div>

I runga i tenei tauira, kei a tatou .span4me .span8te , kia 12 nga pou katoa me te rarangi katoa.

Whangai nga pou

Nukuhia nga pou ki te taha matau ma te whakamahi i .offset*nga karaehe. Ka whakanuia e ia akomanga te tawhē maui o te tīwae mā te tīwae katoa. Hei tauira, .offset4neke .span4atu i nga pou e wha.

4
3 whakahiato 2
3 whakahiato 1
3 whakahiato 2
6 whakatiki 3 
  1. <div class = "rarangi" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span3 offset2" > ... </div> 
  4. </div>

Nga pou kohanga

Hei whakakohanga i to ihirangi ki te matiti taunoa, taapirihia he huinga pou hou .rowme te huinga o .span*nga pou ki roto i te tīwae tīariari .span*. Ko nga rarangi kohanga me whakauru he huinga pou e taapiri ana ki te maha o nga pou o tona matua.

Taumata 1 tīwae
Taumata 2
Taumata 2 
  1. <div class = "rarangi" > 
  2.   <div class = "span9" > 
  3.     Taumata 1 tīwae
  4.     <div class = "rarangi" > 
  5.       <div class = "span6" > Taumata 2 </div> 
  6.       <div class = "span3" > Taumata 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

Pūnaha mātiti wai

He tauira matiti wai ora

Ka whakamahia e te punaha matiti wai nga ōrau hei utu i nga pika mo nga whanui pou. He rite tonu te kaha ki te whakautu ki ta maatau punaha matiti tuuturu, e whakarite ana i nga waahanga tika mo nga whakataunga mata matua me nga taputapu.

1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
4
8
6
6
12

HTML matiti wai taketake

Hangaia tetahi rarangi "wai" ma te huri .rowki .row-fluid. Ka noho rite tonu nga karaehe o te pou, he ngawari ki te huri i waenga i nga raarangi tuuturu me te matiti wai.

  1. <div class = "rarangi-wai" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </div>

Te whakaheke wai

He rite tonu te mahi ki te whakatiki i te punaha matiti: taapiri atu .offset*ki tetahi tīwae hei whakatiki e aua pou maha.

4
4 whakahiato 4
3 whakahiato 3
3 whakahiato 3
6 whakatiki 6 
  1. <div class = "rarangi-wai" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span4 offset2" > ... </div> 
  4. </div>

Kohanga wai

He rereke te whakamahi a nga matiti wai kohanga: kia 12 nga pou o ia taumata kohanga o nga pou. Ko tenei na te mea ka whakamahia e te matiti wai nga paheketanga, ehara i te pika, hei tautuhi i nga whanui.

Wai 12
Wai 6
Wai 6
Wai 6
Wai 6 
  1. <div class = "rarangi-wai" > 
  2.   <div class = "span12" > 
  3.     Wai 12
  4.     <div class = "rarangi-wai" > 
  5.       <div class = "span6" > 
  6.         Wai 6
  7.         <div class = "rarangi-wai" > 
  8.           <div class = "span6" > Wai 6 </div> 
  9.           <div class = "span6" > Wai 6 </div> 
  10.         </div>
  11.       </div>
  12.       <div class = "span6" > Wai 6 </div> 
  13.     </div>
  14.   </div>
  15. </div>

Tahora

Te whakatakotoranga pumau

Ka whakarato i te tahora whanui-whanui noa (me te kowhiria te whakautu) me te <div class="container">hiahia anake.

  1. <tinana>
  2.   <div class = "putea" > 
  3.     ...
  4.   </div>
  5. </tinana>

Te whakatakotoranga wai

Waihangatia he wharangi wai, rua-tīwae me <div class="container-fluid">—he pai mo nga tono me nga tuhinga.

  1. <div class = "ipu-wai" > 
  2.   <div class = "rarangi-wai" > 
  3.     <div class = "span2" > 
  4.       <!--Ihirangi Paetaha-->
  5.     </div>
  6.     <div class = "span10" > 
  7.       <!--Ihirangi tinana-->
  8.     </div>
  9.   </div>
  10. </div>

Hoahoa urupare

Whakahohe i nga ahuatanga urupare

Whakakāhia te CSS urupare i roto i to kaupapa ma te whakauru i te tohu meta tika me etahi atu momo pepa i roto i <head>to tuhinga. Mena kua whakahiatohia e koe a Bootstrap mai i te wharangi Whakaritea, me whakauru noa te tohu meta.

  1. <meta name = "viewport" content = "whanui=whānui-pūrere, tauine-tuatahi=1.0" >  
  2. <link href = "nga rawa/css/bootstrap-responsive.css" rel = "stylesheet" >

Mahunga ake!Karekau a Bootstrap i te whakauru i nga ahuatanga urupare ma te taunoa i tenei wa kaore nga mea katoa e tika kia aro. Engari ki te whakatenatena i nga kaiwhakawhanake ki te tango i tenei ahuatanga, ki ta maatau he pai ki te whakaahei ina hiahiatia.

Mo Bootstrap urupare

Nga taputapu urupare

Ka taea e nga patai pāpāho te CSS ritenga i runga i te maha o nga tikanga—owehenga, whanui, momo whakaatu, aha atu—engari ko te nuinga o te waa ka aro ki te taha min-widthme te max-width.

  • Whakarerekēhia te whanui o te pou i roto i ta maatau matiti
  • Tāpae huānga hei utu mānu i ngā wāhi e tika ana
  • Whakarahihia nga pane me te kuputuhi kia pai ake mo nga taputapu

Whakamahia nga patai pāpāho ma te tika me te tiimata anake ki o hunga whakarongo pūkoro. Mo nga kaupapa nui ake, whakaarohia nga turanga waehere kua whakatapua, kaua ko nga papa o nga patai pāpāho.

Nga taputapu tautoko

Kei te tautoko a Bootstrap i te maha o nga patai pāpāho i roto i te konae kotahi hei awhina i o kaupapa kia tika ake i runga i nga taputapu rereke me nga whakataunga mata. Anei nga mea kei roto:

Tapanga Te whanui tahora Whānui tīwae Te whanui o te awaawa
Whakaaturanga nui 1200px me runga ake 70px 30px
Taunoa 980px me runga ake 60px 20px
Papa whakaahua 768px me runga ake 42px 20px
Waea ki papa 767px me raro Ko nga pou wai, kaore he whanui pumau
Waea 480px me raro Ko nga pou wai, kaore he whanui pumau 
  1. /* Papamahi nui */
  2. @media ( min - whanui : 1200px ) { ... }     
  3.  
  4. /* Papa whakaahua ki te whenua me te papamahi */
  5. @media ( min - whanui : 768px ) me ( max - whanui : 979px ) { ... }        
  6.  
  7. /* Waea whenua ki te papa whakaahua */
  8. @media ( max - whanui : 767px ) { ... }     
  9.  
  10. /* Waea whenua me raro */
  11. @media ( max - whanui : 480px ) { ... }

Nga akomanga whaipainga urupare

Kia tere ake te whakawhanaketanga hoa-rorohiko, whakamahia enei karaehe whaipainga hei whakaatu me te huna i nga ihirangi ma te taputapu. Kei raro nei he ripanga o nga karaehe e waatea ana me o raatau paanga ki runga i te whakatakotoranga patai pāpāho (kua tapaina e te taputapu). Ka kitea i roto responsive.less.

Karaehe Waea767px me raro Nga papa979px ki te 768px PapamahiTaunoa
.visible-phone Ka kitea
.visible-tablet Ka kitea
.visible-desktop Ka kitea
.hidden-phone Ka kitea Ka kitea
.hidden-tablet Ka kitea Ka kitea
.hidden-desktop Ka kitea Ka kitea

Ahea te whakamahi

Whakamahia i runga i te kaupapa iti me te karo i te hanga momo rereke katoa o te pae kotahi. Engari, whakamahia hei whakakii i nga whakaaturanga o ia taputapu. Kaua e whakamahia nga taputapu urupare me nga ripanga, na reira kaore i te tautokohia.

Ko te take whakamatautau taputapu urupare

Whakanuia to kaitirotiro, utaina ranei i runga i nga taputapu rereke hei whakamatautau i nga karaehe o runga.

Ka kitea ki...

Ko nga tohutaki kakariki e tohu ana ka kitea te karaehe i to tauranga tirohanga o naianei.

  • Waea✔ Waea
  • Papa✔ Papa
  • Papamahi✔ Papamahi

Huna ki runga...

I konei, ko nga tohutaki kaariki e tohu ana kei te huna te karaehe ki to tauranga tirohanga o naianei.

  • Waea✔ Waea
  • Papa✔ Papa
  • Papamahi✔ Papamahi