Bootstrap

Tauira

Ka hangaia a Bootstrap ki runga i te matiti 12-tīwae aro. Kua whakaurua ano e matou nga whakatakotoranga whanui me te whanui-wai i runga i taua punaha.

Ko nga ahuatanga o te ao mo te tautuhi CSS, te tuhi, me nga hononga

Me hiahia momo tuhinga HTML5

Ka whakamahia e Bootstrap nga huānga HTML me nga taonga CSS e hiahia ana ki te whakamahi i te momo tuhinga HTML5. Me tino whakauru ki te timatanga o ia wharangi Bootstrapped i to kaupapa.

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

Tuhituhi me nga hononga

I roto i te konae scaffolding.less , ka whakatakotohia e matou nga whakaaturanga taketake o te ao, te tuhi tuhi, me nga momo hono. Ina koa, ko taatau:

  • Tangohia te taha o 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

Tautuhi ano ma te Whakanoa

Mai i te Bootstrap 2, kua huri te tautuhi CSS tawhito ki te whakamahi i nga huānga mai i Normalize.css , he kaupapa na Nicolas Gallagher e kaha ana hoki i te HTML5 Boilerplate .

Ka kitea tonu te tautuhi hou i roto i te reset.less , engari he maha nga huānga kua tangohia mo te poto me te tika.

Pūnaha mātiti taunoa 12 tīwae me te awhi aro

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

Ko te punaha matiti taunoa e whakaratohia ana i Bootstrap e whakamahi ana i nga pou 12 e whakaatu ana i te whanui o te 724px, 940px (taunoa me te kore CSS whakautu), me te 1170px. I raro i nga tauranga tirohanga 767px, ka rere nga pou, ka tapae poutū.

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

Ka rite ki te whakaatu i konei, ka taea te hanga i tetahi tahora taketake me nga "tīwae" e rua, kei ia waahanga te maha o nga pou turanga 12 i tautuhia e matou hei waahanga o to maatau punaha tukutuku.


Whangai nga pou

4
4 whakahiato 4
3 whakahiato 3
3 whakahiato 3
8 whakahiato 4 
  1. <div class = "rarangi" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span4 offset4" > ... </div> 
  4. </div>

Nga pou kohanga

Na te punaha matiti (kore-wai) kei Bootstrap, he ngawari te kohanga. Hei whakakohanga i to ihirangi, taapiri noa he huinga pou hou .rowme te huinga o .span*roto i te tīwae tīariari .span*.

Tauira

Ko nga rarangi kohanga me whakauru he huinga pou e taapiri ana ki te maha o nga pou o tona matua. Hei tauira, kia rua nga .span3pou kua kohanga ki roto i te .span6.

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

Pūnaha mātiti wai 12 aro, pou e hāngai ana ki te ōrau

Nga pou wai

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

Ōrau, ehara i te pika

Ka whakamahia e te punaha matiti wai nga ōrau mo te whanui o nga pou hei utu mo nga pika kua whakaritea. He rite ano nga rereketanga urupare ki ta maatau punaha raarangi tuuturu, e whakarite ana i nga waahanga tika mo nga whakataunga mata matua me nga taputapu.

Nga rarangi wai

Hangaia he wai rarangi ma te huri noa .rowki .row-fluid. Ka noho rite tonu nga pou, na te mea he maamaa te huri i waenga i nga whakatakotoranga pumau me te wai.

Tohutohu

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

Kohanga wai

He ahua rereke te noho kohanga me nga matiti wai: kaore e tika kia taurite te maha o nga pou kohanga ki te matua. Engari, ka tautuhia ano o pou ki ia taumata na te mea ka eke ki ia rarangi te 100% o te pou matua.

Wai 12
Wai 6
Wai 6 
  1. <div class = "rarangi-wai" > 
  2.   <div class = "span12" > 
  3.     Taumata 1 o te tīwae
  4.     <div class = "rarangi-wai" > 
  5.       <div class = "span6" > Taumata 2 </div> 
  6.       <div class = "span6" > Taumata 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

Whakaritenga Matiti

Taurangi Uara taunoa Whakaahuatanga
@gridColumns 12 Te maha o nga pou
@gridColumnWidth 60px Te whanui o ia pou
@gridGutterWidth 20px Mokowā tōraro i waenga i ngā tīwae

Taurangi kei te TIKI

I hangaia ki Bootstrap he maha nga taurangi hei whakarite i te punaha matiti 940px taunoa, kua tuhia ki runga ake nei. Ko nga taurangi katoa mo te matiti ka penapena ki nga taurangi.less.

Me pehea te whakarite

Ko te whakarereke i te matiti ko te huri i nga @grid*taurangi e toru me te whakahiato ano i a Bootstrap. Hurihia nga taurangi matiti ki te taurangi.less me te whakamahi i tetahi o nga huarahi e wha kua tuhia hei whakahiato ano . Mena kei te taapirihia e koe etahi atu pou, me taapiri te CSS mo era kei roto i te grid.less.

Te noho urupare

Ko te whakaritenga o te matiti ka mahi anake i te taumata taunoa, te matiti 940px. Hei pupuri i nga ahuatanga urupare o Bootstrap, me whakarite ano e koe nga matiti ki te whakautu.less.

Tahora Nga tauira taketake hei hanga wharangi paetukutuku

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

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

Te whakatakotoranga wai

<div class="container-fluid">homai te hanganga wharangi ngawari, te iti me te whanui-nui, me te paetaha maui. He pai mo nga taupānga 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 Nga patai Media mo nga momo taputapu me nga whakataunga

Nga taputapu urupare

He aha ta ratou mahi

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
Waea atamai 480px me raro Ko nga pou wai, kaore he whanui pumau
Nga waea atamai ki nga papa 767px me raro Ko nga pou wai, kaore he whanui pumau
Papa whakaahua 768px me runga ake 42px 20px
Taunoa 980px me runga ake 60px 20px
Whakaaturanga nui 1200px me runga ake 70px 30px

Me tohu tohu meta

Hei whakarite kia whakaatu tika nga taputapu i nga wharangi aro, whakauruhia te tohu tohu meta tauranga.

  1. <meta name = "viewport" content = "whanui=whānui-pūrere, tauine-tuatahi=1.0" >

Te whakamahi i nga patai pāpāho

Kare a Bootstrap e whakauru aunoa i enei patai pāpāho, engari he tino ngawari te maarama me te taapiri, me te iti o te tatūnga. He iti noa nga whiringa hei whakauru i nga ahuatanga urupare o Bootstrap:

  1. Whakamahia te putanga whakautu whakahiato, bootstrap-responsive.css
  2. Tāpirihia te @import "responsive.less" ka whakahiatohia a Bootstrap
  3. Whakakē me te whakahiato whakautu.less hei kōnae motuhake

He aha te kore e whakauru noa? Ko te korero pono, ehara i te mea me whakautu nga mea katoa. Engari ki te whakatenatena i nga kaiwhakawhanake ki te tango i tenei ahuatanga, ki ta maatau he pai ake kia taea.

  1.   /* Waea whenua me raro */
  2.   @media ( max - whanui : 480px ) { ... }     
  3.  
  4.   /* Waea whenua ki te papa whakaahua */
  5.   @media ( max - whanui : 767px ) { ... }     
  6.  
  7.   /* Papa whakaahua ki te whenua me te papamahi */
  8.   @media ( min - whanui : 768px ) me ( max - whanui : 979px ) { ... }        
  9.  
  10.   /* Papamahi nui */
  11.   @media ( min - whanui : 1200px ) { ... }

Nga akomanga whaipainga urupare

He aha ratou

Kia tere ake te whanaketanga hoa-rorohiko, whakamahia enei karaehe whaipainga taketake mo te whakaatu me te huna ihirangi ma te taputapu.

Ahea te whakamahi

Whakamahia i runga i te kaupapa iti me te karo i te hanga i nga putanga rereke katoa o te pae kotahi. Engari, whakamahia hei whakakii i nga whakaaturanga o ia taputapu.

Hei tauira, ka whakaatu pea koe i tetahi <select>huānga mo te nav i runga i nga whakatakotoranga pūkoro, engari kaua ki runga papa, papamahi ranei.

Tautoko akomanga

Kei konei he ripanga o nga karaehe e tautokohia ana e matou me o raatau paanga ki runga i tetahi tahora patai pāpāho kua tohua (kua tapaina e te taputapu). Ka kitea i roto responsive.less.

Karaehe Waea480px me raro Nga papa767px me raro Papamahi768px me runga ake
.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

Te take whakamatautau

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