Razširitev Bootstrapa

Razširite Bootstrap, da izkoristite vključene sloge in komponente ter LESS spremenljivke in mešanice.

Glavo pokonci! Ti dokumenti so za različico 2.3.2, ki ni več uradno podprta. Oglejte si najnovejšo različico Bootstrapa!
MANJ CSS

Bootstrap je narejen z LESS v svojem jedru, dinamičnim jezikom slogov, ki ga je ustvaril naš dober prijatelj Alexis Sellier . Omogoča hitrejši, lažji in zabavnejši razvoj sistemskega CSS.

Zakaj MANJ?

Eden od ustvarjalcev programa Bootstrap je o tem napisal kratko objavo v spletnem dnevniku , povzeto tukaj:

  • Bootstrap prevede hitreje ~6x hitreje z Less v primerjavi s Sassom
  • Manj je napisanega v JavaScriptu, zaradi česar se lažje potopimo in popravimo v primerjavi z Rubyjem s Sassom.
  • Manj je več; želimo se počutiti, kot da pišemo CSS in naredimo Bootstrap dostopen vsem.

Kaj je vključeno?

Kot razširitev CSS-ja LESS vključuje spremenljivke, mešanice za večkratno uporabne delčke kode, operacije za preprosto matematiko, gnezdenje in celo barvne funkcije.

Nauči se več

Za več informacij obiščite uradno spletno stran http://lesscss.org/ .

Ker je naš CSS napisan z Less in uporablja spremenljivke in mešanice, ga je treba prevesti za končno produkcijsko izvedbo. Evo kako.

Opomba: Če pošiljate zahtevo za vlečenje GitHubu s spremenjenim CSS, morate znova prevesti CSS s katero koli od teh metod.

Orodja za prevajanje

Ukazna vrstica

Sledite navodilom v readme projekta na GitHubu za prevajanje prek ukazne vrstice.

JavaScript

Prenesite najnovejši Less.js in vključite pot do njega (in Bootstrap) v <head>.

<link rel = "stylesheet/less" href = "/path/to/bootstrap.less" > <script src = "/path/to/less.js" ></script>  
 

Če želite znova prevesti datoteke .less, jih preprosto shranite in znova naložite stran. Less.js jih prevede in shrani v lokalno shrambo.

Neuradna aplikacija za Mac

Neuradna aplikacija za Mac spremlja imenike datotek .less in prevaja kodo v lokalne datoteke po vsakem shranjevanju opazovane datoteke .less. Če želite, lahko v aplikaciji preklapljate med nastavitvami za samodejno pomanjševanje in v kateri imenik končajo prevedene datoteke.

Več aplikacij

Hrustanje

Crunch je odličen LESS urejevalnik in prevajalnik, zgrajen na Adobe Air.

CodeKit

CodeKit, ki ga je ustvaril isti človek kot neuradno aplikacijo za Mac, je aplikacija za Mac, ki prevaja LESS, SASS, Stylus in CoffeeScript.

Enostavno

Aplikacija za Mac, Linux in Windows za prevajanje povleci in spusti datotek LESS. Poleg tega je izvorna koda na GitHubu .

Hitro zaženite kateri koli spletni projekt tako, da vnesete preveden ali pomanjšan CSS in JS. Ločeno naložite sloge po meri za enostavno nadgradnjo in vzdrževanje.

Nastavitvena struktura datoteke

Prenesite najnovejši prevedeni Bootstrap in ga postavite v svoj projekt. Na primer, morda imate nekaj takega:

  aplikacija/
      postavitve/
      predloge/
  javnost/
      css/
          bootstrap.min.css
      js/
          bootstrap.min.js
      img/
          glyphicons-polovice.png
          glyphicons-hallfings-white.png

Uporabite začetno predlogo

Za začetek kopirajte naslednji osnovni HTML.

  1. <html>
  2. <glava>
  3. <title> Predloga Bootstrap 101 </title>
  4. <!-- Bootstrap -->
  5. <link href = "public/css/bootstrap.min.css" rel = "stylesheet" >
  6. </head>
  7. <telo>
  8. <h1> Pozdravljen, svet! </h1>
  9. <!-- Bootstrap -->
  10. <script src = "public/js/bootstrap.min.js" ></script>
  11. </body>
  12. </html>

Plast na kodi po meri

Delajte v svojem CSS-ju po meri, JS-ju in še več, če je potrebno, da naredite Bootstrap svojega z lastnimi ločenimi datotekami CSS in JS.

  1. <html>
  2. <glava>
  3. <title> Predloga Bootstrap 101 </title>
  4. <!-- Bootstrap -->
  5. <link href = "public/css/bootstrap.min.css" rel = "stylesheet" >
  6. <!-- Projekt -->
  7. <link href = "public/css/application.css" rel = "stylesheet" >
  8. </head>
  9. <telo>
  10. <h1> Pozdravljen, svet! </h1>
  11. <!-- Bootstrap -->
  12. <script src = "public/js/bootstrap.min.js" ></script>
  13. <!-- Projekt -->
  14. <script src = "public/js/application.js" ></script>
  15. </body>
  16. </html>