Memperpanjang Bootstrap

Perluas Bootstrap untuk memanfaatkan gaya dan komponen yang disertakan, serta variabel dan mixin KURANG.

Perhatian! Dokumen ini untuk v2.3.2, yang tidak lagi didukung secara resmi. Lihat versi terbaru dari Bootstrap!
KURANG CSS

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

Garis komando

Ikuti instruksi dalam readme proyek di GitHub untuk kompilasi melalui baris perintah.

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.

  1. <html>
  2. <kepala>
  3. <title> Template Bootstrap 101 </title>
  4. <!-- Bootstrap -->
  5. <link href = "public/css/bootstrap.min.css" rel = "stylesheet" >
  6. </head>
  7. <tubuh>
  8. <h1> Halo, dunia! </h1>
  9. <!-- Bootstrap -->
  10. <script src = "public/js/bootstrap.min.js" ></script>
  11. </tubuh>
  12. </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.

  1. <html>
  2. <kepala>
  3. <title> Template Bootstrap 101 </title>
  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. <tubuh>
  10. <h1> Halo, dunia! </h1>
  11. <!-- Bootstrap -->
  12. <script src = "public/js/bootstrap.min.js" ></script>
  13. <!-- Proyek -->
  14. <script src = "public/js/application.js" ></script>
  15. </tubuh>
  16. </html>