Taaskäivitage
Reboot, elemendispetsiifiliste CSS-i muudatuste kogum ühes failis, käivitab Bootstrapi, et pakkuda elegantset, järjepidevat ja lihtsat baasjoont, millele tugineda.
Lähenemine
Taaskäivitamine põhineb normaliseerimisel, pakkudes paljusid HTML-i elemente mõnevõrra arvamuslike stiilidega, kasutades ainult elemendivalijaid. Täiendav stiil tehakse ainult klassidega. Näiteks taaskäivitame mõned <table>
stiilid lihtsama baasjoone jaoks ning pakume hiljem .table
, .table-bordered
ja palju muud.
Siin on meie juhised ja põhjused, miks valida, mida rebootis alistada.
- Värskendage mõnda brauseri vaikeväärtust, et kasutada skaleeritavate komponentide vahekauguste jaoks
rem
s-i asemel s.em
- Vältida
margin-top
. Vertikaalsed veerised võivad kokku kukkuda, andes ootamatuid tulemusi. Veelgi olulisem on aga see, et üks suundmargin
on lihtsam vaimne mudel. - Seadme suuruste hõlpsamaks skaleerimiseks peaksid plokielemendid kasutama
rem
s-i jaoksmargin
s. font
Hoidke seotud atribuutide deklaratsioonid minimaalsena, kasutadesinherit
võimalusel.
Lehe vaikeseaded
Elemente ja värskendatakse <html>
, <body>
et pakkuda paremaid leheüleseid vaikeseadeid. Täpsemalt:
- Määratakse
box-sizing
globaalselt igale elemendile, sealhulgas*::before
ja*::after
, kuniborder-box
. See tagab, et elemendi deklareeritud laiust ei ületata polsterduse või äärise tõttu.- Alust
font-size
ei deklareerita<html>
, vaid16px
eeldatakse (brauseri vaikeseade).font-size: 1rem
kasutatakse<body>
meediumipäringute kaudu hõlpsaks reageerivaks tüübi skaleerimiseks, austades samal ajal kasutaja eelistusi ja tagades ligipääsetavama lähenemisviisi. Selle brauseri vaikeväärtuse saab$font-size-root
muutujat muutes alistada.
- Alust
- Samuti
<body>
määrab see globaalsefont-family
,font-weight
,line-height
jacolor
. Selle pärivad hiljem mõned vormielemendid, et vältida fontide ebakõlasid. - Ohutuse huvides
<body>
on sellel deklareeritudbackground-color
, vaikimisi#fff
.
Algne fondivirn
Bootstrap kasutab teksti optimaalseks renderdamiseks igas seadmes ja OS-is "natiivset fondivirna" või "süsteemi fondivirnu". Need süsteemifondid on loodud spetsiaalselt tänapäeva seadmeid silmas pidades, täiustatud renderdamisega ekraanidel, muutuva fondi toega ja palju muud. Lisateavet omafondide virnade kohta leiate sellest Smashing Magazine'i artiklist .
$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;
Pange tähele, et kuna fondivirn sisaldab emotikonide fonte, renderdatakse paljud levinud sümbolid/dingbat unicode märgid mitmevärviliste piltidena. Nende välimus varieerub olenevalt brauseri/platvormi emotikonide fondi stiilist ja neid ei mõjuta ükski CSS- color
stiil.
Seda font-family
rakendatakse <body>
Bootstrapis ja see päritakse automaatselt globaalselt kogu Bootstrapis. Globaalse versiooni vahetamiseks font-family
värskendage $font-family-base
ja kompileerige Bootstrap uuesti.
Pealkirjad ja lõigud
Kõik pealkirja elemendid – nt – <h1>
ja lähtestatakse <p>
nende margin-top
eemaldamiseks. Lisatud on pealkirjad margin-bottom: .5rem
ja lõigud margin-bottom: 1rem
, mis võimaldavad hõlpsat vahekaugust.
Pealkiri | Näide |
---|---|
<h1></h1> |
h1. Bootstrapi pealkiri |
<h2></h2> |
h2. Bootstrapi pealkiri |
<h3></h3> |
h3. Bootstrapi pealkiri |
<h4></h4> |
h4. Bootstrapi pealkiri |
<h5></h5> |
h5. Bootstrapi pealkiri |
<h6></h6> |
h6. Bootstrapi pealkiri |
Loendid
Kõik loendid – <ul>
, <ol>
, ja <dl>
– margin-top
on eemaldatud ja margin-bottom: 1rem
. Pesastatud loenditel pole margin-bottom
. Lähtestasime ka padding-left
sisselülitamise <ul>
ja <ol>
elemendid.
- Kõigil loenditel on ülemine veeris eemaldatud
- Ja nende alumine veeris normaliseerus
- Pesastatud loenditel puudub alumine veeris
- Nii on neil ühtlasem välimus
- Eriti kui sellele järgneb rohkem loendi üksusi
- Vasak polster on samuti lähtestatud
- Siin on järjestatud nimekiri
- Mõne loendi elemendiga
- Sellel on sama üldine välimus
- Nagu eelmine järjestamata nimekiri
Lihtsama stiili, selge hierarhia ja paremate vahekauguste jaoks on kirjeldusloendeid värskendatud margin
s. <dd>
s lähtestada ja margin-left
lisada . s on paksus kirjas .0
margin-bottom: .5rem
<dt>
- Kirjeldusloendid
- Kirjeldusloend sobib suurepäraselt terminite määratlemiseks.
- Tähtaeg
- Mõiste definitsioon.
- Teine määratlus samale terminile.
- Teine termin
- Selle teise termini definitsioon.
Tekstisisene kood
Mähi tekstisisesed koodilõigud märgiga <code>
. Vältige kindlasti HTML-i nurksulgusid.
<section>
tuleks mähitud sees.
For example, <code><section></code> should be wrapped as inline.
Koodiplokid
Kasutage <pre>
s-i mitme koodirea jaoks. Korralikuks renderdamiseks eemaldage koodis veel kord nurksulgudest. <pre>
Element lähtestatakse selle eemaldamiseks ja selle jaoks ühikute margin-top
kasutamiseks .rem
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>
Muutujad
Muutujate näitamiseks kasutage <var>
silti.
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
Kasutaja sisend
Kasutage <kbd>
sisendi tähistamiseks, mis tavaliselt sisestatakse klaviatuuri kaudu.
Seadete muutmiseks vajutage 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>
Näidisväljund
Programmi näidisväljundi näitamiseks kasutage <samp>
silti.
<samp>This text is meant to be treated as sample output from a computer program.</samp>
Tabelid
Tabelid on veidi kohandatud stiili <caption>
s järgi, ahendavad ääriseid ja tagavad text-align
kogu ühtsuse. Täiendavad muudatused ääriste, polsterduse ja muu osas tulevad klassiga kaasa.table
.
Tabeli pealkiri | Tabeli pealkiri | Tabeli pealkiri | Tabeli pealkiri |
---|---|---|---|
Tabeli lahter | Tabeli lahter | Tabeli lahter | Tabeli lahter |
Tabeli lahter | Tabeli lahter | Tabeli lahter | Tabeli lahter |
Tabeli lahter | Tabeli lahter | Tabeli lahter | Tabeli lahter |
Vormid
Erinevad vormielemendid on lihtsamate baasstiilide jaoks taaskäivitatud. Siin on mõned kõige tähelepanuväärsemad muudatused:
<fieldset>
s-tel pole ääriseid, polsterdust ega veerisid, nii et neid saab hõlpsasti kasutada üksikute sisendite või sisendite rühmade ümbrisena.<legend>
s, nagu väljakomplektid, on samuti ümber kujundatud, et neid kuvada teatud tüüpi pealkirjadena.<label>
s on seadistatuddisplay: inline-block
lubamamargin
rakendada.<input>
s-i,<select>
s-i,<textarea>
s-i ja<button>
s-i käsitleb enamasti Normalize, kuid Reboot eemaldab needmargin
ja seabline-height: inherit
ka .<textarea>
s on muudetud nii, et nende suurust saab muuta ainult vertikaalselt, kuna horisontaalne suuruse muutmine katkestab sageli lehe paigutuse.<button>
s ja<input>
nupuelementidel oncursor: pointer
millal:not(:disabled)
.
Neid muudatusi ja palju muud on näidatud allpool.
Kuupäeva ja värvi sisestamise tugi
Pidage meeles , et kõik brauserid, nimelt Safari, ei toeta täielikult kuupäeva sisestamist.
Osutajad nuppudel
Taaskäivitamine sisaldab täiustust, role="button"
et muuta vaikekursoriks pointer
. Lisage see atribuut elementidele, et aidata näidata, et elemendid on interaktiivsed. See roll pole vajalik <button>
elementide jaoks, mis muutuvad ise cursor
.
<span role="button" tabindex="0">Non-button element button</span>
Erinevad elemendid
Aadress
Elementi värskendatakse, et <address>
lähtestada brauseri vaikeseade font-style
väärtuselt . on ka nüüd päritud ja lisatud. s on lähima esivanema (või kogu töö) kontaktandmete esitamiseks. Säilitage vorming, lõpetades read tähega .italic
normal
line-height
margin-bottom: 1rem
<address>
<br>
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890 Täisnimi
[email protected]
Plokktsitaat
Vaikimisi margin
plokitsitaatide puhul on 1em 40px
, seega lähtestame selle 0 0 1rem
muude elementidega ühtsemaks muutmiseks.
Tuntud tsitaat, mis sisaldub blockquote elemendis.
Keegi kuulus allika pealkirjas
Tekstisisesed elemendid
<abbr>
Element saab põhilise stiili, et see lõiguteksti hulgast silma paistaks .
Kokkuvõte
Kokkuvõtte vaikeseade cursor
on text
, seega lähtestasime selle väärtusele, et pointer
näidata, et elemendiga saab sellel klõpsates suhelda.
Mõned detailid
Lisateave üksikasjade kohta.
Veelgi rohkem üksikasju
Siin on üksikasjade kohta veelgi rohkem üksikasju.
HTML5 [hidden]
atribuut
HTML5 lisab uue globaalse atribuudi nimega[hidden]
display: none
, mis on vaikimisi kujundatud . Laenates ideed PureCSS -ilt , täiustame seda vaikeseadet, [hidden] { display: none !important; }
aidates vältida selle display
juhuslikku ülekirjutamist.
<input type="text" hidden>
jQuery ühildumatus
[hidden]
ei ühildu jQuery $(...).hide()
ja $(...).show()
meetoditega. Seetõttu ei toeta me praegu eriti teisi elementide [hidden]
haldamise tehnikaid .display
Elemendi nähtavuse muutmiseks, mis tähendab, et display
seda ei muudeta ja element võib siiski mõjutada dokumendi voogu, kasutage selle asemel .invisible
klassi .