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.
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
rem
s tinimbangem
s kanggo spasi komponen sing bisa diukur. - Nyingkiri
margin-top
. Margin vertikal bisa ambruk, ngasilake asil sing ora dikarepake. Nanging sing luwih penting, arah sijimargin
yaiku model mental sing luwih gampang. - Kanggo skala luwih gampang ing ukuran piranti, unsur blok kudu nggunakake
rem
s kanggomargin
s. - Tansah deklarasi
font
properti sing gegandhengan karo minimal, nggunakakeinherit
sabisa.
variabel CSS
Ditambahake ing v5.1.1
Kanthi v5.1.1, kita nggawe standar @import
s sing dibutuhake ing kabeh bundel CSS (kalebu bootstrap.css
, bootstrap-reboot.css
, lan bootstrap-grid.css
kalebu _root.scss
. Iki nambah :root
variabel CSS tingkat kanggo kabeh bundel, preduli saka pira sing digunakake ing bundel kasebut. Pungkasane Bootstrap 5 bakal terus ndeleng liyane variabel CSS ditambahaké liwat wektu.
Kaca standar
Unsur <html>
lan <body>
dianyari kanggo nyedhiyakake standar kaca sing luwih apik. Luwih khusus:
box-sizing
Ing global disetel ing saben unsur-kalebu lan*::before
,*::after
kanggoborder-box
. Iki mesthekake yen jembaré ngumumaké saka unsur ora tau ngluwihi amarga padding utawa wates.- Ora ana basis
font-size
sing diumumake ing<html>
, nanging16px
dianggep (standar browser).font-size: 1rem
diterapake<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-root
variabel kasebut.
- Ora ana basis
- Uga nyetel
<body>
globalfont-family
,font-weight
,line-height
, lancolor
. 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,
// 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;
Elinga amarga tumpukan font kalebu fonts emoji, akeh karakter unicode simbol / dingbat sing umum bakal diandharake minangka pictographs multi-warna. Penampilane bakal beda-beda, gumantung saka gaya sing digunakake ing font emoji asli browser/platform, lan ora bakal kena pengaruh color
gaya CSS.
Iki font-family
ditrapake kanggo <body>
lan diwarisake kanthi otomatis ing saindhenging Bootstrap. Kanggo ngalih global font-family
, nganyari $font-family-base
lan kompilasi ulang Bootstrap.
variabel CSS
Minangka Bootstrap 5 terus diwasa, luwih akeh gaya bakal dibangun karo variabel CSS minangka sarana kanggo nyedhiyakake kustomisasi wektu nyata tanpa kudu tansah nglumpukake 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 :root
variabel CSS iki kanggo <body>
gaya umum:
@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};
Ing praktik, variabel kasebut banjur ditrapake ing Reboot kaya mangkene:
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
}
Sing ngidini sampeyan nggawe kustomisasi wektu nyata nanging sampeyan seneng:
<body style="--bs-body-color: #333;">
<!-- ... -->
</body>
Judhul lan paragraf
Kabeh unsur judhul - contone, <h1>
- lan <p>
direset supaya margin-top
dicopot. Judhul wis margin-bottom: .5rem
ditambahake lan paragraf margin-bottom: 1rem
kanggo 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 |
Dhaptar
Kabeh dhaptar— <ul>
, <ol>
, lan <dl>
— wis margin-top
dibusak lan margin-bottom: 1rem
. Dhaptar bersarang ora duwe margin-bottom
. Kita uga wis ngreset padding-left
ing <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 margin
s. <dd>
s ngreset lan nambah margin-left
. s wis kandel .0
margin-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.
<section>
kudu dibungkus minangka inline.
For example, <code><section></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-top
lan nggunakake rem
unit kanggo 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>
Variabel
Kanggo nuduhake variabel nggunakake <var>
tag.
<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 ngowahi setelan, penet 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>
Output sampel
Kanggo nuduhake output sampel saka program nggunakake <samp>
tag.
<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-align
saindhenging. Owah-owahan tambahan kanggo wates, padding, lan liya-liyane teka karo kelas.table
.
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 |
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 diseteldisplay: inline-block
kanggo ngidinimargin
kanggo Applied.<input>
s,<select>
s,<textarea>
s, lan<button>
s biasane ditangani dening Normalize, nanging Urip maneh mbusak singmargin
lan setline-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 wiscursor: pointer
nalika: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- cursor
owahan dhewe.
<span role="button" tabindex="0">Non-button element button</span>
Elemen liyane
alamat
Unsur <address>
kasebut dianyari kanggo ngreset standar browser font-style
saka italic
menyang normal
. line-height
uga saiki diwarisake, lan margin-bottom: 1rem
wis ditambahake. <address>
s kanggo menehi informasi kontak kanggo leluhur paling cedhak (utawa kabeh awak karya). Simpen format kanthi mungkasi baris nganggo <br>
.
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890 Jeneng Lengkap
[email protected]
Blockquote
Default margin
ing blockquotes punika 1em 40px
, supaya kita ngreset sing kanggo 0 0 1rem
soko 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.
Ringkesan
Default cursor
ing ringkesan punika text
, supaya kita ngreset sing pointer
kanggo 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: none
standar. Nyilih ide saka PureCSS , kita nambah standar iki kanthi nggawe [hidden] { display: none !important; }
kanggo nyegah supaya display
ora 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 display
unsur.
Kanggo mung ngalih visibilitas unsur, tegese display
ora diowahi lan unsur kasebut isih bisa mengaruhi aliran dokumen, gunakake kelas .invisible
kasebut .