Sake yi
Sake yi, tarin takamaiman canje-canje na CSS a cikin fayil guda ɗaya, fara Bootstrap don samar da kyakkyawan tushe, daidaito da sauƙi don ginawa.
kusanci
Sake yi yana ginawa akan Normalize, yana samar da abubuwan HTML da yawa tare da ɗan salo na ra'ayi ta amfani da masu zaɓin kashi kawai. Ana yin ƙarin salo kawai tare da azuzuwan. Misali, muna sake yin wasu <table>
salo don tushe mafi sauƙi kuma daga baya samar da .table
, .table-bordered
, da ƙari.
Anan ga jagororinmu da dalilan zabar abin da za mu soke a Sake yi:
- Sabunta wasu tsoffin ƙima na burauza don amfani da
rem
s maimakonem
s don tazarar abubuwan da za'a iya daidaitawa. - Guji
margin-top
. Matsakaicin gefe na iya rugujewa, suna ba da sakamako mara tsammani. Mafi mahimmanci ko da yake, shugabanci guda ɗayamargin
shine samfurin tunani mafi sauƙi. - Don sauƙin sikeli a cikin girman na'urar, abubuwan toshe yakamata suyi amfani da
rem
s donmargin
s. - Ci gaba da bayyana
font
kaddarorin da ke da alaƙa da ƙayyadaddun bayanai, ta amfani dainherit
duk lokacin da zai yiwu.
Matsalolin shafi
An sabunta abubuwan <html>
da <body>
abubuwan don samar da ingantattun ɓangarorin shafi. Ƙari na musamman:
- An
box-sizing
saita shi a duk duniya akan kowane nau'i-ciki har*::before
da*::after
, zuwaborder-box
. Wannan yana tabbatar da cewa faɗin abubuwan da aka ayyana ba a taɓa wuce gona da iri ba saboda matsi ko iyaka. - Babu tushe
font-size
da aka ayyana akan<html>
, amma16px
ana ɗauka (tsohowar burauzar).font-size: 1rem
ana amfani da shi akan<body>
nau'in nau'in sikelin mai sauƙin amsa ta hanyar tambayoyin kafofin watsa labarai yayin da ake mutunta abubuwan da mai amfani da kuma tabbatar da hanyar da ta fi dacewa. - Hakanan
<body>
yana saita duniyafont-family
,line-height
, datext-align
. Ana gadar wannan daga baya ta wasu sifofi don hana rashin daidaiton rubutu. - Don aminci,
<body>
yana da ayyanabackground-color
, rashin kuskure ga#fff
.
Tarin rubutu na asali
An jefar da tsoffin fonts na gidan yanar gizo (Helvetica Neue, Helvetica, da Arial) a cikin Bootstrap 4 kuma an maye gurbinsu da "tarin rubutun asali" don ingantaccen rubutu akan kowace na'ura da OS. Kara karantawa game da tarin rubutu na asali a cikin wannan labarin Smashing Magazine .
Ana font-family
amfani da wannan ga <body>
kuma gaji ta atomatik a duk duniya cikin Bootstrap. Don canza duniya font-family
, ɗaukaka $font-family-base
kuma sake haɗa Bootstrap.
Kanun labarai da sakin layi
All heading elements—e.g., <h1>
—and <p>
are reset to have their margin-top
removed. Headings have margin-bottom: .5rem
added and paragraphs margin-bottom: 1rem
for easy spacing.
Heading | Example |
---|---|
|
h1. Bootstrap heading |
|
h2. Bootstrap heading |
|
h3. Bootstrap heading |
|
h4. Bootstrap heading |
|
h5. Bootstrap heading |
|
h6. Bootstrap heading |
Lists
All lists—<ul>
, <ol>
, and <dl>
—have their margin-top
removed and a margin-bottom: 1rem
. Nested lists have no margin-bottom
.
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
For simpler styling, clear hierarchy, and better spacing, description lists have updated margin
s. <dd>
s reset margin-left
to 0
and add margin-bottom: .5rem
. <dt>
s are bolded.
- Description lists
- A description list is perfect for defining terms.
- Euismod
- Vestibulum id ligula porta felis euismod semper eget lacinia odio sem.
- Donec id elit non mi porta gravida at eget metus.
- Malesuada porta
- Etiam porta sem malesuada magna mollis euismod.
Preformatted text
The <pre>
element is reset to remove its margin-top
and use rem
units for its margin-bottom
.
.example-element { margin-bottom: 1rem; }
Tables
Tables are slightly adjusted to style <caption>
s, collapse borders, and ensure consistent text-align
throughout. Additional changes for borders, padding, and more come with the .table
class.
Table heading | Table heading | Table heading | Table heading |
---|---|---|---|
Table cell | Table cell | Table cell | Table cell |
Table cell | Table cell | Table cell | Table cell |
Table cell | Table cell | Table cell | Table cell |
Forms
Various form elements have been rebooted for simpler base styles. Here are some of the most notable changes:
<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.
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.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
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.
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.