DAHA AZ ile inşa
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.
Neden DAHA AZ?
Bootstrap'in yaratıcılarından biri bununla ilgili kısa bir blog yazısı yazdı ve burada özetlendi:
- Bootstrap, Sass'a kıyasla Less ile ~6 kat daha hızlı derlenir
- JavaScript'te daha az yazılır, bu da Ruby with Sass'a kıyasla daha kolay dalıp yama yapmamızı sağlar.
- Az ama öz; CSS yazdığımızı ve Bootstrap'i herkes için ulaşılabilir hale getirdiğimizi hissetmek istiyoruz.
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 .
Bootstrap'i Daha Azıyla Derlemek
CSS'miz Less ile yazıldığından ve değişkenler ve karışımlar kullandığından, nihai üretim uygulaması için derlenmesi gerekir. İşte nasıl.
Derleme araçları
Komut satırı
Komut satırı aracılığıyla derlemek için GitHub'daki proje benioku belgesindeki talimatları izleyin .
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 fazla uygulama
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 Windows uygulaması. Artı, kaynak kodu GitHub'da .
Statik varlıklar olarak kullan
Derlenmiş veya küçültülmüş CSS ve JS'yi bırakarak herhangi bir web projesini hızla başlatın . Kolay yükseltmeler ve ileriye dönük bakım için özel stiller üzerinde ayrı ayrı katman oluşturun.
Kurulum dosyası yapısı
En son derlenmiş Bootstrap'i indirin ve projenize yerleştirin. Örneğin, şöyle bir şeye sahip olabilirsiniz:
uygulama/
düzenler/
şablonlar/
halka açık/
css/
bootstrap.min.css
js/
bootstrap.min.js
resim/
glyphicons-halflings.png
glyphicons-halflings-white.png
Başlangıç şablonunu kullan
Başlamak için aşağıdaki temel HTML'yi kopyalayın.
- <html>
- <kafa>
- <title> Önyükleme 101 Şablonu </title>
- <!-- Önyükleme -->
- <link href = "public/css/bootstrap.min.css" rel = "stil sayfası" >
- </head>
- <body>
- <h1> Merhaba dünya! </h1>
- <!-- Önyükleme -->
- <script src = "public/js/bootstrap.min.js" ></script>
- </body>
- </html>
Özel kod üzerinde katman
Bootstrap'i kendi ayrı CSS ve JS dosyalarınızla kendinize özel hale getirmek için gerektiği kadar özel CSS, JS ve daha fazlası üzerinde çalışın.
- <html>
- <kafa>
- <title> Önyükleme 101 Şablonu </title>
- <!-- Önyükleme -->
- <link href = "public/css/bootstrap.min.css" rel = "stil sayfası" >
- <!-- Proje -->
- <link href = "public/css/application.css" rel = "stil sayfası" >
- </head>
- <body>
- <h1> Merhaba dünya! </h1>
- <!-- Önyükleme -->
- <script src = "public/js/bootstrap.min.js" ></script>
- <!-- Proje -->
- <script src = "public/js/application.js" ></script>
- </body>
- </html>