Bootstrap için Ultimate Kılavuzu
Bootstrap, CSS, HTML ve JavaScript ile oluşturulmuş güçlü, mobil ilk, duyarlı, ön uç bir iskelettir. Sıfırdan başlayarak ve hatta diğer pek çok çerçeve üzerinde bir çok avantaj sunar.
Bootstrap aslında bir tasarımcı ve geliştirici tarafından Twitter tarafından geliştirildi, dünyanın en popüler ön uç çerçevelerinden biri haline geldi. Açık kaynak haline gelmeden önce Twitter Blueprint olarak biliniyordu ve halka açık bir yıl önce Twitter'ın dahili stil rehberi olarak hizmet vermişti.
Bootstrap'ı bilmiyorsanız, buradaki kaynaklar ve bilgiler sizi hızlandıracaktır.
Neden Bootstrap?
Bootstrap, web dev projelerinizde sıfırdan başlayarak birçok avantaj sunar. En büyük nedenlerden biri, Bootstrap için mevcut olan çok sayıda kaynaktır, özellikle diğer pek çok çerçeveye ve kazan dairesine kıyasla (daha sonra bunlara ulaşacağız).
Ancak mevcut kaynakların ötesinde, Bootstrap'i kullanmanın birçok nedeni var:
- Kullanımı kolaydır: Bootstrap ile çalışmaya başlamak oldukça hızlı ve kolay bir işlemdir. Ve esnek: Daha az veya CSS ve hatta Sass (Sass versiyonunu indirirseniz) ile kullanabilirsiniz.
- Izgara: Bootstrap, 12 sütuna duyarlı bir kılavuz kullanır. İç içe ve ofset elemanlarını bile destekler. Izgara yanıt verebilir veya sabit bir düzende kolayca değiştirebilirsiniz.
- Daha hızlı geliştirme: Bootstrap'in hazır birçok bileşeni ve kaynağı mevcut olduğundan geliştirme sürecinizi önemli ölçüde hızlandırabilir.
- Temel stiller: Bootstrap, zaten kullanacağınız bir ton HTML öğesi için temel stilleri ile birlikte gelir. Tipografi, formlar, resimler ve çok daha fazlası için stilleri içerir.
- Önceden biçimlendirilmiş bileşenler: Bootstrap ayrıca açılır menüler, nav çubukları, uyarılar ve daha birçokları için önceden biçimlendirilmiş bileşenlerle birlikte gelir.
- Birlikte gelen JavaScript bileşenleri: Bootstrap, işlevselliği eklemek için bir grup JavaScript bileşeniyle birlikte gelir. Modal pencereler, araç ipuçları, uyarılar ve daha fazlası gibi şeyleri manipüle etmeyi kolaylaştırır. Komut dosyalarını hep birlikte yazmayı atlayabilirsiniz.
- Mükemmel dokümantasyon: Bootstrap, hem yeni başlayanlar hem de daha ileri düzey kullanıcılar için kullanışlı olan istisnai dokümantasyona sahiptir.
- Kolay entegrasyon: Bootstrap, hem yeni sitelerde hem de mevcut sitelerde çeşitli diğer çerçeveler ve platformlarla entegre edilebilir. Mevcut CSS'nizin yanında sadece Bootstrap'in belirli öğelerini bile kullanabilirsiniz.
Bootstrap kullanmaya başlama
Yapabileceğiniz iki ana yol var. Boostrap indir : Önceden derlenmiş sürüm veya kaynak kodu sürümü. Hangisini seçeceğiniz, nasıl başlamak istediğinize bağlıdır.
Önceden derlenmiş olan, hemen hemen her projede kullanım için hazırdır ve derlenmiş CSS ve JS ile birlikte, her birinin derlenmiş ve küçültülmüş sürümlerini içerir. İsteğe bağlı Bootstrap temasıyla birlikte Glyphicon yazı tipleri dahildir.
Kaynak kod sürümü, önceden oluşturulmuş CSS ve JavaScript'in yanı sıra font varlıklarını içerir. Ayrıca daha az, JavaScript ve belgeleri içerir. Temel olarak, öğrenme eğrisi, önceden derlenmiş sürümden biraz daha yüksek olsa da, daha eksiksiz bir versiyondur.
Ayrıca, Rails, Compass veya Sass-only projelerine dahil etmek istiyorsanız özellikle yararlı olan Less'ten Sass'a taşınan Bootstrap sürümü de vardır.
Hangi sürümü kurmak istediğinize karar verdikten sonra, Bootstrap'in kullandığı sistem olan Grunt'ı kurmanız gerekir. Önce node.js dosyasını indirip yüklemeniz ve ardından Grunt’ı yüklemeniz gerekir. Oradan parmaklarınızın ucunda çeşitli Grunt komutları olacak.
Sonra temel Bootstrap HTML şablonuna veya bunlardan biriyle başlayabilirsiniz. örnek şablonlar . Örnek şablonlar arasında ızgara yerleşimleri, jumbotron tabanlı düzenler, çeşitli navbarlar ve diğer özel bileşenler (hatta bir blog ve giriş sayfası) bulunur.
Ya duyarlı bir site istemiyorsam?
Bootstrap duyarlı ve mobil ilk kutunun dışındayken, duyarlı bir site istemiyorsanız bu şekilde kalmak zorunda kalmaz. Devre dışı bırakmak için yapmanız gereken tek şey, CSS'deki viewport meta etiketini atlamak, her ızgara katmanı için kapsayıcıların genişliğini geçersiz kılmak, navbarlarınızdaki tüm daraltma ve genişletme davranışlarını kaldırmak ve eğer varsa, ızgara düzenlerinde bazı ayarlamalar yapmaktır. onları kullanıyor. Buradaki özel talimatları okuyabilirsiniz. Başlangıç belgeleri .
Bootstrap eklentileri, uzantıları ve bileşenleri
Bootstrap, yerleşik çok sayıda harika özelliğe sahiptir. Ancak, tam ihtiyaçlarınızı karşılamak için işlevlerini genişletmenin birçok yolu vardır.
Yakıt UX web uygulamalarınız için ek JavaScript kontrolleri kümesidir. Sadece kullanmak istediğiniz kontrolleri bir düzineden fazla kullanılabilir.
Jasny Bootstrap dikey bir nav bileşeni ve uyarılar içeren bir dizi bileşenidir.
Önyükleme-Modal Bootstrap sitenize istiflenebilir, duyarlı AJAX modal pencereleri ekler. Diğer formatların yanı sıra, tam genişlikte modaları ve uzun modaları destekler.
Bootbox.js Programatik iletişim kutularını kolayca oluşturmanızı sağlayan küçük bir kütüphanedir.
Bootstrap Resim Galerisi Bootstrap'in kalıcı diyalog penceresini kullanarak dokunma etkin, duyarlı bir resim galerisi olan blueimp Gallery'nin bir uzantısıdır.
Bootstrap Işık Kutusu Bootstrap modal eklentisine dayalı basit bir lightbox eklentisidir. Arka plan için seçenekler, ışık kutusunun nasıl kapatılması ve daha fazlasını içerir.
Bootstrap Form Yardımcıları daha iyi formlar oluşturmak için jQuery eklentileri topluluğudur. Birçoğunu bağımsız olarak veya ihtiyaçlarınızı karşılayacak şekilde birlikte kullanabilirsiniz.
Bildirimler web sitenize veya uygulamanıza kolayca özel bildirimler eklemenizi sağlayan bir Bootstrap uzantısıdır. Konum, tür, geçişler ve daha fazlası için seçenekler vardır.
Bootstrap-homurtu normal Bootstrap uyarılarını Growl benzeri bildirimlere dönüştüren jQuery eklentisidir. Bilgi, hata ve başarı stilleri için uyarılar vardır ve birbirini izleyen çoklu bildirimleri destekler.
Önyükleme seçim Bir düğme açılır menüsünü kullanarak Bootstrap için özel bir seçim ekler.
Boostrap Maxlength Bir alan girişindeki max uzunluk özniteliği için görsel bir geri bildirim göstergesi sağlar.
Boostrap Markdown Formlarınız için Markdown desteğini eklemeyi ve bunları bir Markdown düzenleyicisine sorunsuzca dönüştürmeyi kolaylaştırır.
Bootstrap Anahtarı 3 onay kutularını ve radyo düğmelerini geçiş anahtarlarına dönüştürmeyi kolaylaştırır.
jQuery Dosya Yükleme sürükle & bırak, çoklu dosya seçimi ve daha fazlası için destekle bir jQuery dosya yükleme widget'ı ekler.
jqBootstrapValidation kullanımı kolay Bootstrap formları için jQuery doğrulama eklentisidir ve doğrulama hataları olduğunda net talimat sağlamayı kolaylaştırır.
Bootstrap-wysihtml5 JavaScript eklentisi olarak gelen basit ve güzel bir HTML5 WYSIWYG editörüdür.
Önyükleme Çoklu UI'lar için çoklu öznitelikler içeren giriş girdilerini kullanan ve bunları onay kutularıyla bir açılır menü olarak gösteren bir jQuery eklentisidir.
BIC Takvimi olayları işaretlemek için jQuery basit bir takvimdir.
önyükleme-datetimepicker Bootstrap için basit bir tarih ve zaman seçici bileşenidir.
Saat surat Format ve Tetik gibi şeyler için seçenekler ile Bootstrap için bir zaman çizelgesi.
Bootstrap Timepicker Fare veya ok tuşlarıyla metin girişi için bir zaman seçmenizi kolaylaştırır.
Bootstrap için Renk Paleti temel, Gmail tarzı ve özel renk paletleri sunan basit bir renk seçici.
Bir renk seç Esnek metin girişi, kaydedilmiş renkler ve daha fazlasını sağlayan Bootstrap için jQuery renk seçici.
Bootstro.js Web sitenize rehberli bir tur eklemeyi kolaylaştırır.
Twitter Bootstrap 2 için Sosyal Düğmeler vektör, yakınlaştırılabilir, retinaya hazır ve özelleştirilebilir sosyal düğmeler sunar.
Flippant.js bağımlılığı olmayan, özelleştirmesi kolay, saygısız şeyler için bir JavaScript ve CSS kütüphanesidir.
Bootstrap için sekme damlası Tüm ayrılan alanlara sığmayacakları zaman sekmelerinizi açılır menülere yeniden düzenler.
Tocify Bootstrap ile temalı olabilecek içerik eklentisinin jQuery tablosu.
Bootpag Bootstrap ile veya kendi başına çalışan dinamik sayfalandırma için bir jQuery eklentisidir.
Typeahead.js Tyeaheads oluşturmak için Twitter'dan bir JavaScript kütüphanesi.
X-düzenlenebilir Bootstrap içindeki sayfanızda düzenlenebilir öğeler oluşturmanızı sağlar.
Bootstrap Ağaç Görünümü Hiyerarşik ağaç yapılarını görüntülemek için basit bir çözümdür.
Bootstrap için Tokenfield klavye ve kopyala-yapıştır desteğine odaklanan gelişmiş bir belirteçtir.
Bootstrap Yıldız Derecelendirmesi kesirli dolgular ve RTL giriş desteği gibi özellikleri destekleyen bir jQuery yıldız derecelendirme eklentisidir.
Yamm Megamenu Standart navbar işaretlemesi ve akışkan ızgara sistemi sınıflarını kullanan Bootstrap için bir başka Megamenu.
Summernote Bootstrap için basit bir WYSIWYG editörüdür.
Nakavt-Önyükleme Bootstrap JavaScript widget'larına erişmek için bir dizi nakavt bağlama işleyicisidir.
Gridmanager.js Bootstrap gibi çerçevelerde ızgara düzenleri oluşturup düzenlemenizi sağlar.
Bootstrap için kaydırıcı formlar için bir Bootstrap kaydırıcı bileşenidir.
WATable Verilerinizi hızlı ve kolay bir şekilde filtrelemenizi, biçimlendirmenizi, sıralamanızı ve sıralamanızı sağlayan jQuery eklentisidir.
Önyükleme Datagrid Basit ve güçlü kalırken tamamen özelleştirilebilir Bootstrap için bir jQuery eklentisi.
PNotify , Bootstrap için bir JavaScript bildirimleri uzantısıdır.
Bootstrap Turu Bootstrap ile (veya olmadan) site turları oluşturmak için basit bir uzantısıdır.
Bootstrap Accessibility Plugin Bootstrap Erişilebilirlik Eklentisi , PayPal'dan, klavye ve ekran okuyucu kullanıcıları için erişilebilir bir çok Bootstrap bileşeni üretiyor.
Bootstrap Video Oynatıcı özelleştirilebilir bir HTML5 video oynatıcı jQuery eklentisidir.
Ladda UI çoğunlukla formlarla kullanılmak üzere tasarlanmış bir dizi yükleme göstergesidir.
Bootstrap temaları, şablonlar ve UI kitleri
İsterseniz kendi temalarınızı ve şablonlarınızı sıfırdan oluşturabilir veya zaman kazanmak için bu ücretsiz ve premium varlıklara göz atabilirsiniz. Bazıları olduğu gibi kullanılır, diğerleri ise kendi özel tasarımlarınız için bir atlama noktasıdır.
Yaratıcı Pazar 300'den fazla premium Bootstrap temaları mevcut.
BootstrapMade çeşitli stillerde temalar sunar.
BootstrapBay Premium Bootstrap temaları ve satın alabileceğiniz veya satabileceğiniz şablonlar için bir pazar yeridir.
GridGum teklif edilen düzinelerce tema ile bir premium tema pazar yeridir.
ThemeForest Sadece 4 $ 'dan başlayan yüzlerce Bootstrap temaları var.
WrapBootstrap e-ticaret sitelerinden açılış sayfalarına kadar her şey için temalar sunar.
Cardeostrap CSS, bileşenler ve JavaScript içeren Bootstrap için büyük bir UI seti.
Flatstrap tüm fırfırlar olmadan ücretsiz ve açık kaynak Bootstrap tema çerçevesidir.
Bootmetro Windows 8'in görünümü ve hissi olan bir web çerçevesidir.
Fbootstrapp Bootstrap ile Facebook iframe uygulamaları oluşturmak için bir araç takımı.
Bootplus şık ve sezgisel bir Google ön yüz çerçevesidir.
Şablonu Alın çeşitli stillerdeki HTML5 ve CSS3 şablonlarının küçük bir koleksiyonudur.
BootstrapTaste ücretsiz ve premium Bootstrap temaları topluluğudur.
Bootstrap Sıfır Bootstrap için kendi kendini ilan eden en büyük açık kaynaklı şablon koleksiyonudur.
Siyah kravat Bootstrap'in çeşitli sürümlerinde bulunan ücretsiz ve premium temalardan oluşan bir koleksiyon. Pano gösterge temalarından haber toplayıcılarına ve portföy temalarına kadar her şeyi içerir.
Başlangıç çerçevesi DesignModo'dan basit ama güçlü bir Bootstrap çerçevesidir.
Bootswatch ücretsiz, kurulumu kolay, modüler Bootstrap temaları topluluğudur.
Bootstrap'i başlat blog temaları, portföy temaları ve daha fazlası dahil olmak üzere ücretsiz Bootstrap temaları ve şablonları kümesidir.
Joostrap Bootstrap ile oluşturulmuş Joomla şablonları topluluğudur.
Tema Armada Bootstrap ile oluşturulmuş, yalnızca 8 dolardan başlayan el yapımı duyarlı temalar kümesidir.
PrepBootstrap Yönetici arayüzlerinden iletişim formlarına kadar her şey için büyük bir ücretsiz tema, şablon ve widget kaynağıdır.
RandThemes ön ve arka uç tasarımları da dahil olmak üzere premium Bootstrap temaları kümesidir.
kökler Bootstrap üzerine inşa edilmiş bir WordPress başlangıç teması.
UI Bootstrap AngularJS'de yazılmış Bootstrap bileşenlerinin bir koleksiyonudur.
Bootstrap temiz ve modern bir Bootstrap WordPress teması.
BootstrapWP Bootstrap dayalı özel WordPress tema geliştirme için sağlam bir temel.
StrapPress Mobile-first, responsive olan ve Bootstrap öğelerinin tonlarını içeren bir WordPress teması.
Shoestrap Bootstrap dayalı gelişmiş bir WordPress teması.
Expose Framework sıvı düzeni, HTML5 ve CSS3 ve yanıt veren menüler sunan bir temel temasıdır.
Daha fazla Bootstrap kaynaklarını keşfedin
Temel uzantılar ve temaların ötesinde, Bootstrap ile çalışmayı daha kolay ve keyifli hale getiren birçok Bootstrap kaynağı var.
Bootstrap Style Guide Boilerplate Önyükleme Stili Kılavuzu Bir stil sayfasını bağlayarak ve her bir desen veya öğe için HTML dosyaları oluşturarak yarı otomatik olarak yaşam stili kılavuzları oluşturmanıza yardımcı olur.
Bootstrap Magic temaları daha hızlı oluşturmanızı sağlayan bir Bootstrap tema düzenleyicisidir.
Akademik Bootstrap dayalı hızlı bir blog CMS.
Wright Bootstrap üzerine kurulmuş bir Joomla 2.5 ve 3.x çerçevesidir.
AngularStrap Bootstrap 3 için bir dizi AngularJS yerel direktiftir.
PaintStrap Adobe Kuler veya COLOURlovers'dan renk paletleri kullanarak Bootstrap temaları oluşturmanızı sağlar.
Durandal Bootstrap ile bütünleşen tek sayfa uygulamaları oluşturmak için bir çerçevedir.
Savurgan Bir görüntüden kendi Bootstrap renk düzeninizi oluşturmayı kolaylaştırır.
LayoutIt! ön uç kodunuzu oluşturmak için sürükle ve bırak arayüz oluşturucu.
Pingendo Bootstrap dayalı duyarlı tasarımları prototipleme için görsel bir masaüstü uygulamasıdır.
Bootsnip Bootstrap kaynakları için bir element galerisi.
Bootply Bootstrap çerçevesiyle bina, test ve prototip oluşturma için bir oyun alanıdır.
Bootstrap için Dojo Bootstrap bileşenlerini, modal pencerelerden karusellere ve düğmelere kadar her şey için özel Dojo modülleriyle birleştirir.
Bootsnipp Form Builder sürükle ve bırak bileşenlerini kullanan bir form oluşturucudur.
Bootsnip Düğme Oluşturucu Çıkışı, düğme metnini, rengi, boyutu ve simgeyi özelleştirmenizi sağlayan düğme oluşturucuyu kullanmak çok kolay.
mandal HTML, CSS ve JavaScript bileşenleriyle mobil uygulamalar oluşturmak için kullanılan bir araçtır.
Bootbundle Bootstrap için temalar, snippet'ler ve bileşenler kümesidir.
BootSwatchr Bootstrap temalarını sıfırdan oluşturmak için görsel bir tema yaratıcısı.
Tepki Bootstrap popüler ön uç çerçevenin bir Bootstrap-yapıdır.
Brix.io Bootstrap için bir arayüz oluşturucu. Bulut tabanlı, kullanımı kolay ve gerçek zamanlı işbirliği sunuyor.
Bazı harika Bootstrap projeleri
Orada Bootstrap üzerinde zaten çalışan tonlarca site var. Aşağıdakiler Bootstrap ile ne kadar çeşitliliğin mümkün olduğunu gösteriyor.
Surfboard Üretim Akademisi Filtresi
Hollanda Ulusal Opera ve Balesi
Sonuç
Bootstrap, HTML, CSS ve JavaScript ile uyumlu, mobil ilk web siteleri oluşturmak için mevcut birçok çerçeveden sadece bir tanesidir. Önyüklemenin ne yapabileceğini öğrenmek için zaman ayırın (ve ne yaptığınızı rahat hissediyorsunuz) diğer çerçevelerle kıyaslayın ve özel proje ihtiyaçlarınıza en uygun olanı seçin. Ve farklı projeler için farklı çerçeveler seçmek için korkmayın!