Source

yeniden başlat

Tek bir dosyada öğeye özgü CSS değişiklikleri koleksiyonu olan Reboot, üzerine inşa edilecek zarif, tutarlı ve basit bir temel sağlamak için Bootstrap'i başlatır.

Yaklaşmak

Reboot, Normalize üzerine kuruludur ve yalnızca öğe seçicileri kullanarak pek çok HTML öğesini biraz fikirli stiller sağlar. Ek şekillendirme yalnızca sınıflarla yapılır. Örneğin, <table>daha basit bir temel için bazı stilleri yeniden başlatırız ve daha sonra .table, .table-bordered, ve daha fazlasını sağlarız.

Yeniden Başlatma'da neyin geçersiz kılınacağını seçmeye yönelik yönergelerimiz ve nedenlerimiz şunlardır:

Ölçeklenebilir bileşen aralığı için bazı tarayıcı varsayılan değerlerini rems yerine s kullanacak şekilde güncelleyin.em
kaçının margin-top. Dikey kenar boşlukları çökerek beklenmedik sonuçlar verebilir. Daha da önemlisi, tek bir yön margindaha basit bir zihinsel modeldir.
Cihaz boyutları arasında daha kolay ölçekleme için blok öğeleri rems için margins kullanmalıdır.
Mümkün olduğunda kullanarak, ilgili özelliklerin bildirimlerini fontminimumda tutun.inherit

Sayfa varsayılanları

ve öğeleri <html>, <body>sayfa genelinde daha iyi varsayılanlar sağlamak için güncellenir. Daha spesifik olarak:

, ve dahil box-sizingolmak üzere her öğede genel olarak ayarlanır . Bu, dolgu veya kenarlık nedeniyle belirtilen öğe genişliğinin asla aşılmamasını sağlar.*::before*::afterborder-box
üzerinde hiçbir temel font-sizebildirilmez <html>, ancak 16pxvarsayılır (tarayıcı varsayılanı). Kullanıcı tercihlerine saygı duyarak ve daha erişilebilir bir yaklaşım sağlarken, medya sorguları aracılığıyla kolay yanıt veren tür ölçekleme için font-size: 1remuygulanır .<body>
Ayrıca , bir genel , ve <body>ayarlar . Bu, yazı tipi tutarsızlıklarını önlemek için daha sonra bazı form öğeleri tarafından devralınır.font-familyline-heighttext-align
Güvenlik için , varsayılan olarak <body>beyan edilmiş bir .background-color#fff

Yerel yazı tipi yığını

Varsayılan web yazı tipleri (Helvetica Neue, Helvetica ve Arial), Bootstrap 4'te çıkarıldı ve her cihazda ve işletim sisteminde optimum metin oluşturma için "yerel yazı tipi yığını" ile değiştirildi. Bu Smashing Magazine makalesinde yerel yazı tipi yığınları hakkında daha fazla bilgi edinin .

$font-family-sans-serif:
  // Safari for macOS and iOS (San Francisco)
  -apple-system,
  // Chrome < 56 for macOS (San Francisco)
  BlinkMacSystemFont,
  // Windows
  "Segoe UI",
  // Android
  "Roboto",
  // Basic web fallback
  "Helvetica Neue", Arial, sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;

Bu , Bootstrap'a genel olarak font-familyuygulanır <body>ve otomatik olarak devralınır. Global'i değiştirmek için Bootstrap'i font-familygüncelleyin ve yeniden derleyin.$font-family-base

Başlıklar ve paragraflar

Tüm başlık öğeleri— <h1>örn. —ve kaldırılmak <p>üzere sıfırlanır . Kolay boşluk bırakmak için margin-topbaşlıklar margin-bottom: .5remve paragraflar eklendi .margin-bottom: 1rem

Başlık	Örnek
`<h1></h1>`	h1. Önyükleme başlığı
`<h2></h2>`	h2. Önyükleme başlığı
`<h3></h3>`	h3. Önyükleme başlığı
`<h4></h4>`	h4. Önyükleme başlığı
`<h5></h5>`	h5. Önyükleme başlığı
`<h6></h6>`	h6. Önyükleme başlığı

Listeler

Tüm listeler— <ul>, <ol>ve <dl>— margin-topkaldırılmış ve bir margin-bottom: 1rem. İç içe listeler yok margin-bottom.

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

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

Daha basit stil, net hiyerarşi ve daha iyi aralık için açıklama listelerinde margins güncellendi. <dd>sıfırlayın ve margin-leftekleyin . s kalınlaştırılmıştır .0margin-bottom: .5rem<dt>

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.; Donec id, eget metus'ta elit olmayan porta gravida.
Malesuada limanı: Etiam porta sem maleuada magna mollis euismod.

önceden biçimlendirilmiş metin

<pre>Öğe, kaldırmak ve onun için birimleri margin-topkullanmak için sıfırlanır .remmargin-bottom

.example-eleman {
  kenar boşluğu-alt: 1rem;
}

Tablolar

Tablolar stillere göre hafifçe ayarlanmıştır <caption>, sınırları daraltır ve baştan sona tutarlı olmasını sağlar text-align. Kenarlıklar, dolgu ve daha fazlası için ek değişiklikler sınıfla birlikte.table gelir .

Bu bir örnek tablodur ve bu, içeriği açıklamak için tablonun başlığıdır.
Tablo başlığı	Tablo başlığı	Tablo başlığı	Tablo başlığı
Tablo hücresi	Tablo hücresi	Tablo hücresi	Tablo hücresi
Tablo hücresi	Tablo hücresi	Tablo hücresi	Tablo hücresi
Tablo hücresi	Tablo hücresi	Tablo hücresi	Tablo hücresi

Formlar

Daha basit temel stiller için çeşitli form öğeleri yeniden başlatıldı. İşte en dikkate değer değişikliklerden bazıları:

<fieldset>s'de kenarlıklar, dolgular veya kenar boşlukları yoktur, bu nedenle tek tek girdiler veya girdi grupları için kolayca sarmalayıcı olarak kullanılabilirler.
<legend>s, alan kümeleri gibi, bir tür başlık olarak görüntülenmek üzere yeniden biçimlendirildi.
<label>s, uygulanmasına display: inline-blockizin verecek şekilde ayarlanmıştır margin.
<input>s, <select>s, <textarea>s ve <button>s çoğunlukla Normalize tarafından ele alınır, ancak Reboot onların marginand setlerini line-height: inheritde kaldırır.
<textarea>s, yatay yeniden boyutlandırma genellikle sayfa düzenini "kırdığından" yalnızca dikey olarak yeniden boyutlandırılabilir olacak şekilde değiştirilir.
<button>s ve <input>düğme öğelerinin cursor: pointerne zaman :not(:disabled).

Bu değişiklikler ve daha fazlası aşağıda gösterilmiştir.

çeşitli öğeler

Adres

<address>Öğe, tarayıcı varsayılanını olarak font-stylesıfırlayacak italicşekilde normalgüncellenir . line-heightayrıca şimdi devralındı ve margin-bottom: 1remeklendi. <address>s, en yakın ataya (veya tüm bir çalışma grubuna) ilişkin iletişim bilgilerini sunmak içindir. Satırları ile sonlandırarak biçimlendirmeyi koruyun <br>.

Twitter, Inc.
1355 Market St, Suite 900
San Francisco, CA 94103
S: (123) 456-7890

Tam Ad
[email protected]

blok alıntı

Blok alıntılarda varsayılan margindeğerdir , bu nedenle diğer öğelerle daha tutarlı bir şey için 1em 40pxbunu sıfırladık .0 0 1rem

Lorem ipsum dolor sit amet, conectetur adipiscing elit. Bir ante tamsayı pozu.

Kaynak Başlığında ünlü biri

Satır içi öğeler

Öğe , <abbr>paragraf metni arasında öne çıkması için temel stil alır.

Nulla attr vitae seçkin libero, bir pharetra augue.

Özet

cursorÖzette varsayılan değerdir, bu nedenle öğenin üzerine tıklayarak etkileşime geçebileceğini iletmek için textbunu sıfırladık .pointer

Bazı detaylar

Ayrıntılar hakkında daha fazla bilgi.

Daha fazla ayrıntı

İşte ayrıntılar hakkında daha fazla ayrıntı.

HTML5 `[hidden]`özelliği

HTML5 , varsayılan olarak biçimlendirilmiş olan adlı yeni bir genel öznitelik ekler. [hidden]PureCSS'dendisplay: none bir fikir ödünç alarak, yanlışlıkla geçersiz kılınmasını önlemeye yardımcı olmak için bu varsayılanı iyileştiriyoruz . IE10 tarafından yerel olarak desteklenmese de, CSS'mizdeki açık bildirim bu sorunu çözmektedir.[hidden] { display: none !important; }display[hidden]

<input type="text" hidden>

jQuery uyumsuzluğu

[hidden]$(...).hide()jQuery'ler ve $(...).show()yöntemlerle uyumlu değil . Bu nedenle, şu anda özellikle öğelerin [hidden]yönetimi için diğer teknikleri desteklemiyoruz.display

Yalnızca bir öğenin görünürlüğünü değiştirmek için, yani onun displaydeğiştirilmediği ve öğenin belgenin akışını hala etkileyebileceği anlamına gelir, bunun yerine .invisiblesınıfı kullanın.