Bootstrap

Kupanua Bootstrap

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

Imejengwa kwa LESS

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.

Kukusanya Bootstrap na Chini

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

Nodi iliyo na makefile

Sakinisha mkusanyaji wa laini ya amri LESS, JSHint, Recess, na uglify-js kimataifa na npm kwa kutekeleza amri ifuatayo:

$ npm install -g less jshint recess ugify-js

Mara tu ikiwa imesakinishwa kimbia tu makekutoka kwa mzizi wa saraka yako ya bootstrap na uko tayari.

Kwa kuongeza, ikiwa umesakinisha watchr , unaweza kukimbia make watchili bootstrap ijengwe upya kiotomatiki kila wakati unapohariri faili kwenye bootstrap lib (hii haihitajiki, njia rahisi tu).

Mstari wa amri

Sakinisha zana ya mstari wa amri ya LESS kupitia Node na uendesha amri ifuatayo:

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

Hakikisha kujumuisha --compresskatika amri hiyo ikiwa unajaribu kuhifadhi baiti kadhaa!

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 .

Tumia kama mali tuli

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>