Menggunakan KURANG dengan Bootstrap
Sesuaikan dan lanjutkan Bootstrap dengan LESS , prapemproses CSS, untuk memanfaatkan pembolehubah, campuran dan banyak lagi yang digunakan untuk membina CSS Bootstrap.
Dibina dengan KURANG
Kenapa KURANG?
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.
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.
Pembolehubah
Menguruskan warna dan nilai piksel dalam CSS boleh menjadi agak menyusahkan, biasanya penuh dengan salin dan tampal. Bukan dengan KURANG sekalipun—tetapkan warna atau nilai piksel sebagai pembolehubah dan tukar sekali.
Campuran
Tiga pengisytiharan jejari sempadan yang anda perlu buat dalam CSS biasa? Kini mereka turun ke satu baris dengan bantuan mixin, coretan kod yang boleh anda gunakan semula di mana-mana sahaja.
operasi
Jadikan grid anda, terkemuka dan lebih fleksibel dengan melakukan pengiraan dengan cepat dengan operasi. Darab, bahagi, tambah dan tolak cara anda ke kewarasan CSS.
Pembolehubah Bootstrap KURANG pembolehubah, nilainya dan garis panduan penggunaan
Hiperpautan
@linkColor |
#08c | Warna teks pautan lalai | |
@linkColorHover |
darken(@linkColor, 15%) |
Warna tuding teks pautan lalai |
Sistem grid
@gridColumns |
12 |
@gridColumnWidth |
60px |
@gridGutterWidth |
20px |
@fluidGridColumnWidth |
6.382978723% |
@fluidGridGutterWidth |
2.127659574% |
Tipografi
@baseFontSize |
13px |
@baseFontFamily |
"Helvetica Neue", Helvetica, Arial, sans-serif |
@baseLineHeight |
18px |
Warna skala kelabu
@black |
#000 | |
@grayDarker |
#222 | |
@grayDark |
#333 | |
@gray |
#555 | |
@grayLight |
#999 | |
@grayLighter |
#eee | |
@white |
#F F F |
Warna aksen
@blue |
#049cdb | |
@green |
#46a546 | |
@red |
#9d261d | |
@yellow |
#ffc40d | |
@orange |
#f89406 | |
@pink |
#c3325f | |
@purple |
#7a43b6 |
Komponen
Butang
@primaryButtonBackground |
@linkColor |
Borang
@placeholderText |
@grayLight |
Navbar
@navbarHeight |
40px | |
@navbarBackground |
@grayDarker |
|
@navbarBackgroundHighlight |
@grayDark |
|
@navbarText |
@grayLight |
|
@navbarLinkColor |
@grayLight |
|
@navbarLinkColorHover |
@white |
Borang keadaan dan makluman
@warningText |
#c09853 | |
@warningBackground |
#f3edd2 | |
@errorText |
#b94a48 | |
@errorBackground |
#f2dede | |
@successText |
#468847 | |
@successBackground |
#dff0d8 | |
@infoText |
#3a87ad | |
@infoBackground |
#d9edf7 |
Campuran Bootstrap
Mengenai mixin
Campuran asas
Campuran asas pada asasnya ialah termasuk atau separa untuk coretan CSS. Mereka ditulis seperti kelas CSS dan boleh dipanggil di mana-mana sahaja.
- . elemen {
- . clearfix ();
- }
Campuran parametrik
Campuran parametrik sama seperti campuran asas, tetapi ia juga menerima parameter (oleh itu namanya) dengan nilai lalai pilihan.
- . elemen {
- . sempadan - jejari ( 4px );
- }
Tambah sendiri dengan mudah
Hampir semua mixin Bootstrap disimpan dalam mixins.less, fail .less utiliti yang hebat yang membolehkan anda menggunakan mixin dalam mana-mana fail .less dalam kit alat.
Jadi, teruskan dan gunakan yang sedia ada atau jangan ragu untuk menambah sendiri seperti yang anda perlukan.
Disertakan campuran
Utiliti
| Mixin | Parameter | Penggunaan |
|---|---|---|
.clearfix() |
tiada | Tambahkan pada mana-mana ibu bapa untuk membersihkan terapung di dalamnya |
.tab-focus() |
tiada | Gunakan gaya fokus Webkit dan garis besar Firefox bulat |
.center-block() |
tiada | Auto pusat elemen peringkat blok menggunakanmargin: auto |
.ie7-inline-block() |
tiada | Gunakan sebagai tambahan kepada biasa display: inline-blockuntuk mendapatkan sokongan IE7 |
.size() |
@height: 5px, @width: 5px |
Tetapkan ketinggian dan lebar dengan pantas pada satu baris |
.square() |
@size: 5px |
Dibina .size()untuk menetapkan lebar dan tinggi sebagai nilai yang sama |
.opacity() |
@opacity: 100 |
Tetapkan, dalam nombor bulat, peratusan kelegapan (cth, "50" atau "75") |
Borang
| Mixin | Parameter | Penggunaan |
|---|---|---|
.placeholder() |
@color: @placeholderText |
Tetapkan placeholderwarna teks untuk input |
Tipografi
| Mixin | Parameter | Penggunaan |
|---|---|---|
#font > #family > .serif() |
tiada | Buat elemen menggunakan timbunan fon serif |
#font > #family > .sans-serif() |
tiada | Buat elemen menggunakan timbunan fon sans-serif |
#font > #family > .monospace() |
tiada | Buat elemen menggunakan timbunan fon monospace |
#font > .shorthand() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Tetapkan saiz fon, berat dan pendahuluan dengan mudah |
#font > .serif() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Tetapkan keluarga fon kepada serif, dan kawal saiz, berat dan pendahuluan |
#font > .sans-serif() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Tetapkan keluarga fon kepada sans-serif, dan kawal saiz, berat dan pendahuluan |
#font > .monospace() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Tetapkan keluarga fon kepada monospace, dan kawal saiz, berat dan pendahuluan |
Sistem grid
| Mixin | Parameter | Penggunaan |
|---|---|---|
.container-fixed() |
tiada | Sediakan bekas lebar tetap (set dengan @siteWidth) untuk menyimpan kandungan anda |
.columns() |
@columns: 1 |
Bina lajur grid yang merangkumi sebarang bilangan lajur (lalai kepada 1 lajur) |
.offset() |
@columns: 1 |
Mengimbangi lajur grid dengan jidar kiri yang menjangkau sebarang bilangan lajur |
.gridColumn() |
tiada | Jadikan elemen terapung seperti lajur grid |
sifat CSS3
| Mixin | Parameter | Penggunaan |
|---|---|---|
.border-radius() |
@radius: 5px |
Bulat sudut sesuatu elemen. Boleh menjadi nilai tunggal atau empat nilai yang diasingkan ruang |
.box-shadow() |
@shadow: 0 1px 3px rgba(0,0,0,.25) |
Tambahkan bayang jatuh pada elemen |
.transition() |
@transition |
Tambah kesan peralihan CSS3 (cth, all .2s linear) |
.rotate() |
@degrees |
Putar unsur n darjah |
.scale() |
@ratio |
Skalakan elemen kepada n kali saiz asalnya |
.translate() |
@x: 0, @y: 0 |
Gerakkan elemen pada satah x dan y |
.background-clip() |
@clip |
Pangkas latar belakang elemen (berguna untuk border-radius) |
.background-size() |
@size |
Kawal saiz imej latar belakang melalui CSS3 |
.box-sizing() |
@boxmodel |
Tukar model kotak untuk elemen (cth, border-boxuntuk lebar penuh input) |
.user-select() |
@select |
Kawal pemilihan kursor teks pada halaman |
.resizable() |
@direction: both |
Jadikan sebarang elemen boleh diubah saiz di sebelah kanan dan bawah |
.content-columns() |
@columnCount, @columnGap: @gridColumnGutter |
Jadikan kandungan mana-mana elemen menggunakan lajur CSS3 |
Latar belakang dan kecerunan
| Mixin | Parameter | Penggunaan |
|---|---|---|
.#translucent > .background() |
@color: @white, @alpha: 1 |
Berikan elemen warna latar belakang lut sinar |
.#translucent > .border() |
@color: @white, @alpha: 1 |
Beri unsur warna jidar lut sinar |
.#gradient > .vertical() |
@startColor, @endColor |
Buat kecerunan latar belakang menegak silang penyemak imbas |
.#gradient > .horizontal() |
@startColor, @endColor |
Buat kecerunan latar belakang mendatar silang penyemak imbas |
.#gradient > .directional() |
@startColor, @endColor, @deg |
Buat kecerunan latar belakang berarah merentas penyemak imbas |
.#gradient > .vertical-three-colors() |
@startColor, @midColor, @colorStop, @endColor |
Buat kecerunan latar belakang tiga warna pelayar silang |
.#gradient > .radial() |
@innerColor, @outerColor |
Buat kecerunan latar belakang jejari silang pelayar |
.#gradient > .striped() |
@color, @angle |
Cipta kecerunan latar belakang berjalur silang pelayar |
.#gradientBar() |
@primaryColor, @secondaryColor |
Digunakan untuk butang untuk menetapkan sempadan kecerunan dan lebih gelap sedikit |
Menyusun Bootstrap dengan KURANG
Alat untuk menyusun
Nod dengan makefile
Pasang pengkompil baris arahan LESS secara global dengan npm dengan menjalankan arahan berikut:
$ npm install -g less
Setelah dipasang hanya jalankan makedari akar direktori bootstrap anda dan anda sudah bersedia.
Selain itu, jika anda telah memasang watchr , anda mungkin menjalankan make watchuntuk membina semula bootstrap secara automatik setiap kali anda mengedit fail dalam lib bootstrap (ini tidak diperlukan, hanya kaedah mudah).
Barisan arahan
Install the LESS command line tool via Node and run the following command:
$ lessc ./lib/bootstrap.less > bootstrap.css
Be sure to include --compress in that command if you're trying to save some bytes!
Javascript
Download the latest Less.js and include the path to it (and Bootstrap) in the <head>.
<link rel="stylesheet/less" href="/path/to/bootstrap.less"> <script src="/path/to/less.js"></script>
To recompile the .less files, just save them and reload your page. Less.js compiles them and stores them in local storage.
Unofficial Mac app
The unofficial Mac app watches directories of .less files and compiles the code to local files after every save of a watched .less file.
If you like, you can toggle preferences in the app for automatic minifying and which directory the compiled files end up in.
More Mac apps
Crunch
Crunch is a great looking LESS editor and compiler built on Adobe Air.
CodeKit
Created by the same guy as the unofficial Mac app, CodeKit is a Mac app that compiles LESS, SASS, Stylus, and CoffeeScript.
Simpless
Mac, Linux, and PC app for drag and drop compiling of LESS files. Plus, the source code is on GitHub.