Urip maneh

Urip maneh, koleksi owah-owahan CSS khusus unsur ing file siji, miwiti Bootstrap kanggo nyedhiyakake garis dasar sing elegan, konsisten, lan prasaja kanggo dibangun.

Ing kaca iki

pendekatan

Urip maneh dibangun ing Normalize, nyedhiyakake akeh unsur HTML kanthi gaya sing rada beda karo mung nggunakake pamilih unsur. Gaya tambahan ditindakake mung karo kelas. Contone, kita urip maneh sawetara <table>gaya kanggo garis dasar sing luwih prasaja lan mengko nyedhiyakake .table, .table-bordered, lan liya-liyane.

Mangkene pedoman lan alasan kanggo milih apa sing kudu diganti ing Urip maneh:

Nganyari sawetara nilai standar browser kanggo nggunakake rems tinimbang ems kanggo spasi komponen sing bisa diukur.
Nyingkiri margin-top. Margin vertikal bisa ambruk, ngasilake asil sing ora dikarepake. Nanging sing luwih penting, arah siji marginyaiku model mental sing luwih gampang.
Kanggo skala luwih gampang ing ukuran piranti, unsur blok kudu nggunakake rems kanggo margins.
Tansah deklarasi fontproperti sing gegandhengan karo minimal, nggunakake inheritsabisa.

variabel CSS

Ditambahake ing v5.2.0

Kanthi v5.1.1, kita nggawe standar @imports sing dibutuhake ing kabeh bundel CSS (kalebu bootstrap.css, bootstrap-reboot.css, lan bootstrap-grid.css) kanggo nyakup _root.scss. Iki nambah :rootvariabel CSS tingkat kanggo kabeh bundel, preduli saka carane akeh sing digunakake ing bundel kasebut. Pungkasane Bootstrap 5 bakal terus ndeleng luwih akeh variabel CSS sing ditambahake liwat wektu, supaya bisa nyedhiyakake kustomisasi wektu nyata tanpa kudu tansah ngumpulake maneh Sass. Pendekatan kita yaiku njupuk variabel Sass sumber lan ngowahi dadi variabel CSS. Mangkono, sanajan sampeyan ora nggunakake variabel CSS, sampeyan isih duwe kabeh kekuwatan Sass. Iki isih ditindakake lan butuh wektu kanggo dileksanakake kanthi lengkap.

Contone, nimbang :rootvariabel CSS iki kanggo <body>gaya umum:

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

Ing praktik, variabel kasebut banjur ditrapake ing Reboot kaya mangkene:

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
}

Sing ngidini sampeyan nggawe kustomisasi wektu nyata nanging sampeyan seneng:

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

Kaca standar

Unsur <html>lan <body>dianyari kanggo nyedhiyakake standar kaca sing luwih apik. Luwih khusus:

box-sizingIng global disetel ing saben unsur-kalebu lan *::before, *::afterkanggo border-box. Iki mesthekake yen jembaré ngumumaké saka unsur ora tau ngluwihi amarga padding utawa wates.
- Ora ana basis font-sizesing diumumake ing <html>, nanging 16pxdianggep (standar browser). font-size: 1remditerapake <body>kanggo skala tipe responsif sing gampang liwat pitakon media nalika ngurmati preferensi pangguna lan njamin pendekatan sing luwih gampang diakses. Default browser iki bisa diganti kanthi ngowahi $font-size-rootvariabel kasebut.
Uga nyetel <body>global font-family, font-weight, line-height, lan color. Iki diwarisake mengko dening sawetara unsur wangun kanggo nyegah inconsistencies font.
Kanggo safety, <body>wis ngumumaké background-color, defaulting kanggo #fff.

Tumpukan font asli

Bootstrap nggunakake "tumpukan font asli" utawa "tumpukan font sistem" kanggo rendering teks paling luweh ing saben piranti lan OS. Font sistem iki wis dirancang khusus kanggo piranti saiki, kanthi rendering sing luwih apik ing layar, dhukungan font variabel, lan liya-liyane. Waca liyane babagan tumpukan font native ing artikel Smashing Magazine iki .

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

Elinga, amarga tumpukan font kalebu font emoji, akeh karakter Unicode simbol / dingbat sing umum bakal diandharake minangka piktograf warna-warni. Penampilane bakal beda-beda, gumantung saka gaya sing digunakake ing font emoji asli browser/platform, lan ora bakal kena pengaruh colorgaya CSS.

Iki font-familyditrapake kanggo <body>lan diwarisake kanthi otomatis ing saindhenging Bootstrap. Kanggo ngalih global font-family, nganyari $font-family-baselan kompilasi ulang Bootstrap.

Judhul lan paragraf

Kabeh unsur judhul - contone, <h1>- lan <p>direset supaya margin-topdicopot. Judhul wis margin-bottom: .5remditambahake lan paragraf margin-bottom: 1remkanggo gampang spasi.

judhul	Tuladha
`<h1></h1>`	h1. Judul Bootstrap
`<h2></h2>`	h2. Judul Bootstrap
`<h3></h3>`	h3. Judul Bootstrap
`<h4></h4>`	h4. Judul Bootstrap
`<h5></h5>`	h5. Judul Bootstrap
`<h6></h6>`	h6. Judul Bootstrap

Aturan horisontal

Unsur <hr>wis simplified. Padha karo standar browser, <hr>s wis gaya liwat border-top, duwe gawan opacity: .25, lan otomatis oleh warisan border-colorliwat color, kalebu nalika colordisetel liwat wong tuwa. Bisa diowahi nganggo utilitas teks, wates, lan opacity.

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

Dhaptar

Kabeh dhaptar— <ul>, <ol>, lan <dl>— wis margin-topdibusak lan margin-bottom: 1rem. Dhaptar bersarang ora duwe margin-bottom. Kita uga wis ngreset padding-lefting <ul>lan <ol>unsur.

Kabeh dhaptar wis dibusak wates ndhuwur
Lan wates ngisor dheweke normal
Dhaptar bersarang ora duwe wates ngisor
- Kanthi cara iki, dheweke duwe tampilan sing luwih rata
- Utamane yen diikuti karo item dhaptar liyane
Padding kiwa uga wis direset

Punika dhaptar dhawuh
Kanthi sawetara item dhaptar
Wis katon sakabèhé padha
Minangka dhaptar unordered sadurungé

Kanggo gaya sing luwih prasaja, hierarki sing jelas, lan jarak sing luwih apik, dhaptar deskripsi wis nganyari margins. <dd>s ngreset lan nambah margin-left. s wis kandel .0margin-bottom: .5rem<dt>

Dhaptar katrangan: Dhaptar deskripsi sampurna kanggo nemtokake istilah.
istilahe: Definisi kanggo istilah.; Dhéfinisi liya kanggo istilah sing padha.
Istilah liyane: Definisi kanggo istilah liyane iki.

Kode inline

Bungkus potongan kode inline nganggo <code>. Dadi manawa kanggo uwal saka kurung sudut HTML.

Contone, <section>kudu dibungkus minangka inline.

html

For example, <code>&lt;section&gt;</code> should be wrapped as inline.

Blok kode

Gunakake <pre>s kanggo sawetara baris kode. Sawise maneh, dadi manawa kanggo uwal sembarang kurung amba ing kode kanggo Rendering tepat. Unsur <pre>kasebut direset kanggo mbusak margin-toplan nggunakake remunit kanggo 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>

Variabel

Kanggo nuduhake variabel nggunakake <var>tag.

y = m x + b

html

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

input pangguna

Gunakake <kbd>kanggo nuduhake input sing biasane dilebokake liwat keyboard.

Kanggo ngalih direktori, ketik cdbanjur jeneng direktori.
Kanggo ngowahi setelan, penet 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>

Output sampel

Kanggo nuduhake output sampel saka program nggunakake <samp>tag.

Teks iki dimaksudaké kanggo dianggep minangka conto output saka program komputer.

html

<samp>This text is meant to be treated as sample output from a computer program.</samp>

Tabel

Tabel rada diatur kanggo gaya <caption>s, wates ambruk, lan njamin konsisten text-alignsaindhenging. Owah-owahan tambahan kanggo wates, padding, lan liya-liyane teka karo kelas.table .

Iki minangka conto tabel, lan iki minangka caption kanggo nggambarake isine.
Tabel judhul	Tabel judhul	Tabel judhul	Tabel judhul
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>

Formulir

Macem-macem unsur wangun wis reboot kanggo gaya basa prasaja. Ing ngisor iki sawetara owah-owahan sing paling penting:

<fieldset>s ora duwe wates, padding, utawa wates supaya bisa gampang digunakake minangka pambungkus kanggo input individu utawa kelompok input.
<legend>s, kaya fieldsets, uga wis restyled kanggo ditampilake minangka judhul jinis.
<label>s disetel display: inline-blockkanggo ngidini marginkanggo Applied.
<input>s, <select>s, <textarea>s, lan <button>s biasane ditangani dening Normalize, nanging Urip maneh mbusak sing marginlan set line-height: inherit, banget.
<textarea>s diowahi dadi mung bisa diowahi ukurane vertikal amarga ukuran horisontal asring "ngrusak" tata letak kaca.
<button>s lan <input>unsur tombol wis cursor: pointernalika :not(:disabled).

Owah-owahan kasebut, lan liya-liyane, dituduhake ing ngisor iki.

Dhukungan input tanggal & warna

Elinga yen input tanggal ora didhukung kanthi lengkap dening kabeh browser, yaiku Safari.

Pointer ing tombol

Urip maneh kalebu tambahan role="button"kanggo ngganti kursor standar dadi pointer. Tambah atribut iki menyang unsur kanggo mbantu nuduhake unsur interaktif. Peran iki ora perlu kanggo <button>unsur, sing entuk owah- cursorowahan dhewe.

Tombol unsur non-tombol

html

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

Elemen liyane

alamat

Unsur <address>kasebut dianyari kanggo ngreset standar browser font-stylesaka italicmenyang normal. line-heightuga saiki diwarisake, lan margin-bottom: 1remwis ditambahake. <address>s kanggo menehi informasi kontak kanggo leluhur paling cedhak (utawa kabeh awak karya). Simpen format kanthi mungkasi baris nganggo <br>.

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

Jeneng Lengkap
[email protected]

Blockquote

Default margining blockquotes punika 1em 40px, supaya kita ngreset sing kanggo 0 0 1remsoko luwih konsisten karo unsur liyane.

Kutipan kondhang, sing ana ing unsur blockquote.

Wong sing misuwur ing Judhul Sumber

Unsur inline

Elemen <abbr>kasebut nampa gaya dhasar supaya katon ing antarane teks paragraf.

Elemen singkatan HTML .

Ringkesan

Default cursoring ringkesan punika text, supaya kita ngreset sing pointerkanggo ngirim sing unsur bisa sesambungan karo ngeklik ing.

Sawetara rincian

Info liyane babagan rincian.

Malah luwih rinci

Kene malah luwih rinci babagan rincian.

`[hidden]`Atribut HTML5

HTML5 nambahake atribut global anyar sing jenenge[hidden] , sing ditata minangka display: nonestandar. Nyilih ide saka PureCSS , kita nambah standar iki kanthi nggawe [hidden] { display: none !important; }kanggo nyegah supaya displayora sengaja ditindhes.

<input type="text" hidden>

ora kompatibel jQuery

[hidden]ora kompatibel karo jQuery $(...).hide()lan $(...).show()cara. Mula, saiki kita ora nyetujoni [hidden]teknik liya kanggo ngatur displayunsur.

Kanggo mung ngalih visibilitas unsur, tegese displayora diowahi lan unsur kasebut isih bisa mengaruhi aliran dokumen, gunakake kelas .invisiblekasebut .

Urip maneh

pendekatan

variabel CSS

Kaca standar

Tumpukan font asli

Judhul lan paragraf

Aturan horisontal

Dhaptar

Kode inline

Blok kode

Variabel

input pangguna

Output sampel

Tabel

Formulir

Dhukungan input tanggal & warna

Pointer ing tombol

Elemen liyane

alamat

Blockquote

Unsur inline

Ringkesan

[hidden]Atribut HTML5

ora kompatibel jQuery

`[hidden]`Atribut HTML5