Sake yi
Sake yi, tarin takamaiman canje-canje na CSS a cikin fayil guda ɗaya, fara Bootstrap don samar da kyakkyawan tushe, daidaito da sauƙi don ginawa.
kusanci
Sake yi yana ginawa akan Normalize, yana samar da abubuwan HTML da yawa tare da ɗan salo na ra'ayi ta amfani da masu zaɓin kashi kawai. Ana yin ƙarin salo kawai tare da azuzuwan. Misali, muna sake yin wasu <table>
salo don tushe mafi sauƙi kuma daga baya samar da .table
, .table-bordered
, da ƙari.
Anan ga jagororinmu da dalilan zabar abin da za mu soke a Sake yi:
- Sabunta wasu tsoffin ƙima na burauza don amfani da
rem
s maimakonem
s don tazarar abubuwan da za'a iya daidaitawa. - Guji
margin-top
. Matsakaicin gefe na iya rugujewa, suna ba da sakamako mara tsammani. Mafi mahimmanci ko da yake, shugabanci guda ɗayamargin
shine samfurin tunani mafi sauƙi. - Don sauƙin sikeli a cikin girman na'urar, abubuwan toshe yakamata suyi amfani da
rem
s donmargin
s. - Ci gaba da bayyana
font
kaddarorin da ke da alaƙa da ƙayyadaddun bayanai, ta amfani dainherit
duk lokacin da zai yiwu.
CSS masu canji
An ƙara a cikin v5.1.1
Tare da v5.1.1, mun daidaita @import
s ɗin da ake buƙata a cikin duk buƙatun mu na CSS (ciki har da bootstrap.css
, bootstrap-reboot.css
, da kuma bootstrap-grid.css
haɗawa _root.scss
. Wannan yana ƙara :root
matakan CSS masu canji zuwa duk daure, ba tare da la'akari da yawancin su da aka yi amfani da su a cikin wannan dam ɗin ba. Daga ƙarshe Bootstrap 5 zai ci gaba da zuwa. duba ƙarin masu canjin CSS da aka ƙara akan lokaci.
Matsalolin shafi
An sabunta abubuwan <html>
da <body>
abubuwan don samar da ingantattun ɓangarorin shafi. Ƙari na musamman:
- An
box-sizing
saita shi a duk duniya akan kowane nau'i-ciki har*::before
da*::after
, zuwaborder-box
. Wannan yana tabbatar da cewa faɗin abubuwan da aka ayyana ba a taɓa wuce gona da iri ba saboda matsi ko iyaka.- Babu tushe
font-size
da aka ayyana akan<html>
, amma16px
ana ɗauka (tsohowar burauzar).font-size: 1rem
ana amfani da shi akan<body>
nau'in nau'in sikelin mai sauƙin amsa ta hanyar tambayoyin kafofin watsa labarai yayin da ake mutunta abubuwan da mai amfani da kuma tabbatar da hanyar da ta fi dacewa. Ana iya soke wannan tsohowar burauzar ta hanyar canza$font-size-root
canjin.
- Babu tushe
- Hakanan
<body>
yana saita duniyafont-family
,font-weight
,line-height
, dacolor
. Ana gadar wannan daga baya ta wasu sifofi don hana rashin daidaiton rubutu. - Don aminci,
<body>
yana da ayyanabackground-color
, rashin kuskure ga#fff
.
Tarin rubutu na asali
Bootstrap yana amfani da "tarin rubutu na asali" ko "tarin rubutun tsarin" don ingantaccen rubutu akan kowace na'ura da OS. An ƙirƙira waɗannan fonts ɗin tsarin musamman tare da na'urorin yau a hankali, tare da ingantacciyar ma'ana akan allo, tallafin rubutu mai canzawa, da ƙari. Kara karantawa game da tarin rubutu na asali a cikin wannan labarin Smashing Magazine .
$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;
Lura cewa saboda tarin rubutun ya ƙunshi haruffan emoji, yawancin alamomin gama gari/dinbat haruffa unicode za a sanya su azaman hotuna masu launi da yawa. color
Siffar su za ta bambanta, ya danganta da salon da aka yi amfani da su a cikin mashigin emoji na asali/dandali, kuma kowane salon CSS ba zai shafe su ba .
Ana font-family
amfani da wannan ga <body>
kuma gaji ta atomatik a duk duniya cikin Bootstrap. Don canza duniya font-family
, ɗaukaka $font-family-base
kuma sake haɗa Bootstrap.
CSS masu canji
Kamar yadda Bootstrap 5 ke ci gaba da girma, za a gina ƙarin salo tare da masu canji na CSS a matsayin hanyar samar da ƙarin keɓantawar lokaci ba tare da buƙatar sake tattara Sass koyaushe ba. Hanyarmu ita ce ɗaukar tushen mu masu canji na Sass kuma mu canza su zuwa masu canjin CSS. Ta wannan hanyar, ko da ba ku yi amfani da masu canji na CSS ba, har yanzu kuna da duk ƙarfin Sass. Wannan har yanzu yana kan ci gaba kuma zai ɗauki lokaci don aiwatarwa sosai.
Misali, la'akari da waɗannan :root
masu canjin CSS don salo na gama -gari <body>
:
@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};
A aikace, ana amfani da waɗannan masu canji a cikin Sake yi kamar haka:
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
}
Wanda ke ba ku damar yin gyare-gyare na ainihin lokaci duk yadda kuke so:
<body style="--bs-body-color: #333;">
<!-- ... -->
</body>
Kanun labarai da sakin layi
Duk abubuwan kan gaba-misali, <h1>
-kuma <p>
an sake saita su don margin-top
cire su. An ƙara kanun labarai margin-bottom: .5rem
da sakin layi margin-bottom: 1rem
don sauƙin tazara.
Jagora | Misali |
---|---|
<h1></h1> |
h1. Bootstrap jagora |
<h2></h2> |
h2. Bootstrap jagora |
<h3></h3> |
h3. Bootstrap jagora |
<h4></h4> |
h4. Bootstrap jagora |
<h5></h5> |
h5. Bootstrap jagora |
<h6></h6> |
h6. Bootstrap jagora |
Lissafi
Duk lissafin- <ul>
, <ol>
, da <dl>
- an margin-top
cire su da kuma margin-bottom: 1rem
. Lissafin da aka kafa ba su da margin-bottom
. Mun kuma sake saita kunnawa padding-left
da <ul>
abubuwa <ol>
.
- Duk lissafin an cire babban gefen su
- Kuma tazarar gindinsu ta daidaita
- Lissafin da aka kafa ba su da gefen ƙasa
- Ta wannan hanyar suna da kamannin kamanni
- Musamman idan ƙarin abubuwan lissafin ke biye da su
- Hakanan an sake saita kullin hagu
- Ga jerin oda
- Tare da ƴan abubuwan jeri
- Yana da kamanni gaba ɗaya
- Kamar jerin abubuwan da ba a ba da oda ba a baya
Don mafi sauƙin salo, bayyanannen matsayi, da mafi kyawun tazara, lissafin bayanin sun sabunta margin
s. <dd>
sake saitin margin-left
zuwa 0
kuma ƙara margin-bottom: .5rem
. <dt>
s suna da ƙarfi .
- Jerin bayanin
- Jerin bayanin ya dace don ma'anar kalmomi.
- Lokaci
- Ma'anar kalmar.
- Ma'anar na biyu don wannan kalma.
- Wani lokaci
- Ma'anar wannan wani lokaci.
Lambar layi
Kunna snippets na layi tare da <code>
. Tabbatar ku guje wa maƙallan kusurwar HTML.
<section>
ya kamata a nannade shi azaman layi.
For example, <code><section></code> should be wrapped as inline.
Tubalan lamba
Yi amfani <pre>
da s don layukan lamba da yawa. Har yanzu, tabbatar da kubuta daga kowane kusurwar kusurwa a cikin lambar don yin daidai. An <pre>
sake saita kashi don cire shi margin-top
da amfani rem
da raka'a don sa 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>
Masu canji
Don nuna masu canji yi amfani da <var>
alamar.
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
Shigar da mai amfani
Yi amfani da <kbd>
alamar shigarwar da aka saba shigar da ita ta madannai.
Don shirya saituna, danna 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>
Samfurin fitarwa
Don nuna samfurin samfurin daga shirin yi amfani da <samp>
alamar.
<samp>This text is meant to be treated as sample output from a computer program.</samp>
Tables
Tables an ɗan daidaita su zuwa salon <caption>
s, iyakokin rugujewa, da tabbatar da daidaito text-align
a ko'ina. Ƙarin canje-canje don iyakoki, padding, da ƙari sun zo tare da .table
ajin .
Taken tebur | Taken tebur | Taken tebur | Taken tebur |
---|---|---|---|
Tantanin halitta | Tantanin halitta | Tantanin halitta | Tantanin halitta |
Tantanin halitta | Tantanin halitta | Tantanin halitta | Tantanin halitta |
Tantanin halitta | Tantanin halitta | Tantanin halitta | Tantanin halitta |
Siffofin
An sake kunna abubuwa daban-daban don tsarin tushe mafi sauƙi. Ga wasu fitattun sauye-sauye:
<fieldset>
s ba su da iyakoki, padding, ko gefe don haka za a iya amfani da su cikin sauƙi azaman naɗa don abubuwan shigar mutum ɗaya ko ƙungiyoyin bayanai.<legend>
s, kamar fage-fage, an kuma sake tsara su don nunawa azaman jigo na iri.<label>
s an saita dondisplay: inline-block
ba da izininmargin
amfani.<input>
s,<select>
s,<textarea>
s, da<button>
s yawanci ana magance su ta Normalize, amma Sake yi yana cire sumargin
da saitiline-height: inherit
, kuma.<textarea>
s ana canza su ne kawai don a iya sake girman su a tsaye kamar yadda a kwance a kwance sau da yawa ke “karye” shimfidar shafi.<button>
s da<input>
abubuwan maɓalli suna dacursor: pointer
lokacin:not(:disabled)
.
Waɗannan canje-canje, da ƙari, an nuna su a ƙasa.
Goyan bayan shigar kwanan wata & launi
Yi la'akari da bayanan kwanan wata ba su da cikakken goyon bayan duk masu bincike, wato Safari.
Maɓalli a kan maɓalli
Sake yi ya haɗa da haɓakawa don role="button"
canza siginar tsoho zuwa pointer
. Ƙara wannan sifa ga abubuwa don taimakawa nuna abubuwa suna hulɗa. Wannan rawar ba dole ba ne ga abubuwa, waɗanda ke samun canjin <button>
nasu .cursor
<span role="button" tabindex="0">Non-button element button</span>
Daban-daban abubuwa
Adireshi
An <address>
sabunta kashi don sake saita tsohowar burauzar font-style
daga italic
zuwa normal
. line-height
shi ma yanzu an gaji, kuma margin-bottom: 1rem
an kara. <address>
s ne don gabatar da bayanin tuntuɓar kakanni mafi kusa (ko gaba ɗaya na aiki). Ajiye tsarawa ta hanyar ƙare layi da <br>
.
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890 Cikakken Suna
[email protected]
Blockquote
Tsohuwar kan blockquotes margin
shine 1em 40px
, don haka muna sake saita hakan zuwa 0 0 1rem
wani abu mafi dacewa da sauran abubuwan.
Sanannen zance, wanda ke ƙunshe a cikin ɓangaren blockquote.
Wani sananne a Tushen Tushen
Abubuwan cikin layi
Abun <abbr>
yana karɓar salo na asali don sanya shi fice tsakanin rubutun sakin layi.
Takaitawa
Tsohuwar cursor
taƙaice ita ce text
, don haka muna sake saita hakan pointer
don isar da cewa ana iya mu'amala da sinadarin ta danna shi.
Wasu bayanai
Ƙarin bayani game da cikakkun bayanai.
Ko da ƙarin cikakkun bayanai
Anan akwai ƙarin cikakkun bayanai game da cikakkun bayanai.
HTML5 [hidden]
sifa
HTML5 yana ƙara sabon sifa na duniya mai suna[hidden]
, wanda aka tsara shi azaman display: none
ta tsohuwa. Aron ra'ayi daga PureCSS , mun inganta kan wannan tsoho ta hanyar yin [hidden] { display: none !important; }
don taimakawa hana ta display
yin kuskure da gangan.
<input type="text" hidden>
rashin jituwa jQuery
[hidden]
bai dace da jQuery's $(...).hide()
da $(...).show()
hanyoyin ba. Don haka, a halin yanzu ba mu yarda [hidden]
da wasu dabaru na sarrafa display
abubuwan abubuwa ba.
Don kawai kunna ganuwa na wani abu, ma'ana display
ba a gyaggyara sa ba kuma har ila yau kashi na iya yin tasiri ga tafiyar daftarin aiki, yi amfani da .invisible
ajin maimakon.