Whakahou ano
Reboot, he kohinga o nga huringa CSS-motuhake i roto i te konae kotahi, kickstart Bootstrap ki te whakarato i tetahi rarangi huatau, riterite, ngawari hoki hei hanga.
Te huarahi
Ka hanga ano te whakaara i runga i te Normalize, e whakarato ana i te maha o nga huānga HTML me nga momo ahua whakaaro ma te whakamahi i nga kaiwhiri huānga anake. Ko etahi atu taapiri ka mahia me nga karaehe anake. Hei tauira, ka whakaara ano tatou i etahi <table>
momo mo te rarangi turanga ngawari ake, a muri ake ka whakarato .table
, .table-bordered
, me etahi atu.
Anei a maatau aratohu me nga take mo te kowhiri i nga mea hei whakakore i te Reboot:
- Whakahoutia etahi uara taunoa pūtirotiro hei whakamahi i
rem
te s hei utu moem
te s mo te mokowhiti waahanga tauineine. - Aukati
margin-top
. Ka tiango nga tawhē poutū, ka puta he hua ohorere. Ko te mea nui ake, ko te ahunga kotahimargin
he tauira hinengaro ngawari ake. - Kia ngawari ake te whakatauine puta noa i te rahi o te taputapu, me whakamahi nga huānga poraka
rem
s momargin
te s. - Puritia nga whakapuakanga o
font
nga taonga e pa ana ki te iti rawa, ma te whakamahi iinherit
nga wa katoa ka taea.
Taurangi CSS
Kua taapirihia ki te v5.1.1
Ma te v5.1.1, i whakatauritehia e matou a matou @import
s e hiahiatia ana puta noa i a matou paihere CSS katoa (tae atu ki bootstrap.css
te , bootstrap-reboot.css
, me bootstrap-grid.css
te whakauru _root.scss
. Ka :root
taapirihia nga taurangi CSS taumata ki nga paihere katoa, ahakoa te maha o era e whakamahia ana i roto i taua paihere. I te mutunga ka haere tonu a Bootstrap 5 ki te tirohia etahi atu taurangi CSS kua taapirihia i te waa.
Whārangi taunoa
Ko nga <html>
me <body>
nga huānga kua whakahoutia kia pai ake ai nga taunoa wharangi whanui. Ake ake:
- Kei
box-sizing
te ao te whakatakotoranga ki runga i ia huānga—tae atu*::before
ki te*::after
, ki teborder-box
. Ma tenei ka whakarite kia kaua rawa e hipa ake te whanui o te huānga e kiia ana na te papaa, te taitapa ranei.- Karekau he turanga
font-size
e kii ana i runga i te<html>
, engari16px
ka kiia (te taunoa te pūtirotiro).font-size: 1rem
ka whakamahia i runga i te<body>
mo te ngawari te whakautu momo-tauine ma nga patai pāpāho me te whakaute i nga manakohanga a nga kaiwhakamahi me te whakarite huarahi ngawari ake. Ka taea te whakakore i tenei taunoa pūtirotiro ma te whakarereke i te$font-size-root
taurangi.
- Karekau he turanga
- Ka
<body>
whakatakoto ano hoki i te aofont-family
,font-weight
,line-height
, mecolor
. Ka tuku iho tenei i muri mai e etahi huānga ahua hei aukati i nga momotuhi momotuhi. - Mo te haumaru,
<body>
kua whakahuahia tebackground-color
, te taunoa ki#fff
.
Tāpae momotuhi taketake
Ka whakamahi a Bootstrap i te "tapae momotuhi taketake" ranei "putanga momotuhi punaha" mo te whakaputa tuhinga tino pai ki nga taputapu katoa me te OS. Ko enei momotuhi punaha he mea hanga motuhake me nga whakaaro o enei ra, me te pai ake o te whakaatu i runga i nga mata, te tautoko momotuhi rereke, me etahi atu. Pānuihia atu mo nga momo momotuhi taketake i roto i tenei tuhinga mo te Moheni Smashing .
$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;
Kia mahara na te mea kei roto i te puranga momotuhi nga momotuhi emoji, he maha nga tohu tohu / dingbat unicode ka puta hei pikitia maha-tae. Ka rereke o ratou ahua, i runga i te ahua e whakamahia ana i roto i te momotuhi emoji taketake o te kaitirotiro/turanga, a ka kore ratou e pa ki etahi color
momo CSS.
Ka font-family
whakamahia tenei ki te <body>
ka tuku aunoa i te ao puta noa i te Bootstrap. Hei huri i te ao font-family
, whakahou $font-family-base
me te whakahiato ano i a Bootstrap.
Taurangi CSS
I a Bootstrap 5 e pakari haere tonu ana, ka nui ake nga momo ka hangaia me nga taurangi CSS hei huarahi ki te whakarato i nga whakaritenga-waahi ake me te kore e hiahia ki te whakahiato i nga wa katoa a Sass. Ko ta matou huarahi ko te tango i a maatau taurangi Sass puna me te huri ki nga taurangi CSS. I taua ara, ahakoa kaore koe e whakamahi i nga taurangi CSS, kei a koe tonu te mana katoa o Sass. Kei te ahu whakamua tonu tenei, ka roa te wa ki te whakatinana katoa.
Hei tauira, whakaarohia enei :root
taurangi CSS mo nga <body>
ahua noa:
@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};
I roto i te mahi, ka whakamahia aua taurangi ki Reboot penei:
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
}
Ma tenei ka taea e koe te whakarite i nga whakaritenga mo te waa-pono ahakoa e pai ana koe:
<body style="--bs-body-color: #333;">
<!-- ... -->
</body>
Nga upoko me nga rarangi
Ko nga huānga pane katoa—hei tauira, <h1>
—ka <p>
tautuhi ano kia margin-top
tangohia. Kua margin-bottom: .5rem
tapirihia nga upoko me nga kowae margin-bottom: 1rem
mo te waatea ngawari.
Upoko | Tauira |
---|---|
<h1></h1> |
h1. Upoko Bootstrap |
<h2></h2> |
h2. Upoko Bootstrap |
<h3></h3> |
h3. Upoko Bootstrap |
<h4></h4> |
h4. Upoko Bootstrap |
<h5></h5> |
h5. Upoko Bootstrap |
<h6></h6> |
h6. Upoko Bootstrap |
Nga rarangi
Ko nga rarangi katoa— <ul>
, <ol>
, me <dl>
— kua margin-top
tangohia me te margin-bottom: 1rem
. Ko nga rarangi kohanga kaore he margin-bottom
. Kua tautuhia ano e matou te padding-left
on <ul>
me <ol>
nga huānga.
- Ko nga rarangi katoa kua tangohia o ratou tawhē runga
- Na ka tau to ratou tawhē raro
- Ko nga rarangi kohanga kaore he tawhwh raro
- Ma tenei ka pai ake to ratou ahua
- Ina koa ka whaia e etahi atu rarangi rarangi
- Kua tautuhia ano te papa maui
- Anei he rarangi whakahau
- Me etahi rarangi rarangi
- He rite tonu te ahua o te katoa
- Ka rite ki te rarangi kore o mua
Mo te ahua ngawari ake, te naataki marama, me te mokowhiti pai ake, kua whakahouhia nga rarangi whakaahuatanga margin
s. <dd>
s tautuhi anō margin-left
ki 0
te tāpiri margin-bottom: .5rem
. <dt>
s kua maia .
- Nga rarangi whakaahuatanga
- Ko te rarangi whakaahuatanga he tino pai mo te tautuhi kupu.
- Wāhanga
- Whakamaramatanga mo te kupu.
- He whakamaramatanga tuarua mo te kupu ano.
- Ko tetahi atu kupu
- Whakamaramatanga mo tenei atu kupu.
Waehere raina
Takaia nga mahanga rarangi-roto o te waehere ki te <code>
. Me mawhiti mai i nga taiapa koki HTML.
<section>
me takai hei rarangi.
For example, <code><section></code> should be wrapped as inline.
Paraka waehere
Whakamahia <pre>
te s mo nga rarangi waehere maha. Ano ano, kia mawhiti mai i nga taiapa koki i roto i te waehere mo te whakaputa tika. Kua <pre>
tautuhia ano te huānga ki te tango i ona margin-top
me te whakamahi i rem
nga wae mo tana 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>
Taurangi
Mo te tohu taurangi whakamahia te <var>
tohu.
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
Whakauru kaiwhakamahi
Whakamahia te <kbd>
hei tohu i te whakaurunga ka whakauruhia ma te papapātuhi.
Hei whakatika i nga tautuhinga, pehia 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>
Putanga tauira
Mo te tohu tauira putanga mai i tetahi papatono whakamahia te <samp>
tohu.
<samp>This text is meant to be treated as sample output from a computer program.</samp>
Ripanga
He paku whakatikatika nga ripanga ki te ahua <caption>
s, tiango nga taitapa, me te whakarite kia rite text-align
puta noa. Ko nga huringa taapiri mo nga taitapa, papaa me etahi atu ka haere mai me te .table
akomanga .
Ripanga pane | Ripanga pane | Ripanga pane | Ripanga pane |
---|---|---|---|
Pūtau ripanga | Pūtau ripanga | Pūtau ripanga | Pūtau ripanga |
Pūtau ripanga | Pūtau ripanga | Pūtau ripanga | Pūtau ripanga |
Pūtau ripanga | Pūtau ripanga | Pūtau ripanga | Pūtau ripanga |
Puka
He maha nga momo huānga kua whakaarahia ano mo nga momo turanga ngawari ake. Anei etahi o nga huringa tino rongonui:
<fieldset>
s karekau he taitapa, he papa, he tawhē ranei kia ngawari te whakamahi hei takai mo nga whakaurunga takitahi, roopu roopu ranei.<legend>
s, pera i nga huinga mara, kua whakahouhia ano kia whakaatuhia hei momo upoko.<label>
s kua whakaritea kidisplay: inline-block
te tukumargin
ki te tono.<input>
Ko nga s,<select>
s,<textarea>
s, me<button>
nga s te nuinga o te korero e Normalize, engari ka tangohia ano e Reboot o raataumargin
me nga huingaline-height: inherit
, rawa.<textarea>
s kua whakarerekētia kia taea te huri poutū anake i te mea he maha nga wa "ka pakaru" te whakatakotoranga whaarangi whakapae.<button>
s me<input>
nga huānga paatene kei tecursor: pointer
wa:not(:disabled)
.
Ko enei huringa, me etahi atu, ka whakaatuhia i raro nei.
Te ra me te tautoko whakauru tae
Kia maumahara kaore i te tino tautokohia nga whakaurunga ra e nga kaitirotiro katoa, ara ko Safari.
Tohutohu i runga i nga paatene
Kei roto i te whakaara ano he whakapainga hei role="button"
huri i te pehu taunoa ki pointer
. Tāpirihia tēnei huanga ki ngā huānga hei tohu he pāhekoheko ngā huānga. Kare e tika ana tenei mahi mo <button>
nga huānga, ka riro i a raatau ake cursor
huringa.
<span role="button" tabindex="0">Non-button element button</span>
He momo huānga
Wāhitau
Ka <address>
whakahouhia te huānga ki te tautuhi i te taunoa o te pūtirotiro font-style
mai i italic
ki normal
. line-height
kua tuku iho ano inaianei, margin-bottom: 1rem
kua apititia atu. <address>
s mo te whakaatu korero whakapā mo te tipuna tata (he mahi katoa ranei). Tiakina te whakahōputu mā te whakamutu i ngā rārangi ki te <br>
.
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890 Ingoa Katoa
[email protected]
Poraka
Ko te taunoa margin
i runga i nga korero poraka ko 1em 40px
, no reira ka tautuhia e matou tera 0 0 1rem
mo tetahi mea e rite ana ki etahi atu huānga.
He korero rongonui, kei roto i te huānga blockquote.
He tangata rongonui i te Taitara Puna
Huānga rōraina
Ka <abbr>
whiwhi te huānga i te whakaahuatanga taketake kia kitea ai i waenga i nga kuputuhi whiti.
Whakarāpopototanga
Ko te taunoa cursor
i runga i te whakarāpopototanga ko te text
, no reira ka tautuhia e matou tera ki pointer
te whakaatu ka taea te taunekeneke te huānga ma te panui ki runga.
Ko etahi korero
Ētahi atu korero mo nga korero.
Ko etahi atu korero
Anei etahi atu korero mo nga korero.
HTML5 [hidden]
huanga
Ka taapirihia e HTML5 tetahi huanga o te ao hou kua whakaingoatia[hidden]
, kua whakaingoatia hei display: none
taunoa. Ma te tarewa i tetahi whakaaro mai i te PureCSS , ka whakapai ake i tenei taunoa ma te [hidden] { display: none !important; }
awhina i a ia kia kore display
e pokanoa.
<input type="text" hidden>
jQuery hotokoretanga
[hidden]
kaore i te hototahi ki nga jQuery $(...).hide()
me $(...).show()
nga tikanga. No reira, i tenei wa kaore matou e tino tautoko [hidden]
i etahi atu tikanga mo te whakahaere i nga display
huānga.
Ki te takahuri noa i te tirohanga o tetahi huānga, ko te tikanga display
kaore i whakarereketia ka taea tonu e te huānga te pa ki te rere o te tuhinga, whakamahia te .invisible
akomanga .