Langkau ke kandungan utama Langkau ke navigasi dokumen
Check
in English

But semula

But semula, koleksi perubahan CSS khusus elemen dalam satu fail, mulakan Bootstrap untuk menyediakan garis dasar yang elegan, konsisten dan mudah untuk dibina.

Pada halaman ini

Pendekatan

But semula dibina atas Normalize, menyediakan banyak elemen HTML dengan gaya yang agak berpandangan hanya menggunakan pemilih elemen. Penggayaan tambahan dilakukan hanya dengan kelas. Sebagai contoh, kami but semula beberapa <table>gaya untuk garis dasar yang lebih ringkas dan kemudian memberikan .table, .table-bordered, dan banyak lagi.

Berikut ialah garis panduan dan sebab kami untuk memilih perkara yang perlu ditindih dalam But semula:

  • Kemas kini beberapa nilai lalai penyemak imbas untuk menggunakan rems dan bukannya ems untuk jarak komponen boleh skala.
  • elakkan margin-top. Jidar menegak boleh runtuh, menghasilkan hasil yang tidak dijangka. Lebih penting lagi, satu arah marginadalah model mental yang lebih mudah.
  • Untuk penskalaan yang lebih mudah merentas saiz peranti, elemen blok harus menggunakan rems untuk margins.
  • Pastikan pengisytiharan fontsifat berkaitan - pada tahap minimum, menggunakan inheritapabila boleh.

pembolehubah CSS

Ditambah dalam v5.2.0

Dengan v5.1.1, kami menyeragamkan @imports yang diperlukan kami merentas semua berkas CSS kami (termasuk bootstrap.css, bootstrap-reboot.css, dan bootstrap-grid.css) untuk memasukkan _root.scss. Ini menambahkan :rootpembolehubah CSS tahap pada semua berkas, tidak kira berapa banyak daripadanya digunakan dalam berkas itu. Akhirnya Bootstrap 5 akan terus melihat lebih banyak pembolehubah CSS ditambah dari semasa ke semasa, untuk menyediakan lebih banyak penyesuaian masa nyata tanpa perlu sentiasa menyusun semula Sass. Pendekatan kami adalah untuk mengambil pembolehubah Sass sumber kami dan mengubahnya menjadi pembolehubah CSS. Dengan cara itu, walaupun anda tidak menggunakan pembolehubah CSS, anda masih mempunyai semua kuasa Sass. Ini masih dalam proses dan akan mengambil masa untuk dilaksanakan sepenuhnya.

Sebagai contoh, pertimbangkan :rootpembolehubah CSS ini untuk <body>gaya biasa:

  @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};

Dalam amalan, pembolehubah tersebut kemudiannya digunakan dalam Reboot seperti:

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
}

Yang membolehkan anda membuat penyesuaian masa nyata walau bagaimanapun anda suka:

<body style="--bs-body-color: #333;">
  <!-- ... -->
</body>

Halaman lalai

Elemen <html>dan <body>dikemas kini untuk menyediakan lalai seluruh halaman yang lebih baik. Lebih khusus:

  • Ia ditetapkan box-sizingsecara global pada setiap elemen—termasuk *::beforedan *::after, hingga border-box. Ini memastikan bahawa lebar elemen yang diisytiharkan tidak pernah melebihi kerana pelapik atau sempadan.
    • Tiada asas font-sizediisytiharkan pada <html>, tetapi 16pxdiandaikan (lalai penyemak imbas). font-size: 1remdigunakan pada <body>penskalaan jenis responsif yang mudah melalui pertanyaan media sambil menghormati pilihan pengguna dan memastikan pendekatan yang lebih mudah diakses. Lalai penyemak imbas ini boleh diganti dengan mengubah suai $font-size-rootpembolehubah.
  • Ia <body>juga menetapkan global font-family, font-weight, line-height, dan color. Ini diwarisi kemudian oleh beberapa elemen bentuk untuk mengelakkan ketidakkonsistenan fon.
  • Untuk keselamatan, <body>telah diisytiharkan background-color, lalai kepada #fff.

Timbunan fon asli

Bootstrap menggunakan "tindanan fon asli" atau "tindanan fon sistem" untuk pemaparan teks yang optimum pada setiap peranti dan OS. Fon sistem ini telah direka khusus dengan mempertimbangkan peranti hari ini, dengan pemaparan yang lebih baik pada skrin, sokongan fon berubah-ubah dan banyak lagi. Baca lebih lanjut mengenai susunan fon asli dalam artikel Majalah Smashing ini .

$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;

Ambil perhatian bahawa kerana timbunan fon termasuk fon emoji, banyak aksara biasa simbol/dingbat Unicode akan dipaparkan sebagai piktograf berbilang warna. Penampilan mereka akan berbeza-beza, bergantung pada gaya yang digunakan dalam fon emoji asli penyemak imbas/platform, dan mereka tidak akan terjejas oleh sebarang colorgaya CSS.

Ini font-familydigunakan pada <body>dan secara automatik diwarisi secara global di seluruh Bootstrap. Untuk menukar global font-family, kemas kini $font-family-basedan susun semula Bootstrap.

Tajuk dan perenggan

Semua elemen tajuk—cth, <h1>—dan <p>ditetapkan semula untuk margin-topdialih keluar. Tajuk telah margin-bottom: .5remditambah dan perenggan margin-bottom: 1remuntuk jarak yang mudah.

Tajuk Contoh
<h1></h1> h1. Tajuk Bootstrap
<h2></h2> h2. Tajuk Bootstrap
<h3></h3> h3. Tajuk Bootstrap
<h4></h4> h4. Tajuk Bootstrap
<h5></h5> h5. Tajuk Bootstrap
<h6></h6> h6. Tajuk Bootstrap

Peraturan mendatar

Elemen <hr>telah dipermudahkan. Sama seperti lalai penyemak imbas, <hr>s digayakan melalui border-top, mempunyai lalai opacity: .25, dan secara automatik mewarisi border-colormelalui color, termasuk apabila colorditetapkan melalui induk. Ia boleh diubah suai dengan utiliti teks, sempadan dan kelegapan.

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

Senarai

Semua senarai— <ul>, <ol>, dan <dl>— telah margin-topdialih keluar dan margin-bottom: 1rem. Senarai bersarang tidak mempunyai margin-bottom. Kami juga telah menetapkan semula padding-leftpada <ul>dan <ol>elemen.

  • Semua senarai telah dialih keluar margin atasnya
  • Dan margin bawah mereka menjadi normal
  • Senarai bersarang tidak mempunyai margin bawah
    • Dengan cara ini mereka mempunyai penampilan yang lebih sekata
    • Terutama apabila diikuti dengan lebih banyak item senarai
  • Pelapik kiri juga telah ditetapkan semula
  1. Berikut ialah senarai tersusun
  2. Dengan beberapa item senarai
  3. Ia mempunyai rupa keseluruhan yang sama
  4. Seperti senarai tidak tersusun sebelumnya

Untuk penggayaan yang lebih ringkas, hierarki yang jelas dan jarak yang lebih baik, senarai perihalan telah mengemas kini margins. <dd>s set semula margin-leftkepada 0dan tambah margin-bottom: .5rem. <dt>s dicetak tebal .

Senarai penerangan
Senarai huraian sesuai untuk menentukan istilah.
Penggal
Definisi untuk istilah.
Definisi kedua untuk istilah yang sama.
Istilah lain
Definisi untuk istilah lain ini.

Kod sebaris

Balut coretan sebaris kod dengan <code>. Pastikan anda melepaskan kurungan sudut HTML.

Sebagai contoh, <section>hendaklah dibalut sebagai sebaris.
html 
For example, <code>&lt;section&gt;</code> should be wrapped as inline.

Blok kod

Gunakan <pre>s untuk berbilang baris kod. Sekali lagi, pastikan anda melepaskan sebarang kurungan sudut dalam kod untuk pemaparan yang betul. Elemen <pre>ditetapkan semula untuk mengalih keluarnya margin-topdan menggunakan remunit untuk margin-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>

Pembolehubah

Untuk menunjukkan pembolehubah gunakan <var>teg.

y = m x + b
html 
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

Input pengguna

Gunakan <kbd>untuk menunjukkan input yang biasanya dimasukkan melalui papan kekunci.

Untuk menukar direktori, taip cddiikuti dengan nama direktori.
Untuk mengedit tetapan, tekan 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>

Keluaran sampel

Untuk menunjukkan output sampel daripada program gunakan <samp>tag.

Teks ini dimaksudkan untuk dianggap sebagai output sampel daripada program komputer.
html 
<samp>This text is meant to be treated as sample output from a computer program.</samp>

Meja

Jadual dilaraskan sedikit kepada gaya <caption>s, runtuhkan sempadan dan pastikan konsisten text-alignsepanjang keseluruhannya. Perubahan tambahan untuk sempadan, pelapik dan banyak lagi disertakan dengan kelas .table.

Ini ialah jadual contoh, dan ini adalah kapsyennya untuk menerangkan kandungannya.
Tajuk jadual Tajuk jadual Tajuk jadual Tajuk jadual
Sel meja Sel meja Sel meja Sel meja
Sel meja Sel meja Sel meja Sel meja
Sel meja Sel meja Sel meja Sel meja
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>

Borang

Pelbagai elemen bentuk telah dibut semula untuk gaya asas yang lebih ringkas. Berikut adalah beberapa perubahan yang paling ketara:

  • <fieldset>s tidak mempunyai sempadan, padding atau margin supaya ia boleh digunakan dengan mudah sebagai pembalut untuk input individu atau kumpulan input.
  • <legend>s, seperti set medan, juga telah digayakan semula untuk dipaparkan sebagai tajuk jenis.
  • <label>s ditetapkan display: inline-blockuntuk membenarkan marginuntuk digunakan.
  • <input>s, <select>s, <textarea>s, dan <button>s kebanyakannya ditangani oleh Normalize, tetapi Reboot mengalih keluar mereka margindan set line-height: inherit, juga.
  • <textarea>s diubah suai kepada hanya boleh diubah saiz secara menegak kerana saiz semula mendatar sering "memecahkan" susun atur halaman.
  • <button>s dan <input>elemen butang mempunyai cursor: pointerapabila :not(:disabled).

Perubahan ini, dan banyak lagi, ditunjukkan di bawah.

Contoh lagenda

100

Sokongan input tarikh & warna

Perlu diingat input tarikh tidak disokong sepenuhnya oleh semua pelayar, iaitu Safari.

Penunjuk pada butang

But semula termasuk peningkatan untuk role="button"menukar kursor lalai kepada pointer. Tambahkan atribut ini pada elemen untuk membantu menunjukkan elemen interaktif. Peranan ini tidak diperlukan untuk <button>elemen, yang mendapat cursorperubahan mereka sendiri.

Butang elemen bukan butang
html 
<span role="button" tabindex="0">Non-button element button</span>

Elemen lain

Alamat

Elemen <address>dikemas kini untuk menetapkan semula lalai penyemak imbas font-styledari italickepada normal. line-heightjuga kini diwarisi, dan margin-bottom: 1remtelah ditambah. <address>s adalah untuk menyampaikan maklumat hubungan untuk nenek moyang terdekat (atau seluruh badan kerja). Kekalkan pemformatan dengan menamatkan baris dengan <br>.

Twitter, Inc.
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890
Nama Penuh
[email protected]

Sebut harga

Lalai marginpada petikan sekat ialah 1em 40px, jadi kami menetapkan semula itu 0 0 1remuntuk sesuatu yang lebih konsisten dengan elemen lain.

Petikan yang terkenal, terkandung dalam elemen petikan blok.

Seseorang yang terkenal dalam Tajuk Sumber

Elemen sebaris

Elemen <abbr>menerima penggayaan asas untuk menjadikannya menonjol di kalangan teks perenggan.

Unsur singkatan HTML .

Ringkasan

Lalai cursorpada ringkasan ialah text, jadi kami menetapkan semula itu kepada pointeruntuk menyampaikan bahawa elemen itu boleh berinteraksi dengan mengklik padanya.

Beberapa butiran

Maklumat lanjut tentang butiran.

Lebih terperinci lagi

Berikut adalah butiran lanjut tentang butiran.

[hidden]Atribut HTML5

HTML5 menambah atribut global baharu bernama[hidden] , yang digayakan display: nonesecara lalai. Dengan meminjam idea daripada PureCSS , kami menambah baik lalai ini dengan membuat [hidden] { display: none !important; }untuk membantu mengelakkan idea daripada ditolak displaysecara tidak sengaja.

<input type="text" hidden>
ketidakserasian jQuery

[hidden]tidak serasi dengan jQuery $(...).hide()dan $(...).show()kaedah. Oleh itu, pada masa ini kami tidak menyokong [hidden]teknik lain untuk mengurus displayelemen.

Untuk hanya menogol keterlihatan elemen, bermakna ia displaytidak diubah suai dan elemen itu masih boleh menjejaskan aliran dokumen, gunakan kelas.invisible sebaliknya .