Ngluwihi Bootstrap

Extend Bootstrap kanggo njupuk kauntungan saka kalebu gaya lan komponen, uga KURANG variabel lan mixins.

Kepala munggah! Dokumen iki kanggo v2.3.2, sing ora didhukung kanthi resmi. Priksa versi paling anyar saka Bootstrap!
KURANG CSS

Bootstrap digawe nganggo LESS ing inti, basa stylesheet dinamis sing digawe dening kanca apik kita, Alexis Sellier . Iku nggawe CSS basis sistem ngembangaken luwih cepet, luwih gampang, lan luwih nyenengake.

Kenapa KURANG?

Salah sawijining pencipta Bootstrap nulis postingan blog cepet babagan iki , dirangkum ing kene:

  • Bootstrap kompilasi luwih cepet ~ 6x luwih cepet karo Kurang dibandhingake Sass
  • Kurang ditulis ing JavaScript, nggawe luwih gampang kanggo kita nyilem lan patch dibandhingake karo Ruby karo Sass.
  • Kurang luwih; kita pengin aran kaya nulis CSS lan nggawe Bootstrap bisa dicedhaki kabeh.

Apa sing kalebu?

Minangka extension saka CSS, LESS kalebu variabel, mixins kanggo reusable snippet kode, operasi kanggo matematika prasaja, nesting, lan malah fungsi werna.

Sinau luwih lengkap

Bukak situs web resmi ing http://lesscss.org/ kanggo mangerteni sing luwih lengkap.

Amarga CSS kita ditulis nganggo Kurang lan nggunakake variabel lan campuran, mula kudu dikompilasi kanggo implementasi produksi pungkasan. Mangkene carane.

Cathetan: Yen sampeyan ngirim panjaluk tarik menyang GitHub kanthi CSS sing diowahi, sampeyan kudu nglumpukake CSS liwat salah sawijining metode kasebut.

Piranti kanggo kompilasi

baris printah

Tindakake pandhuan ing readme proyek ing GitHub kanggo kompilasi liwat baris perintah.

JavaScript

Download Less.js paling anyar lan lebokake path menyang (lan Bootstrap) ing <head>.

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

Kanggo ngumpulake maneh file .kurang, mung simpen lan muat ulang kaca sampeyan. Less.js nglumpukake lan nyimpen ing panyimpenan lokal.

Aplikasi Mac ora resmi

Aplikasi Mac ora resmi nonton direktori file .less lan nglumpukake kode menyang file lokal sawise saben nyimpen file .less sing ditonton. Yen sampeyan seneng, sampeyan bisa milih pilihan ing app kanggo minifying otomatis lan ing direktori file sing dikompilasi.

Aplikasi liyane

Crunch

Crunch minangka editor lan kompilator KURANG sing apik sing dibangun ing Adobe Air.

KodeKit

Digawe dening wong sing padha karo aplikasi Mac sing ora resmi, CodeKit minangka aplikasi Mac sing nyusun LESS, SASS, Stylus, lan CoffeeScript.

prasaja

Aplikasi Mac, Linux, lan Windows kanggo nyeret lan nyelehake file sing KURANG. Kajaba iku, kode sumber ana ing GitHub .

Miwiti proyek web kanthi cepet kanthi nyelehake CSS lan JS sing dikompilasi utawa dikurangi. Lapisan ing gaya khusus kanthi kapisah kanggo gampang nganyarke lan pangopènan maju.

Setel struktur file

Download Bootstrap kompilasi paling anyar lan selehake menyang proyek sampeyan. Contone, sampeyan bisa uga duwe kaya iki:

  app/
      tata letak/
      cithakan/
  umum/
      css/
          bootstrap.min.css
      js/
          bootstrap.min.js
      img/
          glyphicons-halflings.png
          glyphicons-halflings-white.png

Gunakake template wiwitan

Salin HTML dhasar ing ngisor iki kanggo miwiti.

  1. <html>
  2. <sirah>
  3. <title> Cithakan Bootstrap 101 </judhul>
  4. <!-- Bootstrap -->
  5. <link href = "public/css/bootstrap.min.css" rel = "stylesheet" >
  6. </head>
  7. <awak>
  8. <h1> Halo, jagad! </h1>
  9. <!-- Bootstrap -->
  10. <script src = "public/js/bootstrap.min.js" ></script>
  11. </awak>
  12. </html>

Lapisan ing kode khusus

Nggarap CSS khusus, JS, lan liya-liyane yen perlu kanggo nggawe Bootstrap dhewe nganggo file CSS lan JS sing kapisah.

  1. <html>
  2. <sirah>
  3. <title> Cithakan Bootstrap 101 </judhul>
  4. <!-- Bootstrap -->
  5. <link href = "public/css/bootstrap.min.css" rel = "stylesheet" >
  6. <!-- Proyek -->
  7. <link href = "public/css/application.css" rel = "stylesheet" >
  8. </head>
  9. <awak>
  10. <h1> Halo, jagad! </h1>
  11. <!-- Bootstrap -->
  12. <script src = "public/js/bootstrap.min.js" ></script>
  13. <!-- Proyek -->
  14. <script src = "public/js/application.js" ></script>
  15. </awak>
  16. </html>