Rdemare
Rdemare, yon koleksyon chanjman CSS espesifik nan yon sèl dosye, kickstart Bootstrap pou bay yon debaz elegant, konsistan ak senp pou konstwi.
Apwòch
Rdemare baze sou Nòmalize, bay anpil eleman HTML ak estil yon ti jan opinyon lè l sèvi avèk seleksyon eleman sèlman. Se manier adisyonèl fè sèlman ak klas yo. Pou egzanp, nou rdemare kèk <table>
estil pou yon debaz ki pi senp epi pita bay .table
, .table-bordered
, ak plis ankò.
Men direktiv nou yo ak rezon ki fè nou chwazi kisa pou chanje nan rdemare:
- Mete ajou kèk valè default navigatè yo pou itilize
rem
s olye deem
s pou espas eleman ki kapab chanje. - Evite
margin-top
. Marge vètikal yo ka tonbe, bay rezilta inatandi. Pi enpòtan menm si, yon direksyon sèl nanmargin
se yon modèl mantal ki pi senp. - Pou pi fasil dekale atravè gwosè aparèy, eleman blòk yo ta dwe itilize
rem
s poumargin
s. - Kenbe deklarasyon ki
font
gen rapò ak pwopriyete yo nan yon minimòm, lè l sèvi avèkinherit
chak fwa sa posib.
Paj par défaut
Eleman yo <html>
ak <body>
yo mete ajou pou bay pi bon default nan tout paj la. Plis espesyalman:
- A
box-sizing
se globalman mete sou chak eleman-ki gen ladan*::before
ak*::after
, aborder-box
. Sa a asire ke lajè a deklare nan eleman pa janm depase akòz padding oswa fwontyè.- Pa gen okenn baz
font-size
deklare sou<html>
, men16px
yo sipoze (defo navigatè a).font-size: 1rem
se aplike sou la<body>
pou fasil reponn tip-echèl atravè demann medya pandan y ap respekte preferans itilizatè yo ak asire yon apwòch ki pi aksesib. Defo navigatè sa a ka chanje lè w modifye$font-size-root
varyab la.
- Pa gen okenn baz
- La
<body>
tou etabli yon mondyalfont-family
,font-weight
,line-height
, akcolor
. Sa a se eritye pita pa kèk eleman fòm yo anpeche enkonsistans font. - Pou sekirite,
<body>
gen yon te deklarebackground-color
, par#fff
.
Pile font natif natal
Bootstrap itilize yon "pile font natif natal" oswa "pile font sistèm" pou rann tèks pi bon sou chak aparèy ak OS. Polis sistèm sa yo te fèt espesyalman ak aparèy jodi a nan tèt ou, ak rann amelyore sou ekran, sipò varyab font, ak plis ankò. Li plis sou pil natif natal nan atik Smashing Magazine sa a .
$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;
Remake byen ke paske pil polis la gen ladan polis emoji, anpil karaktè senbòl/dingbat Unicode ki komen yo pral rann kòm piktograf ki gen plizyè koulè. Aparans yo pral varye, tou depann de style yo itilize nan font natif natal emoji navigatè/platfòm la, epi yo pa pral afekte pa nenpòt color
estil CSS.
Sa a font-family
se aplike a <body>
ak otomatikman eritye globalman nan tout Bootstrap. Pou chanje mondyal la font-family
, mete ajou $font-family-base
ak rekonpile Bootstrap.
Tit ak paragraf
Tout eleman tit—egzanp, <h1>
—epi <p>
yo reset pou yo margin-top
retire yo. Yo te margin-bottom: .5rem
ajoute tit ak paragraf margin-bottom: 1rem
pou espas fasil.
Tit | Egzanp |
---|---|
<h1></h1> |
h1. Bootstrap tit |
<h2></h2> |
h2. Bootstrap tit |
<h3></h3> |
h3. Bootstrap tit |
<h4></h4> |
h4. Bootstrap tit |
<h5></h5> |
h5. Bootstrap tit |
<h6></h6> |
h6. Bootstrap tit |
Lis
Tout lis— <ul>
, <ol>
, ak <dl>
— yo margin-top
retire yo ak yon margin-bottom: 1rem
. Lis anbrike pa gen okenn margin-bottom
. Nou te tou reset padding-left
sou <ul>
ak <ol>
eleman yo.
- Tout lis yo gen maj tèt yo retire
- Ak maj anba yo nòmalize
- Lis anbrike pa gen okenn maj anba
- Nan fason sa a yo gen yon aparans pi menm jan
- Patikilyèman lè swiv pa plis atik lis
- Padding gòch la tou te reset
- Men yon lis òdone
- Avèk kèk atik lis
- Li gen menm gade an jeneral
- Kòm lis ki pa òdone anvan an
Pou fason ki pi senp, yerachi klè, ak pi bon espas, lis deskripsyon yo mete ajou margin
s. <dd>
s reset margin-left
ak 0
ajoute margin-bottom: .5rem
. <dt>
yo fonse .
- Lis deskripsyon yo
- Yon lis deskripsyon pafè pou defini tèm.
- Tèm
- Definisyon pou tèm nan.
- Yon dezyèm definisyon pou menm tèm.
- Yon lòt tèm
- Definisyon pou lòt tèm sa a.
Inline kòd
Vlope fragman nan kòd ak <code>
. Asire w ou chape HTML ang parantèz.
<section>
yo ta dwe vlope kòm inline.
For example, <code><section></code> should be wrapped as inline.
Blòk kòd
Sèvi ak <pre>
s pou plizyè liy kòd. Yon fwa ankò, asire w ke ou chape anba nenpòt parantèz ang nan kòd la pou rann apwopriye. Se <pre>
eleman nan reset yo retire li yo margin-top
epi sèvi ak rem
inite pou li yo 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>
Varyab
Pou endike varyab itilize <var>
tag la.
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
Antre itilizatè
Sèvi ak la <kbd>
pou endike opinyon ki tipikman antre atravè klavye.
Pou modifye paramèt yo, peze 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>
Egzanp pwodiksyon an
Pou endike pwodiksyon echantiyon nan yon pwogram itilize <samp>
tag la.
<samp>This text is meant to be treated as sample output from a computer program.</samp>
Tablo
Tablo yo yon ti kras ajiste nan style <caption>
yo, efondre fwontyè, epi asire konsistan text-align
nan tout. Lòt chanjman pou fwontyè, padding, ak plis ankò vini ak klas la.table
.
Tit tab la | Tit tab la | Tit tab la | Tit tab la |
---|---|---|---|
Selil tab la | Selil tab la | Selil tab la | Selil tab la |
Selil tab la | Selil tab la | Selil tab la | Selil tab la |
Selil tab la | Selil tab la | Selil tab la | Selil tab la |
Fòm
Plizyè eleman fòm yo te rekòmanse pou estil baz ki pi senp. Men kèk nan chanjman ki pi remakab yo:
<fieldset>
s pa gen fwontyè, padding, oswa maj pou yo ka fasil pou itilize kòm anbalaj pou entrain endividyèl oswa gwoup antre.<legend>
s, tankou fieldsets, yo te tou restyled yo dwe parèt kòm yon tit nan kalite.<label>
s yo metedisplay: inline-block
pou pèmètmargin
pou aplike.<input>
s,<select>
s,<textarea>
s, ak<button>
s yo sitou adrese pa Nòmalize, men Reboot retire yomargin
ak ansanmline-height: inherit
, tou.<textarea>
yo modifye pou sèlman redimensionnable vètikal kòm orizontal redimensionnement souvan "kraze" layout paj.<button>
s ak<input>
eleman bouton gencursor: pointer
lè:not(:disabled)
.
Chanjman sa yo, ak plis ankò, yo demontre anba a.
Dat & koulè D' sipò
Kenbe nan tèt ou entrées dat yo pa konplètman sipòte pa tout navigatè, sètadi Safari.
Endikasyon sou bouton
Rdemare gen ladan yon amelyorasyon pou role="button"
chanje kurseur default la nan pointer
. Ajoute atribi sa a nan eleman pou ede endike eleman yo entèaktif. Wòl sa a pa nesesè pou <button>
eleman, ki jwenn pwòp cursor
chanjman yo.
<span role="button" tabindex="0">Non-button element button</span>
Eleman divès
Adrès
Se <address>
eleman nan mete ajou pou reset navigatè a default font-style
soti italic
nan normal
. line-height
se tou kounye a eritye, e margin-bottom: 1rem
li te ajoute. <address>
yo se pou prezante enfòmasyon kontak pou zansèt ki pi pre a (oswa tout yon kò travay). Konsève fòma lè w fini liy ak <br>
.
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890 Non konplè
[email protected]
Blockquote
Defo a margin
sou blockquotes se 1em 40px
, kidonk nou reset sa a 0 0 1rem
pou yon bagay ki pi konsistan ak lòt eleman.
Yon quote byen koni, ki genyen nan yon eleman blockquote.
Yon moun ki pi popilè nan Tit Sous
Eleman Inline
Eleman <abbr>
an resevwa stil de baz pou fè l' kanpe deyò pami paragraf tèks.
Rezime
Defo a cursor
sou rezime se text
, kidonk nou reset sa pointer
a transmèt ke eleman nan ka kominike avèk lè w klike sou li.
Kèk detay
Plis enfòmasyon sou detay yo.
Menm plis detay
Isit la yo se menm plis detay sou detay yo.
HTML5 [hidden]
atribi
HTML5 ajoute yon nouvo atribi mondyal ki rele[hidden]
, ki gen estile kòm display: none
pa default. Lè nou prete yon lide nan men PureCSS , nou amelyore sou default sa a lè nou fè [hidden] { display: none !important; }
pou ede anpeche li display
soti aksidantèlman chanje.
<input type="text" hidden>
jQuery enkonpatibilite
[hidden]
se pa konpatib ak jQuery a $(...).hide()
ak $(...).show()
metòd. Se poutèt sa, kounye a nou pa espesyalman andose [hidden]
sou lòt teknik pou jere display
eleman yo.
Pou senpleman aktive vizibilite nan yon eleman, sa vle di li display
pa modifye epi eleman nan ka toujou afekte koule nan dokiman an, sèvi ak .invisible
klas la pito.