İndirmek

Bootstrap (şu anda v3.4.1) hızlı bir şekilde başlamak için her biri farklı bir beceri düzeyine ve kullanım senaryosuna hitap eden birkaç kolay yola sahiptir. Özel ihtiyaçlarınıza neyin uygun olduğunu görmek için baştan sona okuyun.

jsDelivr

jsDelivr'deki kişiler nezaketle Bootstrap'in CSS ve JavaScript'i için CDN desteği sağlıyor. Sadece bu jsDelivr bağlantılarını kullanın.

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>

Bower ile yükleyin

Ayrıca Bower kullanarak Bootstrap's Less, CSS, JavaScript ve yazı tiplerini yükleyebilir ve yönetebilirsiniz :

bower install bootstrap

npm ile yükleyin

Bootstrap'ı npm kullanarak da yükleyebilirsiniz :

npm install bootstrap@3

require('bootstrap')tüm Bootstrap jQuery eklentilerini jQuery nesnesine yükleyecektir. Modülün bootstrapkendisi hiçbir şeyi dışa aktarmaz. /js/*.jsPaketin üst düzey dizini altındaki dosyaları yükleyerek Bootstrap'in jQuery eklentilerini tek tek manuel olarak yükleyebilirsiniz .

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

• less- Bootstrap'in ana Daha az kaynak dosyasına giden yol
• style- varsayılan ayarlar kullanılarak önceden derlenmiş olan Bootstrap'in küçültülmemiş CSS'sine giden yol (özelleştirme yok)

Composer ile yükleyin

Ayrıca Composer kullanarak Bootstrap's Less, CSS, JavaScript ve yazı tiplerini yükleyebilir ve yönetebilirsiniz :

composer require twbs/bootstrap

Less/Sass için otomatik ön ekleyici gerekli

Bootstrap, CSS satıcı önekleriyle ilgilenmek için Otomatik Ön Düzeltici'yi kullanır . Bootstrap'i Less/Sass kaynağından derliyorsanız ve Gruntfile'ımızı kullanmıyorsanız, Autoprefixer'ı derleme sürecinize kendiniz entegre etmeniz gerekir. Önceden derlenmiş Bootstrap kullanıyorsanız veya Gruntfile dosyamızı kullanıyorsanız, Autoprefixer Gruntfile'ımıza zaten entegre olduğundan bu konuda endişelenmenize gerek yok.

Neler dahil

Bootstrap, ortak kaynakları mantıksal olarak gruplayan ve hem derlenmiş hem de küçültülmüş varyasyonlar sağlayan aşağıdaki dizinleri ve dosyaları bulacağınız iki biçimde indirilebilir.

Önceden Derlenmiş Önyükleme

İndirdikten sonra, (derlenmiş) Bootstrap yapısını görmek için sıkıştırılmış klasörü açın. Bunun gibi bir şey göreceksiniz:

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap.min.css.map
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   ├── bootstrap-theme.min.css
│   └── bootstrap-theme.min.css.map
├── 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

Bu, Bootstrap'in en temel biçimidir: hemen hemen her web projesinde hızlı açılan kullanım için önceden derlenmiş dosyalar. Derlenmiş CSS ve JS'nin ( bootstrap.*) yanı sıra derlenmiş ve küçültülmüş CSS ve JS'yi ( bootstrap.min.*) sağlıyoruz. CSS kaynak haritaları ( bootstrap.*.map), belirli tarayıcıların geliştirici araçlarıyla kullanım için mevcuttur. İsteğe bağlı Bootstrap temasında olduğu gibi Glyphicons'daki yazı tipleri de dahildir.

Önyükleme kaynak kodu

Bootstrap kaynak kodu indirmesi, kaynak Less, JavaScript ve belgelerle birlikte önceden derlenmiş CSS, JavaScript ve yazı tipi varlıklarını içerir. Daha spesifik olarak, aşağıdakileri ve daha fazlasını içerir:

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

, ve less/, CSS, JS ve simge yazı tiplerimizin (sırasıyla) kaynak kodudur. Klasör, yukarıdaki önceden derlenmiş indirme bölümünde listelenen her şeyi içerir . Klasör, belgelerimizin ve Bootstrap kullanımının kaynak kodunu içerir . Bunun ötesinde, dahil edilen diğer herhangi bir dosya, paketler, lisans bilgileri ve geliştirme için destek sağlar.js/fonts/dist/docs/examples/

CSS ve JavaScript'i Derlemek

Bootstrap , yapı sistemi için çerçeveyle çalışmak için uygun yöntemlerle Grunt'u kullanır. Kodumuzu bu şekilde derler, testler yapar ve daha fazlasını yaparız.

Grunt'u Yükleme

Grunt'u kurmak için önce node.js'yi (npm'yi içerir) indirip kurmanız gerekir . npm, düğüm paketli modüller anlamına gelir ve node.js aracılığıyla geliştirme bağımlılıklarını yönetmenin bir yoludur.

1. grunt-cliile global olarak yükleyin npm install -g grunt-cli.
2. Kök /bootstrap/dizine gidin, ardından çalıştırın npm install. npm dosyaya bakacak package.jsonve orada listelenen gerekli yerel bağımlılıkları otomatik olarak kuracaktır.

Tamamlandığında, komut satırından sağlanan çeşitli Grunt komutlarını çalıştırabileceksiniz.

Kullanılabilir Grunt komutları

grunt dist(Sadece CSS ve JavaScript'i derleyin)

/dist/Derlenmiş ve küçültülmüş CSS ve JavaScript dosyalarıyla dizini yeniden oluşturur. Bir Bootstrap kullanıcısı olarak bu normalde istediğiniz komuttur.

grunt watch(İzlemek)

Daha az kaynak dosyalarını izler ve bir değişikliği kaydettiğinizde bunları otomatik olarak CSS'ye yeniden derler.

grunt test(testleri çalıştırın)

Karma sayesinde JSHint'i çalıştırır ve QUnit testlerini gerçek tarayıcılarda çalıştırır .

grunt docs(Doküman varlıklarını oluşturun ve test edin)

Belgeleri yerel olarak çalıştırırken kullanılan CSS, JavaScript ve diğer varlıkları oluşturur ve test eder bundle exec jekyll serve.

grunt(Kesinlikle her şeyi oluşturun ve testler yapın)

CSS ve JavaScript'i derler ve küçültür, dokümantasyon web sitesini oluşturur, HTML5 doğrulayıcısını dokümanlara karşı çalıştırır, Özelleştirici varlıklarını yeniden oluşturur ve daha fazlasını yapar. Jekyll'ı gerektirir . Genellikle yalnızca Bootstrap'in kendisini hackliyorsanız gereklidir.

Sorun giderme

Bağımlılıkları yüklemek veya Grunt komutlarını çalıştırmakla ilgili sorunlarla karşılaşırsanız, önce /node_modules/npm tarafından oluşturulan dizini silin. Ardından, yeniden çalıştırın npm install.

Temel şablon

Bu temel HTML şablonuyla başlayın veya bu örnekleri değiştirin . Şablonlarımızı ve örneklerimizi ihtiyaçlarınıza göre uyarlayarak özelleştireceğinizi umuyoruz.

Minimal bir Bootstrap belgesiyle çalışmaya başlamak için aşağıdaki HTML'yi 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 Template</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <!-- 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://cdn.jsdelivr.net/npm/[email protected]/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
  </body>
</html>

Örnekler

Bootstrap'in birçok bileşeniyle yukarıdaki temel şablonu oluşturun. Bootstrap'i bireysel projenizin ihtiyaçlarına göre özelleştirmenizi ve uyarlamanızı öneririz.

Bootstrap deposunu indirerek aşağıdaki her örnek için kaynak kodunu alın . Örnekler docs/examples/dizinde bulunabilir.

çerçeveyi kullanma

Başlangıç ​​şablonu

Temel bilgiler dışında hiçbir şey: bir kapsayıcı ile birlikte derlenmiş CSS ve JavaScript.

Önyükleme teması

Görsel olarak geliştirilmiş bir deneyim için isteğe bağlı Bootstrap temasını yükleyin.

ızgaralar

Dört katmanın tümü, iç içe yerleştirme ve daha fazlasıyla birden çok ızgara düzeni örneği.

Jumbotron

Bir gezinme çubuğu ve bazı temel ızgara sütunlarıyla jumbotronun etrafına inşa edin.

Dar jumbotron

Varsayılan kapsayıcıyı ve jumbotron'u daraltarak daha özel bir sayfa oluşturun.

Gezinme çubukları iş başında

gezinme çubuğu

Bazı ek içeriklerle birlikte gezinme çubuğunu içeren süper temel şablon.

Statik üst gezinme çubuğu

Bazı ek içeriklerle birlikte statik bir üst gezinme çubuğuna sahip süper temel şablon.

Sabit gezinme çubuğu

Bazı ek içeriklerle birlikte sabit bir üst gezinme çubuğuna sahip süper temel şablon.

Özel bileşenler

Örtmek

Basit ve güzel ana sayfalar oluşturmak için tek sayfalık bir şablon.

atlıkarınca

Gezinme çubuğunu ve karuseli özelleştirin, ardından bazı yeni bileşenler ekleyin.

Blog

Özel gezinme, başlık ve tür ile basit iki sütunlu blog düzeni.

Gösterge Paneli

Sabit kenar çubuğu ve gezinme çubuğu olan bir yönetici panosu için temel yapı.

Oturum açma sayfası

Basit bir oturum açma formu için özel form düzeni ve tasarımı.

haklı gezinme

Doğrulanmış bağlantılarla özel bir gezinme çubuğu oluşturun. Önüne bak! Çok Safari dostu değil.

Yapışkan altbilgi

İçerik bundan daha kısa olduğunda görünümün altına bir altbilgi ekleyin.

Gezinme çubuğu ile yapışkan altbilgi

Üstte sabit bir gezinme çubuğu ile görünümün altına bir altbilgi ekleyin.

deneyler

Yanıt Vermeyen Önyükleme

Belgelerimize göre Bootstrap'in yanıt verme özelliğini kolayca devre dışı bırakın .

tuval dışı

Bootstrap ile kullanmak için değiştirilebilir bir tuval dışı gezinme menüsü oluşturun.

Aletler

Önyükleme

Bootlint , resmi Bootstrap HTML linter aracıdır. Bootstrap'ı oldukça "vanilya" bir şekilde kullanan web sayfalarında yaygın olarak görülen birkaç HTML hatasını otomatik olarak kontrol eder. Vanilla Bootstrap'in bileşenleri/widget'ları, DOM bölümlerinin belirli yapılara uymasını gerektirir. Bootlint, Bootstrap bileşenlerinin örneklerinin doğru yapılandırılmış HTML'ye sahip olup olmadığını kontrol eder. Bootlint'i Bootstrap web geliştirme araç zincirinize eklemeyi düşünün, böylece yaygın hatalardan hiçbiri projenizin gelişimini yavaşlatmaz.

Toplum

Bootstrap geliştirme konusunda güncel kalın ve bu faydalı kaynaklarla topluluğa ulaşın.

• Resmi Önyükleme Blogunu okuyun ve abone olun .
• ##bootstrap kanalındairc.freenode.net sunucuda IRC kullanan diğer Bootstrapper'larla sohbet edin .
• Bootstrap kullanımıyla ilgili yardım için , etiketini kullanarak StackOverflow'atwitter-bootstrap-3 sorun .
• Geliştiriciler, maksimum keşfedilebilirlik için npm veya benzer dağıtım mekanizmaları bootstraparacılığıyla dağıtım yaparken Bootstrap'in işlevselliğini değiştiren veya ekleyen paketlerde anahtar kelimeyi kullanmalıdır.
• Bootstrap Expo'da Bootstrap ile inşa eden insanların ilham verici örneklerini bulun .

En son dedikodular ve harika müzik videoları için Twitter'da @getbootstrap'ı da takip edebilirsiniz .

Yanıt verme özelliğini devre dışı bırakma

Bootstrap, sayfalarınızı çeşitli ekran boyutlarına göre otomatik olarak uyarlar. Sayfanızın bu yanıt vermeyen örnek gibi çalışması için bu özelliği nasıl devre dışı bırakacağınız aşağıda açıklanmıştır .

Sayfa yanıt verme özelliğini devre dışı bırakma adımları

1. CSS belgelerinde<meta> belirtilen görünümü atlayın
2. widthÖrneğin, tek bir genişlikle her ızgara katmanı için on öğesini geçersiz kılın, .containerörneğin width: 970px !important;bunun varsayılan Bootstrap CSS'den sonra geldiğinden emin olun. !importantİsteğe bağlı olarak with media sorgularından veya bazı seçici-fu'lardan kaçınabilirsiniz .
3. Gezinme çubukları kullanıyorsanız, gezinme çubuğunun tüm çökme ve genişleme davranışlarını kaldırın.
4. Izgara düzenleri .col-xs-*için orta/büyük sınıflara ek veya onların yerine sınıfları kullanın. Endişelenmeyin, ekstra küçük cihaz ızgarası tüm çözünürlüklere göre ölçeklenir.

IE8 için yine de Respond.js'ye ihtiyacınız olacak (medya sorgularımız hala orada olduğundan ve işlenmesi gerektiğinden). Bu, Bootstrap'in "mobil site" özelliklerini devre dışı bırakır.

Yanıt verme özelliği devre dışı bırakılmış önyükleme şablonu

Bu adımları bir örneğe uyguladık. Uygulanan belirli değişiklikleri görmek için kaynak kodunu okuyun.

Yanıt vermeyen örneği görüntüle

Tarayıcı ve cihaz desteği

Bootstrap, en yeni masaüstü ve mobil tarayıcılarda en iyi şekilde çalışacak şekilde tasarlanmıştır; bu, eski tarayıcıların, belirli bileşenlerin tamamen işlevsel olmasına rağmen farklı biçimlerde görüntülenebileceği anlamına gelir.

Desteklenen tarayıcılar

Özellikle, aşağıdaki tarayıcıların ve platformların en son sürümlerini destekliyoruz.

Doğrudan veya platformun web görünümü API'si aracılığıyla WebKit, Blink veya Gecko'nun en son sürümünü kullanan alternatif tarayıcılar açıkça desteklenmez. Ancak, Bootstrap (çoğu durumda) bu tarayıcılarda da düzgün şekilde görüntülenmeli ve çalışmalıdır. Daha spesifik destek bilgileri aşağıda verilmiştir.

Mobil cihazlar

Genel olarak konuşursak, Bootstrap her büyük platformun varsayılan tarayıcılarının en son sürümlerini destekler. Proxy tarayıcılarının (Opera Mini, Opera Mobile'ın Turbo modu, UC Tarayıcı Mini, Amazon Silk gibi) desteklenmediğini unutmayın.

Masaüstü tarayıcılar

Benzer şekilde, çoğu masaüstü tarayıcısının en son sürümleri desteklenir.

Windows'ta Internet Explorer 8-11'i destekliyoruz .

Firefox için, en son normal kararlı sürüme ek olarak, Firefox'un en son Genişletilmiş Destek Sürümü (ESR) sürümünü de destekliyoruz.

Resmi olmayan bir şekilde, Bootstrap, resmi olarak desteklenmese de, Linux için Chromium ve Chrome'da, Linux için Firefox'ta ve Internet Explorer 7'de ve ayrıca Microsoft Edge'de yeterince iyi görünmeli ve davranmalıdır.

Bootstrap'in uğraşması gereken bazı tarayıcı hatalarının bir listesi için, tarayıcı hataları duvarımıza bakın .

Internet Explorer 8 ve 9

Internet Explorer 8 ve 9 da desteklenmektedir, ancak bazı CSS3 özelliklerinin ve HTML5 öğelerinin bu tarayıcılar tarafından tam olarak desteklenmediğini lütfen unutmayın. Ayrıca, Internet Explorer 8, medya sorgusu desteğini etkinleştirmek için Respond.js'nin kullanılmasını gerektirir .

CSS3 ve HTML5 özelliklerinin tarayıcı desteğiyle ilgili ayrıntılar için Kullanabilir miyim... sayfasını ziyaret edin .

Internet Explorer 8 ve Respond.js

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

Respond.js ve etki alanları arası CSS

Respond.js'yi farklı bir (alt) etki alanında (örneğin, bir CDN'de) barındırılan CSS ile kullanmak, bazı ek kurulumlar gerektirir. Ayrıntılar için Respond.js belgelerine bakın.

Respond.js vefile://

Tarayıcı güvenlik kuralları nedeniyle, Respond.js protokol aracılığıyla görüntülenen sayfalarla çalışmaz file://(yerel bir HTML dosyasını açarken olduğu gibi). IE8'de duyarlı özellikleri test etmek için sayfalarınızı HTTP(S) üzerinden görüntüleyin. Ayrıntılar için Respond.js belgelerine bakın.

Respond.js ve@import

Respond.js, aracılığıyla başvurulan CSS ile çalışmaz @import. Özellikle, bazı Drupal konfigürasyonlarının @import. Ayrıntılar için Respond.js belgelerine bakın.

Internet Explorer 8 ve kutu boyutlandırma

IE8 , , , veya box-sizing: border-box;ile birleştirildiğinde tam olarak desteklemez . Bu nedenle v3.0.1'den itibaren artık on s kullanmıyoruz.min-widthmax-widthmin-heightmax-heightmax-width.container

Internet Explorer 8 ve @font-face

@font-faceIE8 ile birleştirildiğinde bazı sorunlar var :before. Bootstrap, bu kombinasyonu Glyphicon'ları ile kullanır. Bir sayfa önbelleğe alınırsa ve fare pencerenin üzerine getirilmeden yüklenirse (yani, yenile düğmesine basın veya bir iframe'e bir şey yükleyin), yazı tipi yüklenmeden önce sayfa oluşturulur. Sayfanın (gövde) üzerine gelindiğinde bazı simgeler gösterilir ve kalan simgelerin üzerine gelindiğinde de bunlar gösterilir. Ayrıntılar için sayı #13863'e bakın.

IE Uyumluluk modları

Bootstrap, eski Internet Explorer uyumluluk modlarında desteklenmez. IE için en son oluşturma modunu kullandığınızdan emin olmak <meta>için sayfalarınıza uygun etiketi eklemeyi düşünün:

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

Hata ayıklama araçlarını açarak belge modunu onaylayın: düğmesine basın F12ve "Belge Modu"nu kontrol edin.

Bu etiket, Internet Explorer'ın desteklenen her sürümünde mümkün olan en iyi işlemeyi sağlamak için tüm Bootstrap belgelerine ve örneklerine dahil edilmiştir.

Daha fazla bilgi için bu StackOverflow sorusuna bakın.

Windows 8 ve Windows Phone 8'de Internet Explorer 10

Internet Explorer 10, cihaz genişliğini görüntü alanı genişliğinden ayırt etmez ve bu nedenle Bootstrap'in CSS'sindeki medya sorgularını düzgün şekilde uygulamaz. Normalde bunu düzeltmek için hızlı bir CSS pasajı eklersiniz:

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

Ancak bu, Güncelleme 3'ten (diğer adıyla GDR3) daha eski Windows Phone 8 sürümlerini çalıştıran cihazlarda çalışmaz , çünkü bu tür cihazların dar "telefon" görünümü yerine çoğunlukla masaüstü görünümü göstermesine neden olur. Bunu ele almak için , hatayı gidermek için aşağıdaki CSS'yi ve JavaScript'i eklemeniz gerekir .

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

// Copyright 2014-2019 Twitter, Inc.
// Licensed under MIT (https://github.com/twbs/bootstrap/blob/v3-dev/LICENSE)
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 yönergeleri için Windows Phone 8 ve Cihaz Genişliği bölümünü okuyun .

Ön bilgi olarak, bunu tüm Bootstrap belgelerine ve örneklerine bir gösteri olarak dahil ediyoruz.

Safari yüzde yuvarlama

OS X için v7.1'den önceki Safari sürümlerinin ve iOS v8.0 için Safari'nin oluşturma motorunda, .col-*-1ızgara sınıflarımızda kullanılan ondalık basamak sayısıyla ilgili bazı sorunlar vardı. Dolayısıyla, 12 ayrı ızgara sütununuz varsa, bunların diğer sütun sıralarına kıyasla daha kısa olduğunu fark edeceksiniz. Safari/iOS'u yükseltmenin yanı sıra, geçici çözümler için bazı seçenekleriniz vardır:

• .pull-rightSabit sağ hizalamayı elde etmek için son ızgara sütununuza ekleyin
• Safari için mükemmel yuvarlamayı elde etmek için yüzdelerinizi manuel olarak ayarlayın (ilk seçenekten daha zor)

Kipler, gezinme çubukları ve sanal klavyeler

Taşma ve kaydırma

Öğe için destek overflow: hidden, <body>iOS ve Android'de oldukça sınırlıdır. Bu amaçla, bu cihazların tarayıcılarından herhangi birinde bir modalın üstünü veya altını geçtiğinizde <body>içerik kaymaya başlar. Bkz. Chrome hatası #175502 (Chrome v40'ta düzeltildi) ve WebKit hatası #153852 .

iOS metin alanları ve kaydırma

iOS 9.3'ten itibaren, bir kip açıkken, bir kaydırma hareketinin ilk dokunuşu bir metinsel <input>veya a sınırı içindeyse, kipin kendisi yerine kipin altındaki içerik kaydırılacaktır <textarea>. WebKit hatası #153856'ya<body> bakın .

Sanal klavyeler

Ayrıca, sabit bir gezinme çubuğu kullanıyorsanız veya bir mod içindeki girdileri kullanıyorsanız, iOS'ta sanal klavye tetiklendiğinde sabit öğelerin konumunu güncellemeyen bir oluşturma hatası olduğunu unutmayın. Bunun için birkaç geçici çözüm, konumlandırmayı manuel olarak düzeltmeye çalışmak için öğelerinizi dönüştürmeyi position: absoluteveya odakta bir zamanlayıcıyı çağırmayı içerir. Bu, Bootstrap tarafından ele alınmaz, bu nedenle uygulamanız için hangi çözümün en iyi olduğuna karar vermek size kalmıştır.

Gezinme Çubuğu Açılır Listeleri

Öğe , .dropdown-backdropz-indekslemenin karmaşıklığı nedeniyle gezinmede iOS'ta kullanılmaz. Bu nedenle, gezinme çubuklarındaki açılır listeleri kapatmak için, doğrudan açılır öğeye (veya iOS'ta bir tıklama olayını başlatacak herhangi bir başka öğeye ) tıklamanız gerekir.

Tarayıcı yakınlaştırma

Sayfa yakınlaştırma, kaçınılmaz olarak hem Bootstrap'ta hem de web'in geri kalanında bazı bileşenlerde görüntü oluşturma kusurları sunar. Soruna bağlı olarak, sorunu çözebiliriz (önce arama yapın ve gerekirse bir sorun açın). Ancak, genellikle geçici çözümlerden başka doğrudan bir çözümleri olmadığı için bunları görmezden gelme eğilimindeyiz.

Sabit :hover/ :focusmobilde

Çoğu dokunmatik ekranda gerçek gezinme mümkün olmasa da, çoğu mobil tarayıcı, gezinme desteğini taklit eder ve :hover"yapışkan" hale getirir. Başka bir deyişle, :hoverstiller bir öğeye dokunduktan sonra uygulanmaya başlar ve yalnızca kullanıcı başka bir öğeye dokunduktan sonra uygulamayı durdurur. Bu, Bootstrap :hoverdurumlarının bu tür tarayıcılarda istenmeyen şekilde "sıkışmasına" neden olabilir. Bazı mobil tarayıcılar da :focusbenzer şekilde yapışkan hale getirir. Şu anda bu tür stilleri tamamen kaldırmak dışında bu sorunlar için basit bir geçici çözüm yoktur.

Baskı

Bazı modern tarayıcılarda bile yazdırma işlemi ilginç olabilir.

Özellikle Chrome v32'den itibaren ve kenar boşluğu ayarlarından bağımsız olarak Chrome, bir web sayfasını yazdırırken medya sorgularını çözerken fiziksel kağıt boyutundan önemli ölçüde daha dar bir görüntü alanı genişliği kullanır. Bu, Bootstrap'in ekstra küçük ızgarasının yazdırırken beklenmedik şekilde etkinleştirilmesine neden olabilir. Bazı ayrıntılar için 12078 numaralı soruna ve 273306 numaralı Chrome hatasına bakın. Önerilen geçici çözümler:

• Çok küçük ızgarayı benimseyin ve sayfanızın altında kabul edilebilir göründüğünden emin olun.
• @screen-*Daha az değişkenlerin değerlerini, yazıcı kağıdınızın çok küçükten daha büyük olarak değerlendirilmesi için özelleştirin .
• Yalnızca yazdırma ortamı için ızgara boyutu kesme noktalarını değiştirmek için özel ortam sorguları ekleyin.

Ayrıca, Safari v8.0'dan itibaren, sabit genişlikler .containerSafari'nin yazdırırken alışılmadık derecede küçük bir yazı tipi boyutu kullanmasına neden olabilir. Daha fazla ayrıntı için #14868 ve WebKit hatası #138192'ye bakın. Bunun için olası bir geçici çözüm, aşağıdaki CSS'yi eklemektir:

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

Android stok tarayıcı

Kutunun dışında, Android 4.1 (ve görünüşe göre bazı daha yeni sürümler), varsayılan web tarayıcısı olarak (Chrome'un aksine) Tarayıcı uygulamasıyla birlikte gelir. Ne yazık ki, Tarayıcı uygulamasında genel olarak CSS ile çok sayıda hata ve tutarsızlık var.

Menüleri seçin

Öğelerde , bir ve/veya uygulanmışsa <select>, Android hisse senedi tarayıcısı yan kontrolleri görüntülemeyecektir . (Ayrıntılar için bu StackOverflow sorusuna bakın.) Sorunlu CSS'yi kaldırmak ve Android stok tarayıcısında stili olmayan bir öğe olarak işlemek için aşağıdaki kod parçasını kullanın . Kullanıcı aracısı koklama, Chrome, Safari ve Mozilla tarayıcılarıyla etkileşimi önler.border-radiusborder<select>

<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? Bu JS Bin demosuna göz atın.

Doğrulayıcılar

Bootstrap, eski ve sorunlu tarayıcılara mümkün olan en iyi deneyimi sağlamak için, tarayıcılardaki hataları gidermek için belirli tarayıcı sürümlerine özel CSS'yi hedeflemek için çeşitli yerlerde CSS tarayıcı hack'lerini kullanır. Bu saldırılar anlaşılır bir şekilde CSS doğrulayıcılarının geçersiz olduklarından şikayet etmelerine neden olur. Birkaç yerde, henüz tam olarak standartlaştırılmamış son teknoloji CSS özelliklerini de kullanıyoruz, ancak bunlar yalnızca aşamalı geliştirme için kullanılıyor.

Bu doğrulama uyarıları, CSS'mizin korsan olmayan kısmı tam olarak doğrulandığından ve hileli kısımlar, korsan olmayan kısmın düzgün çalışmasına müdahale etmediğinden pratikte önemli değildir, bu nedenle bu özel uyarıları kasıtlı olarak görmezden gelmemizin nedeni budur.

HTML belgelerimiz de benzer şekilde, belirli bir Firefox hatası için bir geçici çözüm eklediğimiz için bazı önemsiz ve önemsiz HTML doğrulama uyarılarına sahiptir .

Üçüncü taraf desteği

Herhangi bir üçüncü taraf eklentisini veya eklentisini resmi olarak desteklemiyor olsak da, projelerinizde olası sorunlardan kaçınmanıza yardımcı olacak bazı yararlı tavsiyeler sunuyoruz.

kutu boyutlandırma

Google Haritalar ve Google Özel Arama Motoru da dahil olmak üzere bazı üçüncü taraf yazılımları, Bootstrap ile çakışır * { box-sizing: border-box; }, çünkü bunu böyle yapan bir kural padding, bir öğenin son hesaplanan genişliğini etkilemez. CSS Püf Noktalarında kutu modeli ve boyutlandırma hakkında daha fazla bilgi edinin .

Bağlama bağlı olarak, gerektiği gibi geçersiz kılabilirsiniz (Seçenek 1) veya tüm bölgeler için kutu boyutunu sıfırlayabilirsiniz (Seçenek 2).

/* 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şılabilirlik

Bootstrap, ortak web standartlarını takip eder ve minimum ekstra çabayla, AT kullananların erişebileceği siteler oluşturmak için kullanılabilir .

Navigasyonu atla

Navigasyonunuz çok sayıda bağlantı içeriyorsa ve DOM'daki ana içerikten önce geliyorsa, Skip to main contentnavigasyondan önce bir bağlantı ekleyin (basit bir açıklama için, gezinme bağlantılarını atlama hakkındaki bu A11Y Projesi makalesine bakın ). Sınıfı kullanmak, .sr-onlyatlama bağlantısını görsel olarak gizler ve .sr-only-focusablesınıf, odaklandığında bağlantının görünür olmasını sağlar (görebilen klavye kullanıcıları için).

<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ç içe başlıklar

Başlıkları ( <h1>- <h6>) iç içe yerleştirirken, birincil belge başlığınız bir <h1>. Sonraki başlıklar , ekran okuyucuların sayfalarınız için bir içindekiler tablosu oluşturabilmesi <h2>için mantıklı bir şekilde kullanılmalıdır .<h6>

HTML CodeSniffer ve Penn State's AccessAbility'de daha fazla bilgi edinin .

Renk kontrastı

Şu anda, Bootstrap'te bulunan bazı varsayılan renk kombinasyonları (çeşitli stilli düğme sınıfları, temel kod blokları için kullanılan kod vurgulama renklerinden bazıları , .bg-primary bağlamsal arka plan yardımcı sınıfı ve beyaz bir arka planda kullanıldığında varsayılan bağlantı rengi gibi) düşük kontrast oranına sahiptir ( önerilen 4,5:1 oranının altında ). Bu, az gören veya renk körü olan kullanıcılar için sorunlara neden olabilir. Bu varsayılan renklerin kontrastını ve okunabilirliğini artırmak için değiştirilmesi gerekebilir.

Ek kaynaklar

• Erişilebilirlik sorunlarını belirlemek için "HTML Codesniffer" yer imi
• Chrome'un Erişilebilirlik Geliştirici Araçları uzantısı
• Renk Kontrast Analizörü
• A11Y Projesi
• MDN erişilebilirlik belgeleri

Lisans SSS'leri

Bootstrap, MIT lisansı altında yayınlanmıştır ve telif hakkı 2019 Twitter'a aittir. Daha küçük parçalara kaynatılmış, aşağıdaki koşullarla açıklanabilir.

Şunları yapmanızı gerektirir:

• Çalışmalarınızda kullandığınızda Bootstrap'in CSS ve JavaScript dosyalarında bulunan lisans ve telif hakkı bildirimini saklayın

Şunları yapmanıza izin verir:

• Bootstrap'i kişisel, özel, şirket içi veya ticari amaçlarla tamamen veya kısmen ücretsiz olarak indirin ve kullanın
• Oluşturduğunuz paketlerde veya dağıtımlarda Bootstrap kullanın
• Kaynak kodunu değiştirin
• Bootstrap'i değiştirmek ve lisansa dahil olmayan üçüncü taraflara dağıtmak için bir alt lisans verin

Şunları yapmanızı yasaklar:

• Bootstrap garanti olmaksızın sağlandığı için yazarları ve lisans sahiplerini zararlardan sorumlu tutun
• Bootstrap'in yaratıcılarını veya telif hakkı sahiplerini sorumlu tutun
• Herhangi bir Bootstrap parçasını uygun atıfta bulunmadan yeniden dağıtın
• Twitter'ın dağıtımınızı desteklediğini belirtebilecek veya ima edebilecek herhangi bir şekilde Twitter'a ait işaretleri kullanın.
• Twitter'a ait tüm işaretleri, söz konusu Twitter yazılımını sizin oluşturduğunuzu belirtebilecek veya ima edebilecek şekilde kullanmayın.

Şunları yapmanızı gerektirmez:

• Bootstrap'in kaynağını veya onda yapmış olabileceğiniz değişiklikleri, onu içeren herhangi bir yeniden dağıtıma dahil edin.
• Bootstrap'te yaptığınız değişiklikleri Bootstrap projesine geri gönderin (bu tür geri bildirimler teşvik edilse de)

Tam Bootstrap lisansı, daha fazla bilgi için proje deposunda bulunur.

Çeviriler

Topluluk üyeleri, Bootstrap belgelerini çeşitli dillere çevirdi. Hiçbiri resmi olarak desteklenmemektedir ve her zaman güncel olmayabilirler.

• Bootstrap 中文文档 (Çince)
• Bootstrap på Dansk (Danimarka)
• Bootstrap en Français (Fransızca)
• Bootstrap auf Deutsch (Almanca)
• Italiano'da Bootstrap (İtalyanca)
• Bootstrap 한국어 (Korece)
• Bootstrap em Português do Brasil (Brezilya Portekizcesi)
• Bootstrap по-русски (Rusça)
• Bootstrap en Español (İspanyolca)
• English Bootstrap (Türkçe)
• Bootstrap українською (Ukraynaca)
• Bootstrap bằng tiếng Việt (Vietnamca)

Çevirileri düzenlemeye veya barındırmaya yardımcı olmuyoruz, sadece onlara bağlantı veriyoruz.

Yeni veya daha iyi bir çeviri bitirdiniz mi? Listemize eklemek için bir çekme isteği açın.