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
rem
s 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önmargin
daha basit bir zihinsel modeldir. - Cihaz boyutları arasında daha kolay ölçekleme için blok öğeleri
rem
s içinmargin
s kullanmalıdır. - Mümkün olduğunda kullanarak, ilgili özelliklerin bildirimlerini
font
minimumda tutun.inherit
CSS değişkenleri
v5.1.1'de eklendi
v5.1.1 ile gerekli s'lerimizi @import
tüm CSS paketlerimizde standart hale getirdik ( bootstrap.css
, bootstrap-reboot.css
, ve dahil bootstrap-grid.css
etmek için . Bu , pakette kaç tane kullanıldığına bakılmaksızın tüm paketlere seviye CSS değişkenleri _root.scss
ekler . Sonuç olarak Bootstrap 5 devam edecek :root
zamanla eklenen daha fazla CSS değişkeni görün.
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-sizing
olmak ü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
*::after
border-box
- üzerinde hiçbir temel
font-size
bildirilmez<html>
, ancak16px
varsayı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çinfont-size: 1rem
uygulanır . Bu tarayıcı varsayılanı, değişken<body>
değiştirilerek geçersiz kılınabilir .$font-size-root
- üzerinde hiçbir temel
- Ayrıca
<body>
globalfont-family
,font-weight
,line-height
, vecolor
. 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ı
Bootstrap, her cihazda ve işletim sisteminde optimum metin oluşturma için bir "yerel yazı tipi yığını" veya "sistem yazı tipi yığını" kullanır. Bu sistem yazı tipleri, ekranlarda geliştirilmiş görüntü oluşturma, değişken yazı tipi desteği ve daha fazlasıyla günümüzün cihazları düşünülerek özel olarak tasarlanmıştır. Bu Smashing Magazine makalesinde yerel yazı tipi yığınları hakkında daha fazla bilgi edinin .
$font-family-sans-serif:
// Cross-platform generic font family (default user interface font)
system-ui,
// Safari for macOS and iOS (San Francisco)
-apple-system,
// 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 göre değişir ve herhangi bir CSS color
stilinden etkilenmezler.
Bu , Bootstrap'a genel olarak font-family
uygulanır <body>
ve otomatik olarak devralınır. Global'i değiştirmek için Bootstrap'i font-family
güncelleyin ve yeniden derleyin.$font-family-base
CSS değişkenleri
Bootstrap 5 olgunlaşmaya devam ettikçe, her zaman Sass'ı yeniden derlemeye gerek kalmadan daha fazla gerçek zamanlı özelleştirme sağlamanın bir yolu olarak CSS değişkenleriyle giderek daha fazla stil oluşturulacaktır. Yaklaşımımız, kaynak Sass değişkenlerimizi alıp CSS değişkenlerine dönüştürmektir. Bu şekilde, CSS değişkenlerini kullanmasanız bile Sass'ın tüm gücüne sahip olursunuz. Bu hala devam ediyor ve tam olarak uygulanması zaman alacak.
Örneğin, yaygın stiller :root
için şu CSS değişkenlerini göz önünde bulundurun:<body>
@if $font-size-root != null {
--#{$variable-prefix}root-font-size: #{$font-size-root};
}
--#{$variable-prefix}body-font-family: #{$font-family-base};
--#{$variable-prefix}body-font-size: #{$font-size-base};
--#{$variable-prefix}body-font-weight: #{$font-weight-base};
--#{$variable-prefix}body-line-height: #{$line-height-base};
--#{$variable-prefix}body-color: #{$body-color};
@if $body-text-align != null {
--#{$variable-prefix}body-text-align: #{$body-text-align};
}
--#{$variable-prefix}body-bg: #{$body-bg};
Pratikte, bu değişkenler Reboot'ta şu şekilde uygulanır:
body {
margin: 0; // 1
font-family: var(--#{$variable-prefix}body-font-family);
@include font-size(var(--#{$variable-prefix}body-font-size));
font-weight: var(--#{$variable-prefix}body-font-weight);
line-height: var(--#{$variable-prefix}body-line-height);
color: var(--#{$variable-prefix}body-color);
text-align: var(--#{$variable-prefix}body-text-align);
background-color: var(--#{$variable-prefix}body-bg); // 2
-webkit-text-size-adjust: 100%; // 3
-webkit-tap-highlight-color: rgba($black, 0); // 4
}
Bu, istediğiniz gibi gerçek zamanlı özelleştirmeler yapmanızı sağlar:
<body style="--bs-body-color: #333;">
<!-- ... -->
</body>
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-top
başlıklar margin-bottom: .5rem
ve 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-top
kaldırılmış ve bir margin-bottom: 1rem
. İç içe listeler yok margin-bottom
. padding-left
Ayrıca on <ul>
ve <ol>
öğelerini de sıfırladık .
- 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 margin
s güncellendi. <dd>
sıfırlayın ve margin-left
ekleyin . s kalınlaştırılmıştır .0
margin-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ı.
satır içi kod
Satır içi kod parçacıklarını ile sarın <code>
. HTML açılı ayraçlarından kaçındığınızdan emin olun.
<section>
satır içi olarak sarılmalıdır.
For example, <code><section></code> should be wrapped as inline.
Kod blokları
<pre>
Birden çok kod satırı için s kullanın . Bir kez daha, düzgün işleme için koddaki herhangi bir açılı ayraçtan kaçındığınızdan emin olun. <pre>
Öğe, kaldırmak ve onun için birimleri margin-top
kullanmak için sıfırlanır .rem
margin-bottom
<p>Sample text here...</p>
<p>And another line of sample text here...</p>
<pre><code><p>Sample text here...</p>
<p>And another line of sample text here...</p>
</code></pre>
Değişkenler
Değişkenleri belirtmek için <var>
etiketi kullanın.
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
Kullanıcı girişi
<kbd>
Tipik olarak klavye ile girilen girişi belirtmek için kullanın .
Ayarları düzenlemek için ctrl + ,
To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>
Örnek çıktı
Bir programdan örnek çıktıyı belirtmek için <samp>
etiketi kullanın.
<samp>This text is meant to be treated as sample output from a computer program.</samp>
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 .
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ınadisplay: inline-block
izin verecek şekilde ayarlanmıştırmargin
.<input>
s,<select>
s,<textarea>
s ve<button>
s çoğunlukla Normalize tarafından ele alınır, ancak Reboot onlarınmargin
and setleriniline-height: inherit
de 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 öğelerinincursor: pointer
ne zaman:not(:disabled)
.
Bu değişiklikler ve daha fazlası aşağıda gösterilmiştir.
Tarih ve renk girişi desteği
Tarih girişlerinin tüm tarayıcılar, yani Safari tarafından tam olarak desteklenmediğini unutmayın.
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 cursor
değişimini alan öğeler için gerekli değildir .
<span role="button" tabindex="0">Non-button element button</span>
çeşitli öğeler
Adres
<address>
Öğe, tarayıcı varsayılanını olarak font-style
sıfırlayacak italic
şekilde normal
güncellenir . line-height
ayrıca şimdi devralındı ve margin-bottom: 1rem
eklendi. <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>
.
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 margin
değerdir , bu nedenle diğer öğelerle daha tutarlı bir şey için 1em 40px
bunu 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.
Özet
cursor
Özette varsayılan değerdir, bu nedenle öğenin üzerine tıklayarak etkileşime geçebileceğini iletmek için text
bunu 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 .[hidden] { display: none !important; }
display
<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 display
değiştirilmediği ve öğenin belgenin akışını hala etkileyebileceği anlamına gelir, bunun yerine .invisible
sınıfı kullanın.