Ath-thòisich
Reboot, cruinneachadh de dh’ atharrachaidhean CSS a tha sònraichte do eileamaid ann an aon fhaidhle, kickstart Bootstrap gus bun-loidhne eireachdail, cunbhalach agus sìmplidh a thoirt seachad airson togail air.
Dòigh-obrach
Bidh Reboot a’ togail air Normalize, a’ toirt seachad mòran eileamaidean HTML le stoidhlichean beagan beachdail a’ cleachdadh dìreach taghadairean eileamaid. Chan eil stoidhle a bharrachd air a dhèanamh ach le clasaichean. Mar eisimpleir, bidh sinn ag ath-thòiseachadh cuid de <table>
stoidhlichean airson bun-loidhne nas sìmplidh agus nas fhaide air adhart bheir sinn seachad .table
, .table-bordered
, agus barrachd.
Seo an stiùireadh agus na h-adhbharan againn airson taghadh dè a bu chòir a dhol thairis air ann an Reboot:
- Ùraich cuid de luachan bunaiteach brabhsair gus s a chleachdadh
rem
an àiteem
s airson farsaingeachd phàirtean so-ruigsinneach. - Seachain
margin-top
. Faodaidh oirean dìreach tuiteam, a 'toirt seachad toraidhean ris nach robh dùil. Nas cudromaiche ge-tà, tha aon stiùireadhmargin
na mhodail inntinn nas sìmplidh. - Airson sgèileadh nas fhasa thar meudan innealan, bu chòir eileamaidean bloca s a chleachdadh
rem
airsonmargin
s. - Cùm dearbhaidhean mu
font
thogalaichean co-cheangailte ris a’ char as lugha, a’ cleachdadhinherit
far a bheil sin comasach.
CSS caochladairean
Air a chur ris ann an v5.1.1
Le v5.1.1, rinn sinn riaghailteachadh air na bha a dhìth oirnn @import
thairis air na pasganan CSS againn gu lèir (a’ gabhail a -steach bootstrap.css
, bootstrap-reboot.css
, agus bootstrap-grid.css
a’ toirt a-steach _root.scss
. Cuiridh seo :root
caochladairean ìre CSS ris a h-uile pasgan, ge bith cia mheud dhiubh a thathas a’ cleachdadh sa phasgan sin. faic barrachd chaochladairean CSS air an cur ris thar ùine.
Ro-shealladh duilleag
Tha na h-eileamaidean <html>
agus <body>
na h-eileamaidean air an ùrachadh gus bunaitean nas fheàrr a thoirt seachad air feadh na duilleige. Nas mionaidiche:
- Tha
box-sizing
an suidheachadh air feadh na cruinne air gach eileamaid - a’ toirt a-steach*::before
agus*::after
, guborder-box
. Bidh seo a’ dèanamh cinnteach nach tèid an leud ainmichte de eileamaid a-riamh thairis air mar thoradh air pleadhag no crìoch.- Chan eil bunait sam bith
font-size
air ainmeachadh air an<html>
, ach16px
thathar a 'gabhail ris (bunaiteach a' bhrabhsair).font-size: 1rem
air a chuir an sàs<body>
airson sgèileadh seòrsa freagairteach furasta tro cheistean meadhanan fhad ‘s a tha e a’ toirt urram do roghainnean luchd-cleachdaidh agus a ’dèanamh cinnteach à dòigh-obrach nas ruigsinneach. Gabhaidh am brobhsair bunaiteach seo a dhol seachad le bhith ag atharrachadh a'$font-size-root
chaochlaidich.
- Chan eil bunait sam bith
- Tha
<body>
seo cuideachd a’ suidheachadh cruinnefont-family
,font-weight
,line-height
, aguscolor
. Tha seo air a shealbhachadh nas fhaide air adhart le cuid de dh’ eileamaidean cruth gus casg a chuir air neo-chunbhalachd cruth-clò. - Airson sàbhailteachd,
<body>
tha suaicheantas dearbhte aig an neach-cleachdaidhbackground-color
, a’ dol gu#fff
.
Stack font dùthchasach
Bidh Bootstrap a’ cleachdadh “stack cruth-clò dùthchasach” no “stack font system” airson an teacsa as fheàrr a thoirt seachad air gach inneal agus OS. Chaidh na clòidean siostam seo a dhealbhadh gu sònraichte le innealan an latha an-diugh san amharc, le tairgse nas fheàrr air scrionaichean, taic cruth-clò caochlaideach, agus barrachd. Leugh tuilleadh mu chruachan cruth-clò dùthchasach san artaigil Smashing Magazine seo .
$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;
Thoir an aire, leis gu bheil an stac cruth-clò a’ toirt a-steach clòidean emoji, gun tèid mòran de charactaran cumanta samhla / dingbat unicode a thoirt seachad mar dhealbhan ioma-dathte. Bidh an coltas eadar-dhealaichte, a rèir an stoidhle a chleachdar ann an cruth-clò emoji dùthchasach a’ bhrobhsair/àrd-ùrlar, agus cha toir color
stoidhlichean CSS sam bith buaidh orra.
Tha seo font-family
air a chuir an sàs <body>
agus air a shealbhachadh gu fèin-ghluasadach air feadh na cruinne air feadh Bootstrap. Gus an cruinne atharrachadh font-family
, ùrachadh $font-family-base
agus ath-chruinneachadh Bootstrap.
CSS caochladairean
Mar a bhios Bootstrap 5 a ’leantainn air adhart a’ fàs aibidh, thèid barrachd is barrachd stoidhlichean a thogail le caochladairean CSS mar dhòigh air barrachd gnàthachadh fìor-ùine a thoirt seachad gun fheum air Sass ath-chruinneachadh an-còmhnaidh. Is e an dòigh-obrach againn na caochladairean stòr Sass againn a ghabhail agus an cruth-atharrachadh gu caochladairean CSS. San dòigh sin, eadhon ged nach cleachd thu caochladairean CSS, tha cumhachd Sass agad fhathast. Tha seo fhathast a’ dol air adhart agus bheir e ùine airson a làn bhuileachadh.
Mar eisimpleir, smaoinich air na :root
caochladairean CSS seo airson <body>
stoidhlichean cumanta:
@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};
Ann an cleachdadh, tha na caochladairean sin an uairsin air an cur an sàs ann an Reboot mar seo:
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
}
A leigeas leat gnàthachadh fìor-ùine a dhèanamh ge bith dè as toil leat:
<body style="--bs-body-color: #333;">
<!-- ... -->
</body>
Cinn agus paragrafan
Tha na h-eileamaidean cinn uile - me, <h1>
-agus <p>
gan ath-shuidheachadh gus an toirt air margin-top
falbh. Tha cinn air margin-bottom: .5rem
cur ris agus paragrafan margin-bottom: 1rem
airson farsaingeachd furasta.
Ceann-cinnidh | eisimpleir |
---|---|
<h1></h1> |
h1. Ceann-uidhe Bootstrap |
<h2></h2> |
h2. Ceann-uidhe Bootstrap |
<h3></h3> |
h3. Ceann-uidhe Bootstrap |
<h4></h4> |
h4. Ceann-uidhe Bootstrap |
<h5></h5> |
h5. Ceann-uidhe Bootstrap |
<h6></h6> |
h6. Ceann-uidhe Bootstrap |
Liostaichean
Tha na liostaichean uile - <ul>
, <ol>
, agus <dl>
- air an margin-top
toirt air falbh agus margin-bottom: 1rem
. Chan eil liostaichean neadachaidh margin-bottom
. Tha sinn cuideachd air an inneal padding-left
agus <ul>
na h- <ol>
eileamaidean ath-shuidheachadh.
- Tha an iomall àrd aca uile air a thoirt air falbh
- Agus bha an iomall ìosal aca àbhaisteach
- Chan eil iomall bun aig liostaichean neadachaidh
- San dòigh seo tha coltas nas cothromaiche orra
- Gu sònraichte nuair a bhios barrachd nithean liosta air a leantainn
- Chaidh am pleadhag chlì ath-shuidheachadh cuideachd
- Seo liosta òrdaichte
- Le beagan rudan liosta
- Tha an aon shealladh iomlan aige
- Mar an liosta roimhe gun òrdugh
Airson stoidhle nas sìmplidhe, rangachd shoilleir, agus farsaingeachd nas fheàrr, tha liostaichean tuairisgeul air margin
s. <dd>
s ath-shuidheachadh margin-left
gu 0
agus cuir ris margin-bottom: .5rem
. <dt>
s dàna .
- Liostaichean tuairisgeul
- Tha liosta tuairisgeul foirfe airson teirmean a mhìneachadh.
- Teirm
- Mìneachadh airson an teirm.
- An dàrna mìneachadh airson an aon teirm.
- Teirm eile
- Mìneachadh airson an teirm eile seo.
Còd a-staigh
Paisg criomagan còd in-loidhne le <code>
. Dèan cinnteach gun teich thu bho camagan ceàrn HTML.
<section>
bu chòir a bhith air a phasgadh mar inline.
For example, <code><section></code> should be wrapped as inline.
Blocaichean còd
Cleachd <pre>
s airson iomadh loidhne de chòd. A-rithist, dèan cinnteach gun teich thu bho camagan ceàrn sam bith sa chòd airson a bhith a’ toirt seachad ceart. Tha an <pre>
eileamaid air ath-shuidheachadh gus na h-aonadan aige a thoirt air falbh margin-top
agus rem
aonadan a chleachdadh airson a faidhle 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>
Caochlaidhean
Airson caochladairean a chomharrachadh cleachd an <var>
taga.
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
Teachd-a-steach cleachdaiche
Cleachd an <kbd>
gus cuir a-steach a tha mar as trice air a chuir a-steach tro mheur-chlàr a chomharrachadh.
Gus roghainnean a dheasachadh, brùth 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>
Toradh sampall
Airson sampall toradh bho phrògram a chomharrachadh cleachd an <samp>
taga.
<samp>This text is meant to be treated as sample output from a computer program.</samp>
Clàir
Tha bùird air an atharrachadh beagan a rèir stoidhle <caption>
s, tuiteam crìochan, agus dèanamh cinnteach gu bheil iad cunbhalach text-align
air feadh. Bidh atharrachaidhean a bharrachd airson crìochan, pleadhag, agus barrachd a’ tighinn leis a’ .table
chlas .
Ceann clàr | Ceann clàr | Ceann clàr | Ceann clàr |
---|---|---|---|
Clàr cealla | Clàr cealla | Clàr cealla | Clàr cealla |
Clàr cealla | Clàr cealla | Clàr cealla | Clàr cealla |
Clàr cealla | Clàr cealla | Clàr cealla | Clàr cealla |
Foirmean
Chaidh diofar eileamaidean cruth ath-thòiseachadh airson stoidhlichean bunaiteach nas sìmplidh. Seo cuid de na h-atharrachaidhean as ainmeil:
<fieldset>
s chan eil crìochan, pleadhag no iomall aca gus am bi iad furasta an cleachdadh mar phasganan airson cuir a-steach fa leth no buidhnean de chuir a-steach.<legend>
s, mar raointean-raoin, cuideachd air an ath-sgrìobhadh gus a bhith air an taisbeanadh mar cheann de sheòrsa.<label>
s air an suidheachadh gusdisplay: inline-block
an tèidmargin
an cur an sàs.<input>
Bidh Normalize sa mhòr-chuid a’ dèiligeadh ri s,<select>
s,<textarea>
s, agus<button>
s, ach bidh Reboot a’ toirt air falbh an cuidmargin
agus na seataicheanline-height: inherit
, cuideachd.<textarea>
s air an atharrachadh gus nach gabh ath-mheudachadh ach gu dìreach leis gu bheil ath-mheudachadh còmhnard gu tric a’ “briseadh” cruth na duilleige.<button>
s agus<input>
eileamaidean putancursor: pointer
nuair a bhios:not(:disabled)
.
Tha na h-atharrachaidhean sin, agus barrachd, air an taisbeanadh gu h-ìosal.
Taic cuir a-steach ceann-latha & dath
Cumaibh cuimhne nach eil cuir a-steach ceann-latha a ’ faighinn làn thaic leis a h-uile brobhsair, is e sin Safari.
Comharran air na putanan
Tha ath-thòiseachadh a’ toirt a-steach àrdachadh airson role="button"
an cursair bunaiteach atharrachadh gu pointer
. Cuir am feart seo ri eileamaidean gus sealltainn gu bheil eileamaidean eadar-ghnìomhach. Chan eil an dreuchd seo riatanach airson <button>
eileamaidean, a gheibh an cursor
atharrachadh fhèin.
<span role="button" tabindex="0">Non-button element button</span>
Eileamaidean measgaichte
Seòladh
Tha an <address>
eileamaid air ùrachadh gus am brabhsair bunaiteach ath-shuidheachadh font-style
bho italic
gu normal
. line-height
tha e nis mar an ceudna air a sealbhachadh, agus margin-bottom: 1rem
air a chur ris. <address>
s airson fiosrachadh conaltraidh a thaisbeanadh don sinnsear as fhaisge (no buidheann obrach gu lèir). Glèidh cruth le bhith a’ crìochnachadh loidhnichean le <br>
.
1355 Sràid a' Mhargaidh, Suite 900
San Francisco, CA 94103
P: (123) 456-7890 Ainm slàn
[email protected]
Blockquote
Is e an rud bunaiteach margin
air blockquotes 1em 40px
, agus mar sin bidh sinn ag ath-shuidheachadh sin 0 0 1rem
airson rudeigin nas cunbhalaiche ri eileamaidean eile.
Aithris ainmeil, ann an eileamaid blockquote.
Cuideigin ainmeil ann an Source Title
Feartan in-loidhne
Bidh an <abbr>
eileamaid a’ faighinn stoidhle bunaiteach gus toirt air seasamh a-mach am measg teacsa paragraf.
Geàrr-chunntas
cursor
Is e an geàrr-chunntas bunaiteach text
, agus mar sin bidh sinn ag ath-shuidheachadh sin pointer
gus innse gum faodar eadar-obrachadh leis an eileamaid le bhith a’ cliogadh air.
Beagan mion-fhiosrachaidh
Tuilleadh fiosrachaidh mun fhiosrachadh.
Fiù 's barrachd mion-fhiosrachaidh
Seo eadhon barrachd fiosrachaidh mun fhiosrachadh.
[hidden]
Feartan HTML5
Tha HTML5 a’ cur feart cruinne ùr ris an canar[hidden]
, a tha air a chomharrachadh mar display: none
gu bunaiteach. Le bhith a’ faighinn beachd air iasad bho PureCSS , leasaichidh sinn air a’ bhunait seo le bhith a’ dèanamh [hidden] { display: none !important; }
gus cuideachadh le casg a display
chuir air gun fhiosta fhaighinn.
<input type="text" hidden>
jQuery neo-fhreagarrachd
[hidden]
$(...).hide()
chan eil e co-chòrdail ri modhan agus modhan jQuery $(...).show()
. Mar sin, chan eil sinn gu sònraichte a’ toirt taic [hidden]
do dhòighean eile airson riaghladh display
nan eileamaidean.
Gus dìreach faicsinneachd eileamaid a thogail, a’ ciallachadh display
nach eil e air atharrachadh agus gum faod an eileamaid fhathast buaidh a thoirt air sruthadh na sgrìobhainn, cleachd an .invisible
clas na àite.