„Bootstrap“ išplėtimas

Išplėskite „Bootstrap“, kad galėtumėte pasinaudoti įtrauktais stiliais ir komponentais, taip pat MAŽIAU kintamųjų ir mišinių.

Galvas aukštyn! Šie dokumentai skirti 2.3.2 versijai, kuri oficialiai nebepalaikoma. Peržiūrėkite naujausią „Bootstrap“ versiją!
MAŽIAU CSS

„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.

Kodėl MAŽIAU?

Vienas iš „Bootstrap“ kūrėjų parašė greitą tinklaraščio įrašą apie tai , apibendrintas čia:

  • „Bootstrap“ kompiliuoja greičiau ~ 6 kartus greičiau su Less, palyginti su „Sass“.
  • Mažiau parašyta JavaScript, todėl mums lengviau pasinerti ir pataisyti, palyginti su Ruby with Sass.
  • Mažiau yra daugiau; norime jaustis taip, lyg rašome CSS ir darome Bootstrap prieinamą visiems.

Kas įtraukta?

Kaip CSS plėtinys, LESS apima kintamuosius, daugkartinio naudojimo kodo fragmentų mišinius, paprastas matematikos operacijas, įdėjimą ir net spalvų funkcijas.

Sužinokite daugiau

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.

Pastaba: jei pateikiate ištraukimo užklausą „GitHub“ naudodami pakeistą CSS, turite iš naujo kompiliuoti CSS naudodami bet kurį iš šių metodų.

Kompiliavimo įrankiai

Komandinė eilutė

Vykdykite „ GitHub “ projekto readme instrukcijas, kad kompiliuotumėte naudodami komandinę eilutę.

JavaScript

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

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.

Daugiau programėlių

Traškėti

Crunch yra puikiai atrodantis LESS redaktorius ir kompiliatorius, sukurtas naudojant „Adobe Air“.

CodeKit

Sukurtas to paties vaikino kaip ir neoficialią „Mac“ programą, „CodeKit“ yra „Mac“ programa, kuri kompiliuoja LESS, SASS, Stylus ir CoffeeScript.

Paprasta

„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.

Sąrankos failo struktūra

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

Naudokite starterio šabloną

Norėdami pradėti, nukopijuokite šį pagrindinį HTML.

  1. <html>
  2. <galva>
  3. <title> „ Bootstrap 101“ šablonas </title>
  4. <!-- Bootstrap -->
  5. <link href = "public/css/bootstrap.min.css" rel = "stiliaus lapas" >
  6. </head>
  7. <kūnas>
  8. <h1> Sveiki, pasauli! </h1>
  9. <!-- Bootstrap -->
  10. <script src = "public/js/bootstrap.min.js" ></script>
  11. </body>
  12. </html>

Padėkite tinkintą kodą

Jei reikia, dirbkite su tinkintu CSS, JS ir kt., kad „Bootstrap“ taptų savo nuosavu, naudodami atskirus CSS ir JS failus.

  1. <html>
  2. <galva>
  3. <title> „ Bootstrap 101“ šablonas </title>
  4. <!-- Bootstrap -->
  5. <link href = "public/css/bootstrap.min.css" rel = "stiliaus lapas" >
  6. <!-- Projektas -->
  7. <link href = "public/css/application.css" rel = "stiliaus lapas" >
  8. </head>
  9. <kūnas>
  10. <h1> Sveiki, pasauli! </h1>
  11. <!-- Bootstrap -->
  12. <script src = "public/js/bootstrap.min.js" ></script>
  13. <!-- Projektas -->
  14. <script src = "public/js/application.js" ></script>
  15. </body>
  16. </html>