Less ile Bootstrap Etiketlerini Kullanmak
Öncelikle
www.getbootstrap.com
adresinden Download Bootstrap butonuna tıklayarak dowloand sayfasına gelin
burada Source code seçeneği tıklayarak dökümanı indirin, indirdiğiniz
dökümandan less klasörünü alın ve bootstrap uygulayacağınız çalışma
klasörünüzün içene atın.
İkinci aşama olarak
www.lesscss.org
adresinden Get Less.js başlığı altında bulunan Browser dowloads seçeneklerinden
Download source code linkini tıkladığınızda size less.js dosyasını
indirecektir.
İndirdiğiniz klasör içerisinde bulunan dist klasörü
içerisinde less.min.js dosyasını, bootstrap tan indirdiğiniz less klasörü
içerine atın.
Son aşamamız
www.winless.org adresinde
bulunan winless programını download butonu yardımıyla indirin, indirdiğiniz
programının kurulumunu yaptıktan sonra programı çalıştırın,
programın üst kısmında iki seçenek bulunmaktadır buradan
Less Files seçeneğinin seçin ve sol alt kısmında bununan Add Folder seçeneğinden,
daha önce bootstrap sayfasından indirmiş olduğunuz less klasörünü seçerek
programa dahil edin.
Daha sonra dosyaların listelendiği kısmın üzerindeki File
seçeneğinden eklemiş olduğumuz listenin tamamının işaretini kaldırıp sadece
kullanacağınız bootstrap.less dosyasını işaretleyin, işaretledikten sonra sağ
alt kısımda bulunan Compile butonuna basın, bu işlemi yaptıktan sonra programın
sol üst kısmında bulunan Less Files sekmesi yanında Compiler sekmesini
göreceksiniz bu sekmeye tıklayarak burada bulunan özelliklerden dosyanın yolunu
ve son derleme zamanını görebilirsiniz.
Daha sonra bootstrap’ın sitesinden indirmiş olduğunuz
bootstrap.less dosyasının bulunduğu klasörün içine baktığınızda size bootstrap.css
diye bir dosya oluşturduğunu göreceksiniz bu dosya yolunu, üzerinde çalışma
yapacağınız sayfanın üst kısmına ekleyin.
örneğin less klasörü içerisinde var olan dosya yolumuzu
bu şekilde ekleyeceksiniz.
<link
href="less/bootstrap.css" rel="stylesheet">
Program açıkken örneğin variables.less dosyasında
yapacağınız bütün yenilikleri bootstrap.css dosyasına atayacaktır, bu atamayı
iki şekilde yapar, bootstrap.css dosyası
açık ise yenilikleri kaydetmek istediğinizi soracaktır, bootstrap.css dosyası kapalı ise program
kendiliğinden otomatik değişiklikleri kaydedecektir.
Çalışma sayfalarınızın üst kısmına bootstrapla ilgili
yalnızca aşağıdaki kodu eklemeniz yeterlidir.
<link href="less/bootstrap.css"
rel="stylesheet">
En alt kısmına da bootstrapla ilgili aşağıdaki kodu
eklemeniz yeterli olacaktır.
<script src="js/bootstrap.js"></script>
