Ongera usubiremo
Reboot, icyegeranyo cyibintu byihariye CSS ihinduka muri dosiye imwe, kickstart Bootstrap kugirango itange ibintu byiza, bihamye, kandi byoroshye gushingiraho.
Inzira
Reboot yubaka kuri Normalize, itanga ibintu byinshi bya HTML hamwe nuburyo bumwe bwatekerejweho ukoresheje ibintu byatoranijwe gusa. Inyandiko yinyongera ikorwa gusa namasomo. Kurugero, dusubiramo rezo zimwe <table>
muburyo bworoshye bwibanze hanyuma nyuma dutange .table
, .table-bordered
nibindi byinshi.
Dore umurongo ngenderwaho nimpamvu zo guhitamo icyo kurenga muri Reboot:
- Kuvugurura amashakiro amwe asanzwe kugirango akoreshe
rem
s aho kubaem
s umwanya munini wibice. - Irinde
margin-top
. Impera ihanamye irashobora gusenyuka, itanga ibisubizo bitunguranye. Icyingenzi cyane nubwo, icyerekezo kimwemargin
cyicyitegererezo cyoroshye cyo mumutwe. - Kugirango byoroshye gupima ubunini bwibikoresho, ibice byo guhagarika bigomba gukoresha
rem
s kurimargin
s. - Komeza imenyekanisha
font
ryimitungo ifitanye isano byibuze, ukoreshejeinherit
igihe cyose bishoboka.
Ipaji isanzwe
Ibintu <html>
nibintu <body>
byavuguruwe kugirango bitange page-nziza isanzwe. By'umwihariko:
- Uwiteka
box-sizing
yashyizwe ku isi yose kuri buri kintu-harimo*::before
na*::after
, kuriborder-box
. Ibi byemeza ko ubugari bwatangajwe bwibintu butigera burenga kubera padi cyangwa imipaka. - Nta shingiro
font-size
ryatangajwe kuri<html>
, ariko16px
rifatwa (Mucukumbuzi isanzwe).font-size: 1rem
ni Byakoreshejwe Kuri<body>
Byoroshye Kwishura Ubwoko-Kugereranya Binyuze mu Itangazamakuru mu gihe wubaha ibyo ukoresha kandi byemeza uburyo bworoshye. - Uwiteka
<body>
kandi ashyiraho isi yosefont-family
,line-height
natext-align
. Ibi bizungurwa nyuma nibintu bimwe na bimwe bigize imiterere kugirango birinde imyandikire idahuye. - Kubwumutekano , Uwiteka
<body>
afitebackground-color
ibyatangajwe, asanzwe kuri#fff
.
Imyandikire kavukire
Imyandikire isanzwe y'urubuga (Helvetica Neue, Helvetica, na Arial) yamanuwe muri Bootstrap 4 hanyuma isimburwa na "kavukire y'imyandikire kavukire" kugirango inyandiko nziza itangwe kuri buri gikoresho na OS. Soma byinshi kubyerekeye imyandikire kavukire muriyi ngingo ya Smashing Magazine .
$font-family-sans-serif:
// Safari for macOS and iOS (San Francisco)
-apple-system,
// Chrome < 56 for macOS (San Francisco)
BlinkMacSystemFont,
// 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;
Menya ko kuberako imyandikire yimyandikire ikubiyemo imyandikire ya emoji, ibimenyetso byinshi bisanzwe / dingbat Unicode inyuguti zizatangwa nkibishusho byamabara menshi. Imigaragarire yabo iratandukanye, bitewe nuburyo bukoreshwa mumyandikire ya emoji ya mushakisha / urubuga, kandi ntabwo bizaterwa color
nuburyo bwa CSS.
Ibi font-family
birakoreshwa kuri <body>
kandi bigahita bizungura isi yose muri Bootstrap. Guhindura isi yose font-family
, kuvugurura $font-family-base
no gusubiramo Bootstrap.
Imitwe n'ingingo
Ibintu byose byimitwe - urugero, <h1>
-kandi <p>
bigasubirwamo kugirango margin-top
bikurweho. Imitwe margin-bottom: .5rem
yongeyeho n'ingingo margin-bottom: 1rem
zo gutandukanya byoroshye.
Umutwe | Urugero |
---|---|
<h1></h1> |
h1. Umutwe wa Bootstrap |
<h2></h2> |
h2. Umutwe wa Bootstrap |
<h3></h3> |
h3. Umutwe wa Bootstrap |
<h4></h4> |
h4. Umutwe wa Bootstrap |
<h5></h5> |
h5. Umutwe wa Bootstrap |
<h6></h6> |
h6. Umutwe wa Bootstrap |
Urutonde
Urutonde rwose - <ul>
,, <ol>
na <dl>
- kugira ibyo margin-top
bakuyemo na a margin-bottom: 1rem
. Urutonde rwatoranijwe ntirufite margin-bottom
.
- Urutonde rwose rwakuweho hejuru
- Kandi impande zabo zo hasi zari zisanzwe
- Urutonde rwatoranijwe ntirujya hasi
- Ubu buryo bafite byinshi birenze
- Cyane cyane iyo ikurikiwe nibindi bintu byurutonde
- Ibipapuro byibumoso nabyo byasubiwemo
- Dore urutonde rwateganijwe
- Hamwe nurutonde ruto
- Ifite isura imwe
- Nkurutonde rwabanjirije urutonde
Kuburyo bworoshye, busobanutse neza, hamwe nintera nziza, urutonde rwibisobanuro rwavuguruwe margin
s. <dd>
s gusubiramo margin-left
no 0
kongeramo margin-bottom: .5rem
. <dt>
s . _
- Urutonde rwibisobanuro
- Urutonde rwibisobanuro rwiza rwo gusobanura amagambo.
- Igihe
- Ibisobanuro kuri iryo jambo.
- Igisobanuro cya kabiri kuri manda imwe.
- Irindi jambo
- Ibisobanuro kuri iri jambo rindi.
Inyandiko yateguwe
Ikintu <pre>
gisubirwamo kugirango gikureho margin-top
kandi ukoreshe rem
ibice byacyo margin-bottom
.
.urugero-element { margin-hepfo: 1rem; }
Imbonerahamwe
Imbonerahamwe zahinduwe gato kuburyo bwa <caption>
s, gusenyuka imipaka, kandi byemeza ko bihoraho text-align
muri rusange. Impinduka zinyongera kumipaka, padi, nibindi biza hamwe nishuri.table
.
Umutwe | Umutwe | Umutwe | Umutwe |
---|---|---|---|
Akazu kameza | Akazu kameza | Akazu kameza | Akazu kameza |
Akazu kameza | Akazu kameza | Akazu kameza | Akazu kameza |
Akazu kameza | Akazu kameza | Akazu kameza | Akazu kameza |
Ifishi
Ibintu bitandukanye byasubiwemo kuburyo bworoshye bwibanze. Dore zimwe mu mpinduka zigaragara:
<fieldset>
s nta mipaka, padi, cyangwa margin kuburyo bishobora gukoreshwa byoroshye nkibipfunyika kumuntu winjiza cyangwa amatsinda yinyongera.<legend>
s, nkibibanza, nabyo byasubiwemo kugirango byerekanwe nkumutwe wubwoko.<label>
s byashyizwehodisplay: inline-block
kugirango yemererwemargin
gukoreshwa.<input>
s,<select>
s,<textarea>
s, na<button>
s bikunze kuvugwa na Normalize, ariko Reboot ikuraho ibyabomargin
hamwe na setiline-height: inherit
.<textarea>
s yahinduwe kugirango ihindurwe gusa ihagaritse nkuko itambitse itambitse akenshi “imena” imiterere y'urupapuro.<button>
s na<input>
buto ibintu bifitecursor: pointer
igihe:not(:disabled)
.
Izi mpinduka, nibindi byinshi, byerekanwe hepfo.
Ibisobanuro kuri buto
Reboot ikubiyemo ibyongeweho role="button"
kugirango uhindure indanga isanzwe pointer
. Ongeraho iyi Ikiranga kubintu kugirango bifashe kwerekana ibintu bikorana. Uru ruhare ntirukenewe kubintu <button>
, bibona cursor
impinduka zabo.
<span role="button" tabindex="0">Non-button element button</span>
Ibintu bitandukanye
Aderesi
Ikintu <address>
kiravugururwa kugirango usubize mushakisha isanzwe font-style
kuva italic
kuri normal
. line-height
na none ubu twarazwe, kandi margin-bottom: 1rem
twongeyeho. <address>
s ni ukugaragaza amakuru yamakuru kuri ba sogokuruza hafi (cyangwa umubiri wose wakazi). Zigama imiterere kurangiza imirongo hamwe <br>
.
1355 Isoko St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890 Izina ryuzuye
[email protected]
Guhagarika
Mburabuzi margin
kuri blokquote ni 1em 40px
, nuko dusubiramo ibyo 0 0 1rem
kubintu bihuye nibindi bintu.
Amagambo azwi cyane, akubiye mubintu byahagaritswe.
Shyira ibice
Ikintu <abbr>
cyakira stiling yibanze kugirango kigaragare hagati yinyandiko.
Incamake
Mburabuzi cursor
ku ncamake ni text
, nuko dusubiramo ibyo pointer
kugirango twerekane ko ikintu gishobora gukorana mugukanda kuriyo.
Ibisobanuro bimwe
Andi makuru yerekeye amakuru arambuye.
Ndetse birambuye
Hano haribindi bisobanuro birambuye kubyerekeye amakuru arambuye.
[hidden]
Ikiranga HTML5
HTML5 yongeyeho ikiranga gishya ku isi cyiswe[hidden]
, cyanditswe nkuko bisanzwe display: none
. Gutira igitekerezo muri PureCSS , tunonosora kuri iyi default dukora [hidden] { display: none !important; }
kugirango dufashe gukumira ko display
bitarenze impanuka. Mugihe [hidden]
bidashyigikiwe na IE10, imenyekanisha ryeruye muri CSS yacu rikemura icyo kibazo.
<input type="text" hidden>
JQuery idahuye
[hidden]
ntabwo bihuye $(...).hide()
nuburyo bwa jQuery $(...).show()
. Kubwibyo, ntabwo ubu dushyigikiye cyane [hidden]
ubundi buhanga bwo gucunga display
ibintu.
Kugirango uhindure gusa kugaragara kwikintu, bivuze ko display
kidahinduwe kandi ikintu kirashobora kugira ingaruka kumyandikire yinyandiko, koresha urwego aho.invisible
.