Menggunakan KURANG dengan Bootstrap

Sesuaikan dan perluas Bootstrap dengan LESS , praprosesor CSS, untuk memanfaatkan variabel, mixin, dan lainnya yang digunakan untuk membangun CSS Bootstrap.

Mengapa KURANG?

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.

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.

Variabel

Mengelola warna dan nilai piksel dalam CSS bisa sedikit merepotkan, biasanya penuh dengan salin dan tempel. Namun tidak dengan KURANG—tetapkan warna atau nilai piksel sebagai variabel dan ubah sekali.

campuran

Tiga deklarasi radius batas yang perlu Anda buat di CSS biasa? Sekarang mereka turun ke satu baris dengan bantuan mixin, potongan kode yang dapat Anda gunakan kembali di mana saja.

Operasi

Jadikan grid Anda, terdepan, dan lebih super fleksibel dengan melakukan perhitungan dengan cepat dengan operasi. Lipat gandakan, bagi, tambahkan, dan kurangi cara Anda menuju kewarasan CSS.

Perancah dan tautan

`@bodyBackground`	`@white`	Warna latar halaman
`@textColor`	`@grayDark`	Warna teks default untuk seluruh isi, judul, dan lainnya
`@linkColor`	`#08c`	Warna teks tautan default
`@linkColorHover`	`darken(@linkColor, 15%)`	Warna hover teks tautan default

Sistem jaringan

`@gridColumns`	12
`@gridColumnWidth`	60px
`@gridGutterWidth`	20px
`@fluidGridColumnWidth`	6.382978723%
`@fluidGridGutterWidth`	2.127659574%

Tipografi

`@sansFontFamily`	"Helvetica Neue", Helvetica, Arial, sans-serif
`@serifFontFamily`	`Georgia, "Times New Roman", Times, serif`
`@monoFontFamily`	Menlo, Monako, "Kurir Baru", monospace
`@baseFontSize`	13px	Harus berupa piksel
`@baseFontFamily`	`@sansFontFamily`
`@baseLineHeight`	18px	Harus berupa piksel
`@altFontFamily`	`@serifFontFamily`
`@headingsFontFamily`	`inherit`
`@headingsFontWeight`	`bold`
`@headingsColor`	`inherit`

Tabel

`@tableBackground`	`transparent`
`@tableBackgroundAccent`	`#f9f9f9`
`@tableBackgroundHover`	`#f5f5f5`
`@tableBorder`	`ddd`

Warna abu-abu

`@black`	#000
`@grayDarker`	#222
`@grayDark`	#333
`@gray`	#555
`@grayLight`	#999
`@grayLighter`	#ee
`@white`	#fff

Warna aksen

`@blue`	#049cdb
`@green`	#46a546
`@red`	#9d261d
`@yellow`	#ffc40d
`@orange`	#f89406
`@pink`	#c3325f
`@purple`	#7a43b6

Komponen

Tombol

`@btnBackground`	`@white`
`@btnBackgroundHighlight`	`darken(@white, 10%)`
`@btnBorder`	`darken(@white, 20%)`
`@btnPrimaryBackground`	`@linkColor`
`@btnPrimaryBackgroundHighlight`	`spin(@btnPrimaryBackground, 15%)`
`@btnInfoBackground`	`#5bc0de`
`@btnInfoBackgroundHighlight`	`#2f96b4`
`@btnSuccessBackground`	`#62c462`
`@btnSuccessBackgroundHighlight`	`51a351`
`@btnWarningBackground`	`lighten(@orange, 15%)`
`@btnWarningBackgroundHighlight`	`@orange`
`@btnDangerBackground`	`#ee5f5b`
`@btnDangerBackgroundHighlight`	`#bd362f`
`@btnInverseBackground`	`@gray`
`@btnInverseBackgroundHighlight`	`@grayDarker`

Formulir

`@placeholderText`	`@grayLight`
`@inputBackground`	`@white`
`@inputBorder`	`#ccc`
`@inputBorderRadius`	`3px`
`@inputDisabledBackground`	`@grayLighter`
`@formActionsBackground`	`#f5f5f5`

Status formulir dan peringatan

`@warningText`	#c09853
`@warningBackground`	#f3edd2
`@errorText`	#b94a48
`@errorBackground`	#f2dede
`@successText`	#468847
`@successBackground`	#dff0d8
`@infoText`	#3a87ad
`@infoBackground`	#d9edf7

navigasi

`@navbarHeight`	40px
`@navbarBackground`	`@grayDarker`
`@navbarBackgroundHighlight`	`@grayDark`
`@navbarText`	`@grayLight`
`@navbarLinkColor`	`@grayLight`
`@navbarLinkColorHover`	`@white`
`@navbarLinkColorActive`	`@navbarLinkColorHover`
`@navbarLinkBackgroundHover`	`transparent`
`@navbarLinkBackgroundActive`	`@navbarBackground`
`@navbarSearchBackground`	`lighten(@navbarBackground, 25%)`
`@navbarSearchBackgroundFocus`	`@white`
`@navbarSearchBorder`	`darken(@navbarSearchBackground, 30%)`
`@navbarSearchPlaceholderColor`	`#ccc`
`@navbarBrandColor`	`@navbarLinkColor`

Dropdown

`@dropdownBackground`	`@white`
`@dropdownBorder`	`rgba(0,0,0,.2)`
`@dropdownLinkColor`	`@grayDark`
`@dropdownLinkColorHover`	`@white`
`@dropdownLinkBackgroundHover`	`@linkColor`

Satuan pahlawan

`@heroUnitBackground`	`@grayLighter`
`@heroUnitHeadingColor`	`inherit`
`@heroUnitLeadColor`	`inhereit`

Tentang mixin

Mixin dasar

Mixin dasar pada dasarnya adalah termasuk atau sebagian untuk potongan CSS. Mereka ditulis seperti kelas CSS dan dapat dipanggil di mana saja.

. elemen {
  . clearfix ();
}

Campuran parametrik

Mixin parametrik sama seperti mixin dasar, tetapi juga menerima parameter (karena itu namanya) dengan nilai default opsional.

. elemen {
  . perbatasan - radius ( 4px );
}

Tambahkan milik Anda dengan mudah

Hampir semua mixin Bootstrap disimpan di mixins.less, file .less utilitas yang luar biasa yang memungkinkan Anda menggunakan mixin di salah satu file .less di toolkit.

Jadi, lanjutkan dan gunakan yang sudah ada atau jangan ragu untuk menambahkan milik Anda sesuai kebutuhan.

Termasuk mixin

Keperluan

campuran	Parameter	Penggunaan
`.clearfix()`	tidak ada	Tambahkan ke orang tua mana pun untuk membersihkan pelampung di dalam
`.tab-focus()`	tidak ada	Terapkan gaya fokus Webkit dan garis besar Firefox bulat
`.center-block()`	tidak ada	Pusatkan elemen level blok secara otomatis menggunakan`margin: auto`
`.ie7-inline-block()`	tidak ada	Gunakan selain reguler `display: inline-block`untuk mendapatkan dukungan IE7
`.size()`	`@height @width`	Atur tinggi dan lebar dengan cepat pada satu baris
`.square()`	`@size`	Dibangun `.size()`untuk mengatur lebar dan tinggi sebagai nilai yang sama
`.opacity()`	`@opacity`	Tetapkan, dalam bilangan bulat, persentase opasitas (misalnya, "50" atau "75")

Formulir

campuran	Parameter	Penggunaan
`.placeholder()`	`@color: @placeholderText`	Atur `placeholder`warna teks untuk input

Tipografi

campuran	Parameter	Penggunaan
`#font > #family > .serif()`	tidak ada	Buat elemen menggunakan tumpukan font serif
`#font > #family > .sans-serif()`	tidak ada	Buat elemen menggunakan tumpukan font sans-serif
`#font > #family > .monospace()`	tidak ada	Buat elemen menggunakan tumpukan font monospace
`#font > .shorthand()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Mudah mengatur ukuran font, berat, dan terkemuka
`#font > .serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Atur keluarga font ke serif, dan kontrol ukuran, berat, dan terkemuka
`#font > .sans-serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Atur keluarga font ke sans-serif, dan kontrol ukuran, berat, dan terkemuka
`#font > .monospace()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Atur keluarga font ke monospace, dan kontrol ukuran, berat, dan terkemuka

Sistem jaringan

campuran	Parameter	Penggunaan
`.container-fixed()`	tidak ada	Buat wadah yang dipusatkan secara horizontal untuk menyimpan konten Anda
`#grid > .core()`	`@gridColumnWidth, @gridGutterWidth`	Hasilkan sistem kisi piksel (wadah, baris, dan kolom) dengan n kolom dan talang lebar x piksel
`#grid > .fluid()`	`@fluidGridColumnWidth, @fluidGridGutterWidth`	Hasilkan sistem grid saat ini dengan n kolom dan x % lebar talang
`#grid > .input()`	`@gridColumnWidth, @gridGutterWidth`	Hasilkan sistem kisi piksel untuk `input`elemen, menghitung padding dan border
`.makeColumn`	`@columns: 1, @offset: 0`	Ubah sembarang `div`menjadi kolom kisi tanpa `.span*`kelas

properti CSS3

campuran	Parameter	Penggunaan
`.border-radius()`	`@radius`	Bulatkan sudut suatu elemen. Dapat berupa nilai tunggal atau empat nilai yang dipisahkan oleh spasi
`.box-shadow()`	`@shadow`	Tambahkan bayangan jatuh ke elemen
`.transition()`	`@transition`	Tambahkan efek transisi CSS3 (mis., `all .2s linear`)
`.rotate()`	`@degrees`	Putar elemen n derajat
`.scale()`	`@ratio`	Skala elemen hingga n kali ukuran aslinya
`.translate()`	`@x, @y`	Memindahkan elemen pada bidang x dan y
`.background-clip()`	`@clip`	Pangkas latar belakang elemen (berguna untuk `border-radius`)
`.background-size()`	`@size`	Kontrol ukuran gambar latar belakang melalui CSS3
`.box-sizing()`	`@boxmodel`	Ubah model kotak untuk sebuah elemen (misalnya, `border-box`untuk full-width `input`)
`.user-select()`	`@select`	Kontrol pemilihan kursor teks pada halaman
`.backface-visibility()`	`@visibility: visible`	Cegah kedipan konten saat menggunakan transformasi 3D CSS
`.resizable()`	`@direction: both`	Buat elemen apa pun dapat diubah ukurannya di kanan dan bawah
`.content-columns()`	`@columnCount, @columnGap: @gridGutterWidth`	Buat konten elemen apa pun menggunakan kolom CSS3

Latar belakang dan gradien

campuran	Parameter	Penggunaan
`#translucent > .background()`	`@color: @white, @alpha: 1`	Berikan elemen warna latar belakang yang tembus pandang
`#translucent > .border()`	`@color: @white, @alpha: 1`	Berikan elemen warna perbatasan yang tembus pandang
`#gradient > .vertical()`	`@startColor, @endColor`	Buat gradien latar belakang vertikal lintas-browser
`#gradient > .horizontal()`	`@startColor, @endColor`	Buat gradien latar belakang horizontal lintas-browser
`#gradient > .directional()`	`@startColor, @endColor, @deg`	Buat gradien latar belakang arah lintas-browser
`#gradient > .vertical-three-colors()`	`@startColor, @midColor, @colorStop, @endColor`	Buat gradien latar belakang tiga warna lintas-browser
`#gradient > .radial()`	`@innerColor, @outerColor`	Buat gradien latar belakang radial lintas-browser
`#gradient > .striped()`	`@color, @angle`	Buat gradien latar belakang bergaris lintas-browser
`#gradientBar()`	`@primaryColor, @secondaryColor`	Digunakan untuk tombol untuk menetapkan gradien dan batas yang sedikit lebih gelap

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 dan uglify-js secara global dengan npm dengan menjalankan perintah berikut:

$npm install -g less 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.

Dibangun dengan KURANG

Mengapa KURANG?

Apa yang disertakan?

Belajarlah lagi

Variabel

campuran

Operasi

Variabel bootstrap variabel KURANG, nilainya, dan pedoman penggunaan

Perancah dan tautan

Sistem jaringan

Tipografi

Tabel

Warna abu-abu

Warna aksen

Komponen

Tombol

Formulir

Status formulir dan peringatan

navigasi

Dropdown

Satuan pahlawan

Campuran bootstrap

Tentang mixin

Mixin dasar

Campuran parametrik

Tambahkan milik Anda dengan mudah

Termasuk mixin

Keperluan

Formulir

Tipografi

Sistem jaringan

properti CSS3

Latar belakang dan gradien

Mengkompilasi Bootstrap dengan KURANG

Alat untuk mengkompilasi

Simpul dengan makefile

Garis komando

Javascript

Aplikasi Mac tidak resmi

Aplikasi Mac lainnya

Kegentingan

CodeKit

sederhana