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?

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 edin

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`

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.

. eleman {
  . düzeltme ();
}

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.

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

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 ortala`margin: auto`
`.ie7-inline-block()`	Yok	`display: inline-block`IE7 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`	`placeholder`Giriş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 önceki ızgara sistemi oluşturun
`#grid > .input()`	`@gridColumnWidth, @gridGutterWidth`	Öğeler için piksel ızgara sistemini oluşturun, `input`dolgu ve kenarlıkları hesaba katın
`.makeColumn`	`@columns: 1, @offset: 0`	Sınıflar olmadan herhangi `div`birini 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-box`tam 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

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 ve uglify-js'yi global olarak npm ile kurun:

$ npm install -g daha az çirkin-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.

DAHA AZ ile inşa

Neden DAHA AZ?

Neler dahil?

Daha fazla bilgi edin

Değişkenler

karışımlar

Operasyonlar

Önyükleme değişkenleri LESS değişkenleri, değerleri ve kullanım yönergeleri

İskele ve bağlantılar

ızgara sistemi

tipografi

Tablolar

gri tonlamalı renkler

vurgu renkleri

Bileşenler

Düğmeler

Formlar

Form durumları ve uyarılar

gezinme çubuğu

açılır menüler

kahraman birimi

Önyükleme karışımları

Karışımlar hakkında

Temel karışımlar

Parametrik karışımlar

Kolayca kendinizinkini ekleyin

Dahil edilen karışımlar

Araçlar

Formlar

tipografi

ızgara sistemi

CSS3 özellikleri

Arka planlar ve gradyanlar

LESS ile Bootstrap Derleme

Derleme araçları

makefile ile düğüm

Komut satırı

Javascript

Resmi olmayan Mac uygulaması

Diğer Mac uygulamaları

gevrek

Kod Kiti

basitlik