Etiam porta sem maleuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac conectetur ac, vestibulum ve eros.
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 class="row">
- <div class = "span6 sütunu" >
- ...
- </div>
- <div class = "span10 sütunu" >
- ...
- </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
4
6
6
8
8
5
11
16
Sütunları dengeleme
4
8 ofset 4
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
Hemen hemen her site veya sayfa için temel 940 piksel genişliğinde, ortalanmış bir kapsayıcı düzeni.
- <body>
- <div sınıfı = "konteyner" >
- ...
- </div>
- </body>
Akışkan düzeni
Minimum ve maksimum genişliklere ve sol kenar çubuğuna sahip esnek bir akışkan veya sıvı sayfa yapısı. Uygulamalar 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.
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...
<strong>Ayrıca ve ile alt başlıklar da ekleyebilirsiniz.<em>
Çeşitli elementler
Vurgu, adres ve kısaltma kullanma
<strong> <em> <address> <abbr>
Ne zaman kullanılır
Vurgu etiketleri ( <strong>ve <em>), bir sözcük veya tümcecik ile çevresindeki kopyası arasında görsel ayrım eklemek için kullanılmalıdır. <strong>Sade eski dikkat ve kaygan dikkat ve başlıklar <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.
adresler
addressÖğe -tahmin ettiniz!-adresler için kullanılıyor . İşte nasıl göründüğü:
795 Folsom Ave, Suite 600
San Francisco, CA 94107
S: (123) 456-7890
Not: İçeriği herhangi bir stil uygulanmadan gerçek hayatta okunduğu gibi düzgün bir şekilde yapılandırmak için , an içindeki her satır addressbir satır sonu ( ) ile bitmelidir .<br />
Kısaltmalar
Kısaltmalar ve kısaltmalar için ( HTML5'te kullanımdan kaldırılmıştır ) abbretiketini 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> <cite>
blockquoteEtrafınıza paragraphve citeetiketlerinize sardığınızdan emin olun . Bir kaynağa atıfta bulunurken, citeöğeyi kullanın. CSS otomatik olarak bir uzun tire (—) ile bir adın önüne geçer.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut emek ve dolore magna aliqua...
Dr.Julius Hibbert
Listeler
sırasız<ul>
- Jeremy Bixby
- Robert Dezure
- Josh Washington
- Anton Capresi
- Takım arkadaşlarım
- George Castanza
- Jerry Seinfeld
- kozmo kramer
- Elaine Bennis
- Yeni adam
- John Jacob
- Paul Pierce
- Kevin Garnett
tarzsız<ul.unstyled>
- Jeremy Bixby
- Robert Dezure
- Josh Washington
- Anton Capresi
- Takım arkadaşlarım
- George Castanza
- Jerry Seinfeld
- kozmo kramer
- Elaine Bennis
- Yeni adam
- John Jacob
- Paul Pierce
- Kevin Garnett
sipariş edildi<ol>
- Jeremy Bixby
- Robert Dezure
- Josh Washington
- Anton Capresi
- Takım arkadaşlarım
- George Castanza
- Jerry Seinfeld
- kozmo kramer
- Elaine Bennis
- Yeni adam
- John Jacob
- Paul Pierce
- Kevin Garnett
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 theadhiyerarş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 |
- <table class="ortak tablo"> sınıf = "ortak 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 |
- <table class="ortak masa zebra çizgili"> class = "ortak masa 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 type="text/javascript" src="js/jquery/jquery.tablesorter.min.js"></script> type = "text/javascript" src = "js/jquery/jquery.tablesorter.min.js" ></script>
- <script type = "metin/javascript" >
- $ ( belge ). hazır ( işlev () {
- $ ( "tablo#sortTableÖrnek" ). tablo sıralayıcı ( { sortList : [[ 1 , 0 ]]} );
- });
- </script>
- <tablo sınıfı = "ortak masa 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 mavi bir .primarysınıf mevcuttur. Ayrıca, kendi stillerinizi yuvarlamak çok kolay.
Örnek düğmeler
Düğme stilleri, uygulanmış olan her şeye .btnuygulanabilir. aGenellikle bunları yalnızca , öğelerine uygulamak buttonve öğ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
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
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" type="text/css" href="less/bootstrap.less" media="all" /> rel = "stylesheet/less" type = "text/css" href = "less/bootstrap.less" media = "all" />
- <script type = "text/javascript" src = "js/less-1.0.41.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.
Renk değişkenleri
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;
- // Temel
- @temel : 20 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
- - ms - filtre : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor ); // IE8+
- filtre : e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor )); // IE6 ve IE7
- 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
- - ms - filtre : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor ); // IE8+
- filtre : e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor )); // IE6 ve IE7
- 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: 0,5, @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 ;
- // Izgara Sistemi
- . kapsayıcı {
- genişlik : @siteWidth ;
- kenar boşluğu : 0 otomatik ;
- . düzeltme ();
- }
- . sütunlar ( @columnSpan : 1 ) {
- ekran : satır içi ;
- yüzer : sol ;
- genişlik : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));
- kenar boşluğu - sol : @gridGutterWidth ;
- &: ilk - çocuk {
- kenar boşluğu - sol : 0 ;
- }
- }
- . offset ( @columnOffset : 1 ) {
- kenar boşluğu - sol : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 ) ) ! önemli ;
- }