in English

Yaklaşmak

Bootstrap'i kendiniz daha kolay özelleştirebilmeniz ve genişletebilmeniz için Bootstrap'i oluşturmak ve sürdürmek için kullanılan yol gösterici ilkeler, stratejiler ve teknikler hakkında bilgi edinin.

Başlangıç ​​sayfaları, projeye ve neler sunduğuna dair bir tanıtım turu sunarken, bu belge Bootstrap'ta yaptığımız şeyleri neden yaptığımıza odaklanmaktadır . Başkalarının bizden bir şeyler öğrenebilmesi, bizimle katkıda bulunabilmesi ve gelişmemize yardımcı olabilmesi için web üzerinde geliştirme felsefemizi açıklıyor.

Kulağa doğru gelmeyen veya belki daha iyi yapılabilecek bir şey mi gördünüz? Bir konu açın — bunu sizinle tartışmayı çok isteriz.

Özet

Bunların her birine baştan sona daha fazla dalacağız, ancak yüksek düzeyde, yaklaşımımıza rehberlik eden şey burada.

  • Bileşenler duyarlı ve mobil öncelikli olmalıdır
  • Bileşenler bir temel sınıfla oluşturulmalı ve değiştirici sınıflarla genişletilmelidir.
  • Bileşen devletler, ortak bir z-endeksi ölçeğine uymalıdır
  • Mümkün olduğunda JavaScript yerine HTML ve CSS uygulamasını tercih edin
  • Mümkün olduğunda, özel stiller yerine yardımcı programları kullanın
  • Mümkün olduğunda, katı HTML gerekliliklerini uygulamaktan kaçının (alt seçiciler)

Duyarlı

Bootstrap'in duyarlı stilleri, genellikle mobil öncelikli olarak adlandırılan bir yaklaşım olan duyarlı olacak şekilde oluşturulmuştur . Bu terimi dokümanlarımızda kullanıyoruz ve büyük ölçüde buna katılıyoruz, ancak bazen çok geniş olabilir. Bootstrap'ta her bileşenin tamamen duyarlı olması gerekmese de, bu duyarlı yaklaşım, görünüm alanı büyüdükçe sizi stiller eklemeye zorlayarak CSS geçersiz kılmalarını azaltmakla ilgilidir.

Bootstrap genelinde bunu en açık şekilde medya sorgularımızda göreceksiniz. Çoğu durumda, min-widthbelirli bir kesme noktasında uygulanmaya başlayan ve daha yüksek kesme noktalarında devam eden sorgular kullanırız. Örneğin, a sonsuza .d-nonekadar geçerlidir . min-width: 0Öte yandan, a .d-md-noneorta kesme noktasından itibaren geçerlidir.

Bazen max-width, bir bileşenin doğal karmaşıklığı gerektirdiğinde kullanacağız. Zaman zaman, bu geçersiz kılmaların uygulanması ve desteklenmesi, bileşenlerimizdeki temel işlevleri yeniden yazmaktan işlevsel ve zihinsel olarak daha açıktır. Bu yaklaşımı sınırlamaya çalışıyoruz, ancak zaman zaman kullanacağız.

sınıflar

Tarayıcılar arası normalleştirme stil sayfası olan Yeniden Başlatma özelliğimizin yanı sıra, tüm stillerimiz sınıfları seçici olarak kullanmayı amaçlar. Bu, stilleri kolayca geçersiz kılmak için çok spesifik yapan tip seçicilerden (örn., input[type="text"]) ve yabancı üst sınıflardan (örn ..parent .child

Bu nedenle, bileşenler, geçersiz kılınmaması gereken ortak özellik-değer çiftlerini barındıran bir temel sınıfla oluşturulmalıdır. Örneğin, .btnve .btn-primary. , ve .btngibi tüm yaygın stiller için kullanıyoruz . Daha sonra renk, arka plan rengi, kenarlık rengi vb. eklemek gibi değiştiriciler kullanırız.displaypaddingborder-width.btn-primary

Değiştirici sınıflar, yalnızca birden çok değişkende değiştirilecek birden çok özellik veya değer olduğunda kullanılmalıdır. Değiştiriciler her zaman gerekli değildir, bu nedenle kod satırlarını gerçekten kaydettiğinizden ve bunları oluştururken gereksiz geçersiz kılmaları önlediğinizden emin olun. İyi değiştirici örnekleri, tema renk sınıflarımız ve boyut çeşitlerimizdir.

z-endeksi ölçekleri

Bootstrap'te iki z-indexölçek vardır; bir bileşen içindeki öğeler ve bindirme bileşenleri.

bileşen elemanları

  • Bootstrap'teki bazı bileşenler, borderözelliği değiştirmeden çift kenarlıkları önlemek için örtüşen öğelerle oluşturulmuştur. Örneğin, düğme grupları, giriş grupları ve sayfalandırma.
  • Bu bileşenler standart bir geçiş z-indexölçeğini paylaşır .03
  • 0varsayılandır (başlangıç), 1is :hover, 2is :active/ .active, ve 3is :focus.
  • Bu yaklaşım, en yüksek kullanıcı önceliği beklentilerimizi karşılar. Bir öğe odaklanmışsa, görünümdedir ve kullanıcının dikkatindedir. Aktif öğeler, durumu gösterdikleri için ikinci sıradadır. Fareyle üzerine gelme, kullanıcının amacını gösterdiği için en yüksek üçüncü sıradadır, ancak hemen hemen her şey üzerine gelinebilir.

Bindirme bileşenleri

Bootstrap, bir tür kaplama işlevi gören birkaç bileşen içerir. Bu, en yüksek sırasına göre z-indexaçılır listeleri, sabit ve yapışkan gezinme çubuklarını, modları, araç ipuçlarını ve açılır pencereleri içerir. Bu bileşenlerin 'de başlayan kendi z-indexölçeği vardır 1000. Bu başlangıç ​​numarası rastgele seçilmiştir ve bizim stillerimizle projenizin özel stilleri arasında küçük bir tampon görevi görür.

Her bir bindirme bileşeni, z-indexdeğerini, ortak UI ilkelerinin kullanıcı odaklı veya üzerine gelinen öğelerin her zaman görüntüde kalmasına izin verecek şekilde biraz artırır. Örneğin, bir kip belge engellemedir (örneğin, kipin eylemi dışında başka bir işlem yapamazsınız), bu yüzden bunu gezinme çubuklarımızın üstüne koyduk.

z-indexDüzen sayfamızda bununla ilgili daha fazla bilgi edinin .

JS üzerinden HTML ve CSS

Mümkün olduğunda JavaScript yerine HTML ve CSS yazmayı tercih ediyoruz. Genel olarak, HTML ve CSS daha üretkendir ve tüm farklı deneyim düzeylerinden daha fazla insan için erişilebilirdir. HTML ve CSS de tarayıcınızda JavaScript'ten daha hızlıdır ve tarayıcınız genellikle sizin için çok sayıda işlevsellik sağlar.

Bu ilke, öznitelikleri kullanan birinci sınıf JavaScript API'mizdir data. JavaScript eklentilerimizi kullanmak için neredeyse hiç JavaScript yazmanıza gerek yok; bunun yerine HTML yazın. JavaScript'e genel bakış sayfamızda bununla ilgili daha fazla bilgi edinin .

Son olarak, stillerimiz ortak web öğelerinin temel davranışları üzerine kuruludur. Mümkün olduğunda, tarayıcının sağladığı şeyi kullanmayı tercih ediyoruz. Örneğin, hemen hemen her öğeye bir sınıf koyabilirsiniz .btn, ancak çoğu öğe herhangi bir anlamsal değer veya tarayıcı işlevi sağlamaz. Bunun yerine, <button>s ve <a>s kullanıyoruz.

Aynı şey daha karmaşık bileşenler için de geçerlidir. Bir girdinin durumuna dayalı olarak bir ana öğeye sınıflar eklemek için kendi form doğrulama eklentimizi yazabilirken, böylece metne kırmızı deyin stilini vermemize izin verirken, her tarayıcının bize sağladığı / sözde öğeleri kullanmayı tercih:valid ediyoruz :invalid.

Araçlar

Önceden Bootstrap 3'te yardımcı olan yardımcı program sınıfları, CSS şişkinliği ve zayıf sayfa performansıyla mücadelede güçlü bir müttefiktir. Bir yardımcı sınıf, tipik olarak, bir sınıf olarak ifade edilen tek, değişmez bir özellik-değer çiftidir (örneğin, .d-blocktemsil eder display: block;). Birincil çekicilikleri, HTML yazarken kullanım hızı ve yazmanız gereken özel CSS miktarını sınırlamadır.

Özellikle özel CSS ile ilgili olarak, yardımcı programlar, en sık tekrarlanan özellik-değer çiftlerinizi tek sınıflara indirgeyerek dosya boyutunun artmasıyla mücadeleye yardımcı olabilir. Bunun projelerinizde büyük ölçekte dramatik bir etkisi olabilir.

Esnek HTML

Her zaman mümkün olmasa da, bileşenler için HTML gereksinimlerimizde aşırı dogmatik olmaktan kaçınmaya çalışıyoruz. Bu nedenle, CSS seçicilerimizde tek sınıflara odaklanıyoruz ve acil çocuk seçicilerinden ( >) kaçınmaya çalışıyoruz. Bu, uygulamanızda size daha fazla esneklik sağlar ve CSS'mizi daha basit ve daha az spesifik tutmaya yardımcı olur.

Kod kuralları

Kod Kılavuzu (Bootstrap ortak yaratıcısından @mdo), HTML ve CSS'mizi Bootstrap genelinde nasıl yazdığımızı belgeler. Genel biçimlendirme, sağduyu varsayılanları, özellik ve öznitelik sıraları ve daha fazlası için yönergeleri belirtir.

Sass/CSS'mizde bu standartları ve daha fazlasını uygulamak için Stylelint kullanıyoruz . Özel Stylelint yapılandırmamız açık kaynaklıdır ve başkalarının kullanması ve genişletmesi için mevcuttur.

Standart ve anlamsal HTML'yi zorlamak ve yaygın hataları tespit etmek için vnu-jar kullanıyoruz.