Bootstrap

Pagpalapad sa Bootstrap

I-extend ang Bootstrap aron mapahimuslan ang gilakip nga mga istilo ug sangkap, ingon man ang LABING mga variable ug mixin.

Gitukod uban sa minus

UBOS nga CSS

Ang Bootstrap gihimo uban ang KINABUHI sa kinauyokan niini, usa ka dinamikong stylesheet nga pinulongan nga gihimo sa among suod nga higala, si Alexis Sellier . Gihimo niini nga mas paspas, mas sayon, ug mas makalingaw ang pagpalambo sa CSS nga nakabase sa sistema.

Ngano minus?

Usa sa mga tiglalang sa Bootstrap nagsulat ug dali nga post sa blog bahin niini , gisumada dinhi:

  • Ang Bootstrap nag-compile nga mas paspas ~ 6x nga mas paspas nga adunay Dili kaayo kumpara sa Sass
  • Diyutay ra ang nasulat sa JavaScript, nga nakapasayon ​​kanamo sa pag-dive ug pag-patch kumpara sa Ruby nga adunay Sass.
  • Mas daghan ang gamay; gusto namong mabati nga nagsulat kami ug CSS ug naghimo sa Bootstrap nga dali duolon sa tanan.

Unsay naapil?

Isip usa ka extension sa CSS, ang LESS naglakip sa mga variables, mixins alang sa magamit pag-usab nga mga snippet sa code, mga operasyon alang sa yano nga math, nesting, ug bisan mga function sa kolor.

Pagkat-on pa

Bisitaha ang opisyal nga website sa http://lesscss.org/ para makat-on pa.

Pag-compile sa Bootstrap nga adunay Gamay

Tungod kay ang atong CSS gisulat uban sa Gamay ug naggamit sa mga baryable ug mixins, kini kinahanglan nga tigumon alang sa katapusang pagpatuman sa produksyon. Ania kung giunsa.

Mubo nga sulat: Kung nagsumite ka usa ka hangyo sa pagbitad sa GitHub nga adunay giusab nga CSS, kinahanglan nimo nga i-compile pag-usab ang CSS pinaagi sa bisan unsang mga pamaagi.

Mga himan alang sa pag-compile

Node nga adunay makefile

I-install ang LESS command line compiler, JSHint, Recess, ug uglify-js sa tibuok kalibutan gamit ang npm pinaagi sa pagpadagan sa mosunod nga sugo:

$ npm install -g dili kaayo jshint recess uglify-js

Sa higayon nga ma-install modagan lang makegikan sa gamut sa imong bootstrap nga direktoryo ug andam ka na.

Dugang pa, kung na-install nimo ang watchr , mahimo kang modagan make watcharon awtomatik nga matukod pag-usab ang bootstrap sa matag higayon nga mag-edit ka sa usa ka file sa bootstrap lib (dili kini gikinahanglan, usa lamang ka sayon ​​​​nga paagi).

Linya sa sugo

I-install ang LESS command line tool pinaagi sa Node ug padagana ang mosunod nga command:

$ lessc ./less/bootstrap.less > bootstrap.css

Siguroha nga iapil --compresskana nga sugo kung ikaw naningkamot sa pagluwas sa pipila ka mga byte!

JavaScript

I-download ang pinakabag-o nga Less.js ug ilakip ang dalan niini (ug Bootstrap) sa <head>.

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

Aron ma-compile pag-usab ang mga .minus nga mga file, i-save lang kini ug i-reload ang imong panid. Ang Less.js nag-compile niini ug nagtipig niini sa lokal nga storage.

Dili opisyal nga Mac app

Ang dili opisyal nga Mac app nagtan-aw sa mga direktoryo sa .less nga mga file ug nag-compile sa code ngadto sa lokal nga mga file human sa matag pagluwas sa usa ka gitan-aw nga .less nga file. Kung gusto nimo, mahimo nimong i-toggle ang mga kagustuhan sa app alang sa awtomatikong pagminus ug kung unsang direktoryo ang naipon nga mga file.

Dugang apps

Crunch

Ang Crunch usa ka nindot tan-awon nga LESS editor ug compiler nga gitukod sa Adobe Air.

CodeKit

Gihimo sa parehas nga lalaki nga dili opisyal nga Mac app, ang CodeKit usa ka Mac app nga nag-compile sa LESS, SASS, Stylus, ug CoffeeScript.

Pagkayano

Mac, Linux, ug Windows app para sa pag-drag ug pag-drop sa pag-compile sa minus nga mga file. Dugang pa, ang source code anaa sa GitHub .

Gamita isip static assets

Pagsugod dayon sa bisan unsang proyekto sa web pinaagi sa paghulog sa gihugpong o gipamubu nga CSS ug JS. Layer sa naandan nga mga istilo nga gilain alang sa dali nga pag-upgrade ug pagpadayon sa pagpadayon.

Pag-setup sa istruktura sa file

I-download ang pinakabag-o nga nahipos nga Bootstrap ug ibutang sa imong proyekto. Pananglitan, mahimo kang adunay sama niini:

  app/
      mga laraw/
      templates/
  publiko/
      css/
          bootstrap.min.css
      js/
          bootstrap.min.js
      img/
          glyphicons-halflings.png
          glyphicons-halflings-white.png

Gamita ang template sa pagsugod

Kopyaha ang mosunod nga base HTML aron makasugod.

  1. <html>
  2.   <ulo>
  3.     <title> Bootstrap 101 Template </title>
  4.     <!-- Bootstrap -->
  5.     <link href = "public/css/bootstrap.min.css" rel = "stylesheet" >  
  6.   </head>
  7.   <lawas>
  8.     <h1> Hello, kalibutan! </h1>
  9.     <!-- Bootstrap -->
  10.     <script src = "public/js/bootstrap.min.js" ></script> 
  11.   </body>
  12. </html>

Layer sa custom code

Pagtrabaho sa imong naandan nga CSS, JS, ug uban pa kung gikinahanglan aron mahimo nimong kaugalingon ang Bootstrap gamit ang imong kaugalingon nga lahi nga CSS ug JS nga mga file.

  1. <html>
  2.   <ulo>
  3.     <title> Bootstrap 101 Template </title>
  4.     <!-- Bootstrap -->
  5.     <link href = "public/css/bootstrap.min.css" rel = "stylesheet" >  
  6.     <!-- Proyekto -->
  7.     <link href = "public/css/application.css" rel = "stylesheet" >  
  8.   </head>
  9.   <lawas>
  10.     <h1> Hello, kalibutan! </h1>
  11.     <!-- Bootstrap -->
  12.     <script src = "public/js/bootstrap.min.js" ></script> 
  13.     <!-- Proyekto -->
  14.     <script src = "public/js/application.js" ></script> 
  15.   </body>
  16. </html>