Kupanua Bootstrap

Panua Bootstrap ili kunufaika na mitindo na vijenzi vilivyojumuishwa, pamoja na vigeuzo na vichanganyiko KICHACHE.

Vichwa juu! Hati hizi ni za v2.3.2, ambazo hazitumiki tena rasmi. Angalia toleo jipya zaidi la Bootstrap!
CHINI CSS

Bootstrap imeundwa na LESS msingi wake, lugha ya laha ya mtindo inayobadilika iliyoundwa na rafiki yetu wa karibu, Alexis Sellier . Inafanya kuendeleza CSS kulingana na mifumo haraka, rahisi na ya kufurahisha zaidi.

Kwa nini CHINI?

Mmoja wa waundaji wa Bootstrap aliandika chapisho la haraka la blogi kuhusu hili , lililofupishwa hapa:

  • Bootstrap huunda haraka ~ 6x haraka na Chini ikilinganishwa na Sass
  • Chache imeandikwa katika JavaScript, hivyo kurahisisha sisi kupiga mbizi na kuweka kiraka ikilinganishwa na Ruby na Sass.
  • Chini ni zaidi; tunataka kujisikia kama tunaandika CSS na kufanya Bootstrap kufikiwa na wote.

Je, ni pamoja na nini?

Kama kiendelezi cha CSS, LESS inajumuisha vigeu, michanganyiko ya vijisehemu vya msimbo vinavyoweza kutumika tena, shughuli za hesabu rahisi, kuweka kiota na hata vipengele vya rangi.

Jifunze zaidi

Tembelea tovuti rasmi katika http://lesscss.org/ ili kujifunza zaidi.

Kwa kuwa CSS yetu imeandikwa na Chini na hutumia viambajengo na mchanganyiko, inahitaji kukusanywa kwa ajili ya utekelezaji wa mwisho wa uzalishaji. Hivi ndivyo jinsi.

Kumbuka: Ikiwa unatuma ombi la kuvuta kwa GitHub na CSS iliyorekebishwa, lazima urudishe CSS kupitia mojawapo ya njia hizi.

Zana za kuandaa

Mstari wa amri

Fuata maagizo kwenye usomaji wa mradi kwenye GitHub kwa kuunda kupitia safu ya amri.

JavaScript

Pakua Less.js za hivi punde na ujumuishe njia yake (na Bootstrap) kwenye <head>.

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

Ili kukusanya tena faili .less, zihifadhi tu na upakie upya ukurasa wako. Less.js inazikusanya na kuzihifadhi katika hifadhi ya ndani.

Programu isiyo rasmi ya Mac

Programu isiyo rasmi ya Mac hutazama saraka za faili .less na kukusanya msimbo kwa faili za ndani baada ya kila uhifadhi wa faili iliyotazamwa. Ukipenda, unaweza kugeuza mapendeleo katika programu kwa uboreshaji wa kiotomatiki na ni saraka gani ambayo faili zilizokusanywa huishia.

Programu zaidi

Kuponda

Crunch ni mhariri na mkusanyaji mzuri wa LESS aliyejengwa kwenye Adobe Air.

CodeKit

Imeundwa na mtu sawa na programu isiyo rasmi ya Mac, CodeKit ni programu ya Mac ambayo inajumuisha LESS, SASS, Stylus, na CoffeeScript.

Rahisi

Programu ya Mac, Linux, na Windows ya kuburuta na kuangusha faili za LESS. Pamoja, nambari ya chanzo iko kwenye GitHub .

Anzisha mradi wowote wa wavuti kwa haraka kwa kudondosha CSS na JS zilizokusanywa au kupunguzwa. Weka safu kwenye mitindo maalum kando kwa visasisho rahisi na matengenezo kusonga mbele.

Weka muundo wa faili

Pakua Bootstrap ya hivi punde iliyokusanywa na uweke kwenye mradi wako. Kwa mfano, unaweza kuwa na kitu kama hiki:

  programu/
      mpangilio/
      violezo/
  umma/
      css/
          bootstrap.min.css
      js/
          bootstrap.min.js
      img/
          glyphicons-halflings.png
          glyphicons-halflings-white.png

Tumia kiolezo cha kuanzia

Nakili HTML msingi ifuatayo ili kuanza.

  1. <html>
  2. <kichwa>
  3. <title> Kiolezo cha Bootstrap 101 </title>
  4. <!-- Bootstrap -->
  5. <link href = "public/css/bootstrap.min.css" rel = "stylesheet" >
  6. </ kichwa>
  7. <mwili>
  8. <h1> Hujambo, ulimwengu! </ h1>
  9. <!-- Bootstrap -->
  10. <script src = "public/js/bootstrap.min.js" ></script>
  11. </ mwili>
  12. </ html>

Safu kwenye msimbo maalum

Fanya kazi katika CSS yako maalum, JS, na zaidi inapohitajika ili kufanya Bootstrap iwe yako ukitumia faili zako tofauti za CSS na JS.

  1. <html>
  2. <kichwa>
  3. <title> Kiolezo cha Bootstrap 101 </title>
  4. <!-- Bootstrap -->
  5. <link href = "public/css/bootstrap.min.css" rel = "stylesheet" >
  6. <!-- Mradi -->
  7. <link href = "public/css/application.css" rel = "stylesheet" >
  8. </ kichwa>
  9. <mwili>
  10. <h1> Hujambo, ulimwengu! </ h1>
  11. <!-- Bootstrap -->
  12. <script src = "public/js/bootstrap.min.js" ></script>
  13. <!-- Mradi -->
  14. <script src = "public/js/application.js" ></script>
  15. </ mwili>
  16. </ html>