Reboot gape
Reboot, kgoboketšo ya diphetogo tša CSS tše di itšego tša elemente ka faeleng e tee, kickstart Bootstrap go fa motheo wo o kgahlišago, wo o sa fetogego le wo bonolo go aga godimo ga wona.
Batamela
Reboot e aga godimo ga Normalize, e fa dielemente tše ntši tša HTML ka mekgwa ye e itšego ya dikgopolo ka go šomiša fela bakgethi ba elemente. Tlatsetso setaele e etsoa feela le diklase. Ka mohlala, re thoma gape <table>
mekgwa e mengwe bakeng sa motheo o bonolo gomme ka morago re nea .table
, .table-bordered
, le tše dingwe.
Ditlhahlo tša rena le mabaka a go kgetha seo o swanetšego go se fediša ka go Reboot ke a:
- Mpshafatša dikelo tše dingwe tša go se fetoge tša sephephediši go šomiša
rem
s go e na leem
s bakeng sa sekgoba sa dikarolo tše di ka lekanywago. - Phema
margin-top
. Di- margin tše di emego thwii di ka phuhlama, tša tšweletša dipoelo tšeo di sa letelwago. Lega go le bjalo, sa bohlokwa kudu, tlhahlo e tee yamargin
ke mohlala o bonolo wa monagano. - Bakeng sa go lekanyetša bonolo go ralala le bogolo bja sedirišwa, dielemente tša go thibela di swanetše go šomiša
rem
s bakeng samargin
s. - Boloka dipolelo tša
font
dithoto tše di amanago le -di le bonnyane, o šomišainherit
neng le neng ge go kgonega.
Di-default tša letlakala
Dielemente tša <html>
le <body>
di mpshafatšwa go fa di-default tše kaone tša letlakala ka bophara. Ka go lebanya kudu:
- The
box-sizing
e beakantšwe lefaseng ka bophara godimo ga elemente e nngwe le e nngwe—go akaretša*::before
le le*::after
, goborder-box
. Se se netefatša gore bophara bjo bo tsebagaditšwego bja elemente ga bo ke bo feta ka lebaka la go tlatša goba mollwane.- Ga go na motheo wo
font-size
o tsebagaditšwego go<html>
, eupša16px
o tšewa (ya go se fetoge ya sephephediši).font-size: 1rem
e dirišwa go ya<body>
bakeng sa go arabela bonolo mohuta-sekaleng ka dipotšišo tša boraditaba mola e hlompha dikgetho tša modiriši le go netefatša mokgwa wo o fihlelelwago kudu. Sephephediši se sa go se fetoge se ka tlošwa ka go fetoša$font-size-root
phetogo.
- Ga go na motheo wo
- The
<body>
gape e bea lefase ka bopharafont-family
,font-weight
,line-height
, lecolor
. Se se abelwa ka morago ke dielemente tše dingwe tša sebopego go thibela go se dumelelane ga fonte. - Bakeng sa polokego, the
<body>
e na le e tsebišitšebackground-color
, defaulting to#fff
.
Mokgobo wa fonte ya setlogo
Bootstrap e diriša “mokgobo wa fonte ya setlogo” goba “mokgobo wa fonte ya tshepedišo” bakeng sa go fetolela mongwalo mo go loketšego go sedirišwa se sengwe le se sengwe le OS. Difonte tše tša tshepedišo di hlamilwe ka go lebanya go nagannwe ka didirišwa tša lehono, ka go fetolela mo go kaonefaditšwego diskrineng, thekgo ya difonte tše di fetogago le tše dingwe. Bala ka botlalo ka ga mekgobo ya difonte tša setlogo sehlogong se sa Smashing Magazine .
$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;
Hlokomela gore ka lebaka la gore mokgobo wa difonte o akaretša difonte tša emoji, ditlhaka tše ntši tše di tlwaelegilego tša unicode tša leswao/dingbat di tla tšweletšwa bjalo ka diswantšho tša mebala ye mentši. Ponagalo ya tšona e tla fapana, go ya ka setaele seo se šomišitšwego ka go fonte ya setlogo ya emoji ya sephephediši/sefala, gomme di ka se amege ke color
mekgwa efe goba efe ya CSS.
Se font-family
se dirišwa go <body>
le go abelwa ka go iketla lefaseng ka bophara go ralala le Bootstrap. Go fetola lefase ka bophara font-family
, mpshafatša $font-family-base
le go kgoboketša gape Bootstrap.
Dihlogo le dirapa
Dielemente ka moka tša hlogo—mohlala, <h1>
—gomme <p>
di bewa gape gore di margin-top
tlošwe. Dihlogo di margin-bottom: .5rem
okeditšwe le dirapa margin-bottom: 1rem
bakeng sa sekgoba se bonolo.
Hlogo ya ditaba | Mohlala |
---|---|
<h1></h1> |
h1. Hlogo ya bootstrap |
<h2></h2> |
h2. Hlogo ya bootstrap |
<h3></h3> |
h3. Hlogo ya bootstrap |
<h4></h4> |
h4. Hlogo ya bootstrap |
<h5></h5> |
h5. Hlogo ya bootstrap |
<h6></h6> |
h6. Hlogo ya bootstrap |
Mananeo
Mananeo ka moka— <ul>
, <ol>
, le <dl>
—a na le margin-top
ao a tlošitšwego le a margin-bottom: 1rem
. Mananeo ao a tsentšwego ka gare ga dihlaga ga a na margin-bottom
. Re bile re seta gape dielemente tša padding-left
godimo <ul>
le .<ol>
- Mananeo ka moka a na le mošito wa ona wa godimo wo o tlošitšwego
- Gomme margin ya bona ya ka fase e ile ya tlwaelega
- Mananeo a go tsenywa ka gare ga dihlaga ga a na mošito wa ka fase
- Ka tsela ye di na le ponagalo e leka-lekanego kudu
- Kudu-kudu ge e latelwa ke dilo tše dingwe tša lenaneo
- Padding ya le letshadi le yona e beakantšwe gape
- Lenaneo le le laetšwego ke le
- Ka dilo tše mmalwa tša lenaneo
- E na le ponagalo e swanago ya kakaretšo
- Bjalo ka lenaneo la peleng leo le sa laolwego
Bakeng sa setaele se bonolo, tatelano ya maemo ye e kwagalago, le sekgoba se sekaone, mananeo a tlhalošo a mpshafaditšwe margin
s. <dd>
s seta gape margin-left
go 0
le go tlaleletša margin-bottom: .5rem
. <dt>
s di na le mongwalo o motenya .
- Mananeo a tlhaloso
- Lenaneo la tlhalošo le phethagetše bakeng sa go hlaloša mareo.
- Lereo
- Tlhaloso ya lereo le.
- Tlhaloso ya bobedi ya lereo le le swanago.
- Lereo le lengwe
- Tlhaloso ya lereo le le lengwe.
Khoutu ya ka gare ga mothaladi
Phuthelela dikarolwana tša khoutu ya ka gare ga mothaladi ka <code>
. Kgonthiša gore o tšhaba maswaodikga a khutlo ya HTML.
<section>
e swanetše go phuthelwa bjalo ka inline.
For example, <code><section></code> should be wrapped as inline.
Diboloko tša khoutu
Šomiša <pre>
s bakeng sa mela e mentši ya khoutu. Le mo nakong ye, kgonthišetša gore o tšhaba maswaodikga afe goba afe a khutlo ka khoutung bakeng sa phetolelo e swanetšego. Elemente <pre>
e bewa gape go tloša ya yona margin-top
le go šomiša rem
diyuniti tša yona 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>
Diphetogo
Bakeng sa go bontšha diphetogo šomiša <var>
thepo.
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
Tsenyo ya mosebedisi
Šomiša <kbd>
go laetša tsenyo yeo ka tlwaelo e tsenywago ka khiiboto.
Go rulaganya dipeakanyo, tobetsa 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>
Dipholo tsa mohlala
Bakeng sa ho bontša mohlala dipholo tsa ho tloha lenaneo sebelisa <samp>
tag.
<samp>This text is meant to be treated as sample output from a computer program.</samp>
Ditafola
Ditafola di fetotšwe go se nene go ya ka setaele <caption>
s, mellwane ya go phuhlama, le go netefatša go se fetoge text-align
gohle. Diphetogo tše dingwe tša mellwane, go tlatša le tše dingwe di tla le .table
sehlopha .
Hlogo ya tafola | Hlogo ya tafola | Hlogo ya tafola | Hlogo ya tafola |
---|---|---|---|
Sele ya tafola | Sele ya tafola | Sele ya tafola | Sele ya tafola |
Sele ya tafola | Sele ya tafola | Sele ya tafola | Sele ya tafola |
Sele ya tafola | Sele ya tafola | Sele ya tafola | Sele ya tafola |
Diforomo
Dikarolo tše di fapa-fapanego tša foromo di thomilwe gape bakeng sa mekgwa e bonolo ya motheo. Tše dingwe tša diphetogo tše di lemogegago kudu ke tše:
<fieldset>
s ga di na mellwane, padding, goba margin ka fao di ka šomišwa gabonolo bjalo ka diphuthelwana tša ditseno ka botee goba dihlopha tša ditseno.<legend>
s, go swana le disete tša mašemo, le tšona di rulagantšwe gape gore di bontšhwe bjalo ka hlogo ya mehuta.<label>
s di bewa godisplay: inline-block
go dumelelamargin
go dirišwa.<input>
s,<select>
s,<textarea>
s, le<button>
s di rarollwa kudu ke Normalize, eupša Reboot e tloša tša bonamargin
le diseteline-height: inherit
, le tšona.<textarea>
s di fetolwa gore e be fela yeo e ka fetošwago bogolo ka go otlologa ka ge go fetoša bogolo bjo bo rapaletšego gantši go “roba” peakanyo ya letlakala.<button>
s le<input>
dielemente tša konope di na lecursor: pointer
ge:not(:disabled)
.
Diphetogo tše, le tše dingwe, di bontšhitšwe ka mo tlase.
Date & color input support
Keep in mind date inputs are not fully supported by all browsers, namely Safari.
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.
Someone famous in Source Title
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.
<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.