Bootstrap

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 mea hanga ki te iti

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 MAHI?

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.

Te whakahiato Bootstrap me te Iti

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

Node with makefile

Tāutahia te kaitoi raina whakahau LESS, JSHint, Recess, me uglify-js puta noa i te ao me te npm ma te whakahaere i te whakahau e whai ake nei:

$ npm tāuta -g iti jshint recess uglify-js

Kia oti te whakauru, rere noa makemai i te putake o to whaiaronga bootstrap ka oti katoa koe.

I tua atu, ki te mea kua whakauruhia e koe te kaitirotiro , ka oma koe make watchki te hanga aunoa i te bootstrap i nga wa katoa ka whakatika koe i tetahi konae kei roto i te bootstrap lib (kaore tenei e hiahiatia, he tikanga ngawari noa).

Raina whakahau

Tāutahia te taputapu raina whakahau LESS ma te Node ka whakahaere i te whakahau e whai ake nei:

$ lessc ./less/bootstrap.less > bootstrap.css

Me whakauru ki roto --compressi taua whakahau mena kei te ngana koe ki te penapena i etahi paita!

JavaScript

Tikiake i 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 whakahiato 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 .

Whakamahia hei taonga pateko

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, penei pea kei a koe:

  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>