üstünde

ayrıldı

Sağ

aşağıda

CSS'yi Hotlink'e bağlayın

En hızlı ve en kolay başlangıç için bu pasajı web sayfanıza kopyalamanız yeterlidir.

Daha Az ile kullanın

Daha Az kullanma hayranı mısınız? Sorun değil, sadece depoyu klonlayın ve şu satırları ekleyin:

GitHub'da çatal

Github'daki resmi Bootstrap deposuyla indirme, çatallama, çekme, dosya sorunları ve daha fazlasını yapın.

GitHub'da Önyükleme »

Şu anda v1.3.0

Tarih

Twitter'daki mühendisler, ön uç gereksinimlerini karşılamak için geçmişte aşina oldukları neredeyse tüm kitaplıkları kullandılar. Bootstrap, sunulan zorluklara bir cevap olarak başladı. Birçok harika insanın yardımıyla Bootstrap ö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.

Chrome, Safari, Internet Explorer ve Firefox'ta 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.

Javascript eklentileri
Tüm orijinal .less dosyaları
Tamamen derlenmiş ve küçültülmüş CSS
Eksiksiz stil kılavuzu belgeleri
Farklı düzenlere sahip üç örnek sayfa

Hızlı başlangıç örnekleri

Bazı hızlı şablonlara mı ihtiyacınız var? Bir araya getirdiğimiz bu temel örneklere göz atı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" > 
    ...
  </div>
  <div sınıfı = "span10" > 
    ...
  </div>
</div>

1/3

2/3

Sütunları dengeleme

8 ofset 4

1/3 ofset 2/3s

4 ofset 4

5 ofset 3

10 ofset 6

İç içe sütunlar

Gerekirse .row, mevcut bir sütun içinde bir sütun oluşturarak içeriğinizi iç içe yerleştirin.

İç içe sütunlara örnek

Sütunun 1. Seviyesi

Seviye 2

<div sınıfı = "satır" > 
  <div sınıfı = "span12" > 
    Sütunun 1. Seviyesi
    <div sınıfı = "satır" > 
      <div sınıfı = "span6" > 
        Seviye 2
      </div>
      <div sınıfı = "span6" > 
        Seviye 2
      </div>
    </div>
  </div>
</div>

Kendi ızgaranı yuvarla

Bootstrap'ta yerleşik olarak, varsayılan 940px ızgara sistemini özelleştirmek için bir avuç değişken bulunur. Biraz özelleştirme ile sütunların boyutunu, oluklarını ve içinde bulundukları kapsayıcıyı değiştirebilirsiniz.

ızgara içinde

Izgara sistemini değiştirmek için gereken değişkenlerin tamamı şu anda variables.less.

Değişken	Varsayılan değer	Tanım
`@gridColumns`	16	Izgara içindeki sütun sayısı
`@gridColumnWidth`	40 piksel	Izgara içindeki her sütunun genişliği
`@gridGutterWidth`	20 piksel	Her sütun arasındaki negatif boşluk
`@siteWidth`	Tüm sütunların ve olukların hesaplanan toplamı	Sütunların ve olukların sayısını saymak ve karışımın genişliğini ayarlamak için bazı temel eşleşmeler kullanıyoruz `.fixed-container()`.

Şimdi özelleştirmek için

Izgarayı değiştirmek, üç @grid-*değişkeni değiştirmek ve Less dosyalarını yeniden derlemek anlamına gelir.

Bootstrap, 24 sütuna kadar bir ızgara sistemini idare edecek şekilde donatılmıştır; varsayılan değer yalnızca 16'dır. Izgara değişkenlerinizin 24 sütunlu bir ızgaraya göre özelleştirilmiş nasıl görüneceği aşağıda açıklanmıştır.

@gridColumns : 24 ;       
@gridColumnWidth : 20 piksel ;   
@gridGutterWidth : 20 piksel ;

Yeniden derlendiğinde, hazır olacaksın!

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 class = "içerik" > 
      ...
    </div>
  </div>
</body>

Başlıklar ve kopya

Web sayfalarınızı yapılandırmak için standart bir tipografik hiyerarşi.

Tüm tipografik ızgara, değişkenler.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 kullanılabileceğine dair iki örnek:

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
S: (123) 456-7890

Tam Ad
[email protected]

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

<blockquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tamsayı pozu, bir ante venenatis dapibus pozu velit aliquet dönemi. </p>
  <small> Dr. Julius Hibbert </small>
</blockquote>

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ım`dl`

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.

kod

<code> <pre>

İki basit etiketle kodunuzu şık bir şekilde süsleyin. Javascript aracılığıyla daha da fazla harikalık için, Google'ın kod güzelleştirme kitaplığına girin ve hazırsınız.

Kod sunma

Kod, bloklar veya sadece satır içi parçacıklar, yalnızca doğru etikete sarılarak stil ile görüntülenebilir. Birden çok satıra yayılan kod blokları için <pre>öğeyi kullanın. Satır içi kod için <code>öğeyi kullanın.

eleman Sonuç

<code> <html>Bunun gibi bir metin satırında, sarılmış kodunuz bu öğeye benzeyecektir .

eleman	Sonuç
`<code>`	`<html>`Bunun gibi bir metin satırında, sarılmış kodunuz bu öğeye benzeyecektir .
`<pre>`	<div> <h1>Başlık</h1> <p>Tam burada bir şey...</p> </div> Not:`<pre>` Etiketlerin içindeki kodu mümkün olduğunca sola yakın tuttuğunuzdan emin olun ; tüm sekmeleri işleyecektir.
`<pre class="prettyprint">`	google-code-prettify kitaplığını kullanarak, kod bloklarınız biraz farklı bir görsel stil ve otomatik sözdizimi vurgulama elde eder. <div> <h1> Başlık </h1> <p> Tam burada bir şey... </p> </div> Google-code-prettify'ı indirin ve nasıl kullanılacağını öğrenmek için benioku dosyasını görüntüleyin.

<pre>

<div>
  <h1>Başlık</h1>
  <p>Tam burada bir şey...</p>
</div>

Not:<pre> Etiketlerin içindeki kodu mümkün olduğunca sola yakın tuttuğunuzdan emin olun ; tüm sekmeleri işleyecektir.

<pre class="prettyprint">

google-code-prettify kitaplığını kullanarak, kod bloklarınız biraz farklı bir görsel stil ve otomatik sözdizimi vurgulama elde eder.

<div> <h1> Başlık </h1> <p> Tam burada bir şey... </p> </div>

Google-code-prettify'ı indirin ve nasıl kullanılacağını öğrenmek için benioku dosyasını görüntüleyin.

satır içi etiketler

<span class="label">

Gövde metninizdeki herhangi bir ifadeye dikkat çekin veya işaret koyun.

Her şeyi etiketle

Hiç bu süslü Yenilerden birine ihtiyaç duydunuz ! veya Kod yazarken önemli bayraklar? Eh, şimdi onlara sahipsin. Varsayılan olarak dahil edilenler:

Etiket	Sonuç
`<span class="label">Default</span>`	Varsayılan
`<span class="label success">New</span>`	Yeni
`<span class="label warning">Warning</span>`	Uyarı
`<span class="label important">Important</span>`	Önemli
`<span class="label notice">Notice</span>`	Fark etme

Medya ızgarası

Düşük HTML ayak izi ve minimal stiller içeren sayfalarda farklı boyutlardaki küçük resimleri görüntüleyin.

Örnek küçük resimler

Küçük resimler .media-gridherhangi bir boyutta olabilir, ancak en iyi şekilde doğrudan yerleşik Bootstrap ızgara sistemine eşlendiğinde çalışırlar. 90, 210 ve 330 gibi görüntü genişlikleri .span2, .span4, ve .span6sütun boyutlarına eşit olmak için birkaç piksel dolgu ile birleştirilir.

Büyük

Orta

Küçük

Onları kodlamak

Medya ızgaralarının kullanımı kolaydır ve işaretleme tarafında oldukça basittir. Boyutları tamamen dahil edilen görüntülerin boyutuna dayanmaktadır.

<ul sınıfı = "medya ızgarası" > 
  <li>
    <a href = "#" > 
      <img class = "küçük resim" src = "https://placehold.it/330x230" alt = "" >   
    </a>
  </li>
  <li>
    <a href = "#" > 
      <img class = "küçük resim" src = "https://placehold.it/330x230" alt = "" >   
    </a>
  </li>
</ul>

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: Yoğunlaştırılmış tablo

Daha dar alanlarda daha fazla veri gerektiren tablolar için dolguyu yarıya indiren yoğunlaştırılmış tadı kullanın. Varsayılan tablo stilleri gibi kenarlıklar ve zebra çizgileriyle birlikte de kullanılabilir.

#	İlk adı	Soy isim	Dil
1	Bazı	Bir	ingilizce
2	Joe	altılı paket	ingilizce
3	Stu	göçük	kod

Örnek: Kenarlı tablo

Köşelerini yuvarlayarak ve her tarafa kenarlıklar ekleyerek masalarınızın biraz daha şık görünmesini sağlayın.

#	İlk adı	Soy isim	Dil
1	Bazı	Bir	ingilizce
2	Joe	altılı paket	ingilizce
3	Stu	göçük	kod

<tablo sınıfı = "bordered-table" > 
  ...
</tablo>

Örnek: Zebra çizgili

Zebra çizgileri ekleyerek masalarınızda biraz süslü olun - 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
4 sütuna yay
2 sütuna yay		2 sütuna yay

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
2	Joe	altılı paket	ingilizce
3	Stu	göçük	kod
1	Senin	Bir	ingilizce

<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>

Sabit üst çubuk

Bu ne

Üst çubuğumuz, bir web sitesinin logosunu veya adını, birincil gezinmeyi ve arama formunu barındıran sabit bir çubuktur.

özelleştirilebilir

İçindeki tüm öğeler ve ayrıca tüm üst çubuk isteğe bağlıdır. Bir logo/ad, gezinme, arama ve ikincil gezinme veya bunların herhangi bir kombinasyonunu eklemeyi seçebilirsiniz.

Açılır menüler dahil

Ana navigasyonun bir parçası olarak, navigasyonunuza açılır menüler ekleme özelliğini ekledik. Nasıl yapıldığını görmek için yukarıdaki ikincil gezinmeye (sağa hizalanmış) bakın. Açılır liste lietiketleri .active, geçerli sayfa seçimini göstermeyi de destekler.

Not: Herhangi bir sayfada üst çubuğu kullanırken padding-top: 40px;, body.

Sekmeler ve haplar

ile basit ikincil gezinme oluşturun <ul>. Uygun sınıfı ekleyerek sekmeler veya haplar arasında geçiş yapın.

Hesap ayarları sayfalarımız ve benzer içerik sayfaları arasında geçiş yapmak için kullanıcı zaman çizelgeleri gibi içeriğin alt bölümleri için idealdir. Sekmeli veya hap stillerinde mevcuttur.

Temel sekmeler örneği

Sekmeler, normal gezinme (aynı sekmede harici sayfaları yükleme) veya içerik bölmelerini değiştirmek için sekmeli içerik alanları olarak kullanılabilir. İkincisini entegre etmek için kullanılabilecek bir sekme eklentimiz var.

<ul class = "sekmeler" > 
  <li class = "etkin" ><a href = "#" > Ana Sayfa </a></li>  
  <li><a href = "#" > Profil </a></li> 
  <li><a href = "#" > Mesajlar </a></li> 
  <li><a href = "#" > Ayarlar </a></li> 
  <li><a href = "#" > İletişim </a></li> 
</ul>

Temel hap örneği

<ul sınıfı = "haplar" > 
  <li class = "etkin" ><a href = "#" > Ana Sayfa </a></li>  
  <li><a href = "#" > Profil </a></li> 
  <li><a href = "#" > Mesajlar </a></li> 
  <li><a href = "#" > Ayarlar </a></li> 
  <li><a href = "#" > İletişim </a></li> 
</ul>

Galeta unu

Breadcrumb navigasyonu, kullanıcılara bir uygulama veya site içinde nerede olduklarını göstermenin bir yolu olarak kullanılır, ancak birincil gezinme için kullanılmaz.

<ul sınıfı = "ekmek kırıntısı" > 
  <li><a href = "#" > Ana Sayfa </a> <span class = "bölücü" > / </span></li>   
  <li><a href = "#" > Orta sayfa </a> <span class = "bölücü" > / </span></li>   
  <li><a href = "#" > Bir tane daha </a> <span class = "bölücü" > / </span></li>   
  <li class = "active" > Buradasınız </li> 
</ul>

sayfalandırma

Rdio'dan ilham alan ultra basit ve minimal tarzda sayfalama. Büyük bloğu gözden kaçırmak zordur, kolayca ölçeklenebilir ve geniş tıklama alanları sağlar.

<div sınıfı = "sayfalama" > 
  <ul>
    <li class = "önceki devre dışı" ><a href = "#" > ← Önceki </a></li>  
    <li class = "etkin" ><a href = "#" > 1 </a></li>  
    <li><a href = "#" > 2 </a></li> 
    <li><a href = "#" > 3 </a></li> 
    <li><a href = "#" > 4 </a></li> 
    <li><a href = "#" > 5 </a></li> 
    <li class = "sonraki" ><a href = "#" > Sonraki → </a></li>  
  </ul>
</div>

Temel uyarılar

.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.

Javascript'i edinin »

Kutsal guakamole! En iyisi kendini kontrol et, pek iyi görünmüyorsun .

Çabuk! Bunu ve bunu değiştirip tekrar deneyin .

Aferin! Bu uyarı mesajını başarıyla okudunuz .

Önüne bak! Bu, dikkat etmeniz gereken bir uyarıdır, ancak henüz büyük bir öncelik değildir.

Örnek kod

<div class = "uyarı mesajı uyarısı" > 
  <a class = "kapat" href = "#" > × </a>  
  <p><strong> Kutsal guacamole! </strong> Kendinize iyi bakın, pek iyi görünmüyorsunuz. </p>
</div>

Mesajları engelle

.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.

Javascript'i edinin »

Kutsal guakamole! Bu bir uyarıdır! En iyisi kendini kontrol et, pek iyi görünmüyorsun. Nulla vitae seçkin libero, bir pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

Bu eylemi gerçekleştir ya da bunu yap

Çabuk! Bir hata aldın! Bunu ve bunu değiştirip tekrar deneyin .

Duis mollis est olmayan commodo luctus
Nisi erat porttitor ligula
Eget lacinia odio sem nec elit

Bu eylemi gerçekleştir ya da bunu yap

Aferin! Bu uyarı mesajını başarıyla okudunuz. Cum sociis natoque penatibus ve magnis doğumdan uzak montes, nascetur ridiculus mus. Maecenas faucibus mollis interdum.

Bu eylemi gerçekleştir ya da bunu yap

Önüne bak! Bu, dikkat etmeniz gereken bir uyarıdır, ancak henüz büyük bir öncelik değildir.

Bu eylemi gerçekleştir ya da bunu yap

Örnek kod

<div class = "uyarı mesajı blok mesajı uyarısı" > 
  <a class = "kapat" href = "#" > × </a>  
  <p><strong> Kutsal guacamole! Bu bir uyarıdır! </strong> Kendinize iyi bakın, pek iyi görünmüyorsunuz. Nulla vitae seçkin libero, bir pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. </p>
  <div class = "uyarı-eylemler" > 
    <a class = "btn small" href = "#" > Bu işlemi yapın </a> <a class = "btn small" href = "#" > Veya bunu yapın </a>     
  </div>
</div>

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.

Javascript'i edinin »

Araç ipuç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.

Javascript'i edinin »

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 .

popovers

Düzeni etkilemeden bir sayfaya alt metin bilgisi sağlamak için açılır pencereleri kullanın.

Javascript'i edinin »

Başlarken

Javascript'i Bootstrap kitaplığıyla entegre etmek çok kolaydır. Aşağıda, temel bilgileri gözden geçiriyoruz ve başlamanız için size harika eklentiler sunuyoruz!

Javascript belgelerini görüntüleyin »

Neler dahil

jQuery ve Ender ile çalışan yeni özel eklentilerle Bootstrap'in bazı temel bileşenlerini hayata geçirin . Bunları özel geliştirme ihtiyaçlarınıza uyacak şekilde genişletmenizi ve değiştirmenizi öneririz.

Dosya	Tanım
bootstrap-modal.js	Modal eklentimiz, geleneksel modal js eklentisinin süper ince bir versiyonudur! Yalnızca twitter'da ihtiyaç duyduğumuz yalın işlevleri dahil etmeye özen gösterdik.
bootstrap-alerts.js	Uyarı eklentisi, uyarılara yakın işlevsellik eklemek için süper küçük bir sınıftır.
bootstrap-dropdown.js	Bu eklenti, önyükleme üst çubuğuna veya sekmeli gezinmelere açılır menü etkileşimi eklemek içindir.
bootstrap-scrollspy.js	ScrollSpy eklentisi, önyükleme üst çubuğuna kaydırma konumuna dayalı bir otomatik güncelleme navigasyonu eklemek içindir.
bootstrap-buttons.js	ScrollSpy eklentisi, önyükleme üst çubuğuna kaydırma konumuna dayalı bir otomatik güncelleme navigasyonu eklemek içindir.
bootstrap-tabs.js	Bu eklenti, yerel içerik arasında geçiş yapmak için hızlı, dinamik sekme ve hap işlevi ekler.
bootstrap-twipsy.js	Jason Frame tarafından yazılmış mükemmel jQuery.tipsy eklentisine dayanarak; twipsy, resimlere dayanmayan, animasyonlar için css3 ve yerel başlık depolaması için veri öznitelikleri kullanan güncellenmiş bir sürümdür!
bootstrap-popover.js	Popover eklentisi, uygulamanıza popover eklemek için basit bir arayüz sağlar. Boostrap-twipsy.js eklentisini genişletir , bu yüzden projenize popover'ları eklerken o dosyayı da aldığınızdan emin olun!

javascript gerekli mi?

Hayır! Bootstrap, her şeyden önce bir CSS kütüphanesi olacak şekilde tasarlanmıştır. Bu javascript, dahil edilen stillerin üzerinde temel bir etkileşimli katman sağlar.

Ancak, javascript'e ihtiyaç duyanlar için, Bootstrap'ı javascript ile nasıl entegre edeceğinizi anlamanıza yardımcı olmak ve temel işlevler için hemen size hızlı, hafif bir seçenek sunmak için yukarıdaki eklentileri sağladık.

Daha fazla bilgi ve bazı canlı demoları görmek için lütfen eklenti dokümantasyon sayfamıza bakın .

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'tan 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 kontrol edin.

Bu nasıl kullanılır

Tarayıcınızda javascript aracılığıyla Bootstrap'in Less değişkenleri, karışımları 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 ; _ 
  }
  ...
}

Gradyanlar

#gradyan {
  ...
  . 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  
  }
  ...
}

Operasyonlar

Aşağıdaki gibi esnek ve güçlü karışımlar oluşturmak için süslü olun ve biraz matematik yapın.

// Griditude
@gridColumns : 16 ;       
@gridColumnWidth : 40 piksel ;   
@gridGutterWidth : 20 piksel ;   
@siteWidth : ( @gridColumns * @gridColumnWidth ) + ( @gridGutterWidth * ( @gridColumns - 1 ));                 
 
// Bazı sütunlar oluşturun
. sütunlar ( @columnSpan : 1 ) {  
  genişlik : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));         
}

Daha Az Derleme

/lib/ içindeki dosyaları değiştirdikten sonra .less, bootstrap-*.*.*.css ve bootstrap-*.*.*.min.css dosyalarını yeniden oluşturmak için bunları yeniden derlemeniz gerekir. GitHub'a bir çekme isteği gönderiyorsanız, her zaman yeniden derlemeniz gerekir.

Derleme yolları

Yöntem	adımlar
makefile ile düğüm	Aşağıdaki komutu çalıştırarak less komut satırı derleyicisini npm ile kurun: $ npm daha az yükle Kurulduktan sonra, sadece `make`önyükleme dizininizin kökünden çalıştırın ve hazırsınız. Ek olarak, watchr yüklediyseniz, bootstrap lib'de `make watch`bir dosyayı her düzenlediğinizde önyüklemenin otomatik olarak yeniden oluşturulması için çalıştırabilirsiniz (bu gerekli değildir, yalnızca bir kolaylık yöntemidir).
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.
Komut satırı	Daha az komut satırı aracı zaten kuruluysa, aşağıdaki komutu çalıştırmanız yeterlidir: $ lessc ./lib/bootstrap.less > bootstrap.css `--compress`Bazı baytları kaydetmeye çalışıyorsanız, bu komutu eklediğinizden emin olun !
Daha az 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.

CSS'yi Hotlink'e bağlayın

Daha Az ile kullanın

GitHub'da çatal

Bootstrap hakkında Kısa geçmiş, tarayıcı desteği ve daha fazlası

Tarih

tarayıcı desteği

Neler dahil

Hızlı başlangıç ​​örnekleri

Izgara sistemi Standart 940 pikseli sallayın veya kendinizinkini yuvarlayın

Varsayılan ızgara

Örnek ızgara işaretlemesi

Sütunları dengeleme

İç içe sütunlar

İç içe sütunlara örnek

Kendi ızgaranı yuvarla

ızgara içinde

Şimdi özelleştirmek için

Düzenler Web sayfaları oluşturmak için temel şablonlar

Sabit düzen

Akışkan düzeni

Tipografi Başlıklar, paragraflar, listeler ve diğer satır içi yazı öğeleri

Başlıklar ve kopya

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

Örnek başlık Alt başlığı var…

Çeşitli elementler

Ne zaman kullanılır

Bir paragrafta vurgu

adresler

Kısaltmalar

blok alıntılar

alıntı nasıl yapılır

Listeler

sırasız<ul>

tarzsız<ul.unstyled>

sipariş edildi<ol>

Tanımdl

kod

Kod sunma

satır içi etiketler

Her şeyi etiketle

Medya Görüntüleri ve videoları görüntüleme

Medya ızgarası

Örnek küçük resimler

Büyük

Orta

Küçük

Onları kodlamak

Tablolar Tahmin ettiniz, tablo verileri

Bina masaları

Örnek: Varsayılan tablo stilleri

Örnek: Yoğunlaştırılmış tablo

Örnek: Kenarlı tablo

Örnek: Zebra çizgili

Örnek: Zebra çizgili ve TableSorter.js

Formlar

Varsayılan stiller

Yığılmış formlar

Form alanı boyutları

Düğmeler

Örnek düğmeler

Alternatif boyutlar

Engelli durumu

Bağlantılar

Düğmeler

Navigasyon

Sabit üst çubuk

proje Adı

Bu ne

özelleştirilebilir

Açılır menüler dahil

Sekmeler ve haplar

Temel sekmeler örneği

Temel hap örneği

Galeta unu

Hızlı başlangıç örnekleri

sırasız`<ul>`

tarzsız`<ul.unstyled>`

sipariş edildi`<ol>`

Tanım`dl`