Ath-thòisich
Reboot, cruinneachadh de dh’ atharrachaidhean CSS a tha sònraichte do eileamaid ann an aon fhaidhle, kickstart Bootstrap gus bun-loidhne eireachdail, cunbhalach agus sìmplidh a thoirt seachad airson togail air.
Dòigh-obrach
Bidh Reboot a’ togail air Normalize, a’ toirt seachad mòran eileamaidean HTML le stoidhlichean beagan beachdail a’ cleachdadh dìreach taghadairean eileamaid. Chan eil stoidhle a bharrachd air a dhèanamh ach le clasaichean. Mar eisimpleir, bidh sinn ag ath-thòiseachadh cuid de <table>
stoidhlichean airson bun-loidhne nas sìmplidh agus nas fhaide air adhart bheir sinn seachad .table
, .table-bordered
, agus barrachd.
Seo an stiùireadh agus na h-adhbharan againn airson taghadh dè a bu chòir a dhol thairis air ann an Reboot:
- Ùraich cuid de luachan bunaiteach brabhsair gus s a chleachdadh
rem
an àiteem
s airson farsaingeachd phàirtean so-ruigsinneach. - Seachain
margin-top
. Faodaidh oirean dìreach tuiteam, a 'toirt seachad toraidhean ris nach robh dùil. Nas cudromaiche ge-tà, tha aon stiùireadhmargin
na mhodail inntinn nas sìmplidh. - Airson sgèileadh nas fhasa thar meudan innealan, bu chòir eileamaidean bloca s a chleachdadh
rem
airsonmargin
s. - Cùm dearbhaidhean mu
font
thogalaichean co-cheangailte ris a’ char as lugha, a’ cleachdadhinherit
far a bheil sin comasach.
Ro-shealladh duilleag
Tha na h-eileamaidean <html>
agus <body>
na h-eileamaidean air an ùrachadh gus bunaitean nas fheàrr a thoirt seachad air feadh na duilleige. Nas mionaidiche:
- Tha
box-sizing
an suidheachadh air feadh na cruinne air gach eileamaid - a’ toirt a-steach*::before
agus*::after
, guborder-box
. Bidh seo a’ dèanamh cinnteach nach tèid an leud ainmichte de eileamaid a-riamh thairis air mar thoradh air pleadhag no crìoch. - Chan eil bunait sam bith
font-size
air ainmeachadh air an<html>
, ach16px
thathar a 'gabhail ris (bunaiteach a' bhrabhsair).font-size: 1rem
air a chuir an sàs<body>
airson sgèileadh seòrsa freagairteach furasta tro cheistean meadhanan fhad ‘s a tha e a’ toirt urram do roghainnean luchd-cleachdaidh agus a ’dèanamh cinnteach à dòigh-obrach nas ruigsinneach. - Tha
<body>
seo cuideachd a' suidheachadh cruinnefont-family
,line-height
, agustext-align
. Tha seo air a shealbhachadh nas fhaide air adhart le cuid de dh’ eileamaidean cruth gus casg a chuir air neo-chunbhalachd cruth-clò. - Airson sàbhailteachd,
<body>
tha suaicheantas dearbhte aig an neach-cleachdaidhbackground-color
, a’ dol gu#fff
.
Stack font dùthchasach
Chaidh na clòidean lìn àbhaisteach (Helvetica Neue, Helvetica, agus Arial) a leigeil sìos ann am Bootstrap 4 agus chaidh “stack cruth-clò dùthchasach” a chuir nan àite airson an teacsa as fheàrr a thoirt seachad air gach inneal agus OS. Leugh tuilleadh mu chruachan cruth-clò dùthchasach san artaigil Smashing Magazine seo .
$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;
Thoir an aire, leis gu bheil an stac cruth-clò a’ toirt a-steach clòidean emoji, gun tèid mòran de charactaran samhla cumanta / dingbat Unicode a thoirt seachad mar dhealbhan ioma-dathte. Bidh an coltas eadar-dhealaichte, a rèir an stoidhle a chleachdar ann an cruth-clò emoji dùthchasach a’ bhrobhsair/àrd-ùrlar, agus cha toir color
stoidhlichean CSS sam bith buaidh orra.
Tha seo font-family
air a chuir an sàs <body>
agus air a shealbhachadh gu fèin-ghluasadach air feadh na cruinne air feadh Bootstrap. Gus an cruinne atharrachadh font-family
, ùrachadh $font-family-base
agus ath-chruinneachadh Bootstrap.
Cinn agus paragrafan
Tha na h-eileamaidean cinn uile - me, <h1>
-agus <p>
gan ath-shuidheachadh gus an toirt air margin-top
falbh. Tha cinn air margin-bottom: .5rem
cur ris agus paragrafan margin-bottom: 1rem
airson farsaingeachd furasta.
Ceann-cinnidh | eisimpleir |
---|---|
<h1></h1> |
h1. Ceann-uidhe Bootstrap |
<h2></h2> |
h2. Ceann-uidhe Bootstrap |
<h3></h3> |
h3. Ceann-uidhe Bootstrap |
<h4></h4> |
h4. Ceann-uidhe Bootstrap |
<h5></h5> |
h5. Ceann-uidhe Bootstrap |
<h6></h6> |
h6. Ceann-uidhe Bootstrap |
Liostaichean
Tha na liostaichean uile - <ul>
, <ol>
, agus <dl>
- air an margin-top
toirt air falbh agus margin-bottom: 1rem
. Chan eil liostaichean neadachaidh margin-bottom
.
- Tha an iomall àrd aca uile air a thoirt air falbh
- Agus bha an iomall ìosal aca àbhaisteach
- Chan eil iomall bun aig liostaichean neadachaidh
- San dòigh seo tha coltas nas cothromaiche orra
- Gu sònraichte nuair a bhios barrachd nithean liosta air a leantainn
- Chaidh am pleadhag chlì ath-shuidheachadh cuideachd
- Seo liosta òrdaichte
- Le beagan rudan liosta
- Tha an aon shealladh iomlan aige
- Mar an liosta roimhe gun òrdugh
Airson stoidhle nas sìmplidhe, rangachd shoilleir, agus farsaingeachd nas fheàrr, tha liostaichean tuairisgeul air margin
s. <dd>
s ath-shuidheachadh margin-left
gu 0
agus cuir ris margin-bottom: .5rem
. <dt>
s dàna .
- Liostaichean tuairisgeul
- Tha liosta tuairisgeul foirfe airson teirmean a mhìneachadh.
- Teirm
- Mìneachadh airson an teirm.
- An dàrna mìneachadh airson an aon teirm.
- Teirm eile
- Mìneachadh airson an teirm eile seo.
Teacs ro-chruthaichte
Tha an <pre>
eileamaid air ath-shuidheachadh gus na h-aonadan aige a thoirt air falbh margin-top
agus rem
aonadan a chleachdadh airson a faidhle margin-bottom
.
.example-element { iomall-bhonn: 1rem; }
Clàir
Tha bùird air an atharrachadh beagan a rèir stoidhle <caption>
s, tuiteam crìochan, agus dèanamh cinnteach gu bheil iad cunbhalach text-align
air feadh. Bidh atharrachaidhean a bharrachd airson crìochan, pleadhag, agus barrachd a’ tighinn leis a’ .table
chlas .
Ceann clàr | Ceann clàr | Ceann clàr | Ceann clàr |
---|---|---|---|
Clàr cealla | Clàr cealla | Clàr cealla | Clàr cealla |
Clàr cealla | Clàr cealla | Clàr cealla | Clàr cealla |
Clàr cealla | Clàr cealla | Clàr cealla | Clàr cealla |
Foirmean
Chaidh diofar eileamaidean cruth ath-thòiseachadh airson stoidhlichean bunaiteach nas sìmplidh. Seo cuid de na h-atharrachaidhean as ainmeil:
<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.