Bootstrap'in CSS'sini oluşturmak için kullanılan değişkenlerden, karışımlardan ve daha fazlasından yararlanmak için Bootstrap'i bir CSS ön işlemcisi olan LESS ile özelleştirin ve genişletin .
Bootstrap, özünde LESS ile yapılır, iyi arkadaşımız Alexis Sellier tarafından oluşturulan dinamik bir stil sayfası dilidir . Sistem tabanlı CSS geliştirmeyi daha hızlı, daha kolay ve daha eğlenceli hale getirir.
LESS, CSS'nin bir uzantısı olarak değişkenler, yeniden kullanılabilir kod parçacıkları için karışımlar, basit matematik işlemleri, yuvalama ve hatta renk işlevleri içerir.
Daha fazla bilgi için http://lesscss.org/ adresindeki resmi web sitesini ziyaret edin .
CSS'de renkleri ve piksel değerlerini yönetmek biraz zahmetli olabilir, genellikle kopyala ve yapıştırla doludur. LESS ile değil—renkleri veya piksel değerlerini değişkenler olarak atayın ve bir kez değiştirin.
Normal ol 'CSS'de yapmanız gereken bu üç sınır yarıçapı bildirimi? Artık her yerde yeniden kullanabileceğiniz karışımlar, kod parçacıkları yardımıyla tek satıra indiler.
İşlemlerle matematiği anında yaparak ızgaranızı, öncü ve daha esnek hale getirin. CSS akıl sağlığı için çoklu, bölme, ekleme ve çıkarma.
@linkColor |
#08c | Varsayılan bağlantı metni rengi | |
@linkColorHover |
darken(@linkColor, 15%) |
Varsayılan bağlantı metni vurgulu rengi |
@gridColumns |
12 |
@gridColumnWidth |
60 piksel |
@gridGutterWidth |
20 piksel |
@fluidGridColumnWidth |
6.382978723% |
@fluidGridGutterWidth |
2.127659574% |
@baseFontSize |
13 piksel | |
@baseFontFamily |
"Helvetica Neue", Helvetica, Arial, sans-serif |
|
@baseLineHeight |
18 piksel |
@black |
#000 | |
@grayDarker |
#222 | |
@grayDark |
#333 | |
@gray |
#555 | |
@grayLight |
#999 | |
@grayLighter |
#eee | |
@white |
#fff |
@blue |
#049cdb | |
@green |
#46a546 | |
@red |
#9d261d | |
@yellow |
#ffc40d | |
@orange |
#f89406 | |
@pink |
#c3325f | |
@purple |
#7a43b6 |
@primaryButtonBackground |
@linkColor |
@placeholderText |
@grayLight |
@navbarHeight |
40 piksel | |
@navbarBackground |
@grayDarker |
|
@navbarBackgroundHighlight |
@grayDark |
|
@navbarText |
@grayLight |
|
@navbarLinkColor |
@grayLight |
|
@navbarLinkColorHover |
@white |
@warningText |
#f3edd2 | |
@warningBackground |
#c09853 | |
@errorText |
#b94a48 | |
@errorBackground |
#f2dede | |
@successText |
#468847 | |
@successBackground |
#dff0d8 | |
@infoText |
#3a87ad | |
@infoBackground |
#d9edf7 |
Temel bir karışım, esasen bir CSS pasajı için bir içerme veya kısmidir. Tıpkı bir CSS sınıfı gibi yazılırlar ve her yerden çağrılabilirler.
- . eleman {
- . düzeltme ();
- }
Parametrik bir karışım, temel bir karışım gibidir, ancak isteğe bağlı varsayılan değerlerle parametreleri (dolayısıyla adı) da kabul eder.
- . eleman {
- . sınır - yarıçap ( 4 piksel );
- }
Hemen hemen tüm Bootstrap karışımları, araç setindeki .less dosyalarından herhangi birinde bir mixin kullanmanıza olanak tanıyan harika bir yardımcı program .less dosyası olan mixins.less'te saklanır.
Öyleyse devam edin ve mevcut olanları kullanın veya ihtiyacınız olduğunda kendinizinkini eklemekten çekinmeyin.
karıştırma | parametreler | kullanım |
---|---|---|
.clearfix() |
Yok | İçindeki kayan noktaları temizlemek için herhangi bir ebeveyne ekleyin |
.tab-focus() |
Yok | Webkit odak stilini ve yuvarlak Firefox ana hatlarını uygulayın |
.center-block() |
Yok | Blok düzeyinde bir öğeyi kullanarak otomatik olarak ortalamargin: auto |
.ie7-inline-block() |
Yok | display: inline-block IE7 desteği almak için normale ek olarak kullanın |
.size() |
@height: 5px, @width: 5px |
Yüksekliği ve genişliği tek satırda hızlıca ayarlayın |
.square() |
@size: 5px |
Genişliği .size() ve yüksekliği aynı değere ayarlamak için geliştirildi |
.opacity() |
@opacity: 100 |
Opaklık yüzdesini tam sayılarla ayarlayın (ör. "50" veya "75") |
karıştırma | parametreler | kullanım |
---|---|---|
.placeholder() |
@color: @placeholderText |
placeholder Girişler için metin rengini ayarlayın |
karıştırma | parametreler | kullanım |
---|---|---|
#font > #family > .serif() |
Yok | Bir öğenin serif yazı tipi yığını kullanmasını sağlayın |
#font > #family > .sans-serif() |
Yok | Bir öğenin sans-serif yazı tipi yığını kullanmasını sağlayın |
#font > #family > .monospace() |
Yok | Bir öğenin tek aralıklı bir yazı tipi yığını kullanmasını sağlayın |
#font > .shorthand() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Yazı tipi boyutunu, ağırlığını ve satır aralığını kolayca ayarlayın |
#font > .serif() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Yazı tipi ailesini serif olarak ayarlayın ve boyutu, ağırlığı ve satır aralığını kontrol edin |
#font > .sans-serif() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Yazı tipi ailesini sans-serif olarak ayarlayın ve boyutu, ağırlığı ve satır aralığını kontrol edin |
#font > .monospace() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Yazı tipi ailesini monospace olarak ayarlayın ve boyutu, ağırlığı ve satır aralığını kontrol edin |
karıştırma | parametreler | kullanım |
---|---|---|
.container-fixed() |
Yok | @siteWidth İçeriğinizi tutmak için sabit genişlikte ( ile ayarlanmış) bir kap sağlayın |
.columns() |
@columns: 1 |
Herhangi bir sayıda sütuna yayılan bir ızgara sütunu oluşturun (varsayılan olarak 1 sütundur) |
.offset() |
@columns: 1 |
Herhangi bir sayıda sütuna yayılan sol kenar boşluğuna sahip bir ızgara sütununu ofset |
.gridColumn() |
Yok | Bir öğenin ızgara sütunu gibi yüzmesini sağlayın |
karıştırma | parametreler | kullanım |
---|---|---|
.border-radius() |
@radius: 5px |
Bir elemanın köşelerini yuvarlayın. Tek bir değer veya boşlukla ayrılmış dört değer olabilir |
.box-shadow() |
@shadow: 0 1px 3px rgba(0,0,0,.25) |
Bir öğeye gölge ekleme |
.transition() |
@transition |
CSS3 geçiş efekti ekleyin (ör. all .2s linear ) |
.rotate() |
@degrees |
Bir öğeyi n derece döndür |
.scale() |
@ratio |
Bir öğeyi orijinal boyutunun n katına ölçeklendir |
.translate() |
@x: 0, @y: 0 |
Bir elemanı x ve y düzlemlerinde hareket ettirin |
.background-clip() |
@clip |
Bir öğenin arka planını kırpın ( için kullanışlıdır border-radius ) |
.background-size() |
@size |
Arka plan görüntülerinin boyutunu CSS3 ile kontrol edin |
.box-sizing() |
@boxmodel |
Bir öğenin kutu modelini değiştirin (örneğin, border-box tam genişlik için input ) |
.user-select() |
@select |
Bir sayfadaki metnin imleç seçimini kontrol etme |
.resizable() |
@direction: both |
Sağda ve altta herhangi bir öğeyi yeniden boyutlandırılabilir yapın |
.content-columns() |
@columnCount, @columnGap: @gridColumnGutter |
Herhangi bir öğenin içeriğinin CSS3 sütunlarını kullanmasını sağlayın |
karıştırma | parametreler | kullanım |
---|---|---|
.#translucent > .background() |
@color: @white, @alpha: 1 |
Bir öğeye yarı saydam bir arka plan rengi verin |
.#translucent > .border() |
@color: @white, @alpha: 1 |
Bir öğeye yarı saydam bir kenarlık rengi verin |
.#gradient > .vertical() |
@startColor, @endColor |
Tarayıcılar arası dikey arka plan gradyanı oluşturun |
.#gradient > .horizontal() |
@startColor, @endColor |
Tarayıcılar arası yatay arka plan gradyanı oluşturun |
.#gradient > .directional() |
@startColor, @endColor, @deg |
Tarayıcılar arası yönlü arka plan gradyanı oluşturun |
.#gradient > .vertical-three-colors() |
@startColor, @midColor, @colorStop, @endColor |
Tarayıcılar arası üç renkli bir arka plan gradyanı oluşturun |
.#gradient > .radial() |
@innerColor, @outerColor |
Tarayıcılar arası radyal arka plan gradyanı oluşturun |
.#gradient > .striped() |
@color, @angle |
Tarayıcılar arası çizgili bir arka plan gradyanı oluşturun |
.#gradientBar() |
@primaryColor, @secondaryColor |
Degrade ve biraz daha koyu kenarlık atamak için düğmeler için kullanılır |
Aşağıdaki komutu çalıştırarak LESS komut satırı derleyicisini npm ile kurun:
$ npm daha az yükle
Kurulduktan sonra, sadece make
önyükleme dizininizin kökünden çalıştırın ve hazırsınız.
Ek olarak, watchr yüklediyseniz, bootstrap lib'de make watch
bir dosyayı her düzenlediğinizde önyüklemenin otomatik olarak yeniden oluşturulması için çalıştırabilirsiniz (bu gerekli değildir, yalnızca bir kolaylık yöntemidir).
Düğüm aracılığıyla LESS komut satırı aracını kurun ve aşağıdaki komutu çalıştırın:
$ lessc ./lib/bootstrap.less > bootstrap.css
--compress
Bazı baytları kaydetmeye çalışıyorsanız, bu komutu eklediğinizden emin olun !
En son Less.js'yi indirin ve yolunu (ve Bootstrap'i) <head>
.
<link rel = "stylesheet/less" href = "/path/to/bootstrap.less" > <script src = "/path/to/less.js" ></script>
.less dosyalarını yeniden derlemek için bunları kaydedin ve sayfanızı yeniden yükleyin. Less.js bunları derler ve yerel depoda saklar.
Resmi olmayan Mac uygulaması , .less dosyalarının dizinlerini izler ve izlenen bir .less dosyasının her kaydından sonra kodu yerel dosyalara derler.
İsterseniz, otomatik küçültme için uygulamadaki tercihleri ve derlenen dosyaların hangi dizinde olduğunu değiştirebilirsiniz.
Crunch, Adobe Air üzerine kurulu harika görünümlü bir LESS editörü ve derleyicisidir.
Resmi olmayan Mac uygulamasıyla aynı kişi tarafından oluşturulan CodeKit, LESS, SASS, Stylus ve CoffeeScript'i derleyen bir Mac uygulamasıdır.
LESS dosyalarının sürükle ve bırak derlemesi için Mac, Linux ve PC uygulaması. Artı, kaynak kodu GitHub'da .