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.
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 "tsarin tsarin rubutu" 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.
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 gida ba su da tazarar ƙ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.