Atunbere
Atunbere, ikojọpọ awọn ayipada CSS-pato ninu faili kan, kickstart Bootstrap lati pese ohun didara, deede, ati ipilẹ ipilẹ ti o rọrun lati kọ sori.
Ona
Atunbere duro lori Normalize, pese ọpọlọpọ awọn eroja HTML pẹlu awọn aza ti o ni imọran nipa lilo awọn yiyan eroja nikan. Afikun iselona ni a ṣe pẹlu awọn kilasi nikan. Fun apẹẹrẹ, a tun atunbere diẹ ninu awọn <table>
aza fun ipilẹ ti o rọrun ati nigbamii pese .table
, .table-bordered
, ati diẹ sii.
Eyi ni awọn itọnisọna ati awọn idi wa fun yiyan kini lati fagile ni Atunbere:
- Ṣe imudojuiwọn diẹ ninu awọn iye aiyipada aṣawakiri lati lo
rem
s dipoem
s fun aaye paati ti iwọn. - Yẹra fun
margin-top
. Awọn ala inaro le ṣubu, ti nso awọn abajade airotẹlẹ. Ni pataki julọ botilẹjẹpe, itọsọna kan timargin
jẹ awoṣe ọpọlọ ti o rọrun. - Fun wiwọn ti o rọrun lori awọn iwọn ẹrọ, awọn eroja dina yẹ ki o lo
rem
s funmargin
s. - Jeki awọn ikede ti awọn
font
ohun-ini ibatan si o kere ju, ni liloinherit
nigbakugba ti o ṣee ṣe.
CSS oniyipada
Fi kun v5.1.1
Pẹlu v5.1.1, a ṣe idiwọn awọn @import
s ti a beere fun kọja gbogbo awọn idii CSS wa (pẹlu bootstrap.css
, bootstrap-reboot.css
, ati bootstrap-grid.css
lati pẹlu _root.scss
. Eyi ṣe afikun :root
awọn oniyipada CSS ipele si gbogbo awọn edidi, laibikita iye wọn ti a lo ninu idii naa. Nikẹhin Bootstrap 5 yoo tẹsiwaju si ri diẹ CSS oniyipada kun lori akoko.
Awọn aiyipada oju-iwe
Awọn eroja <html>
ati <body>
awọn eroja ti wa ni imudojuiwọn lati pese awọn aiyipada oju-iwe ti o dara julọ. Ni pataki diẹ sii:
- Awọn
box-sizing
ti wa ni agbaye ṣeto lori gbogbo eroja-pẹlu*::before
ati*::after
, latiborder-box
. Eyi ni idaniloju pe iwọn ti a kede ti eroja ko kọja nitori fifẹ tabi aala.- Ko si ipilẹ
font-size
ti a kede lori<html>
, ṣugbọn16px
a ro (aiyipada aṣawakiri).font-size: 1rem
ti lo lori<body>
iru-iwọn idahun ti o rọrun nipasẹ awọn ibeere media lakoko ti o bọwọ fun awọn ayanfẹ olumulo ati aridaju ọna iraye si diẹ sii. Aiyipada aṣawakiri yii le jẹ agbekọja nipasẹ yiyipada$font-size-root
oniyipada naa.
- Ko si ipilẹ
- Awọn
<body>
tun ṣeto kan agbayefont-family
,font-weight
,line-height
, aticolor
. Eyi jẹ jogun nigbamii nipasẹ diẹ ninu awọn eroja fọọmu lati ṣe idiwọ awọn aiṣedeede fonti. - Fun ailewu, o
<body>
ti kedebackground-color
, aiyipada si#fff
.
Native font akopọ
Bootstrap nlo “akopọ fonti abinibi” tabi “akopọ font eto” fun ṣiṣe ọrọ ti o dara julọ lori gbogbo ẹrọ ati OS. Awọn akọwe eto wọnyi ti ṣe apẹrẹ pataki pẹlu awọn ẹrọ oni ni lokan, pẹlu imudara ilọsiwaju lori awọn iboju, atilẹyin fonti oniyipada, ati diẹ sii. Ka diẹ sii nipa awọn akopọ fonti abinibi ni nkan Iwe irohin Smashing yii .
$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;
Ṣe akiyesi pe nitori akopọ fonti pẹlu awọn nkọwe emoji, ọpọlọpọ aami ti o wọpọ/awọn ohun kikọ unicode dingbat ni yoo ṣe bi awọn aworan alawọ-pupọ. Irisi wọn yoo yatọ, da lori ara ti a lo ninu ẹrọ aṣawakiri/Syeed ti abinibi emoji fonti, ati pe wọn kii yoo ni ipa nipasẹ eyikeyi awọn ara CSS color
.
Eyi font-family
ni a lo si <body>
ati jogun laifọwọyi ni agbaye jakejado Bootstrap. Lati yi agbaye pada font-family
, ṣe imudojuiwọn $font-family-base
ati ṣajọ Bootstrap.
CSS oniyipada
Bi Bootstrap 5 ṣe n tẹsiwaju lati dagba, diẹ sii ati siwaju sii awọn aza ni yoo kọ pẹlu awọn oniyipada CSS bi ọna lati pese isọdi-akoko gidi diẹ sii laisi iwulo lati tun ṣajọpọ Sass nigbagbogbo. Ọna wa ni lati mu awọn oniyipada Sass orisun wa ki o yi wọn pada si awọn oniyipada CSS. Ni ọna yẹn, paapaa ti o ko ba lo awọn oniyipada CSS, o tun ni gbogbo agbara Sass. Eyi tun wa ni ilọsiwaju ati pe yoo gba akoko lati ṣe ni kikun.
Fun apẹẹrẹ, ro awọn :root
oniyipada CSS wọnyi fun awọn <body>
aza ti o wọpọ:
@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};
Ni iṣe, awọn oniyipada yẹn ni a lo ni Atunbere bii bẹ:
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
}
Eyi ti o fun ọ laaye lati ṣe awọn isọdi akoko gidi bi o ṣe fẹ:
<body style="--bs-body-color: #333;">
<!-- ... -->
</body>
Awọn akọle ati awọn ìpínrọ
Gbogbo awọn eroja akọle — fun apẹẹrẹ, <h1>
— ati <p>
pe a tunto lati yọ wọn margin-top
kuro. Awọn akọle ti margin-bottom: .5rem
ṣafikun ati awọn paragira margin-bottom: 1rem
fun aye irọrun.
Akori | Apeere |
---|---|
<h1></h1> |
h1. Bootstrap akori |
<h2></h2> |
h2. Bootstrap akori |
<h3></h3> |
h3. Bootstrap akori |
<h4></h4> |
h4. Bootstrap akori |
<h5></h5> |
h5. Bootstrap akori |
<h6></h6> |
h6. Bootstrap akori |
Awọn akojọ
Gbogbo awọn atokọ — <ul>
, <ol>
, ati <dl>
— ti margin-top
yọkuro ati margin-bottom: 1rem
. Awọn atokọ itẹle ko ni margin-bottom
. A ti tun padding-left
titan <ul>
ati <ol>
awọn eroja tunto.
- Gbogbo awọn atokọ ti yọkuro ala oke wọn
- Ati ala isalẹ wọn ṣe deede
- Awọn atokọ itẹ-ẹiyẹ ko ni ala isale
- Ni ọna yii wọn ni irisi paapaa diẹ sii
- Ni pataki nigbati awọn nkan atokọ diẹ sii tẹle
- Padding osi tun ti tunto
- Eyi ni atokọ ti o paṣẹ
- Pẹlu awọn nkan atokọ diẹ
- O ni irisi gbogbogbo kanna
- Gẹgẹbi atokọ ti a ko paṣẹ tẹlẹ
Fun iselona ti o rọrun, awọn ilana mimọ, ati aye to dara julọ, awọn atokọ apejuwe ti ni imudojuiwọn margin
s. <dd>
s tunto margin-left
si 0
ati fikun margin-bottom: .5rem
. <dt>
s wa ni igboya .
- Awọn akojọ apejuwe
- Akojọ apejuwe jẹ pipe fun asọye awọn ofin.
- Igba
- Definition fun oro.
- Itumọ keji fun igba kanna.
- Igba miiran
- Itumọ fun igba miiran yii.
Opopo koodu
Pa awọn snippets inline ti koodu pẹlu <code>
. Rii daju lati sa fun awọn biraketi igun HTML.
<section>
yẹ ki o wa ni ti a we bi inline.
For example, <code><section></code> should be wrapped as inline.
Awọn bulọọki koodu
Lo <pre>
s fun ọpọ ila ti koodu. Lẹẹkansi, rii daju pe o sa fun awọn biraketi igun eyikeyi ninu koodu fun ṣiṣe deede. A <pre>
tunto eroja lati yọkuro margin-top
ati lo rem
awọn ẹya fun 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>
Awọn oniyipada
Fun afihan awọn oniyipada lo <var>
tag.
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
Iṣagbewọle olumulo
Lo <kbd>
lati tọka titẹ sii ti o jẹ igbagbogbo titẹ nipasẹ keyboard.
Lati ṣatunkọ eto, tẹ 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>
Apeere igbejade
Fun afihan abajade ayẹwo lati inu eto kan lo <samp>
tag.
<samp>This text is meant to be treated as sample output from a computer program.</samp>
Awọn tabili
Awọn tabili ni atunṣe die-die si ara <caption>
s, awọn aala wó lulẹ, ati rii daju pe o wa ni ibamu text-align
jakejado. Awọn iyipada afikun fun awọn aala, padding, ati diẹ sii wa pẹlu kilasi.table
naa .
Tabili akori | Tabili akori | Tabili akori | Tabili akori |
---|---|---|---|
Tabili cell | Tabili cell | Tabili cell | Tabili cell |
Tabili cell | Tabili cell | Tabili cell | Tabili cell |
Tabili cell | Tabili cell | Tabili cell | Tabili cell |
Awọn fọọmu
Awọn eroja fọọmu oriṣiriṣi ti tun bẹrẹ fun awọn aza ipilẹ ti o rọrun. Eyi ni diẹ ninu awọn iyipada olokiki julọ:
<fieldset>
s ko ni awọn aala, padding, tabi ala ki wọn le ṣee lo ni irọrun bi awọn apamọra fun awọn igbewọle kọọkan tabi awọn ẹgbẹ ti awọn igbewọle.<legend>
s, gẹgẹbi awọn ipilẹ aaye, tun ti tun ṣe atunṣe lati ṣe afihan bi akọle iru.<label>
s ti ṣeto latidisplay: inline-block
gba laayemargin
lati lo.<input>
s,<select>
s,<textarea>
s, ati<button>
s ni a koju pupọ julọ nipasẹ Normalize, ṣugbọn Atunbere yọ wọn kuromargin
ati ṣetoline-height: inherit
, paapaa.<textarea>
s ti wa ni títúnṣe lati nikan wa ni resizable ni inaro bi petele iwọn igba "fifọ" iwe ifilelẹ.<button>
s ati<input>
awọn eroja bọtini nicursor: pointer
nigbati:not(:disabled)
.
Awọn ayipada wọnyi, ati diẹ sii, ni afihan ni isalẹ.
Ọjọ & atilẹyin igbewọle awọ
Ranti awọn igbewọle ọjọ ko ni atilẹyin ni kikun nipasẹ gbogbo awọn aṣawakiri, eyun Safari.
Awọn itọka lori awọn bọtini
Atunbere pẹlu imudara role="button"
lati yi kọsọ aiyipada pada si pointer
. Ṣafikun ẹda yii si awọn eroja lati ṣe iranlọwọ tọka awọn eroja jẹ ibaraenisepo. Ipa yii ko ṣe pataki fun awọn eroja, eyiti o gba iyipada <button>
tiwọn .cursor
<span role="button" tabindex="0">Non-button element button</span>
Awọn eroja oriṣiriṣi
Adirẹsi
A ṣe imudojuiwọn eroja lati <address>
tun aiyipada ẹrọ aṣawakiri font-style
lati . ti wa ni tun bayi jogun, ati awọn ti a ti fi kun. s wa fun iṣafihan alaye olubasọrọ fun baba ti o sunmọ (tabi gbogbo ara iṣẹ). Ṣetọju ọna kika nipasẹ ipari awọn ila pẹlu .italic
normal
line-height
margin-bottom: 1rem
<address>
<br>
1355 Ọja St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890 Orukọ kikun
[email protected]
Blockquote
Awọn aiyipada margin
lori blockquotes ni 1em 40px
, ki a tun pe si 0 0 1rem
fun nkankan siwaju sii ni ibamu pẹlu awọn eroja miiran.
Ọrọ agbasọ ti a mọ daradara, ti o wa ninu nkan blockquote kan.
Ẹnikan olokiki ni Akọle Orisun
Awọn eroja inu
Ohun <abbr>
elo naa gba iselona ipilẹ lati jẹ ki o ṣe pataki laarin ọrọ paragira.
Lakotan
Aiyipada cursor
lori akopọ jẹ text
, nitorinaa a tunto iyẹn pointer
lati fihan pe nkan naa le ṣe ibaraenisepo pẹlu tite lori rẹ.
Diẹ ninu awọn alaye
Alaye diẹ sii nipa awọn alaye.
Paapaa awọn alaye diẹ sii
Eyi ni awọn alaye diẹ sii nipa awọn alaye.
HTML5 [hidden]
abuda
HTML5 ṣe afikun abuda agbaye tuntun ti a npè ni[hidden]
, eyiti o jẹ aṣa bi display: none
nipasẹ aiyipada. Yiyawo imọran lati PureCSS , a ni ilọsiwaju lori aiyipada yii nipa ṣiṣe [hidden] { display: none !important; }
lati ṣe iranlọwọ lati yago fun display
gbigba rẹ lairotẹlẹ.
<input type="text" hidden>
jQuery aibaramu
[hidden]
ko ni ibamu pẹlu jQuery's $(...).hide()
ati $(...).show()
awọn ọna. Nitorinaa, lọwọlọwọ a ko fọwọsi ni pataki [hidden]
lori awọn ilana miiran fun ṣiṣakoso awọn display
eroja.
Lati yi iyipada hihan ohun kan nikan, afipamo pe ko yipada ati pe ano tun le ni ipa lori sisan tidisplay
iwe, lo kilasi.invisible
dipo.