Extend · Bootstrap ing basa Jawa

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

Node karo makefile

Instal kompiler baris perintah LESS, JSHint, Recess, lan uglify-js sacara global nganggo npm kanthi nglakokake printah ing ngisor iki:

$ npm install -g kurang jshint recess uglify-js

Sawise diinstal mung mbukak makesaka root direktori bootstrap lan sampeyan wis siap.

Kajaba iku, yen sampeyan wis nginstal watchr , sampeyan bisa mbukak make watchbootstrap kanthi otomatis dibangun maneh saben sampeyan ngowahi file ing lib bootstrap (iki ora dibutuhake, mung cara sing gampang).

baris printah

Instal alat baris perintah LESS liwat Node lan jalanake printah ing ngisor iki:

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

Priksa manawa sampeyan kalebu --compressing printah kasebut yen sampeyan nyoba nyimpen sawetara bita!

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 kompiler 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.

<html>
  <sirah>
    <title> Cithakan Bootstrap 101 </judhul>
    <!-- Bootstrap -->
    <link href = "public/css/bootstrap.min.css" rel = "stylesheet" >  
  </head>
  <awak>
    <h1> Halo, jagad! </h1>
    <!-- Bootstrap -->
    <script src = "public/js/bootstrap.min.js" ></script> 
  </awak>
</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.

<html>
  <sirah>
    <title> Cithakan Bootstrap 101 </judhul>
    <!-- Bootstrap -->
    <link href = "public/css/bootstrap.min.css" rel = "stylesheet" >  
    <!-- Proyek -->
    <link href = "public/css/application.css" rel = "stylesheet" >  
  </head>
  <awak>
    <h1> Halo, jagad! </h1>
    <!-- Bootstrap -->
    <script src = "public/js/bootstrap.min.js" ></script> 
    <!-- Proyek -->
    <script src = "public/js/application.js" ></script> 
  </awak>
</html>

Ngluwihi Bootstrap

Dibangun karo LESS