Memanjangkan Bootstrap

Panjangkan Bootstrap untuk memanfaatkan gaya dan komponen yang disertakan, serta KURANG pembolehubah dan campuran.

Angkat kepala! Dokumen ini adalah untuk v2.3.2, yang tidak lagi disokong secara rasmi. Lihat versi terbaharu Bootstrap!
KURANG CSS

Bootstrap dibuat dengan LESS pada terasnya, bahasa lembaran gaya dinamik yang dicipta oleh rakan baik kami, Alexis Sellier . Ia menjadikan pembangunan CSS berasaskan sistem lebih pantas, lebih mudah dan lebih menyeronokkan.

Kenapa KURANG?

Salah seorang pencipta Bootstrap menulis catatan blog pantas tentang ini , diringkaskan di sini:

  • Bootstrap menyusun lebih pantas ~6x lebih pantas dengan Kurang berbanding Sass
  • Kurang ditulis dalam JavaScript, menjadikannya lebih mudah kepada kami untuk menyelam dan menampal berbanding Ruby dengan Sass.
  • Sedikit tetapi lebih dari cukup; kami mahu berasa seperti sedang menulis CSS dan menjadikan Bootstrap mudah didekati oleh semua orang.

Apa yang disertakan?

Sebagai lanjutan CSS, LESS termasuk pembolehubah, campuran untuk coretan kod yang boleh diguna semula, operasi untuk matematik mudah, sarang dan juga fungsi warna.

Ketahui lebih lanjut

Lawati tapak web rasmi di http://lesscss.org/ untuk mengetahui lebih lanjut.

Memandangkan CSS kami ditulis dengan Kurang dan menggunakan pembolehubah dan campuran, ia perlu disusun untuk pelaksanaan pengeluaran akhir. Ini caranya.

Nota: Jika anda menyerahkan permintaan tarik ke GitHub dengan CSS yang diubah suai, anda mesti menyusun semula CSS melalui mana-mana kaedah ini.

Alat untuk menyusun

Barisan arahan

Ikut arahan dalam projek readme pada GitHub untuk menyusun melalui baris arahan.

JavaScript

Muat turun Less.js terkini dan sertakan laluan kepadanya (dan Bootstrap) dalam <head>.

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

Untuk menyusun semula fail .less, cuma simpan dan muat semula halaman anda. Less.js menyusunnya dan menyimpannya dalam storan setempat.

Apl Mac tidak rasmi

Apl Mac tidak rasmi menonton direktori fail .less dan menyusun kod ke fail tempatan selepas setiap menyimpan fail .less yang ditonton. Jika anda suka, anda boleh menogol pilihan dalam apl untuk pengecilan automatik dan direktori mana fail yang dikompilasi berakhir.

Lebih banyak apl

Crunch

Crunch ialah penyunting dan pengkompil KURANG yang kelihatan hebat dibina pada Adobe Air.

CodeKit

Dicipta oleh lelaki yang sama seperti apl Mac tidak rasmi, CodeKit ialah apl Mac yang menyusun LESS, SASS, Stylus dan CoffeeScript.

Kesederhanaan

Apl Mac, Linux dan Windows untuk seret dan lepas menyusun fail KURANG. Selain itu, kod sumber ada pada GitHub .

Mulakan mana-mana projek web dengan pantas dengan memasukkan CSS dan JS yang disusun atau diperkecil. Lapisan pada gaya tersuai secara berasingan untuk peningkatan mudah dan penyelenggaraan bergerak ke hadapan.

Sediakan struktur fail

Muat turun Bootstrap terkumpul terkini dan letakkan ke dalam projek anda. Sebagai contoh, anda mungkin mempunyai sesuatu seperti ini:

  aplikasi/
      susun atur/
      templat/
  awam/
      css/
          bootstrap.min.css
      js/
          bootstrap.min.js
      img/
          glyphicons-halflings.png
          glyphicons-halflings-white.png

Gunakan templat permulaan

Salin HTML asas berikut untuk bermula.

  1. <html>
  2. <kepala>
  3. <title> Templat Bootstrap 101 </title>
  4. <!-- Bootstrap -->
  5. <link href = "public/css/bootstrap.min.css" rel = "stylesheet" >
  6. </head>
  7. <badan>
  8. <h1> Helo, dunia! </h1>
  9. <!-- Bootstrap -->
  10. <script src = "public/js/bootstrap.min.js" ></script>
  11. </body>
  12. </html>

Lapisan pada kod tersuai

Bekerja dalam CSS tersuai anda, JS dan banyak lagi yang perlu untuk menjadikan Bootstrap milik anda dengan fail CSS dan JS anda yang berasingan.

  1. <html>
  2. <kepala>
  3. <title> Templat Bootstrap 101 </title>
  4. <!-- Bootstrap -->
  5. <link href = "public/css/bootstrap.min.css" rel = "stylesheet" >
  6. <!-- Projek -->
  7. <link href = "public/css/application.css" rel = "stylesheet" >
  8. </head>
  9. <badan>
  10. <h1> Helo, dunia! </h1>
  11. <!-- Bootstrap -->
  12. <script src = "public/js/bootstrap.min.js" ></script>
  13. <!-- Projek -->
  14. <script src = "public/js/application.js" ></script>
  15. </body>
  16. </html>