Txuas Bootstrap kom tau txais txiaj ntsig zoo ntawm cov qauv thiab cov khoom siv, nrog rau LESS variables thiab mixins.
Bootstrap yog tsim nrog LESS ntawm nws cov tub ntxhais, ib hom lus dynamic stylesheet tsim los ntawm peb tus phooj ywg zoo, Alexis Sellier . Nws ua rau kev tsim cov txheej txheem raws li CSS sai dua, yooj yim dua, thiab lom zem dua.
Ib tug ntawm Bootstrap tus creators tau sau ib tug ceev blog ncej txog qhov no , summarized ntawm no:
Raws li kev txuas ntxiv ntawm CSS, LESS suav nrog cov hloov pauv, cov khoom sib xyaw rau cov khoom siv rov qab siv tau ntawm cov lej, kev ua haujlwm rau lej yooj yim, zes, thiab txawm tias xim ua haujlwm.
Mus saib lub vev xaib official ntawm http://lesscss.org/ kom paub ntau ntxiv.
Txij li thaum peb CSS tau sau nrog Less thiab siv qhov sib txawv thiab cov mixins, nws yuav tsum tau muab tso ua ke rau kev ua tiav tiav. Nov yog li cas.
Ua raws li cov lus qhia hauv qhov project readme ntawm GitHub rau kev sau los ntawm kab hais kom ua.
Download tau qhov tseeb Less.js thiab suav nrog txoj hauv kev rau nws (thiab Bootstrap) hauv <head>
.
<link rel = "stylesheet/less" href = "/path/to/bootstrap.less" > <script src = "/path/to/less.js" ></script>
Txhawm rau rov ua dua cov ntaub ntawv .less, tsuas yog txuag lawv thiab rov rub koj nplooj ntawv. Less.js suav nrog lawv thiab khaws cia rau hauv qhov chaw cia.
Lub Mac app tsis raug cai saib cov npe ntawm .less cov ntaub ntawv thiab sau cov cai rau cov ntaub ntawv hauv zos tom qab txhua qhov khaws cia ntawm cov ntaub ntawv .less. Yog tias koj nyiam, koj tuaj yeem hloov qhov kev nyiam hauv app rau kev rho tawm tsis siv neeg thiab cov npe twg cov ntaub ntawv sau ua ke xaus rau hauv.
Crunch yog qhov zoo saib LESS editor thiab compiler ua rau Adobe Air.
Tsim los ntawm tib tug txiv leej tub uas tsis yog Mac app, CodeKit yog Mac app uas suav nrog LESS, SASS, Stylus, thiab CoffeeScript.
Mac, Linux, thiab Windows app rau luag thiab tso ua ke ntawm LESS cov ntaub ntawv. Ntxiv rau, lub hauv paus code yog nyob ntawm GitHub .
Pib sai sai rau txhua qhov haujlwm hauv lub vev xaib los ntawm kev xa rov qab rau hauv cov ntawv sau los yog minified CSS thiab JS. Txheej ntawm cov qauv kev cai sib cais kom yooj yim hloov khoom dua tshiab thiab kev saib xyuas mus tom ntej.
Download tau qhov tseeb tso ua ke Bootstrap thiab tso rau hauv koj qhov project. Piv txwv li, koj yuav muaj qee yam zoo li no:
app/ layouts/ cov qauv / pej xeem/ css/ bootstrap.min.css js/ bootstrap.min.js img/ glyphicons-halflings.png glyphicons-halflings-white.png
Luam cov HTML hauv qab no los pib.
- <html>
- <head>
- <title> Bootstrap 101 Template </title>
- <!-- Bootstrap -->
- <link href = "public/css/bootstrap.min.css" rel = "stylesheet" >
- </head>
- <lub cev>
- <h1> Nyob zoo, ntiaj teb no! </h1>
- <!-- Bootstrap -->
- <script src = "public/js/bootstrap.min.js" ></script>
- </body>
- </html>
Ua haujlwm hauv koj li kev cai CSS, JS, thiab ntau dua li tsim nyog los ua Bootstrap koj tus kheej nrog koj tus kheej cov ntaub ntawv CSS thiab JS cais.
- <html>
- <head>
- <title> Bootstrap 101 Template </title>
- <!-- Bootstrap -->
- <link href = "public/css/bootstrap.min.css" rel = "stylesheet" >
- <!-- Project -->
- <link href = "public/css/application.css" rel = "stylesheet" >
- </head>
- <lub cev>
- <h1> Nyob zoo, ntiaj teb no! </h1>
- <!-- Bootstrap -->
- <script src = "public/js/bootstrap.min.js" ></script>
- <!-- Project -->
- <script src = "public/js/application.js" ></script>
- </body>
- </html>