Bootstrap

Pagpapalawak ng Bootstrap

I-extend ang Bootstrap para samantalahin ang mga kasamang istilo at bahagi, pati na rin ang mas kaunting mga variable at mixin.

Itinayo gamit ang MABAIT

Mas kaunting CSS

Ang Bootstrap ay ginawa gamit ang LESS sa core nito, isang dynamic na stylesheet na wika na nilikha ng aming mabuting kaibigan, si Alexis Sellier . Ginagawa nitong mas mabilis, mas madali, at mas masaya ang pagbuo ng CSS na nakabatay sa mga system.

Bakit KULANG?

Ang isa sa mga tagalikha ng Bootstrap ay nagsulat ng isang mabilis na post sa blog tungkol dito, na buod dito:

  • Ang Bootstrap ay nag-compile nang mas mabilis ~6x na mas mabilis na may Mas kaunti kumpara sa Sass
  • Mas kaunti ang nakasulat sa JavaScript, na ginagawang mas madali sa amin ang pagsisid at pag-patch kumpara kay Ruby na may Sass.
  • Mas kaunti ay higit pa; gusto naming maramdaman na nagsusulat kami ng CSS at ginagawang madaling lapitan ng lahat ang Bootstrap.

Ano ang kasama?

Bilang extension ng CSS, ang LESS ay kinabibilangan ng mga variable, mixin para sa magagamit muli na mga snippet ng code, mga operasyon para sa simpleng matematika, nesting, at kahit na mga function ng kulay.

Matuto pa

Bisitahin ang opisyal na website sa http://lesscss.org/ para matuto pa.

Kino-compile ang Bootstrap na may Mas Kaunti

Dahil ang aming CSS ay nakasulat sa Less at gumagamit ng mga variable at mixin, kailangan itong i-compile para sa panghuling pagpapatupad ng produksyon. Narito kung paano.

Tandaan: Kung nagsusumite ka ng pull request sa GitHub na may binagong CSS, dapat mong i- compile muli ang CSS sa pamamagitan ng alinman sa mga pamamaraang ito.

Mga tool para sa pag-compile

Command line

Sundin ang mga tagubilin sa readme ng proyekto sa GitHub para sa pag-compile sa pamamagitan ng command line.

JavaScript

I-download ang pinakabagong Less.js at isama ang path dito (at Bootstrap) sa <head>.

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

Upang muling i-compile ang mga .less na file, i-save lang ang mga ito at i-reload ang iyong page. Kino-compile sila ng Less.js at iniimbak ang mga ito sa lokal na storage.

Hindi opisyal na Mac app

Ang hindi opisyal na Mac app ay nanonood ng mga direktoryo ng .less na mga file at kino-compile ang code sa mga lokal na file pagkatapos ng bawat pag-save ng isang pinanood na .less na file. Kung gusto mo, maaari mong i-toggle ang mga kagustuhan sa app para sa awtomatikong pagpapaliit at kung saang direktoryo napupunta ang mga pinagsama-samang file.

Higit pang mga app

Crunch

Ang Crunch ay isang mahusay na mukhang LESS editor at compiler na binuo sa Adobe Air.

CodeKit

Ginawa ng parehong tao bilang hindi opisyal na Mac app, ang CodeKit ay isang Mac app na nag-compile ng LESS, SASS, Stylus, at CoffeeScript.

Simple

Mac, Linux, at Windows app para sa pag-drag at drop ng pag-compile ng mas kaunting mga file. Dagdag pa, ang source code ay nasa GitHub .

Gamitin bilang mga static na asset

Mabilis na simulan ang anumang proyekto sa web sa pamamagitan ng pag-drop sa pinagsama-sama o pinaliit na CSS at JS. Mag-layer sa mga custom na istilo nang hiwalay para sa madaling pag-upgrade at pagpapanatili.

I-setup ang istraktura ng file

I-download ang pinakabagong pinagsama-samang Bootstrap at ilagay sa iyong proyekto. Halimbawa, maaaring mayroon kang ganito:

  app/
      mga layout/
      mga template/
  publiko/
      css/
          bootstrap.min.css
      js/
          bootstrap.min.js
      img/
          glyphicons-halflings.png
          glyphicons-halflings-white.png

Gamitin ang template ng starter

Kopyahin ang sumusunod na base HTML upang makapagsimula.

  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.   <katawan>
  8.     <h1> Kumusta, mundo! </h1>
  9.     <!-- Bootstrap -->
  10.     <script src = "public/js/bootstrap.min.js" ></script> 
  11.   </body>
  12. </html>

Layer sa custom na code

Magtrabaho sa iyong custom na CSS, JS, at higit pa kung kinakailangan upang gawing iyong sarili ang Bootstrap gamit ang sarili mong hiwalay na CSS at JS 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.   <katawan>
  10.     <h1> Kumusta, mundo! </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>