Kokangama ya bottes

Kobakisa Bootstrap

Extend Bootstrap mpo na ko profiter na ba styles na ba composants oyo ekotisami, ainsi que ba variables na ba mixins LESS.

Etongami na LESS

MOKE YA CSS

Bootstrap esalemi na LESS na moboko na yango, monoko ya stylesheet dynamique oyo esalemi na moninga na biso ya malamu, Alexis Sellier . Ezali kosala ete kosala CSS oyo esalemi na ba systèmes ezala mbangu, pete, mpe esengo.

Mpo na nini LESS?

Moko ya baye basalaki Bootstrap akomaki mokanda ya mbangu ya blog na ntina ya likambo oyo , na bokuse awa:

  • Bootstrap compile plus vite ~6x plus vite na Moins par rapport na Sass
  • Moins ekomami na JavaScript, kosala ete ezala pete mpo na biso ko plonge na kati mpe kosala patch soki tokokanisi yango na Ruby na Sass.
  • Moke ezali mingi; tolingi koyoka lokola tozali kokoma CSS mpe kosala ete Bootstrap ezala penepene na bato nyonso.

Nini ezali na kati?

Lokola bobakisi ya CSS, LESS ezali na ba variables, ba mixins mpo na ba fragments ya code oyo ekoki kosalelama lisusu, ba opérations mpo na matematiki ya pete, nesting, mpe ata ba fonctions ya couleur.

Yekola makambo mosusu

Kota na site internet ya officiel na http://lesscss.org/ mpo na koyeba makambo mingi.

Kosangisa Bootstrap na Moins

Lokola CSS na biso ekomami na Less mpe esalelaka ba variables mpe ba mixins, esengeli e compiler yango mpo na mise en œuvre ya production finale. Tala ndenge nini.

Liyebisi: Soki ozali kotinda bosengi ya kobenda na GitHub na CSS oyo ebongisami, osengeli kozongisa CSS na nzela ya moko ya mayele oyo.

Bisaleli mpo na kosangisa biloko

Molongo ya komande

Landa malako na projet readme na GitHub pona compilation via ligne de commande.

JavaScript ezali

Télécharger Less.js ya sika mpe kotia nzela ya kokende na yango (mpe Bootstrap) na <head>.

<link rel = "lokasa ya lolenge/moke" href = "/nzela/na/bootstrap.moke" > <script src = "/nzela/na/moke.js" ></script>

Pona ko recompiler ba fichiers .less, bomba kaka yango pe recharger page na yo. Less.js e compiler yango mpe ebombaka yango na stockage local.

Application Mac oyo ezali officielle te

Application Mac oyo ezali officielle te etalaka ba répertoires ya ba fichiers .less mpe e compiler code na ba fichiers locales après chaque sauvegarde ya fichier .less oyo etali. Soki olingi, okoki kobongola makambo oyo olingaka na programɛ yango mpo na kosala minifying automatique mpe répertoire nini ba fichiers compilés esukaka na yango.

Ba apps mosusu

Crunch ya kosala

Crunch ezali éditeur mpe compilateur ya LESS oyo ezali komonana malamu oyo etongami na Adobe Air.

CodeKit ya mibeko

Esalemi na mobali moko na appli Mac oyo ezali officielle te, CodeKit ezali appli Mac oyo esangisi LESS, SASS, Stylus, mpe CoffeeScript.

Ezali pɛtɛɛ te

Mac, Linux, mpe Windows app mpo na kobenda mpe kobwaka kosangisa ba fichiers LESS. Plus, code source ezali na GitHub .

Salelá lokola biloko ya statique

Bandá nokinoki projet web nyonso na kobwaka na kati ya CSS mpe JS oyo esangisi to oyo esili kopɛtolama. Couche na ba styles personnalisés separatement pona ba mises à niveau facile na entretien kokende liboso.

Bobongisi ebongiseli ya fisyé

Télécharger Bootstrap ya sika oyo esalemi mpe tia yango na projet na yo. Na ndakisa, okoki kozala na likambo ya ndenge oyo:

  app/
      ba layouts/ .
      ba modèles/
  ya bato nyonso/
      css/ .
          bootstrap.min.css na mokili mobimba
      js/ .
          bootstrap.min.js na mokili mobimba
      img/ .
          ba glyphicons-ba ndambo.png
          ba glyphicons-ba-halflings-ya pembe.png

Salelá modèle ya démarrage

Kopi HTML ya base oyo elandi mpo na kobanda.

  1. <html>
  2.   <motó>
  3.     <title> Modèle ya 101 ya bobandi </title>
  4.     <!-- Mokanda ya kofungola -->
  5.     <lien href = "public/css/bootstrap.min.css" rel = "lokasa ya lolenge" >  
  6.   </motó>
  7.   <nzoto>
  8.     <h1> Mbote, mokili! </h1>
  9.     <!-- Mokanda ya kofungola -->
  10.     <script src = "ya bato banso/js/bobandi.min.js" ></script> 
  11.   </nzoto>
  12. </html>

Couche na code personnalisé

Sala na CSS na yo personnalisé, JS, mpe mingi lokola esengeli mpo na kosala Bootstrap ya yo moko na ba fichiers CSS mpe JS na yo moko ekeseni.

  1. <html>
  2.   <motó>
  3.     <title> Modèle ya 101 ya bobandi </title>
  4.     <!-- Mokanda ya kofungola -->
  5.     <lien href = "public/css/bootstrap.min.css" rel = "lokasa ya lolenge" >  
  6.     <!-- Mosala -->
  7.     <link href = "public/css/application.css" rel = "lokasa ya lolenge" >  
  8.   </motó>
  9.   <nzoto>
  10.     <h1> Mbote, mokili! </h1>
  11.     <!-- Mokanda ya kofungola -->
  12.     <script src = "ya bato banso/js/bobandi.min.js" ></script> 
  13.     <!-- Mosala -->
  14.     <script src = "ya bato banso/js/ya kosalela.js" </script> 
  15.   </nzoto>
  16. </html>