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

KURANG CSS

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
@@dropdownDividerTop #e5e5e5
@@dropdownDividerBottom @white

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.

  1. . elemen {
  2. . clearfix ();
  3. }

Campuran parametrik

Campuran parametrik sama seperti campuran asas, tetapi ia juga menerima parameter (oleh itu namanya) dengan nilai lalai pilihan.

  1. . elemen {
  2. . sempadan - jejari ( 4px );
  3. }

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 @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 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 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 peratus dengan n lajur dan x % longkang lebar
#grid > .input() @gridColumnWidth, @gridGutterWidth Hasilkan sistem grid piksel untuk inputelemen, perakaunan untuk padding dan sempadan
.makeColumn @columns: 1, @offset: 0 Tukar mana-mana divmenjadi 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-boxuntuk 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
.hyphens() @mode: auto Sempang CSS3 apabila anda mahukannya (termasuk word-wrap: break-word)

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, JSHint, Recess, dan uglify-js secara global dengan npm dengan menjalankan arahan berikut:

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

Lagi apl Mac

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 PC untuk seret dan lepas menyusun fail KURANG. Selain itu, kod sumber ada pada GitHub .