Te toronga Bootstrap

Whakawhānuihia a Bootstrap ki te whakamahi i nga momo whakauru me nga waahanga, tae atu ki nga taurangi iti me nga whakauru.

He iti ake te CSS

Ko te Bootstrap he mea hanga me te MAHI i tona uho, he reo rauhua hihiri i hangaia e to maatau hoa pai, a Alexis Sellier . He tere ake, he ngawari ake, he ngahau hoki te whakawhanake i te CSS i runga i nga punaha.

He aha te iti?

I tuhia e tetahi o nga kaihanga a Bootstrap he panui rangitaki tere mo tenei , i whakarāpopotohia i konei:

  • He tere ake te whakahiato a Bootstrap ~6x tere ake me te Iti ka whakaritea ki a Sass
  • He iti ake te tuhi i roto i te JavaScript, he maamaa ake ki a maatau te ruku ki roto me te whakapiri ki a Ruby me Sass.
  • He iti te nui; Kei te pirangi matou ki te tuhi CSS me te hanga i a Bootstrap kia whakatata ki te katoa.

He aha kei roto?

Hei toronga mo te CSS, ko te LESS kei roto i nga taurangi, nga whakaurunga mo nga mahanga waehere ka taea te whakamahi, nga mahi mo te pangarau ngawari, te kohanga, tae noa ki nga mahi tae.

Ako atu

Tirohia te paetukutuku mana i http://lesscss.org/ ki te ako atu.

I te mea kua tuhia to tatou CSS ki te Iti me te whakamahi i nga taurangi me nga ranunga, me whakahiato mo te whakatinanatanga o te whakaputanga whakamutunga. Anei me pehea.

Tuhipoka: Mena kei te tuku tono kume koe ki a GitHub me te CSS whakarereke, me whakahiato ano e koe te CSS ma tetahi o enei tikanga.

Nga taputapu mo te whakahiato

Raina whakahau

Whaia nga tohutohu i roto i te panui kaupapa i runga i GitHub mo te whakahiato ma te raina whakahau.

JavaScript

Tangohia te Less.js hou me te whakauru i te ara ki reira (me Bootstrap) i roto i te <head>.

<link rel = "stylesheet/less" href = "/path/to/bootstrap.less" > <script src = "/path/to/less.js" ></script>  
 

Hei whakahiato i nga konae .iti, tiakina ka utaina ano to wharangi. Ka whakahiatohia e Less.js ka penapena ki roto i te rokiroki o te rohe.

Taupānga Mac kore mana

Ko te taupānga Mac kore mana e maataki i nga raarangi o nga konae .less me te whakahiato i te waehere ki nga konae aa-rohe i muri i nga penapena katoa o te konae .iti ka tirohia. Ki te pai koe, ka taea e koe te takahuri i nga manakohanga i roto i te taupānga mo te whakaiti aunoa me te raarangi o nga konae kua whakahiato ka mutu.

Ētahi atu taupānga

Koruke

Ko Crunch he etita iti me te kaikohi i hangaia i runga i te Adobe Air.

CodeKit

He mea hanga e te tangata kotahi ki te taupānga Mac kore mana, CodeKit he taupānga Mac e whakahiato ana i te LESS, SASS, Stylus, me CoffeeScript.

Maamaa

Mac, Linux, me te taupānga Windows mo te toia me te whakataka te whakahiato i nga konae MAHI. Ano, ko te waehere puna kei runga i GitHub .

Kia tere te tiimata i tetahi kaupapa tukutuku ma te tuku i te CSS me te JS kua whakaemihia, iti ranei. Tuhia ki runga i nga momo ritenga motuhake mo nga whakamohoatanga ngawari me te tiaki haere whakamua.

Whakaritea te hanganga kōnae

Tangohia te Bootstrap kua whakahiato hou ka tuu ki to kaupapa. Hei tauira, tera pea kei a koe tetahi mea penei:

  taupānga/
      whakatakotoranga/
      tauira/
  tūmatanui/
      css/
          bootstrap.min.css
      js/
          bootstrap.min.js
      img/
          glyphicons-halflings.png
          glyphicons-halflings-white.png

Whakamahia te tauira timata

Tāruahia te HTML turanga e whai ake nei hei timata.

  1. <html>
  2. <upoko>
  3. <title> Bootstrap 101 Template </title>
  4. <!-- Bootstrap -->
  5. <link href = "public/css/bootstrap.min.css" rel = "stylesheet" >
  6. </head>
  7. <tinana>
  8. <h1> Kia ora, e te ao! </h1>
  9. <!-- Bootstrap -->
  10. <script src = "public/js/bootstrap.min.js" ></script>
  11. </tinana>
  12. </html>

Apa i runga i te waehere ritenga

Mahi i roto i to CSS ritenga, JS, me etahi atu mea e tika ana ki te hanga Bootstrap i a koe ake me o ake ake CSS me nga konae JS motuhake.

  1. <html>
  2. <upoko>
  3. <title> Bootstrap 101 Template </title>
  4. <!-- Bootstrap -->
  5. <link href = "public/css/bootstrap.min.css" rel = "stylesheet" >
  6. <!-- Kaupapa -->
  7. <link href = "public/css/application.css" rel = "stylesheet" >
  8. </head>
  9. <tinana>
  10. <h1> Kia ora, e te ao! </h1>
  11. <!-- Bootstrap -->
  12. <script src = "public/js/bootstrap.min.js" ></script>
  13. <!-- Kaupapa -->
  14. <script src = "public/js/application.js" ></script>
  15. </tinana>
  16. </html>