Paplašiniet Bootstrap, lai izmantotu iekļautos stilus un komponentus, kā arī MAZĀK mainīgo un miksu.
Bootstrap pamatā ir LESS — dinamiska stila lapu valoda, ko izveidojis mūsu labs draugs Aleksis Seljē . Tas padara uz sistēmām balstītu CSS izstrādi ātrāku, vienkāršāku un jautrāku.
Viens no Bootstrap veidotājiem par to uzrakstīja ātru emuāra ierakstu , kas apkopots šeit:
Kā CSS paplašinājums, LESS ietver mainīgos lielumus, miksus atkārtoti lietojamiem koda fragmentiem, operācijas vienkāršai matemātikai, ligzdošanu un pat krāsu funkcijas.
Apmeklējiet oficiālo vietni http://lesscss.org/ , lai uzzinātu vairāk.
Tā kā mūsu CSS ir rakstīts ar Less un izmanto mainīgos un mixins, tas ir jāapkopo galīgajai ražošanas ieviešanai. Lūk, kā.
Izpildiet norādījumus projekta readme vietnē GitHub, lai kompilētu, izmantojot komandrindu.
Lejupielādējiet jaunāko Less.js un iekļaujiet ceļu uz to (un Bootstrap) mapē <head>
.
<link rel = "stylesheet/less" href = "/path/to/bootstrap.less" > <script src = "/path/to/less.js" ></script>
Lai atkārtoti kompilētu .less failus, vienkārši saglabājiet tos un atkārtoti ielādējiet savu lapu. Less.js tos apkopo un saglabā vietējā krātuvē.
Neoficiālā Mac lietotne skatās .less failu direktorijus un apkopo kodu vietējos failos pēc katras skatītā .less faila saglabāšanas. Ja vēlaties, lietotnē varat pārslēgt preferences, lai automātiski samazinātu un kurā direktorijā nonāk apkopotie faili.
Crunch ir lieliska izskata LESS redaktors un kompilators, kas balstīts uz Adobe Air.
CodeKit ir Mac lietojumprogramma, ko izveidojis tas pats puisis, kas ir neoficiālā Mac lietotne, kas apkopo LESS, SASS, Stylus un CoffeeScript.
Mac, Linux un Windows lietotne MAZĀK failu kompilēšanai, velkot un nometot. Turklāt pirmkods atrodas vietnē GitHub .
Ātri sāciet jebkuru tīmekļa projektu, ievietojot apkopoto vai samazināto CSS un JS. Atsevišķi uzklājiet pielāgotos stilus, lai atvieglotu jaunināšanu un apkopi.
Lejupielādējiet jaunāko kompilēto Bootstrap un ievietojiet to savā projektā. Piemēram, jums varētu būt kaut kas līdzīgs šim:
lietotne/ izkārtojumi/ veidnes/ publisks/ css/ bootstrap.min.css js/ bootstrap.min.js img/ glyphicons-halflings.png glyphicons-halflings-white.png
Lai sāktu, nokopējiet tālāk norādīto pamata HTML.
- <html>
- <galva>
- <title> Bootstrap 101 veidne </title>
- <!-- Bootstrap -->
- <link href = "public/css/bootstrap.min.css" rel = "stila lapa" >
- </head>
- <body>
- <h1> Sveika, pasaule! </h1>
- <!-- Bootstrap -->
- <script src = "public/js/bootstrap.min.js" ></script>
- </body>
- </html>
Strādājiet ar savu pielāgoto CSS, JS un citu, ja nepieciešams, lai padarītu Bootstrap savu ar saviem atsevišķiem CSS un JS failiem.
- <html>
- <galva>
- <title> Bootstrap 101 veidne </title>
- <!-- Bootstrap -->
- <link href = "public/css/bootstrap.min.css" rel = "stila lapa" >
- <!-- Projekts -->
- <link href = "public/css/application.css" rel = "stila lapa" >
- </head>
- <body>
- <h1> Sveika, pasaule! </h1>
- <!-- Bootstrap -->
- <script src = "public/js/bootstrap.min.js" ></script>
- <!-- Projekts -->
- <script src = "public/js/application.js" ></script>
- </body>
- </html>