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.

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.

Ketahui lebih lanjut

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

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.

Perancah dan pautan

`@bodyBackground`	`@white`	Warna latar belakang halaman
`@textColor`	`@grayDark`	Warna teks lalai untuk seluruh badan, tajuk dan banyak lagi
`@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

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

Meja

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

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

`@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`

Borang

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

Borang keadaan dan makluman

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

Navbar

`@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`

Jatuh turun

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

Unit wira

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

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 menggunakan`margin: auto`
`.ie7-inline-block()`	tiada	Gunakan sebagai tambahan kepada biasa `display: inline-block`untuk mendapatkan sokongan IE7
`.size()`	`@height @width`	Tetapkan ketinggian dan lebar dengan pantas pada satu baris
`.square()`	`@size`	Dibina `.size()`untuk menetapkan lebar dan tinggi sebagai nilai yang sama
`.opacity()`	`@opacity`	Tetapkan, dalam nombor bulat, peratusan kelegapan (cth, "50" atau "75")

Borang

Mixin	Parameter	Penggunaan
`.placeholder()`	`@color: @placeholderText`	Tetapkan `placeholder`warna 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	Buat bekas berpusat mendatar untuk menyimpan kandungan anda
`#grid > .core()`	`@gridColumnWidth, @gridGutterWidth`	Hasilkan sistem grid piksel (bekas, baris dan lajur) dengan n lajur dan x lebar longkang piksel
`#grid > .fluid()`	`@fluidGridColumnWidth, @fluidGridGutterWidth`	Hasilkan sistem grid terkini dengan n lajur dan x % longkang lebar
`#grid > .input()`	`@gridColumnWidth, @gridGutterWidth`	Hasilkan sistem grid piksel untuk `input`elemen, perakaunan untuk padding dan sempadan
`.makeColumn`	`@columns: 1, @offset: 0`	Tukar mana-mana `div`menjadi lajur grid tanpa `.span*`kelas

sifat CSS3

Mixin	Parameter	Penggunaan
`.border-radius()`	`@radius`	Bulat sudut sesuatu elemen. Boleh menjadi nilai tunggal atau empat nilai yang diasingkan ruang
`.box-shadow()`	`@shadow`	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, @y`	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-box`untuk lebar penuh `input`)
`.user-select()`	`@select`	Kawal pemilihan kursor teks pada halaman
`.backface-visibility()`	`@visibility: visible`	Cegah kelipan kandungan apabila menggunakan transformasi CSS 3D
`.resizable()`	`@direction: both`	Jadikan sebarang elemen boleh diubah saiz di sebelah kanan dan bawah
`.content-columns()`	`@columnCount, @columnGap: @gridGutterWidth`	Jadikan kandungan mana-mana elemen menggunakan lajur CSS3

Latar belakang dan kecerunan

Mixin	Parameter	Penggunaan
`#translucent > .background()`	`@color: @white, @alpha: 1`	Beri unsur 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

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

Nod dengan makefile

Pasang pengkompil baris arahan LESS dan uglify-js secara global dengan npm dengan menjalankan arahan berikut:

$ npm install -g less uglify-js

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

Pasang alat baris arahan LESS melalui Node dan jalankan arahan berikut:

$ lessc ./less/bootstrap.less > bootstrap.css

Pastikan anda memasukkan --compressdalam arahan itu jika anda cuba menyimpan beberapa bait!

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.

Dibina dengan KURANG

Kenapa KURANG?

Apa yang disertakan?

Ketahui lebih lanjut

Pembolehubah

Campuran

operasi

Pembolehubah Bootstrap KURANG pembolehubah, nilainya dan garis panduan penggunaan

Perancah dan pautan

Sistem grid

Tipografi

Meja

Warna skala kelabu

Warna aksen

Komponen

Butang

Borang

Borang keadaan dan makluman

Navbar

Jatuh turun

Unit wira

Campuran Bootstrap

Mengenai mixin

Campuran asas

Campuran parametrik

Tambah sendiri dengan mudah

Disertakan campuran

Utiliti

Borang

Tipografi

Sistem grid

sifat CSS3

Latar belakang dan kecerunan

Menyusun Bootstrap dengan KURANG

Alat untuk menyusun

Nod dengan makefile

Barisan arahan

Javascript

Apl Mac tidak rasmi

Lagi apl Mac

Crunch

CodeKit

Kesederhanaan