Ngalegaan Bootstrap

Manjangkeun Bootstrap pikeun ngamangpaatkeun gaya sareng komponén anu kalebet, ogé variabel KURANG sareng campuran.

Mastaka tegak! Dokumén ieu kanggo v2.3.2, anu henteu dirojong sacara resmi. Pariksa versi panganyarna tina Bootstrap!
KURANG CSS

Bootstrap dijieun kalawan KURANG dina inti na, basa stylesheet dinamis dijieun ku sobat alus urang, Alexis Sellier . Éta ngajantenkeun ngembangkeun CSS dumasar sistem langkung gancang, langkung gampang, sareng langkung pikaresepeun.

Naha KURANG?

Salah sahiji panyipta Bootstrap nyerat tulisan blog gancang ngeunaan ieu , diringkeskeun di dieu:

  • Bootstrap nyusun langkung gancang ~ 6x langkung gancang sareng Kurang dibandingkeun sareng Sass
  • Kirang ditulis dina JavaScript, sahingga leuwih gampang pikeun urang teuleum di na patch dibandingkeun Ruby kalawan Sass.
  • Kurang leuwih; urang hayang ngarasa kawas urang nulis CSS jeung nyieun Bootstrap dideukeutan ka sadaya.

Naon kaasup?

Salaku penyuluhan CSS, KURANG ngawengku variabel, mixins pikeun snippét reusable kode, operasi pikeun matematik basajan, nyarang, komo fungsi warna.

Diajar deui

Nganjang ka ramatloka resmi di http://lesscss.org/ pikeun neuleuman leuwih.

Kusabab CSS kami ditulis kalawan Kurang tur utilizes variabel sarta mixins, perlu disusun pikeun palaksanaan produksi final. Kieu kumaha.

Catetan: Upami anjeun ngirimkeun pamundut tarik ka GitHub nganggo CSS anu dirobih, anjeun kedah nyusun ulang CSS nganggo salah sahiji metodeu ieu.

Parabot pikeun nyusun

Garis paréntah

Turutan parentah dina proyék readme on GitHub pikeun compiling via garis paréntah.

JavaScript

Unduh Less.js panganyarna sareng kalebet jalur ka dinya (sareng Bootstrap) dina file <head>.

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

Pikeun recompile file .less, ngan simpen aranjeunna sarta reload kaca anjeun. Less.js compiles aranjeunna sarta nyimpen aranjeunna dina gudang lokal.

Aplikasi Mac teu resmi

Aplikasi Mac teu resmi ningali diréktori file .less sareng nyusun kode kana file lokal saatos unggal nyimpen file .less anu diawaskeun. Upami anjeun resep, anjeun tiasa ngagentos préferénsi dina aplikasi pikeun ngaminimalkeun otomatis sareng diréktori mana file anu disusun.

Langkung seueur aplikasi

Krérét

Crunch mangrupikeun redaktur KURANG anu saé sareng kompiler anu diwangun dina Adobe Air.

CodeKit

Dijieun ku lalaki anu sami sareng aplikasi Mac anu henteu resmi, CodeKit mangrupikeun aplikasi Mac anu nyusun LESS, SASS, Stylus, sareng CoffeeScript.

Basajan

Aplikasi Mac, Linux, sareng Windows pikeun nyered sareng ngaleupas kompilasi file KURANG. Tambih Deui, kodeu sumber aya dina GitHub .

Gancang ngamimitian naon waé proyék wéb ku ngagentoskeun CSS sareng JS anu disusun atanapi diminimalkeun. Lapisan dina gaya custom misah pikeun upgrades gampang tur pamaliharaan pindah ka hareup.

Setup struktur file

Unduh Bootstrap kompilasi panganyarna sareng tempatkeun kana proyék anjeun. Salaku conto, anjeun tiasa gaduh anu sapertos kieu:

  aplikasi/
      tata perenah/
      témplat/
  umum/
      css/
          bootstrap.min.css
      js/
          bootstrap.min.js
      img/
          glyphicons-halflings.png
          glyphicons-halflings-white.png

Ngagunakeun template starter

Salin HTML dasar di handap ieu pikeun ngamimitian.

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

Lapisan dina kode custom

Gawé dina CSS khusus anjeun, JS, sareng seueur deui upami diperyogikeun pikeun ngajantenkeun Bootstrap anjeun nyalira nganggo file CSS sareng JS anjeun nyalira.

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