Bootstrap ile DAHA AZ Kullanmak

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 .

Neden DAHA AZ?

Bootstrap, özünde, iyi arkadaşımız Alexis Sellier tarafından oluşturulan dinamik bir stil sayfası dili olan LESS ile yapılır . Sistem tabanlı CSS geliştirmeyi daha hızlı, daha kolay ve daha eğlenceli hale getirir.

Neler dahil?

CSS'nin bir uzantısı olarak LESS, 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 edin

DAHA AZ CSS

Daha fazla bilgi için http://lesscss.org/ adresindeki resmi web sitesini ziyaret edin .

Değişkenler

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.

karışımlar

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.

Operasyonlar

İşlemlerle matematiği anında yaparak ızgaranızı, öncü ve daha esnek hale getirin. Çarpın, bölün, ekleyin ve çıkarın ve CSS akıl sağlığınıza ulaşın.

İskele ve bağlantılar

@bodyBackground @white Sayfa arka plan rengi
@textColor @grayDark Tüm gövde, başlıklar ve daha fazlası için varsayılan metin rengi
@linkColor #08c Varsayılan bağlantı metni rengi
@linkColorHover darken(@linkColor, 15%) Varsayılan bağlantı metni vurgulu rengi

ızgara sistemi

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

tipografi

@sansFontFamily "Helvetica Neue", Helvetica, Arial, sans-serif
@serifFontFamily Georgia, "Times New Roman", Times, serif
@monoFontFamily Menlo, Monaco, "Kurye Yeni", monospace
@baseFontSize 13 piksel piksel olmalı
@baseFontFamily @sansFontFamily
@baseLineHeight 18 piksel piksel olmalı
@altFontFamily @serifFontFamily
@headingsFontFamily inherit
@headingsFontWeight bold
@headingsColor inherit

Tablolar

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

gri tonlamalı renkler

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

vurgu renkleri

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

Bileşenler

Düğmeler

@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

Formlar

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

Form durumları ve uyarılar

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

gezinme çubuğu

@navbarHeight 40 piksel
@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

açılır menüler

@dropdownBackground @white
@dropdownBorder rgba(0,0,0,.2)
@dropdownLinkColor @grayDark
@dropdownLinkColorHover @white
@dropdownLinkBackgroundHover @linkColor
@@dropdownDividerTop #e5e5e5
@@dropdownDividerBottom @white

kahraman birimi

@heroUnitBackground @grayLighter
@heroUnitHeadingColor inherit
@heroUnitLeadColor inhereit

Karışımlar hakkında

Temel karışımlar

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.

  1. . eleman {
  2. . düzeltme ();
  3. }

Parametrik karışımlar

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.

  1. . eleman {
  2. . sınır - yarıçap ( 4 piksel );
  3. }

Kolayca kendinizinkini ekleyin

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.

Dahil edilen karışımlar

Araçlar

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-blockIE7 desteği almak için normale ek olarak kullanın
.size() @height @width Yüksekliği ve genişliği tek satırda hızlıca ayarlayın
.square() @size Genişliği .size()ve yüksekliği aynı değere ayarlamak için geliştirildi
.opacity() @opacity Opaklık yüzdesini tam sayılarla ayarlayın (ör. "50" veya "75")

Formlar

karıştırma parametreler kullanım
.placeholder() @color: @placeholderText placeholderGirişler için metin rengini ayarlayın

tipografi

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

ızgara sistemi

karıştırma parametreler kullanım
.container-fixed() Yok İçeriğinizi tutmak için yatay olarak ortalanmış bir kap oluşturun
#grid > .core() @gridColumnWidth, @gridGutterWidth n sütun ve x piksel genişliğinde oluk içeren bir piksel ızgara sistemi (kapsayıcı, satır ve sütunlar) oluşturun
#grid > .fluid() @fluidGridColumnWidth, @fluidGridGutterWidth n sütunlu ve % x geniş oluklu bir yüzde ızgara sistemi oluşturun
#grid > .input() @gridColumnWidth, @gridGutterWidth Öğeler için piksel ızgara sistemini oluşturun, inputdolgu ve kenarlıkları hesaba katın
.makeColumn @columns: 1, @offset: 0 Sınıflar olmadan herhangi divbirini bir ızgara sütununa dönüştürün.span*

CSS3 özellikleri

karıştırma parametreler kullanım
.border-radius() @radius Bir elemanın köşelerini yuvarlayın. Tek bir değer veya boşlukla ayrılmış dört değer olabilir
.box-shadow() @shadow Bir öğeye gölge ekleme
.transition() @transition CSS3 geçiş efekti ekleyin (örn. 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, @y 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-boxtam genişlik için input)
.user-select() @select Bir sayfadaki metnin imleç seçimini kontrol etme
.backface-visibility() @visibility: visible CSS 3D dönüşümlerini kullanırken içeriğin titremesini önleyin
.resizable() @direction: both Sağda ve altta herhangi bir öğeyi yeniden boyutlandırılabilir yapın
.content-columns() @columnCount, @columnGap: @gridGutterWidth Herhangi bir öğenin içeriğinin CSS3 sütunlarını kullanmasını sağlayın
.hyphens() @mode: auto İstediğiniz zaman CSS3 tireleme (içerir word-wrap: break-word)

Arka planlar ve gradyanlar

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ı bir 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
Not: GitHub'a değiştirilmiş CSS ile bir çekme isteği gönderiyorsanız , CSS'yi bu yöntemlerden herhangi biriyle yeniden derlemeniz gerekir .

Derleme araçları

makefile ile düğüm

Aşağıdaki komutu çalıştırarak LESS komut satırı derleyicisini, JSHint, Recess ve uglify-js'yi global olarak npm ile kurun:

$ npm install -g daha az jshint girinti uglify-js

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 watchbir 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).

Komut satırı

Düğüm aracılığıyla LESS komut satırı aracını kurun ve aşağıdaki komutu çalıştırın:

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

--compressBazı baytları kaydetmeye çalışıyorsanız, bu komutu eklediğinizden emin olun !

Javascript

En son Less.js dosyasını 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ı

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.

Diğer Mac uygulamaları

gevrek

Crunch, Adobe Air üzerine kurulu harika görünümlü bir LESS editörü ve derleyicisidir.

Kod Kiti

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.

basitlik

LESS dosyalarının sürükle ve bırak derlemesi için Mac, Linux ve PC uygulaması. Artı, kaynak kodu GitHub'da .