Rindizni
Reboot, një koleksion ndryshimesh CSS specifike për elementë në një skedar të vetëm, nis Bootstrap për të ofruar një bazë elegante, të qëndrueshme dhe të thjeshtë për t'u ndërtuar mbi të.
Qasje
Rindezja bazohet në Normalize, duke siguruar shumë elementë HTML me stile disi të mendimit duke përdorur vetëm përzgjedhës elementësh. Stilimi shtesë bëhet vetëm me klasa. Për shembull, ne rinisim disa <table>
stile për një bazë më të thjeshtë dhe më vonë ofrojmë .table
, .table-bordered
, dhe më shumë.
Këtu janë udhëzimet dhe arsyet tona për të zgjedhur atë që të anashkaloni në Reboot:
- Përditësoni disa vlera të paracaktuara të shfletuesit për të përdorur
rem
s në vend tëem
s për ndarje të shkallëzueshme të komponentëve. - Shmangni
margin-top
. Kufijtë vertikale mund të shemben, duke dhënë rezultate të papritura. Megjithatë, më e rëndësishmja, një drejtim i vetëm imargin
është një model mendor më i thjeshtë. - Për shkallëzim më të lehtë në përmasat e pajisjes, elementët e bllokut duhet të përdorin
rem
s përmargin
s. - Mbani
font
në minimum deklaratat e pronave të lidhura, duke i përdorurinherit
sa herë që është e mundur.
Parazgjedhjet e faqes
Elementet <html>
dhe <body>
janë përditësuar për të ofruar parazgjedhje më të mira në të gjithë faqen. Më specifikisht:
- Është
box-sizing
vendosur globalisht në çdo element—duke përfshirë*::before
dhe*::after
, nëborder-box
. Kjo siguron që gjerësia e deklaruar e elementit të mos tejkalohet kurrë për shkak të mbushjes ose kufirit. - Asnjë bazë nuk
font-size
është deklaruar në<html>
, por16px
supozohet (parazgjedhja e shfletuesit).font-size: 1rem
zbatohet në<body>
për shkallëzim të lehtë të përgjegjshëm të tipit nëpërmjet pyetjeve të medias duke respektuar preferencat e përdoruesve dhe duke siguruar një qasje më të aksesueshme. - Gjithashtu
<body>
vendos një globalefont-family
,line-height
dhetext-align
. Kjo trashëgohet më vonë nga disa elementë të formës për të parandaluar mospërputhjet e shkronjave. - Për siguri,
<body>
ka një të deklaruarbackground-color
, duke mos u vendosur në#fff
.
Stafi i shkronjave origjinale
Shkronjat e paracaktuara të uebit (Helvetica Neue, Helvetica dhe Arial) janë hequr në Bootstrap 4 dhe janë zëvendësuar me një "grumbull font vendas" për interpretimin optimal të tekstit në çdo pajisje dhe OS. Lexoni më shumë rreth grupeve të shkronjave vendase në këtë artikull të Revistës Smashing .
$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;
Vini re se për shkak se grupi i shkronjave përfshin shkronja emoji, shumë karaktere të zakonshme të simbolit/dingbat Unicode do të paraqiten si piktografë me shumë ngjyra. Pamja e tyre do të ndryshojë, në varësi të stilit të përdorur në fontin e emoji të shfletuesit/platformës dhe ato nuk do të ndikohen nga asnjë stil CSS color
.
Kjo font-family
aplikohet <body>
dhe trashëgohet automatikisht globalisht në të gjithë Bootstrap. Për të ndërruar versionin global font-family
, përditësoni $font-family-base
dhe rikompiloni Bootstrap.
Titujt dhe paragrafët
Të gjithë elementët e titullit - p.sh. - <h1>
dhe <p>
janë rivendosur për t'u margin-top
hequr. Titujt janë margin-bottom: .5rem
shtuar dhe paragrafët margin-bottom: 1rem
për ndarje të lehtë.
Drejtimi | Shembull |
---|---|
<h1></h1> |
h1. Titulli i bootstrap |
<h2></h2> |
h2. Titulli i bootstrap |
<h3></h3> |
h3. Titulli i bootstrap |
<h4></h4> |
h4. Titulli i bootstrap |
<h5></h5> |
h5. Titulli i bootstrap |
<h6></h6> |
h6. Titulli i bootstrap |
Listat
Të gjitha listat— <ul>
, <ol>
, dhe <dl>
— janë margin-top
hequr dhe një margin-bottom: 1rem
. Listat e mbivendosura nuk kanë margin-bottom
.
- Të gjitha listat u hiqet diferenca kryesore
- Dhe diferenca e tyre e poshtme u normalizua
- Listat e mbivendosura nuk kanë diferencë të poshtme
- Në këtë mënyrë ato kanë një pamje më të barabartë
- Veçanërisht kur pasohet nga më shumë artikuj të listës
- Mbushja e majtë gjithashtu është rivendosur
- Këtu është një listë e renditur
- Me disa artikuj të listës
- Ka të njëjtën pamje të përgjithshme
- Si lista e mëparshme e parenditur
Për stilim më të thjeshtë, hierarki të qartë dhe ndarje më të mirë, listat e përshkrimeve kanë përditësuar margin
s. <dd>
s rivendoset margin-left
në 0
dhe shtoni margin-bottom: .5rem
. <dt>
s janë të guximshme .
- Listat e përshkrimeve
- Një listë përshkrimi është e përkryer për përcaktimin e termave.
- Afati
- Përkufizimi për termin.
- Një përkufizim i dytë për të njëjtin term.
- Një term tjetër
- Përkufizimi për këtë term tjetër.
Tekst i paraformatuar
Elementi <pre>
rivendoset për të hequr margin-top
dhe për të përdorur rem
njësitë për të margin-bottom
.
.shembull-element { marzh-fundi: 1rem; }
Tabelat
Tabelat janë përshtatur paksa për të stiluar <caption>
s, kolapsin kufijtë dhe sigurojnë konsistencë në të text-align
gjithë. Ndryshime shtesë për kufijtë, mbushjet dhe më shumë vijnë me klasën.table
.
Titulli i tabelës | Titulli i tabelës | Titulli i tabelës | Titulli i tabelës |
---|---|---|---|
Qelizë tavoline | Qelizë tavoline | Qelizë tavoline | Qelizë tavoline |
Qelizë tavoline | Qelizë tavoline | Qelizë tavoline | Qelizë tavoline |
Qelizë tavoline | Qelizë tavoline | Qelizë tavoline | Qelizë tavoline |
Format
Elementë të ndryshëm të formës janë rindezur për stile bazë më të thjeshta. Këtu janë disa nga ndryshimet më të dukshme:
<fieldset>
s have no borders, padding, or margin so they can be easily used as wrappers for individual inputs or groups of inputs.<legend>
s, like fieldsets, have also been restyled to be displayed as a heading of sorts.<label>
s are set todisplay: inline-block
to allowmargin
to be applied.<input>
s,<select>
s,<textarea>
s, and<button>
s are mostly addressed by Normalize, but Reboot removes theirmargin
and setsline-height: inherit
, too.<textarea>
s are modified to only be resizable vertically as horizontal resizing often “breaks” page layout.<button>
s and<input>
button elements havecursor: pointer
when:not(:disabled)
.
These changes, and more, are demonstrated below.
Pointers on buttons
Reboot includes an enhancement for role="button"
to change the default cursor to pointer
. Add this attribute to elements to help indicate elements are interactive. This role isn’t necessary for <button>
elements, which get their own cursor
change.
<span role="button" tabindex="0">Non-button element button</span>
Misc elements
Address
The <address>
element is updated to reset the browser default font-style
from italic
to normal
. line-height
is also now inherited, and margin-bottom: 1rem
has been added. <address>
s are for presenting contact information for the nearest ancestor (or an entire body of work). Preserve formatting by ending lines with <br>
.
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890 Full Name
[email protected]
Blockquote
The default margin
on blockquotes is 1em 40px
, so we reset that to 0 0 1rem
for something more consistent with other elements.
A well-known quote, contained in a blockquote element.
Inline elements
The <abbr>
element receives basic styling to make it stand out amongst paragraph text.
Summary
The default cursor
on summary is text
, so we reset that to pointer
to convey that the element can be interacted with by clicking on it.
Some details
More info about the details.
Even more details
Here are even more details about the details.
HTML5 [hidden]
attribute
HTML5 adds a new global attribute named [hidden]
, which is styled as display: none
by default. Borrowing an idea from PureCSS, we improve upon this default by making [hidden] { display: none !important; }
to help prevent its display
from getting accidentally overridden. While [hidden]
isn’t natively supported by IE10, the explicit declaration in our CSS gets around that problem.
<input type="text" hidden>
jQuery incompatibility
[hidden]
is not compatible with jQuery’s $(...).hide()
and $(...).show()
methods. Therefore, we don’t currently especially endorse [hidden]
over other techniques for managing the display
of elements.
To merely toggle the visibility of an element, meaning its display
is not modified and the element can still affect the flow of the document, use the .invisible
class instead.