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 stil 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 <body>global font-family, line-height, ve text-align. Bu, yazı tipi tutarsızlıklarını önlemek için daha sonra bazı form öğeleri tarafından devralınır.
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,
  // Linux
  "Noto Sans",
  "Liberation Sans",
  // Sans serif fallback
  sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;

Yazı tipi yığını emoji yazı tiplerini içerdiğinden, birçok yaygın sembol/dingbat Unicode karakterinin çok renkli piktograflar olarak işleneceğini unutmayın. Görünümleri, tarayıcının/platformun yerel emoji yazı tipinde kullanılan stile bağlı olarak değişir ve herhangi bir CSS colorstilinden etkilenmezler.

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.

Tüm listelerin üst kenar boşlukları kaldırıldı
Ve alt marjları normalleştirildi
İç içe listelerin alt kenar boşluğu yoktur
- Bu sayede daha düzgün bir görünüme sahip olurlar.
- Özellikle daha fazla liste öğesi tarafından takip edildiğinde
Sol dolgu da sıfırlandı

İşte sıralı bir liste
Birkaç liste öğesiyle
Aynı genel görünüme sahip
Önceki sırasız liste gibi

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.
Terim: Terimin tanımı.; Aynı terim için ikinci bir tanım.
Başka bir terim: Bu diğer terimin tanımı.

ö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.

Düğmelerdeki işaretçiler

role="button"Yeniden başlatma , varsayılan imleci olarak değiştirmek için bir geliştirme içerir pointer. Öğelerin etkileşimli olduğunu belirtmek için bu özniteliği öğelere ekleyin. <button>Bu rol, kendi cursordeğişimini alan öğeler için gerekli değildir .

Düğme olmayan öğe düğmesi

<span role="button" tabindex="0">Non-button element button</span>

ç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

Bir blok alıntı öğesinde bulunan iyi bilinen bir alıntı.

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.