Başlarken
Bootstrap'a genel bakış, nasıl indirilir ve kullanılır, temel şablonlar ve örnekler ve daha fazlası.
Bootstrap'a genel bakış, nasıl indirilir ve kullanılır, temel şablonlar ve örnekler ve daha fazlası.
Bootstrap (şu anda v3.3.7), 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.
Derlenmiş ve küçültülmüş CSS, JavaScript ve yazı tipleri. Hiçbir belge veya orijinal kaynak dosya dahil edilmemiştir.
Belgelerimizle birlikte Kaynak Daha Az, JavaScript ve yazı tipi dosyaları. Daha az derleyici ve biraz kurulum gerektirir.
Bootstrap , Rails, Compass veya yalnızca Sass projelerine kolay dahil edilmesi için Less'ten Sass'a taşındı .
jsDelivr'deki kişiler nezaketle Bootstrap'in CSS ve JavaScript'i için CDN desteği sağlıyor. Sadece bu Bootstrap CDN bağlantılarını kullanın.
Ayrıca Bower kullanarak Bootstrap's Less, CSS, JavaScript ve yazı tiplerini yükleyebilir ve yönetebilirsiniz :
Bootstrap'ı npm kullanarak da yükleyebilirsiniz :
require('bootstrap')
tüm Bootstrap jQuery eklentilerini jQuery nesnesine yükleyecektir. Modülün bootstrap
kendisi hiçbir şeyi dışa aktarmaz. /js/*.js
Paketin ü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 yolstyle
- varsayılan ayarlar kullanılarak önceden derlenmiş olan Bootstrap'in küçültülmemiş CSS'sine giden yol (özelleştirme yok)Ayrıca Composer kullanarak Bootstrap's Less, CSS, JavaScript ve yazı tiplerini yükleyebilir ve yönetebilirsiniz :
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.
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.
Lütfen tüm JavaScript eklentilerinin , başlangıç şablonunda gösterildiği gibi jQuery'nin dahil edilmesini gerektirdiğini unutmayın . Hangi jQuery sürümlerinin desteklendiğini görmek için bize danışın .bower.json
İ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:
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.
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:
, 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/
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 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.
Ardından, komut satırından:grunt-cli
ile global olarak yükleyin npm install -g grunt-cli
./bootstrap/
dizine gidin, ardından çalıştırın npm install
. npm dosyaya bakacak package.json
ve 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.
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)JSHint'i çalıştırır ve QUnit testlerini PhantomJS'de başsız bir şekilde ç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.
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
.
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.
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.
Temel bilgiler dışında hiçbir şey: bir kapsayıcı ile birlikte derlenmiş CSS ve JavaScript.
Görsel olarak geliştirilmiş bir deneyim için isteğe bağlı Bootstrap temasını yükleyin.
Doğrulanmış bağlantılarla özel bir gezinme çubuğu oluşturun. Önüne bak! Çok Safari dostu değil.
Belgelerimize göre Bootstrap'in yanıt verme özelliğini kolayca devre dışı bırakın .
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.
Bootstrap geliştirme konusunda güncel kalın ve bu faydalı kaynaklarla topluluğa ulaşın.
irc.freenode.net
sunucuda IRC kullanan diğer Bootstrapper'larla sohbet edin .twitter-bootstrap-3
sorun .bootstrap
aracılığıyla dağıtım yaparken Bootstrap'in işlevselliğini değiştiren veya ekleyen paketlerde anahtar kelimeyi kullanmalıdır.En son dedikodular ve harika müzik videoları için Twitter'da @getbootstrap'ı da takip edebilirsiniz .
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 .
<meta>
belirtilen görünümü atlayınwidth
Ö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 ..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.
Bu adımları bir örneğe uyguladık. Uygulanan belirli değişiklikleri görmek için kaynak kodunu okuyun.
Bootstrap'in eski bir sürümünden v3.x'e geçiş yapmak mı istiyorsunuz? Geçiş kılavuzumuza göz atın .
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.
Ö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.
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.
Krom | Firefox | Safari | |
---|---|---|---|
Android | Desteklenen | Desteklenen | Yok |
iOS | Desteklenen | Desteklenen | Desteklenen |
Benzer şekilde, çoğu masaüstü tarayıcısının en son sürümleri desteklenir.
Krom | Firefox | Internet Explorer | Opera | Safari | |
---|---|---|---|---|---|
Mac | Desteklenen | Desteklenen | Yok | Desteklenen | Desteklenen |
pencereler | Desteklenen | Desteklenen | Desteklenen | Desteklenen | Desteklenmiyor |
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 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 .
Özellik | Internet Explorer 8 | Internet Explorer 9 |
---|---|---|
border-radius |
Desteklenmiyor | Desteklenen |
box-shadow |
Desteklenmiyor | Desteklenen |
transform |
Desteklenmiyor | Desteklenen, -ms önek ile |
transition |
Desteklenmiyor | |
placeholder |
Desteklenmiyor |
CSS3 ve HTML5 özelliklerinin tarayıcı desteğiyle ilgili ayrıntılar için Kullanabilir miyim... sayfasını ziyaret edin .
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'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.
file://
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.
@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.
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-width
max-width
min-height
max-height
max-width
.container
@font-face
IE8 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.
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:
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.
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:
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 .
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.
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-right
Sabit sağ hizalamayı elde etmek için son ızgara sütununuza ekleyinÖğ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 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 .
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: absolute
veya 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.
Öğe , .dropdown-backdrop
z-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.
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.
:hover
/ :focus
mobildeÇ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, :hover
stiller bir öğeye dokunduktan sonra uygulanmaya başlar ve yalnızca kullanıcı başka bir öğeye dokunduktan sonra uygulamayı durdurur. Bu, Bootstrap :hover
durumlarının bu tür tarayıcılarda istenmeyen şekilde "sıkışmasına" neden olabilir. Bazı mobil tarayıcılar da :focus
benzer ş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.
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:
@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 .Ayrıca, Safari v8.0'dan itibaren, sabit genişlikler .container
Safari'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:
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.
Öğ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-radius
border
<select>
Bir örnek görmek ister misiniz? Bu JS Bin demosuna göz atın.
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 .
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.
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).
Bootstrap, ortak web standartlarını takip eder ve minimum ekstra çabayla, AT kullananların erişebileceği siteler oluşturmak için kullanılabilir .
Navigasyonunuz çok sayıda bağlantı içeriyorsa ve DOM'daki ana içerikten önce geliyorsa, Skip to main content
navigasyondan ö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-only
atlama bağlantısını görsel olarak gizler ve .sr-only-focusable
sınıf, odaklandığında bağlantının görünür olmasını sağlar (görebilen klavye kullanıcıları için).
Chrome'da ( Chromium hata izleyicisinde 262171 numaralı soruna bakın) ve Internet Explorer'da ( sayfa içi bağlantılar ve odak sırası hakkındaki bu makaleye bakın) uzun süredir devam eden eksiklikler/hatalar nedeniyle , atlama bağlantınızın hedefinin ekleyerek en azından programlı olarak odaklanabilir tabindex="-1"
.
Ek olarak, hedef üzerindeki görünür bir odak göstergesini açıkça bastırmak isteyebilirsiniz (özellikle Chrome şu anda tabindex="-1"
fare ile tıklandığında öğelere odaklanmayı ayarladığından) #content:focus { outline: none; }
.
Bu hatanın, sitenizin kullanabileceği diğer sayfa içi bağlantıları da etkileyeceğini ve bunları klavye kullanıcıları için işe yaramaz hale getireceğini unutmayın. Bağlantı hedefleri olarak işlev gören tüm diğer adlandırılmış bağlantılara/parça tanımlayıcılarına benzer bir boşluk bırakma düzeltmesi eklemeyi düşünebilirsiniz.
When nesting headings (<h1>
- <h6>
), your primary document header should be an <h1>
. Subsequent headings should make logical use of <h2>
- <h6>
such that screen readers can construct a table of contents for your pages.
Learn more at HTML CodeSniffer and Penn State's AccessAbility.
Currently, some of the default color combinations available in Bootstrap (such as the various styled button classes, some of the code highlighting colors used for basic code blocks, the .bg-primary
contextual background helper class, and the default link color when used on a white background) have a low contrast ratio (below the recommended ratio of 4.5:1). This can cause problems to users with low vision or who are color blind. These default colors may need to be modified to increase their contrast and legibility.
Bootstrap is released under the MIT license and is copyright 2016 Twitter. Boiled down to smaller chunks, it can be described with the following conditions.
The full Bootstrap license is located in the project repository for more information.
Community members have translated Bootstrap's documentation into various languages. None are officially supported and they may not always be up to date.
Ç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.