Etiam porta sem maleuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac conectetur ac, vestibulum ve eros.
Bootstrap hakkında Kısa geçmiş, tarayıcı desteği ve daha fazlası
Tarih
Twitter'ın ilk günlerinde mühendisler, ön uç gereksinimlerini karşılamak için aşina oldukları hemen hemen tüm kitaplıkları kullandılar. Bootstrap, Twitter'ın ilk Hackweek'inde sunulan ve hızla hızlanan zorluklara bir yanıt olarak başladı.
Twitter'daki birçok mühendisin yardımı ve geri bildirimi ile Bootstrap, yalnızca temel stilleri değil, aynı zamanda daha zarif ve dayanıklı ön uç tasarım modellerini de kapsayacak şekilde önemli ölçüde büyüdü.
Daha fazlasını dev.twitter.com'da okuyun ›
tarayıcı desteği
Bootstrap, Chrome, Safari, Internet Explorer ve Firefox gibi büyük modern tarayıcılarda test edilmiş ve desteklenmiştir.
- En Yeni Safari
- En son Google Chrome
- 4+
- Internet Explorer 7+
- Opera 11
Neler dahil
Bootstrap, derlenmiş CSS, derlenmemiş ve örnek şablonlarla birlikte gelir.
- Tüm orijinal .less dosyaları
- Tamamen derlenmiş ve küçültülmüş CSS
- Eksiksiz stil kılavuzu belgeleri
- Örnek sayfa şablonu (daha fazlası yakında)
Izgara sistemi Standart 940 pikseli sallayın veya kendinizinkini yuvarlayın
Varsayılan ızgara
Bootstrap'in bir parçası olarak sağlanan varsayılan ızgara sistemi, 940 piksel genişliğinde 16 sütunlu bir ızgaradır. Bu, popüler 960 ızgara sisteminin bir çeşididir, ancak sol ve sağ taraflarda ek kenar boşluğu/dolgusu yoktur.
Örnek ızgara işaretlemesi
Burada gösterildiği gibi, her biri ızgara sistemimizin bir parçası olarak tanımladığımız 16 temel sütunu kapsayan iki "sütun" ile temel bir düzen oluşturulabilir. Daha fazla varyasyon için aşağıdaki örneklere bakın.
- <div sınıfı = "satır" >
- <div sınıfı = "span6 sütunları" >
- ...
- </div>
- <div sınıfı = "span10 sütun" >
- ...
- </div>
- </div>
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
2
2
2
2
2
2
2
2
3
3
3
3
3
1
4
4
4
4
1/3
1/3
1/3
1/3
2/3
4
6
6
8
8
5
11
16
Sütunları dengeleme
4
8 ofset 4
1/3 ofset 2/3s
4 ofset 4
4 ofset 4
5 ofset 3
5 ofset 3
10 ofset 6
Düzenler Web sayfaları oluşturmak için temel şablonlar
Sabit düzen
Tek bir <div.container>.
- <body>
- <div sınıfı = "konteyner" >
- ...
- </div>
- </body>
Akışkan düzeni
Minimum ve maksimum genişliklere ve sol kenar çubuğuna sahip alternatif, esnek bir akışkan sayfa yapısı. Uygulamalar ve dokümanlar için harika.
- <body>
- <div sınıfı = "konteyner-akışkan" >
- <div sınıfı = "kenar çubuğu" >
- ...
- </div>
- <div sınıfı = "içerik" >
- ...
- </div>
- </div>
- </body>
Tipografi Başlıklar, paragraflar, listeler ve diğer satır içi yazı öğeleri
Başlıklar ve kopya
Web sayfalarınızı yapılandırmak için standart bir tipografik hiyerarşi.
Tüm tipografik ızgara, preboot.less dosyamızdaki iki Less değişkenine dayanmaktadır: @basefontve @baseline. Birincisi, baştan sona kullanılan temel yazı tipi boyutu ve ikincisi, temel satır yüksekliğidir.
Tüm türümüzün ve daha fazlasının kenar boşluklarını, dolgularını ve satır yüksekliklerini oluşturmak için bu değişkenleri ve biraz matematiği kullanırız.
h1. Başlık 1
h2. Başlık 2
h3. Başlık 3
h4. Başlık 4
h5. Başlık 5
h6. Başlık 6
Örnek paragraf
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus ve magnis doğumdan uzak montes, nascetur ridiculus mus. Nullam kimliği dolor kimliği nibh ultricies vehicula ut id elit.
Örnek başlık Alt başlığı var…
Çeşitli elementler
Vurgu, adres ve kısaltma kullanma
<strong> <em> <address> <abbr>
Ne zaman kullanılır
Vurgu etiketleri ( <strong>ve <em>), bir kelimenin veya ifadenin çevresindeki kopyaya göre ek önemini veya vurgusunu belirtmek için kullanılmalıdır. <strong>Önem ve stres vurgusu <em>için kullanın .
Bir paragrafta vurgu
Fusce dapibus , tellus ac cursus commodo , tortor mauris condimentum nibh , ut fermentum massa justo sit amet risus . Maecenas faucibus mollis interdum. Nulla vitae seçkin libero, bir pharetra augue.
Not:<b> HTML5'te and etiketlerini kullanmak yine de <i>uygundur ve sırasıyla kalın ve italik olarak biçimlendirilmeleri gerekmez (daha semantik bir öğe varsa onu kullanın). çoğunlukla ses, teknik terimler vb <b>.<i>
adresler
Öğe, en <address>yakın atasının veya işin tüm gövdesinin iletişim bilgileri için kullanılır. İşte nasıl göründüğü:
795 Folsom Ave, Suite 600
San Francisco, CA 94107
S: (123) 456-7890
Not: Bir içindeki her satır , içeriği düzgün bir şekilde yapılandırmak için <address>bir satır sonu ( <br />) ile bitmeli veya blok düzeyinde bir etiketle (örneğin, ) sarılmalıdır .<p>
Kısaltmalar
Kısaltmalar ve kısaltmalar için ( HTML5'te kullanımdan kaldırılmıştır ) <abbr>etiketini kullanın . Steno formunu etiketin içine koyun ve tam ad için bir başlık belirleyin.<acronym>
blok alıntılar
<blockquote> <p> <small>
alıntı nasıl yapılır
<blockquote>Bir blok alıntı eklemek için, etrafına sarın <p>ve <small>etiketler. Kaynağınızı belirtmek için öğeyi kullanın <small>ve ondan önce bir uzun tire göreceksiniz —.
Lorem ipsum dolor sit amet, conectetur adipiscing elit. Tamsayı pozu, bir ante venenatis dapibus pozu velit aliquet dönemi.
Dr.Julius Hibbert
Listeler
sırasız<ul>
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Massa'da tamsayı molestie lorem
- Pretium nisl aliquet'te facilisis
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor ilmi
tarzsız<ul.unstyled>
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Massa'da tamsayı molestie lorem
- Pretium nisl aliquet'te facilisis
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor ilmi
sipariş edildi<ol>
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Massa'da tamsayı molestie lorem
- Pretium nisl aliquet'te facilisis
- Nulla volutpat aliquam velit
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor ilmi
Tanımdl
- Açıklama listeleri
- Bir açıklama listesi, terimleri tanımlamak için mükemmeldir.
- Euismod
- Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
- Donec id, eget metus'ta elit olmayan porta gravida.
- Malesuada limanı
- Etiam porta sem maleuada magna mollis euismod.
Tablolar Tahmin ettiniz, tablo verileri
Bina masaları
<table> <thead> <tbody> <tr> <th> <td> <colspan> <caption>
Tablolar harika - birçok şey için. Ancak harika tablolar, kullanışlı, ölçeklenebilir ve okunabilir (kod düzeyinde) olmak için biraz biçimlendirme sevgisine ihtiyaç duyar. İşte size yardımcı olacak birkaç ipucu.
Sütun başlıklarınızı her zaman <thead>hiyerarşi <thead>> <tr>> olacak şekilde sarın <th>.
Sütun başlıklarına benzer şekilde, tüm tablonuzun gövde içeriği <tbody>, hiyerarşiniz <tbody>> <tr>> olacak şekilde sarılmalıdır <td>.
Örnek: Varsayılan tablo stilleri
Tüm tablolar, okunabilirliği sağlamak ve yapıyı korumak için yalnızca temel sınırlarla otomatik olarak biçimlendirilecektir. Ekstra sınıflar veya nitelikler eklemeye gerek yok.
| # | İlk adı | Soy isim | Dil |
|---|---|---|---|
| 1 | Bazı | Bir | ingilizce |
| 2 | Joe | altılı paket | ingilizce |
| 3 | Stu | göçük | kod |
- <tablo>
- ...
- </tablo>
Örnek: Zebra çizgili
Zebra çizgileri ekleyerek masalarınızda biraz hava yaratın; sadece .zebra-stripedsınıfı ekleyin.
| # | İlk adı | Soy isim | Dil |
|---|---|---|---|
| 1 | Bazı | Bir | ingilizce |
| 2 | Joe | altılı paket | ingilizce |
| 3 | Stu | göçük | kod |
Not: Zebra şeritleme, IE8 ve altı gibi eski tarayıcılarda mevcut olmayan aşamalı bir geliştirmedir.
- <tablo sınıfı = "zebra çizgili" >
- ...
- </tablo>
Örnek: Zebra çizgili ve TableSorter.js
Önceki örneği alarak, jQuery ve Tablesorter eklentisi aracılığıyla sıralama işlevi sağlayarak tablolarımızın kullanışlılığını iyileştiriyoruz . Sıralamayı değiştirmek için herhangi bir sütunun başlığına tıklayın.
| # | İlk adı | Soy isim | Dil |
|---|---|---|---|
| 1 | Senin | Bir | ingilizce |
| 2 | Joe | altılı paket | ingilizce |
| 3 | Stu | göçük | kod |
- <script src = "js/jquery/jquery.tablesorter.min.js" ></script>
- <komut dosyası >
- $ ( işlev () {
- $ ( "tablo#sortTableÖrnek" ). tablo sıralayıcı ({ sortList : [[ 1 , 0 ]] });
- });
- </script>
- <tablo sınıfı = "zebra çizgili" >
- ...
- </tablo>
Formlar
Varsayılan stiller
Tüm formlara, okunabilir ve ölçeklenebilir bir şekilde sunmak için varsayılan stiller verilir. Metin girişleri, seçim listeleri, metin alanları, radyo düğmeleri ve onay kutuları ve düğmeler için stiller sağlanmıştır.
Yığılmış formlar
Formunuzun .form-stackedHTML'sine ekleyin ve etiketlerin solları yerine alanlarının üstünde olacak. Bu, formlarınız kısaysa veya daha ağır formlar için iki sütun girdiniz varsa harika çalışır.
Düğmeler
Bir kural olarak, nesneler için bağlantılar kullanılırken eylemler için düğmeler kullanılır. Örneğin, "İndir" bir düğme ve "son etkinlik" bir bağlantı olabilir.
Tüm düğmeler varsayılan olarak açık gri bir stile sahiptir, ancak farklı renk stilleri için bir dizi işlevsel sınıf uygulanabilir. Bu sınıflar mavi .primarysınıf, açık mavi .infosınıf, yeşil .successsınıf ve kırmızı .dangersınıf içerir. Ayrıca, kendi stillerinizi yuvarlamak çok kolay.
Örnek düğmeler
Düğme stilleri, uygulanmış olan her şeye .btnuygulanabilir. <a>Genellikle bunları yalnızca , öğelerine uygulamak <button>ve öğeleri seçmek isteyeceksiniz <input>. İşte nasıl göründüğü:
Alternatif boyutlar
Daha büyük veya daha küçük düğmeler mi istiyorsunuz? ye!
Engelli durumu
Etkin olmayan veya uygulama tarafından şu veya bu nedenle devre dışı bırakılan düğmeler için devre dışı durumunu kullanın. Bu .disabledbağlantılar ve öğeler :disablediçin .<button>
Bağlantılar
Düğmeler
Uyarılar ve Hatalar Başarı, uyarı ve hata mesajları veya uyarıları için stiller
Temel uyarılar
div.alert-message
Bir eylemin başarısızlığını, olası başarısızlığını veya başarısını vurgulayan tek satırlık mesajlar. Özellikle formlar için kullanışlıdır.
Mesajları engelle
div.alert-message.block-message
Biraz açıklama gerektiren mesajlar için paragraf stili uyarılarımız var. Bunlar, daha uzun hata mesajları vermek, kullanıcıyı bekleyen bir eylem konusunda uyarmak veya yalnızca sayfada daha fazla vurgu için bilgi sunmak için mükemmeldir.
Popovers İçeriği modlarda, araç ipuçlarında ve açılır pencerelerde görüntülemek için bileşenler
modlar
Kipler (diyaloglar veya ışık kutuları) arka plan bağlamının korunmasının önemli olduğu durumlarda bağlamsal eylemler için mükemmeldir.
Modal Başlık
×Güzel bir vücut…
Araç İpuçları
Twipsi'ler, kafası karışmış bir kullanıcıya yardım etmek ve onları doğru yöne yönlendirmek için çok kullanışlıdır.
Lorem ipsum dolar sit amet illo error ipsum veritatis aut iste perspiciatis iste voluptas natus illo quasi odit aut natus consequuntur consequuntur, aut natus illo voluptatem odit perspiciatis laudantium rem doloremque totam volup. Voluptasdicta eaque beatae aperiam ut enim voluptatem açıklanm a, voluptas quia odit fugit accusantium totam totam mimarı açıkla, tam yarı fugit fugit, totam doloremque unde sunt sted quae quae t e m e d e m e d e r m e m e d e d e n m u u u m u u l u m u l u m u l u m u d u u n m u l u m u l u m u l u m u u l u m u u n m u l u m u l u m u u n m u l u m u l u m u u l a r m ı ı ı m ı s ı n m u d u m u .
aşağıda!
Sağ!
ayrıldı!
üstünde!
popovers
Düzeni etkilemeden bir sayfaya alt metin bilgisi sağlamak için açılır pencereleri kullanın.
Popover Başlığı
Bootstrap'i Daha Az Kullanarak CSS'nizi değişkenler, karışımlar ve işlevlerle güçlendirin
Bootstrap, daha hızlı ve daha kolay web geliştirme için bir CSS ön işlemcisi olan Less ile birlikte kullanılacak açık kaynaklı bir karışım ve değişken paketi olan Preboot ile oluşturulmuştur.
Bootstrap'te Preboot'u nasıl kullandığımızı ve bir sonraki projenizde Less'i çalıştırmayı seçerseniz bundan nasıl yararlanabileceğinizi görün.
Bu nasıl kullanılır
Tarayıcınızda javascript aracılığıyla Bootstrap'in Daha Az değişkenlerini, karışımlarını ve CSS'deki yerleştirme özelliklerini tam olarak kullanmak için bu seçeneği kullanın.
- <link rel = "stylesheet/less" href = "less/bootstrap.less" media = "tümü" />
- <script src = "js/less-1.1.3.min.js" ></script>
.js çözümünü hissetmiyor musunuz? Daha az Mac uygulamasını deneyin veya kodunuzu dağıtırken derlemek için Node.js'yi kullanın.
Neler dahil
Bootstrap'ın bir parçası olarak Twitter Bootstrap'a dahil edilenlerden bazı önemli noktaları burada bulabilirsiniz. İndirmek ve daha fazlasını öğrenmek için Bootstrap web sitesine veya Github proje sayfasına gidin.
Değişkenler
Less'teki Değişkenler, CSS baş ağrınızı ücretsiz olarak sürdürmek ve güncellemek için mükemmeldir. Bir renk değerini veya sık kullanılan bir değeri değiştirmek istediğinizde, tek bir noktada güncelleyin ve hazırsınız.
- // Bağlantılar
- @linkColor : #8b59c2;
- @linkColorHover : koyulaştır ( @linkColor , 10 );
- // Griler
- @siyah : #000;
- @grayDark : aydınlat ( @siyah , % 25 );
- @gray : aydınlat ( @siyah , % 50 );
- @grayLight : aydınlat ( @siyah , % 70 );
- @grayLighter : aydınlat ( @siyah , % 90 );
- @beyaz : #fff;
- // Vurgu Renkleri
- @mavi : #08b5fb;
- @yeşil : # 46a546 ;
- @kırmızı : # 9d261d ;
- @sarı : # ffc40d ;
- @turuncu : #f89406;
- @pembe : #c3325f;
- @mor : #7a43b6;
- // Taban çizgisi ızgarası
- @basefont : 13 piksel ;
- @baseline : 18 piksel ;
yorum yapmak
/* ... */Less, CSS'nin normal sözdizimine ek olarak başka bir yorum stili de sağlar .
- // Bu bir yorumdur
- /* Bu da bir yorum */
Wazoo'yu karıştırır
Mixins, temel olarak CSS için içerir veya kısmidir ve bir kod bloğunu tek bir blokta birleştirmenize izin verir. box-shadowTarayıcılar arası geçişler, yazı tipi yığınları ve daha fazlası gibi satıcı önekli özellikleri için harikadırlar . Aşağıda Bootstrap ile birlikte gelen karışımların bir örneği verilmiştir.
Yazı tipi yığınları
- #yazı tipi {
- . steno ( @ağırlık : normal , @size : 14px , @lineHeight : 20px ) {
- yazı tipi boyutu : @size ;
- yazı tipi - ağırlığı : @ ağırlık ;
- satır yüksekliği : @lineHeight ; _
- }
- . sans - serif ( @ağırlık : normal , @boyut : 14 piksel , @lineHeight : 20 piksel ) {
- font - family : "Helvetica Neue" , Helvetica , Arial , sans - serif ;
- yazı tipi boyutu : @size ;
- yazı tipi - ağırlığı : @ ağırlık ;
- satır yüksekliği : @lineHeight ; _
- }
- . serif ( @ağırlık : normal , @boyut : 14 piksel , @lineHeight : 20 piksel ) {
- font - family : "Gürcistan" , Times New Roman , Times , sans - serif ;
- yazı tipi boyutu : @size ;
- yazı tipi - ağırlığı : @ ağırlık ;
- satır yüksekliği : @lineHeight ; _
- }
- . monospace ( @ağırlık : normal , @size : 12px , @lineHeight : 20px ) {
- font - family : "Monaco" , Courier New , monospace ;
- yazı tipi boyutu : @size ;
- yazı tipi - ağırlığı : @ ağırlık ;
- satır yüksekliği : @lineHeight ; _
- }
- }
Gradyanlar
- #gradyan {
- . yatay ( @startColor : #555, @endColor: #333) {
- arkaplan - renk : @endColor ;
- arka plan - tekrar et : tekrar et - x ;
- arka plan - görüntü : - khtml - gradyan ( doğrusal , sol üst , sağ üst , ( @startColor ), ile ( @endColor ) ); // Konqueror
- arka plan - görüntü : - moz - doğrusal - gradyan ( sol , @startColor , @endColor ); // FF 3.6+
- arka plan - görüntü : - ms - doğrusal - gradyan ( sol , @startColor , @endColor ); // IE10
- arka plan - görüntü : - webkit - gradyan ( doğrusal , sol üst , sağ üst , renk - durdurma ( % 0 , @startColor ), renk - durdurma ( % 100 , @endColor )); // Safari 4+, Chrome 2+
- arka plan - görüntü : - webkit - doğrusal - gradyan ( sol , @startColor , @endColor ); // Safari 5.1+, Chrome 10+
- arka plan - görüntü : - o - doğrusal - gradyan ( sol , @startColor , @endColor ); // Opera 11.10
- arka plan - görüntü : doğrusal - gradyan ( sol , @startColor , @endColor ); // Standart
- }
- . dikey ( @startColor : #555, @endColor: #333) {
- arkaplan - renk : @endColor ;
- arka plan - tekrar et : tekrar et - x ;
- arka plan - resim : - khtml - gradyan ( doğrusal , sol üst , sol alt , ( @startColor ), ile ( @endColor ) ); // Konqueror
- arka plan - görüntü : - moz - doğrusal - gradyan ( @startColor , @endColor ); // FF 3.6+
- arka plan - görüntü : - ms - doğrusal - gradyan ( @startColor , @endColor ); // IE10
- arka plan - görüntü : - webkit - gradyan ( doğrusal , sol üst , sol alt , renk - durdurma ( % 0 , @startColor ), renk - durdurma ( % 100 , @endColor )); // Safari 4+, Chrome 2+
- arka plan - görüntü : - webkit - doğrusal - gradyan ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+
- arka plan - görüntü : - o - doğrusal - gradyan ( @startColor , @endColor ); // Opera 11.10
- arka plan - görüntü : doğrusal - gradyan ( @startColor , @endColor ); // Standart
- }
- . yönlü ( @startColor : #555, @endColor: #333, @deg: 45deg) {
- ...
- }
- . dikey - üç - renk ( @startColor : #00b3ee, @midColor: #7a43b6, @colorStop: %50, @endColor: #c3325f) {
- ...
- }
- }
Operasyonlar ve ızgara sistemi
Aşağıdaki gibi esnek ve güçlü karışımlar oluşturmak için süslü olun ve biraz matematik yapın.
- // Izgara
- @gridColumns : 16 ;
- @gridColumnWidth : 40 piksel ;
- @gridGutterWidth : 20 piksel ;
- @siteWidth : ( @gridColumns * @gridColumnWidth ) + ( @gridGutterWidth * ( @gridColumns - 1 ));
- // Izgara Sistemi
- . kapsayıcı {
- genişlik : @siteWidth ;
- kenar boşluğu : 0 otomatik ;
- . düzeltme ();
- }
- . sütunlar ( @columnSpan : 1 ) {
- genişlik : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));
- }
- . offset ( @columnOffset : 1 ) {
- kenar boşluğu - sol : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) + @extraSpace ;
- }