Bootstrap

Te timatanga

Tirohanga o te kaupapa, ona ihirangi, me pehea te tiimata me te tauira ngawari.

1. Tikiake

I mua i te tango, kia mohio koe he kaiwhakatika waehere (e taunaki ana matou i te Sublime Text 2 ) me etahi matauranga mahi mo te HTML me te CSS. E kore matou e hikoi i nga konae puna i konei, engari kei te waatea mo te tango. Ka aro tatou ki te tiimata me nga konae Bootstrap kua whakahiato.

Kua whakaemihia te tikiake

Te huarahi tere ki te timata: tiki i nga putanga whakahiato me te iti o a maatau CSS, JS, me nga whakaahua. Karekau he tuhinga, he konae puna taketake ranei.

Tikiake Bootstrap

Tikiake puna

Tikina nga konae taketake mo nga CSS me te JavaScript katoa, me te kape o te rohe o nga tuhinga ma te tango tika i te putanga hou mai i GitHub.

Tangohia te puna Bootstrap

2. Hanganga kōnae

I roto i te tangohanga ka kitea e koe te hanganga o nga konae me nga ihirangi e whai ake nei, ka whakarōpū arorau i nga rawa noa me te whakarato i nga rereketanga kua whakahiatohia me te iti.

Kia tikiakehia, wetewetehia te kōpaki kōpeke kia kite i te hanganga o (te whakahiato) Bootstrap. Ka kite koe i tetahi mea penei:

  bootstrap / ├── css / │ ├── bootstrap . css
   │ ├── bootstrap . min . css
   ├── js / │ ├── bootstrap . js
   │ ├── bootstrap . min . js
   └── img / ├── glyphicons - halflings . png
       └── glyphicons - halflings - ma . png

Koinei te ahua tino taketake o Bootstrap: kohia nga konae mo te whakamahi tere i roto i te nuinga o nga kaupapa tukutuku. Ka whakaratohia e matou te CSS me te JS kua whakaemihia ( bootstrap.*), me te CSS me te JS kua whakaemihia me te whakaiti ( bootstrap.min.*). Ko nga konae whakaahua ka kopirihia ma te whakamahi i te ImageOptim , he taupānga Mac mo te kopiri i nga PNG.

Kia mahara ko nga taputapu JavaScript katoa e hiahia ana kia whakauruhia te jQuery.

3. He aha kei roto

Ka tae mai a Bootstrap ki te HTML, CSS, me te JS mo nga momo mea katoa, engari ka taea te whakarāpopotohia me te maha o nga waahanga e kitea ana i te tihi o nga tuhinga Bootstrap .

Nga waahanga tuhinga

Tauira

Ko nga ahua o te ao mo te tinana ki te tautuhi ano i te momo me te papamuri, nga momo hono, te punaha matiti, me nga whakatakotoranga ngawari e rua.

CSS turanga

Ngā kāhua mō ngā huānga HTML noa pēnei i te momotuhi, te waehere, ngā ripanga, ngā puka, me ngā pātene. Kei roto ano ko Glyphicons , he huinga tohu iti.

Waehanga

Ko nga ahua taketake mo nga waahanga atanga noa penei i nga ripa me nga pire, navbar, matohi, pane wharangi, me etahi atu.

JavaScript monomai

He rite ki nga Waehanga, ko enei taputapu JavaScript he waahanga tauwhitinga mo nga mea penei i nga taputapu, popovers, modals, me etahi atu.

Te rarangi o nga waahanga

Ko nga waahanga whakauru me te JavaScript e whakarato ana i nga waahanga atanga e whai ake nei:

  • Nga roopu patene
  • Patene takaiho
  • Ripa whakatere, pire, me nga rarangi
  • Navbar
  • Tapanga
  • Tohu
  • Pane wharangi me te wae toa
  • Karakōnui
  • Matohi
  • Pae whakamua
  • Modal
  • Whakataka
  • Aki taputapu
  • Popovers
  • Akoriona
  • Carousel
  • Tohutohu

I roto i nga aratohu a meake nei, ka taea e tatou te haere takitahi i roto i enei waahanga i roto i nga korero taipitopito. Kia tae ra ano, rapua ia o enei i roto i nga tuhinga mo nga korero mo te whakamahi me te whakarite.

4. tauira HTML taketake

Ma te whakaurunga poto ki nga korero kei waho i te huarahi, ka taea e tatou te aro ki te whakamahi i a Bootstrap. Ki te mahi i tera, ka whakamahia e matou he tauira HTML taketake kei roto nga mea katoa i whakahuahia e matou i roto i te hanganga Kōnae .

Inaianei, he titiro ki tetahi konae HTML angamaheni :

  1. <!DOCTYPE html>
  2. <html>
  3.   <upoko>
  4.     <title> Bootstrap 101 Template </title>
  5.     <meta name = "viewport" content = "whanui=whānui-pūrere, tauine-tuatahi=1.0" >  
  6.   </head>
  7.   <tinana>
  8.     <h1> Kia ora, e te ao! </h1>
  9.     <script src = "https://code.jquery.com/jquery.js" ></script> 
  10.   </tinana>
  11. </html>

Hei hanga i tenei he tauira Bootstrapped , whakauru noa i nga konae CSS me JS e tika ana:

  1. <!DOCTYPE html>
  2. <html>
  3.   <upoko>
  4.     <title> Bootstrap 101 Template </title>
  5.     <meta name = "viewport" content = "whanui=whānui-pūrere, tauine-tuatahi=1.0" >  
  6.     <!-- Bootstrap -->
  7.     <link href = "css/bootstrap.min.css" rel = "stylesheet" media = "mata" >   
  8.   </head>
  9.   <tinana>
  10.     <h1> Kia ora, e te ao! </h1>
  11.     <script src = "https://code.jquery.com/jquery.js" ></script> 
  12.     <script src = "js/bootstrap.min.js" ></script> 
  13.   </tinana>
  14. </html>

Na kua rite koe! Ma te taapiri i enei konae e rua, ka taea e koe te tiimata ki te whakawhanake i tetahi waahi, tono ranei me Bootstrap.

5. Tauira

Nuku ki tua atu i te tauira turanga me etahi tauira tahora. Ka akiaki matou i nga taangata ki te huri i enei tauira, kaua e whakamahi noa hei hua mutunga.

  • tauira timata

    He tuhinga HTML barebones me nga Bootstrap CSS me JavaScript katoa kei roto.

  • Pae hokohoko taketake

    E whakaatu ana i tetahi waahanga toa mo te karere tuatahi me nga huānga tautoko e toru.

  • Te whakatakotoranga wai

    Ka whakamahi i ta maatau punaha matiti wē, urupare hou ki te hanga i te tahora wē korekore.

  • Te hokohoko whaiti

    He iti, he tauira hokohoko mama mo nga kaupapa iti, roopu ranei.

  • Nav tika

    Whārangi hokohoko me nga hononga whakatere rite-whanui i roto i te pae whakatere kua whakarereketia.

  • Waitohu mai

    Ka haina te ahua o Barebones me te ritenga, te rahi o te mana whakahaere me te whakatakotoranga ngawari.

  • Hiku piri

    Porohia he hiku teitei-te teitei ki raro o te tauranga tirohanga a te kaiwhakamahi.

  • Carousel jumbotron

    He riff tauwhitiwhiti ake i runga i te pae hokohoko taketake e whakaatu ana i te carousel rongonui.

He aha muri?

Haere ki nga tuhinga mo nga korero, tauira, me nga tohu tohu, tango ranei i te mokowhiti ka whai ake ka whakarite i a Bootstrap mo tetahi kaupapa e haere ake nei.

Tirohia nga tuhinga Bootstrap Whakaritea Bootstrap