in English

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.

Bu sayfada

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

CSS değişkenleri

v5.2.0'da eklendi

@importv5.1.1 ile, tüm CSS paketlerimizde ( bootstrap.css, bootstrap-reboot.css, ve bootstrap-grid.css) gerekli s'lerimizi _root.scss. :rootBu , o pakette kaç tanesinin kullanıldığına bakılmaksızın tüm paketlere seviye CSS değişkenleri ekler . Sonuç olarak Bootstrap 5, Sass'ı her zaman yeniden derlemeye gerek kalmadan daha fazla gerçek zamanlı özelleştirme sağlamak için zamanla eklenen daha fazla CSS değişkeni görmeye devam edecek . 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 :rootiçin şu CSS değişkenlerini göz önünde bulundurun:<body>

  @if $font-size-root != null {
    --#{$prefix}root-font-size: #{$font-size-root};
  }
  --#{$prefix}body-font-family: #{$font-family-base};
  @include rfs($font-size-base, --#{$prefix}body-font-size);
  --#{$prefix}body-font-weight: #{$font-weight-base};
  --#{$prefix}body-line-height: #{$line-height-base};
  --#{$prefix}body-color: #{$body-color};
  @if $body-text-align != null {
    --#{$prefix}body-text-align: #{$body-text-align};
  }
  --#{$prefix}body-bg: #{$body-bg};

Pratikte, bu değişkenler Reboot'ta şu şekilde uygulanır:

body {
  margin: 0; // 1
  font-family: var(--#{$prefix}body-font-family);
  @include font-size(var(--#{$prefix}body-font-size));
  font-weight: var(--#{$prefix}body-font-weight);
  line-height: var(--#{$prefix}body-line-height);
  color: var(--#{$prefix}body-color);
  text-align: var(--#{$prefix}body-text-align);
  background-color: var(--#{$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>

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 . Bu tarayıcı varsayılanı, değişken <body>değiştirilerek geçersiz kılınabilir .$font-size-root
Ayrıca <body>global font-family, font-weight, line-height, ve color. 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,
  // older macOS and iOS
  "Helvetica Neue"
  // Linux
  "Noto Sans",
  "Liberation Sans",
  // Basic web fallback
  Arial,
  // 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 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ığı

Yatay kurallar

<hr>Öğe basitleştirildi . Tarayıcı varsayılanlarına benzer şekilde <hr>, s'ler aracılığıyla biçimlendirilir border-top, bir varsayılana sahiptir ve üst öğe aracılığıyla ne zaman ayarlandığı da dahil olmak üzere opacity: .25otomatik olarak via'larını devralır . Metin, kenarlık ve opaklık yardımcı programları ile değiştirilebilirler.border-colorcolorcolor

html

<hr>

<div class="text-success">
  <hr>
</div>

<hr class="border border-danger border-2 opacity-50">
<hr class="border border-primary border-3 opacity-75">

Listeler

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

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.

Örneğin, <section>satır içi olarak sarılmalıdır.

html

For example, <code>&lt;section&gt;</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-topkullanmak için sıfırlanır .remmargin-bottom

<p>Sample text here...</p>
<p>And another line of sample text here...</p>

html

<pre><code>&lt;p&gt;Sample text here...&lt;/p&gt;
&lt;p&gt;And another line of sample text here...&lt;/p&gt;
</code></pre>

Değişkenler

Değişkenleri belirtmek için <var>etiketi kullanın.

y = mx + b _

html

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

Dizinleri değiştirmek cdiçin dizinin adını ve ardından yazın.
Ayarları düzenlemek için ctrl + ,

html

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.

Bu metnin bir bilgisayar programından örnek çıktı olarak ele alınması amaçlanmıştır.

html

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

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

html

<table>
  <caption>
    This is an example table, and this is its caption to describe the contents.
  </caption>
  <thead>
    <tr>
      <th>Table heading</th>
      <th>Table heading</th>
      <th>Table heading</th>
      <th>Table heading</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
  </tbody>
</table>

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.

Örnek efsane

Örnek giriş

Örnek e-posta

Örnek telefon

Örnek URL

Örnek numara

Örnek arama

Örnek aralık

Örnek dosya girişi

Örnek seçim

Bu onay kutusunu işaretleyin

Birinci seçenek şu ve bu İkinci seçenek, bu süslü form kontrollerinin sarıldığını göstermek için de çok uzun olan başka bir şeydir. Üçüncü seçenek devre dışı

Örnek metin alanı

Örnek tarih

Örnek zaman

Örnek şifre

Örnek tarihsaat-yerel

Örnek hafta

Örnek ay

Örnek renk

Örnek çıktı 100

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 cursordeğişimini alan öğeler için gerekli değildir .

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

html

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

HTML kısaltma öğesi .

Ö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 .[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 displaydeğiştirilmediği ve öğenin belgenin akışını hala etkileyebileceği anlamına gelir, bunun yerine .invisiblesınıfı kullanın.

yeniden başlat

Yaklaşmak

CSS değişkenleri

Sayfa varsayılanları

Yerel yazı tipi yığını

Başlıklar ve paragraflar

Yatay kurallar

Listeler

satır içi kod

Kod blokları

Değişkenler

Kullanıcı girişi

Örnek çıktı

Tablolar

Formlar

Tarih ve renk girişi desteği

Düğmelerdeki işaretçiler

çeşitli öğeler

Adres

blok alıntı

Satır içi öğeler

Özet

HTML5 [hidden]özelliği

jQuery uyumsuzluğu

HTML5 `[hidden]`özelliği