İndirme

Bootstrap (şu anda v3.3.7) farklı beceri düzeyleri ve kullanım seviyesine hitap ederek, farklı ve kolay yolu bulmaya izin verir. İhtiyaçlarınıza en uygun hangisi olduğunu görmek için okuyun.

Bootstrap

Derlenmiş ve minimize edilmiş CSS, JavaScript, ve Yazı tipleri. Dokümantasyon ve orijinal kaynak dosyaları dahil değildir.

Bootstrap İndir

Kaynak Kodu

Dokümanlarımız ile birlikte kısıtlı Kaynak, JavaScript, ve yazı tipi dosyaları.Derleme ve kurulum gerektirir.

Kaynağı İndir

Bootstrap CDN

Herkese MaxCDN, Bootstrap CSS ve JavaScript dağıtım ağı desteğini sunuyoruz. Sadece Bootstrap CDN bağlantısını kullanabilirsiniz.

<!-- En son derlenmiş ve minimize edilmiş CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Opsiyonel tema -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<!-- En son derlenmiş ve minimize edilmiş JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Bower ile Kurulum

Bower kurulumu yaparak, Bootstrap, CSS, Javascript ve yazı tipleri kullanarak ve daha az dosya yönetin.

$ bower install bootstrap

NPM ile Kurulum

Ayrıca NPM 'i kullanarak Bootstrap kurabilirsiniz.

$ npm install bootstrap

require('bootstrap') Bootstrap adlı jQuery eklentileri nesne üzerine tam yüklenecektir. Bootstrap modülünün ortaya çıkarılması hiçbir sonuç vermez. Bootstrap paketinin dizininin altındaki dosyalarını /js/*.js tek tek yükleme yoluyla jQuery eklentileri yükleyebilirsiniz.

Bootstrap package.json adlı aşağıdaki anahtarların altında bazı ek meta içerir:

  • less - Bootstrap ana yolu değişken kaynak dosyası
  • style - Bootstrap standart ayarları kullanılarak derlenmiş ve küçültülmüş CSS yolu (Özelleştirme yapılmamış)

Less/Sass için gerekli Autoprefixer

Bootstrap kullanan Autoprefixer ile başa çıkmak için CSS sağlayıcı ön ekleri ne bakınız. Eğer burada Less / Sass kaynağından derleme Bootstrap ve bize ait Gruntfile kullanmıyorsanız, sizin tarafınızdan oluşturma işlemi yapılırken Autoprefixer entegre etmek gerekir. Eğer önceden derlenmiş Bootstrap kullanarak veya Gruntfile kullanıyorsanız, bu konuda endişelenmenize gerek yok, çünkü Autoprefixer zaten Gruntfile entegre durumdadır.

İndirme paketine neler dahil ?

Bootstrap mantıklı ortak kaynakları içeren hem derlenmiş, hem de küçültülmüş sürümüne göre gruplandırılmış iki versiyonu, aşağıdaki klasörleri ve dosyaları dahil indirilebilir.

jQuery Gerekli

Unutmayın tüm JavaScript eklentileri jQuery ihtiyaç gösterildiği gibi temel şablonuna dahil edilecek.bower.json üzerinde jQuery tarafından desteklenen sürümleri görebilirsiniz.

Önceden derlenmiş Bootstrap

Bunu indirdikten sonra, (derlenmiş) göbeğini yapısını görmek için sıkıştırılmış klasörü açın. Böyle bir şey bulacaksınız:

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   └── bootstrap-theme.min.css
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2

Herhangi bir web projesine hızlı kullanım için önceden derlenmiş dosyaları kolay yükleyebilirsiniz: Bu Bootstrap için en temel şekildir. Derlenmiş CSS ve JS (bootstrap.*), yanı sıra derlenmiş ve minified CSS ve JS (bootstrap.min.*). CSS kaynak haritaları (bootstrap.*.map) bazı tarayıcıların geliştirici araçları ile kullanımı mevcuttur. İsteğe bağlı Bootstrap tema olarak Glyphicons ile gelen fontlar dahil edilmiştir.

Bootstrap kaynak kodu

Kaynak kodunu indirirken CSS, Javascript bileşenleri ve önceden oluşturulmuş yazı, yanı sıra kaynak kodu, Javascript ve belgeleri içerir. Daha özel olarak ise, aşağıdaki ve daha fazlasını içerir:

bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│   ├── css/
│   ├── js/
│   └── fonts/
└── docs/
    └── examples/

less/, js/, ve fonts/ a bizim CSS, JS ve simge yazı (sırasıyla) için kaynak kodu vardır. dist/ klasör üzerinde önceden derlenmiş indir bölümünde listelenen her şeyi içerir.docs/ klasörü bizim belgelerimiz için kaynak kodu ve examples/ Bootstrap kullanım içindir. Bunun dışında, diğer tüm dosyalar paketleri için destek dahil, lisans hakkında bilgi sağlar.

CSS ve JavaScript Derleme

Bootstrap kullanan kendi yapı sisteminiz için Grunt çerçeve ile çalışabilirsiniz. Derlemeleri ve testleri nasıl çalıştırılması konusuna göz atalım.

Grunt Yükleyin

Grunt yüklemek için öncelikle node.js indirmeniz gerekmektedir (NPM yer almaz).,. NPN platformu ise düğüm paket modülleri ve node.js geliştime paketleri yönetmek için kullanılır.

Komut satırından:
  1. grunt-cli ile npm install -g grunt-cli yükleyiniz.
  2. Kök dizine /bootstrap/ gidin, npm install yüklemeyi çalıştırın. NPM ile package.json dosyasına baktığımızda otomatik olarak orada listelenen diğer gereksinimleri yükleyin.

Tamamlandığında, komut satırından sunulan çeşitli Grunt komutlarını çalıştırmanız mümkün olacaktır.

Mevcut Grunt komutları

grunt dist (Sadece CSS ve JavaScript derlemek)

minified CSS ve JavaScript dosyaları ile dizin yolu /dist/ derlenmesi. Bootstrap kullanıcısı olarak, istediğiniz komut normal olarak budur.

grunt watch (İzle)

Daha az kaynak dosyaları izler ve bir değişikliği kaydetmek istediği zaman otomatik, CSS onları yeniden derler.

grunt test (Testleri Çalıştırma)

JSHint ve QUnit içinde headlessly testleri PhantomJS ile çalışır.

grunt docs (Oluşturulan dosya varlıkları testi)

Kurulu CSS, JavaScript ve diğer varlıklar jekyll serveüzerinde yerel belgeleri çalıştırırken kullanılan testlerdir.

grunt (Kesinlikle herşeyi oluşturun ve testleri çalıştırın)

minifies CSS ve JavaScript derler, Özelleştirici varlıklarını yeniler, ve dokümantasyon web sitesi oluşturur, HTML5 dokümanlara karşı validator çalışır. Jekyll gereklidir.

Sorun Giderme

Eğer gereksinimlerin kurulumu veya Grunt komutları çalıştırarak sorunlarla karşılaşırsanız, ilk önce NPM tarafından üretilen /node_modules/ dizinini silin. Sonra, yeniden npm install yüklemeyi çalıştırın.

Temel Şablon

Temel HTML şablonu ile başlayabilir, yada buradaki örnekleri değiştirebilirsiniz. İhtiyaçlarınızı karşılamak için buradaki şablonları ve örnekleri özelleştirerek kendinize uygun hale getirebilirsiniz.

Küçültülmüş Bootstrap belgesi ile çalışmaya başlamak için aşağıdaki HTML kodunu kopyalayın.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Şablon</title>
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Merhaba, Dünya!</h1>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
      <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Örnekler

Bootstrap 'in birden çok bileşeni ile birlikte Temel Şablon oluşturunuz. Projenizin ihtiyaçlarını karşılamak ve özelleştirmek için Bootstrap ile uyarlama yapmanızı tavsiye ediyoruz.

Çerçeve Kullanımı

Starter template example

Başlangıç Şablonu

Gereksiz bir şey yoktur: Derlenmiş CSS ve JavaScript.

Bootstrap theme example

Bootstrap Tema

Gelişmiş görsel bir deneyim için opsiyonel Bootstrap Teması yükleyin.

Multiple grids example

Grids - Izgaralar

İç içe ve daha düzenleri ızgaralar için çeşitli örnekler.

Jumbotron example

Jumbotron

Bir gezinti çubuğu ve temel ızgara sütunlu bir jumbotron etrafında bileşenleri oluşturun.

Narrow jumbotron example

Daraltılmış Jumbotron

Konteyner ve jumbotron daraltarak daha özel bir sayfa oluşturun.

Gezinti Çubuğu Eylemleri

Navbar example

Gezinti Çubuğu

Ek içeriğe sahip bir gezinme çubuğu içeren mükemmel temel şablon.

Static top navbar example

Üst bölümde Statik gezinti çubuğu

Ek içerik ile statik üst gezinti çubuğu içeren mükemmel basit bir şablon.

Fixed navbar example

Sabit gezinti çubuğu

Ek içerik ile yukarıdaki sabit gezinti çubuğu içeren mükemmel basit bir şablon.

Özel Bileşenler

A one-page template example

Kapak

Ana sayfaların basit ve zarif tasarımı için uygundur.

Carousel example

Carousel

Daha sonra yeni bileşenler eklemek gezinti çubuğu ve carousel ayarlayın.

Blog layout example

Blog

İki sütun, özel navigasyon ve yazı tipi ile basit bir blog şablonu.

Dashboard example

Kontrol Paneli

Sabit kenar çubuğu ve gezinti çubuğu ile yönetici tablosu için temel yapı.

Sign-in page example

Oturum açma sayfası

Basit bir giriş formu uyarlaması.

Justified nav example

Gömülü Gezinti çubuğu

Bağlantıları olan özel bir gezinti çubuğu oluşturun. Dikkat edin! Safari dostu değil.

Sticky footer example

Sabit Alt Bilgi

İçerik daha kısa olduğunda ekranın altında sabit bir altbilgi yerleştirin.

Sticky footer with navbar example

Gezinti çubuğu ile Sabit Alt Bilgi

Gezinme çubuğunda - Ekranın alt kısmında altbilgi görüntüler.

Deneyler

Non-responsive example

Duyarlı olmayan Bootstrap

Bootstrap duyarlılığını düzenini belgelerinizde kolayca devre dışı bırakın.

Off-canvas navigation example

Off-canvas

Bootstrap ile çalışmak için değiştirilebilir yan gezinme çubuğu oluşturun.

Araçlar

Bootlint

Bootlint Resmi Bootstrap HTML linter aracıdır. Otomatik olarak "vanilla" şeklinde Bootstrap kullanan web sayfalarının birçok yaygın HTML hataları denetler. Vanilla Bootstrap 'in parçaları/eklentileri belli yapılara uyacak şekilde kendi DOM parçalarını gerektirir. Bootlint Bootstrap HTML bileşenleri örneklerinin doğru yapılandırılmış olduğunu kontrol eder. Eğer yaygın hatalardan projenizin gelişimini yavaşlatmasını engellemek istiyorsanız Bootlint web geliştirme araçları ekleyin.

Topluluk

Bootstrap gelişiminden haberdar olun ve bu yararlı kaynakları kullanarak toplulukla iletişim kurun.

Ayrıca Son söylentiler ve müthiş müzik videoları için Twitter 'da @getbootstrap adresinden takip edebilirsiniz. .

Uyumluluğu devre dışı bırakmak

Bootstrap otomatik olarak sayfalarınızı çeşitli ekran boyutlarına uyarlar. Sayfada bu özelliği devre dışı bırakmanın nasıl göründüğünün örneğine göz atın.

Nasıl devre dışı bırakılır ?

  1. viewport <meta> etiketlerini kaldırın, CSS dosyasında belirtilmektedir.
  2. .container üstündeki width değiştirin. Tek bir genişliğe sahip her bir grid katmanı, örneğin width: 970px !important; bunun standart Bootstrap CSS den geldiğine emin olun. Alternatif olarak !important ile farklı medya sorgu kullanımları veya bazı karmaşık seçicileri (selector-fu) önleyebilirsiniz.
  3. Gezinti çubukları kullanacaksanız, gezinme çubuğunda tüm davranışları kaldırınız.
  4. Grid yapıları için .col-xs-* ek sınıfları yada onun yerine orta/büyük kullanılabilir. Merak etmeyin, ekstra küçük cihaz tüm çözünürlükler için Grid 'leri ölçekler.

IE8 için Respond.js gerekir (Medya sorgularımızdan dolayı hala işlenmesi gerekmektedir.). Bu "mobil site" Bootstrap görünümünü devre dışı bırakır.

Bootstrap modeli reaktivitesi devre dışı

Biz bir örnek için bu adımları kullandık. Uygulanan spesifik değişiklikleri görmek için kaynak kodu okuyunuz.

Örneği görüntüle

v2.x den v3.x e yükseltme için

Eski sürümlerden Bootstrap v3.x yeni sürümüne geçmek için bir yol mu arıyorsunuz? Bkz Yükseltme katalogu.

Desteklenen cihazlar ve internet tarayıcıları

Bootstrap en son mobil ve standart internet tarayıcıları ile mükemmel çalışır. Bu onun işlevselliğini korurken eski tarayıcıların biraz farklı bileşenleri görüntülemesi anlamına da gelir.

Desteklenen web tarayıcılar

Aşağıdaki tarayıcı ve platformlarda özellikle en son sürümler desteklenmektedir. Windows 'da, Internet Explorer 8-11 desteklenmektedir. Daha özel destek bilgileri aşağıda yer almaktadır.

Chrome Firefox Internet Explorer Opera Safari
Android Destekli Destekli N/A Desteklenmiyor N/A
iOS Destekli N/A Desteklenmiyor Destekli
Mac OS X Destekli Destekli Destekli Destekli
Windows Destekli Destekli Destekli Destekli Desteklenmiyor

Bootstrap görünümü Linux için resmi olarak desteklenmemesine rağmen Chromium ve Crome, Firefox ve Internet Explorer 7 Linux için yeterli şekilde çalışır.

Bootstrap 'de bazı tarayıcı hatalarıyla uğraşmak zorunda kalanlar için,Tarayıcı hataları duvarı'na bakınız.

Internet Explorer 8 ve 9

Internet Explorer 8 ve 9 are deteklenmektedir, ancak, CSS3 ve HTML5 elemanlarının bazı özelliklerinin tam olarak bu tarayıcılarda desteklenmiyor olduğunu hatırlatıyorum. Buna ek olarak, multimedya sorgularına destek vermek için İnternet Explorer 8Respond.js kullanmayı gerektirir.

Özellik Internet Explorer 8 Internet Explorer 9
border-radius Desteklenmiyor Dektekli
box-shadow Desteklenmiyor Destekli
transform Desteklenmiyor -ms ön eki ile Destekli
transition Desteklenmiyor
placeholder Desteklenmiyor

CSS3 ve HTML5 web tarayıcısı fonksiyonları hakkında bilgi edinmek için burayı ziyaret edebilirsiniz.

Internet Explorer 8 ve Respond.js

Internet Explorer 8 için üretim ve geliştirme ortamlarında Respond.js kullanırken aşağıdaki uyarılara dikkat edin.

Respond.js ve CSS etki alanları arası

Farklı (alt) etki alanında yüklenen ek yapılandırma gerektiren bir CSS ile Respond.js kullanın (Örneğin, bir CDN). Daha fazla bilgi için Respond.js belgelerine bakınız.

Respond.js ve file://

Tarayıcı güvenliği kuralları nedeniyle, Respond.js aracılığıyla file:// protokolü (Yerel HTML dosyasını açarken gibi) ile görüntülenen sayfalarınız çalışmaz. IE8 özelliklerinin işlevselliğini sınamak için, HTTP (S) üzerinden sayfalarını görüntülemek için Respond.js belgelerinin detaylarına bakabilirsiniz.

Respond.js ve @import

@import referans ile CSS yapıldığı için Respond.js ile çalışmaz. Özellikle, bazı Drupal konfigürasyonlarının @import ile kullanımı bilinmektedir. Respond.js belgelerinin detaylarına bakabilirsiniz.

İnternet Explorer 8 ve pencere boyutu

box-sizing: border-box; ile birlikte min-width, max-width, min-height, yada max-height kombine edildiğinde İnternet Explorer 8 tam destek vermemektedir. Bu nedenle, sürüm v3.0.1 den başlayarak, .container 'ler üzerinde max-width kullanılmamaktadır.

İnternet Explorer 8 ve @font-face

:before ile @font-face kombine edildiğinde IE8 'de bazı sorunlar yaşanmaktadır. Bootstrap kendi Glyphicons o kombinasyonunu kullanır. Bir sayfa önbelleğe yüklü ve pencere üzerinde fare olmadan yüklenmişse (yani internet explorer 'de iframe yada yenileme düğmesi ile yükleme) o zaman sayfa yazı yüklenmeden önce oluşturulur. Yan (gövde) üzerine gelindiğinde simgelerden bazılarını gösterir ve kalan simgeleri göstermek için üzerinde geziniz. Ayrıntılar için Bkz #13863

IE Uyumluluk Modu

Bootstrap eski Internet Explorer uyumluluk modunda desteklenmez. IE için son oluşturma modu kullandığınızdan emin olmak için, sayfalarınızda özel <meta> etiketleri kullanmayı düşününüz:

<meta http-equiv="X-UA-Compatible" content="IE=edge">

Hata ayıklama araçları açarak belge modunu onaylayın: F12 basın ve "Belge Modunu" kontrol edin.

Bu etiket İnternet Explorer'ın desteklenen her sürümünde mümkün olan en iyi render'ı sağlamak için Bootstrap belgelerinin ve örneklerinin tümünde yer almaktadır.

Bkz StackOverflow soruları ve daha fazlası için.

Windows 8 ve Windows Phone 8 için İnternet Explorer 10

İnternet Explorer 10 cihazın genişliği ve pencere genişliği arasında ayırım yapmaz ve bu nedenle CSS Bootstrap yanlış medya sorguları gönderir. Normalde, bu sorunu gidermek için, kısa bir CSS bölümü eklemek gerekir:

@-ms-viewport       { width: device-width; }

Ancak, Windows Phone 8 cihazlarda çalışmıyorGüncelleme 3 (a.k.a. GDR3) paketi, çoğunlukla masaüstü cihazları görünümü yerine dar "telefon" görüntüsünü göstermeye neden olur. Geçici hatalara çözüm bulabilmek için size gereken, aşağıdaki CSS ve JavaScript 'i kullanabilirsiniz.

@-webkit-viewport   { width: device-width; }
@-moz-viewport      { width: device-width; }
@-ms-viewport       { width: device-width; }
@-o-viewport        { width: device-width; }
@viewport           { width: device-width; }
if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
  var msViewportStyle = document.createElement('style')
  msViewportStyle.appendChild(
    document.createTextNode(
      '@-ms-viewport{width:auto!important}'
    )
  )
  document.querySelector('head').appendChild(msViewportStyle)
}

Daha fazla bilgi ve kullanımı ile ilgili, Bkz Windows Phone 8 ve Cihaz-Genişlik.

Not: Örnek olarak Bootstrap 'in belgeleri ve şablonları için bu tekniği kullanın.

Safari'de yüzdeleri yuvarlama

iOS v8.0 ve OS X için Safari v7.1 sürümleri öncesinde bizim kullandığımız .col-*-1 grid sınıflarında ondalık basamak sayısı ile ilgili bazı sorunlar vardı. Eğer tablo içinde 12 ayrı sütun varsa, yani, başka bir satır sütun işaret ile karşılaştırıldığında onları kısa görürsünüz. Bu durumda pek bir şey yapamazsınız. Safari / iOS güncelleme yanında bazı geçici çözüm seçeneğiniz vardır:

  • Zorla sağa hizalama için ekranın son sütuna .pull-right ekleyin.
  • Safari için mükemmel bir yuvarlama elde etmek manuel yüzdelerini ayarlayın (ilk seçenek daha zor.)

Modal pencereleri, gezinti çubukları ve sanal klavyeler

Taşma ve kaydırma

iOS ve Android üzerinde <body> elemanı overflow: hidden desteği oldukça sınırlıdır. Ya üst ya da alt modal 'a kaydırma amaçlı yaptığınızda bu cihazların tarayıcıları,<body> içeriğini kaydırmaya başlayacaktır.

Sanal klavyeler

Bir modal veya sabit bir gezinme çubuğu alanları kullanıyorsanız. iOS sanal klavye tetiklendiğinde sabit elemanların konumunu güncelleme yapmayan bir hata olduğunu unutmayın. Bunun için birkaç geçici çözümler için position: absolute öğeleri dönüştürme içerir veya el konumlandırmasını düzeltmek için zamanlayıcı yürütmesini denemeye odaklanır. Bootstrap tarafında bu durum elde değil, bu nedenle uygulama için en iyi hangi çözüm yolunu kullanacağınızın kararı size kalmış.

Açılan gezinti çubukları

.dropdown-backdrop elemanı z-indeksleme karmaşıklığı nedeniyle iOS üzerinde gezinti çubuğu kullanılamaz. Bu nedenle, gezinme çubuğu açılır menüyü kapatmak için, doğrudan açılan menü elemanına tıklamak (veya iOS tıklama olayını tetikleyen başka bir eleman) zorundasınız.

Tarayıcı yakınlaştırma

Sayfaları yakınlaştırma Bootstrap bileşenlerinde görüntü sorunları gösterir (haritalama gibi). Probleme bağlı olarak, düzeltilmesi için (öncelikle arama yapın, yada ihtiyacınıza ait konuda bir destek isteyin) bizimle iletişime geçebilirsiniz. Ancak, genellikle bu hatayı görmezden gelme eğiliminde bulunulduğu için doğrudan bir çözümü yoktur. Nadiren bu sorunlarla başa çıkılmaktadır.

Sabit :hover/:focus Mobil

Gerçek gezinip çoğu dokunmatik ekran üzerinde mümkün olmasa da, çoğu mobil tarayıcılar :hover gezinti desteğini taklit etmektedir. Başka bir deyişle, kullanıcı farklı bir öğe üzerindeki stiller sadece bir öğe dokunduktan sonra uygulanır ve kaldırılır. :hover kullanılmış Bootstrap yapıları tarayıcılarında sıkışma durumuna neden olabilir. Bazı mobil tarayıcılarda :focus benzer bir şekilde yapılabilir.Tamamen bu tür stilleri çıkarmaktan başka bu konulara ilişkin basit bir çözüm yolu şu anda yoktur.

Yazdırma

Bazı modern tarayıcılarda, yazdırma ilginç olabilir.

Özellikle bir web sayfasını yazdırma sırasında medya sorgularını çözerken, Chrome V32 ve ne olursa olsun marj ayarları olduğu gibi, Chrome, fiziksel kağıt boyutundan önemli ölçüde daha dar bir viewport genişliği kullanır. Ekstra küçük bir Bootstrap ızgara aktivasyonu yazdırma sırasında bazı yanlışlıklara yol açabilir. Bkz #12078 için bazı detaylar. Geçici çözüm önerileri:

  • XS-Grid 'leri kucaklayın ve sayfa altında kabul edilebilir göründüğünden emin olun.
  • Yazıcıdaki kağıt ekstra küçük ve daha büyük olarak kabul edilir ve böylece değişken @screen-* değerleri daha az özelleştirilir.
  • Sadece grid boyutunun kesme noktalarını değiştirmek için yazdırma ortamına özel ortam sorguları ekleyin.

Ayrıca, Safari v8.0 'de, sabit genişlikli .container'ler yazdırırken Safari alışılmadık küçük yazıtipi kullanmaya neden olabilir. Daha fazla bilgi için #14868 bakınız. Bunun için potansiyel bir çözüm CSS 'e aşağıdaki kodu eklemek.

@media print {
  .container {
    width: auto;
  }
}

Android stock tarayıcı

Yerine Chrome'u kullanarak Android cihazlarda varsayılan tarayıcı olarak 4,1 (ve görünüşe göre bazı yeni sürümleri) olarak adlandırılan internet uygulaması Android için geliyor. Ne yazık ki, CSS açısından hataları ve tutarsızlıkları bu tarayıcı biraz yaygın bir halde.

Seçim Menüleri

Android stok tarayıcı, açık olup olmadığı <select> elemanları, border-radius ve/veya border uygulanarak sayfa denetimleri gösterilmez. (Bkz StackOverflow soru detayları için.) Android Stok Tarayıcıda ekran stilleri <select> elemanı olmadan ve bu CSS özelliklerini kaldırmak için aşağıdaki kod parçacıklarını kullanın. Chrome, Safari ve Mozilla tarayıcıları ile önlenebilir.

<script>
$(function () {
  var nua = navigator.userAgent
  var isAndroid = (nua.indexOf('Mozilla/5.0') > -1 && nua.indexOf('Android ') > -1 && nua.indexOf('AppleWebKit') > -1 && nua.indexOf('Chrome') === -1)
  if (isAndroid) {
    $('select.form-control').removeClass('form-control').css('width', '100%')
  }
})
</script>

Bir örnek görmek ister misiniz? JS Bin gösterisine bakın.

Doğrulayıcılar

Eski ve hatalı tarayıcılarda mümkün olan en iyi sonucu sunmak için, çeşitli yerlerde kullanılan Bootstrap CSS tarayıcı hack yapmak tarayıcılarda kendi hatalarını gidermek amacıyla belirli tarayıcı sürümlerinde çeşitli yerlerde özel CSS kullanılmıştır. Bu hack ile anlaşılır CSS geçersiz olduğunun doğrulanmasına neden olur. Bazı yerlerde, yepyeni CSS özelliklerini kulllanmak henüz tam standardize edilmemiştir. Bu ileri geliştirmeler için özel olarak yapılır.

Bu uyarılar doğrulama sırasında pratikte hack yapılmadan CSS kısmı tamamen doğrulanabildiğinden herhangi bir şekilde bozulmuş diğer kısım burada rol oynar. Bu nedenle bilerek bu uyarıları görmezden geliriz.

Üçüncü parti yazılımlar için destek

Bizim tarafımızdan üçüncü parti yazılımlar ve eklentilerini resmi olarak desteklenmemektedir, ama projenizde olası sorunları önlemek için yararlı tavsiyeler sunuyoruz.

Box-sizing (Kutu ölçekleme)

Google Maps ve Google Custom Search Engine dahil olmak üzere bazı üçüncü parti yazılımlar nedeniyle, Bootstrap ile uyumluluk * { box-sizing: border-box; } sağlamayan bir kural kullanmak, padding ile hesaplanan bir elemanın nihai genişliğini etkilemez. Bkz Kutu modeli ve ölçeklemesi için CSS ipuçları.

Bu bağlamda, (Seçenek 1) ihtiyaç duyduğunuzu geçersiz kılabilir yada (Seçenek 2) tüm bölgeler için kutu ölçeklemeyi(box-sizing) sıfırlayabilirsiniz.

/* Box-sizing resets
 *
 * Reset individual elements or override regions to avoid conflicts due to
 * global box model settings of Bootstrap. Two options, individual overrides and
 * region resets, are available as plain CSS and uncompiled Less formats.
 */
/* Option 1A: Override a single element's box model via CSS */
.element {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}
/* Option 1B: Override a single element's box model by using a Bootstrap Less mixin */
.element {
  .box-sizing(content-box);
}
/* Option 2A: Reset an entire region via CSS */
.reset-box-sizing,
.reset-box-sizing *,
.reset-box-sizing *:before,
.reset-box-sizing *:after {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}
/* Option 2B: Reset an entire region with a custom Less mixin */
.reset-box-sizing {
  &,
  *,
  *:before,
  *:after {
    .box-sizing(content-box);
  }
}
.element {
  .reset-box-sizing();
}

Ulaşabilirlik

Bootstrap ortak internet standartlarını takip eder ve minimum ek çaba ile, AT kullananlar için erişilebilir siteleri oluşturmak amacıyla kullanılır.

Navigasyonu atla

Navigasyon birçok bağlantılar içerir ve Ana içeriğe önce DOM gelirse, Skip to main content kullanabilirsiniz (Bkz A11Y Project article on skip navigation links) .sr-only kullanımı sınıfların görsel atlama bağlantısını gizlemek ve .sr-only-focusable sınıf odaklı bir bağlantının (sighted klavye kullanıcıları için) görünür hale gelmesini sağlayacaktır.

<body>
  <a href="#content" class="sr-only sr-only-focusable">Skip to main content</a>
  ...
  <div class="container" id="content" tabindex="-1">
    <!-- The main page content -->
  </div>
</body>

İçiçe başlıkları

Çeşitli başlıklar halinde (<h1> - <h6>) düzenleyerek, <h1> belgenizin ana başlığı olmalıdır. Peşinden <h2> - <h6> gelen başlıkları mantıklı kullanmak gerekir.

Daha fazla bilgi için HTML CodeSniffer ve Penn State's AccessAbility.

Renk kontrastı

Genellikle, Bootstrap içinde standart (styled button sınıfları çeşitleri, basic code blocks kod bazlı renkler için vurgulamalar, .bg-primarycontextual background yardımcı sınıfı ve varsayılan bağlantı rengi beyaz zemin üzerinde kullanıldığında) düşük kontrast oranına sahip (desteklenen oran 4.5:1) renk kombinasyonları kullanılır. Bu düşük görme gücüne veya renk körlüğüne sahip kullanıcılar için sorunlara neden olabilir. Bu varsayılan renklerin kontrast ve okunabilirliği artırmak için modifiye edilmesi gerekebilir.

Ek Kaynaklar

Lisans hakkında Sıkça Sorulan Sorular

Bootstrap MIT lisansı (Copyright 2015 Twitter) altında yayınlandı. Özetlemek gerekirse, bu koşullar aşağıdaki şekilde açıklanabilir.

Sizi gerektirir:

  • Çalışmalarınızda lisans ve telif hakkı bildirimini içerir

Size olanak verir:

  • Kişisel, özel, şirket içi ya da ticari amaçlar için bütün veya kısmen Bootstrap kullanım ve ücretsiz indirme,
  • Paketler veya oluşturduğunuz projelerde Bootstrap kullanın,
  • Kaynak kodunda değişiklikler yapın,
  • Bu lisansta belirtilmeyen üçüncü şahıslara Bootstrap işleme ve yayılması için alt lisans sağlayın.

Sizi yasaklamaktadır:

  • Bootstrap garanti olmaksızın sağlanır olabilecek zarardan sorumlu yazarları ve lisans sahipleri tutulur
  • Bootstrap oluşturucuları ve telif hakkı sahiplerini sorumlu tutar
  • Bootstrap oluşturucusuna uygun herhangi bir bileşeni dağıtabilir
  • Twitter sizin dağıtımınızı destekler ve Twitter 'a ait herhangi bir ticari markayı kullanmanızı önerir
  • Twitter 'a ait tüm markaları herhangi bir şekilde kullanarak bir Twitter yazılımını oluşturduk anlamına gelebilir

Sizin yapmanıza ihtiyaç yoktur:

  • Bootstrap kendi kaynağını ekleyin, ya da herhangi bir kaynak dağıtılması halinde buna yapmış olduğunuz herhangi bir değişiklik, sizin tarafınızdan içeriğe dahil edilebilir.
  • Bootstrap projenizdeki Bootstrap ile ilgili yeni değişiklikleri geri gönderin (iyileştirme için geri bildirim yapın).

Tam Bootstrap lisansının yer aldığı Proje Deposu 'nun detaylarına bakabilirsiniz.