Išplėskite „Bootstrap“, kad galėtumėte pasinaudoti įtrauktais stiliais ir komponentais, taip pat MAŽIAU kintamųjų ir mišinių.
„Bootstrap“ sukurta naudojant LESS – dinamišką stilių lentelių kalbą, kurią sukūrė mūsų geras draugas Alexis Sellier . Tai leidžia kurti sistemomis pagrįstą CSS greičiau, lengviau ir smagiau.
Vienas iš „Bootstrap“ kūrėjų parašė greitą tinklaraščio įrašą apie tai , apibendrintas čia:
Kaip CSS plėtinys, LESS apima kintamuosius, daugkartinio naudojimo kodo fragmentų mišinius, paprastas matematikos operacijas, įdėjimą ir net spalvų funkcijas.
Norėdami sužinoti daugiau , apsilankykite oficialioje svetainėje http://lesscss.org/ .
Kadangi mūsų CSS yra parašytas su Less ir naudoja kintamuosius bei mišinius, jį reikia sukompiliuoti, kad būtų galima galutinai įdiegti. Štai kaip.
Vykdykite „ GitHub “ projekto readme instrukcijas, kad kompiliuotumėte naudodami komandinę eilutę.
Atsisiųskite naujausią Less.js ir įtraukite kelią į jį (ir „Bootstrap“) į <head>
.
<link rel = "stylesheet/less" href = "/path/to/bootstrap.less" > <script src = "/path/to/less.js" ></script>
Norėdami iš naujo sukompiliuoti .less failus, tiesiog išsaugokite juos ir įkelkite puslapį iš naujo. Less.js juos sukompiliuoja ir išsaugo vietinėje saugykloje.
Neoficiali „Mac“ programa stebi .less failų katalogus ir sukompiliuoja kodą į vietinius failus po kiekvieno žiūrimo .less failo išsaugojimo. Jei norite, programoje galite perjungti nuostatas, skirtas automatiniam sumažinimui ir į kurį katalogą pateks sukurti failai.
Crunch yra puikiai atrodantis LESS redaktorius ir kompiliatorius, sukurtas naudojant „Adobe Air“.
Sukurtas to paties vaikino kaip ir neoficialią „Mac“ programą, „CodeKit“ yra „Mac“ programa, kuri kompiliuoja LESS, SASS, Stylus ir CoffeeScript.
„Mac“, „Linux“ ir „Windows“ programa, skirta MAUŽIŲ failų kompiliavimui. Be to, šaltinio kodas yra „GitHub“ .
Greitai pradėkite bet kokį žiniatinklio projektą įmesdami sukompiliuotą arba sumažintą CSS ir JS. Atskirai padėkite tinkintus stilius, kad būtų lengviau atnaujinti ir prižiūrėti.
Atsisiųskite naujausią kompiliuotą „Bootstrap“ ir įdėkite į savo projektą. Pavyzdžiui, galite turėti kažką panašaus:
programa/ maketai/ šablonai/ viešas/ css/ bootstrap.min.css js/ bootstrap.min.js img/ glyphicons-halflings.png glyphicons-halflings-white.png
Norėdami pradėti, nukopijuokite šį pagrindinį HTML.
- <html>
- <galva>
- <title> „ Bootstrap 101“ šablonas </title>
- <!-- Bootstrap -->
- <link href = "public/css/bootstrap.min.css" rel = "stiliaus lapas" >
- </head>
- <kūnas>
- <h1> Sveiki, pasauli! </h1>
- <!-- Bootstrap -->
- <script src = "public/js/bootstrap.min.js" ></script>
- </body>
- </html>
Jei reikia, dirbkite su tinkintu CSS, JS ir kt., kad „Bootstrap“ taptų savo nuosavu, naudodami atskirus CSS ir JS failus.
- <html>
- <galva>
- <title> „ Bootstrap 101“ šablonas </title>
- <!-- Bootstrap -->
- <link href = "public/css/bootstrap.min.css" rel = "stiliaus lapas" >
- <!-- Projektas -->
- <link href = "public/css/application.css" rel = "stiliaus lapas" >
- </head>
- <kūnas>
- <h1> Sveiki, pasauli! </h1>
- <!-- Bootstrap -->
- <script src = "public/js/bootstrap.min.js" ></script>
- <!-- Projektas -->
- <script src = "public/js/application.js" ></script>
- </body>
- </html>