Perpanjang · Bootstrap dalam bahasa Indonesia

Bootstrap dibuat dengan KURANG pada intinya, bahasa stylesheet dinamis yang dibuat oleh teman baik kami, Alexis Sellier . Itu membuat pengembangan CSS berbasis sistem lebih cepat, lebih mudah, dan lebih menyenangkan.

Mengapa KURANG?

Salah satu pembuat Bootstrap menulis posting blog singkat tentang ini , dirangkum di sini:

Bootstrap mengkompilasi lebih cepat ~6x lebih cepat dengan Kurang dibandingkan dengan Sass
Lebih sedikit yang ditulis dalam JavaScript, memudahkan kita untuk menyelam dan menambal dibandingkan dengan Ruby dengan Sass.
Kurang itu lebih; kami ingin merasa seperti sedang menulis CSS dan membuat Bootstrap dapat didekati oleh semua orang.

Apa yang disertakan?

Sebagai perpanjangan dari CSS, KURANG menyertakan variabel, mixin untuk potongan kode yang dapat digunakan kembali, operasi untuk matematika sederhana, bersarang, dan bahkan fungsi warna.

Belajarlah lagi

Kunjungi situs web resmi di http://lesscss.org/ untuk mempelajari lebih lanjut.

Karena CSS kami ditulis dengan Less dan menggunakan variabel dan mixin, CSS perlu dikompilasi untuk implementasi produksi akhir. Begini caranya.

Catatan: Jika Anda mengirimkan permintaan tarik ke GitHub dengan CSS yang dimodifikasi, Anda harus mengkompilasi ulang CSS melalui salah satu metode ini.

Alat untuk mengkompilasi

Simpul dengan makefile

Instal kompiler baris perintah KURANG, JSHint, Recess, dan uglify-js secara global dengan npm dengan menjalankan perintah berikut:

$npm install -g less jshint reses uglify-js

Setelah terinstal, jalankan saja makedari root direktori bootstrap Anda dan Anda sudah siap.

Selain itu, jika Anda telah menginstal watchr , Anda dapat menjalankan make watchagar bootstrap dibangun kembali secara otomatis setiap kali Anda mengedit file di lib bootstrap (ini tidak diperlukan, hanya metode praktis).

Garis komando

Instal alat baris perintah KURANG melalui Node dan jalankan perintah berikut:

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

Pastikan untuk menyertakan --compressperintah itu jika Anda mencoba menyimpan beberapa byte!

JavaScript

Unduh Less.js terbaru dan sertakan jalurnya (dan Bootstrap) di file <head>.

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

Untuk mengkompilasi ulang file .less, simpan saja dan muat ulang halaman Anda. Less.js mengkompilasinya dan menyimpannya di penyimpanan lokal.

Aplikasi Mac tidak resmi

Aplikasi Mac tidak resmi mengawasi direktori file .less dan mengkompilasi kode ke file lokal setelah setiap penyimpanan file .less yang ditonton. Jika mau, Anda dapat beralih preferensi di aplikasi untuk pengecilan otomatis dan direktori tempat file yang dikompilasi berakhir.

Aplikasi tambahan lainnya

Kegentingan

Crunch adalah editor dan kompiler KURANG yang tampak hebat yang dibangun di atas Adobe Air.

CodeKit

Dibuat oleh orang yang sama dengan aplikasi Mac tidak resmi, CodeKit adalah aplikasi Mac yang mengkompilasi KURANG, SASS, Stylus, dan CoffeeScript.

sederhana

Aplikasi Mac, Linux, dan Windows untuk drag and drop kompilasi file KURANG. Plus, kode sumbernya ada di GitHub .

Mulai proyek web apa pun dengan cepat dengan memasukkan CSS dan JS yang dikompilasi atau diperkecil. Lapisi gaya khusus secara terpisah untuk peningkatan dan pemeliharaan yang mudah di masa mendatang.

Siapkan struktur file

Unduh Bootstrap terkompilasi terbaru dan tempatkan ke dalam proyek Anda. Misalnya, Anda mungkin memiliki sesuatu seperti ini:

  aplikasi/
      tata letak/
      templat/
  publik/
      css/
          bootstrap.min.css
      js/
          bootstrap.min.js
      img/
          glyphicons-halflings.png
          glyphicons-halflings-white.png

Gunakan template pemula

Salin HTML dasar berikut untuk memulai.

<html>
  <kepala>
    <title> Template Bootstrap 101 </title>
    <!-- Bootstrap -->
    <link href = "public/css/bootstrap.min.css" rel = "stylesheet" >  
  </head>
  <tubuh>
    <h1> Halo, dunia! </h1>
    <!-- Bootstrap -->
    <script src = "public/js/bootstrap.min.js" ></script> 
  </tubuh>
</html>

Lapisan pada kode khusus

Bekerja di CSS kustom Anda, JS, dan lainnya yang diperlukan untuk membuat Bootstrap Anda sendiri dengan file CSS dan JS Anda sendiri yang terpisah.

<html>
  <kepala>
    <title> Template Bootstrap 101 </title>
    <!-- Bootstrap -->
    <link href = "public/css/bootstrap.min.css" rel = "stylesheet" >  
    <!-- Proyek -->
    <link href = "public/css/application.css" rel = "stylesheet" >  
  </head>
  <tubuh>
    <h1> Halo, dunia! </h1>
    <!-- Bootstrap -->
    <script src = "public/js/bootstrap.min.js" ></script> 
    <!-- Proyek -->
    <script src = "public/js/application.js" ></script> 
  </tubuh>
</html>

Memperpanjang Bootstrap

Dibangun dengan KURANG