Bobandi lisusu
Reboot, lisanga ya mbongwana ya CSS oyo etali élément spécifique na fichier moko, kickstart Bootstrap mpo na kopesa baseline ya elegan, ya boyokani, mpe ya pete mpo na kotonga likolo na yango.
Kopusana
Reboot etongami likolo ya Normalize, kopesaka ba éléments HTML ebele na ba styles ya mwa opinion na kosalelaka kaka ba sélecteurs ya éléments. Styling supplémentaire esalemaka kaka na ba classes. Ndakisa, tozongisaka ba <table>styles mosusu mpo na baseline ya pete mpe sima topesaka .table, .table-bordered, mpe mingi mosusu.
Tala malako na biso mpe bantina ya kopona nini ya koboya na Reboot:
- Bobongisi mwa ba valeurs par défaut ya navigateur mpo na kosalela
rems na esika yaems mpo na espacement ya composant évolutif. - Bokima
margin-top. Ba marges verticales ekoki ko collapser, kopesa ba résultats oyo okanisaki te. Kasi, likambo ya ntina mingi koleka, direction moko yamarginezali modèle mental ya pete koleka. - Mpo na kosala échelle ya pete na kati ya bonene ya dispositif, ba éléments ya bloc esengeli kosalela
rems mpo namargins. - Bomba ba déclarations ya
fontba propriétés oyo etali -na minimum, kosalelainheritsoki likoki ezali.
Ba défauts ya lokasa
Ba elements <html>mpe <body>ezongisami na mikolo mpo na kopesa ba défauts ya malamu koleka na lokasa mobimba. Na bosikisiki mingi:
- The
box-sizingezali na mokili mobimba oyo etyami likoló na eloko nyonso —bakisa mpe*::beforempe*::after, naborder-box. Yango esalaka ete bonene ya élément oyo esakolami eleka jamais mpo na remplissage to ndelo.- Base
font-sizemoko te esakolami na<html>, kasi16pxekanisami (par défaut ya navigateur).font-size: 1remezali kosalelama na<body>mpo na kopesa eyano ya pete ya lolenge-échelle na nzela ya mituna ya media tout en respectant ba préférences ya ba usagers mpe ko assurer approche moko ya accessible mingi. Défaut oyo ya navigateur ekoki kozala overridé na ko modifier$font-size-rootvariable.
- Base
- The
<body>mpe etie un globalfont-family,font-weight,line-height, mpecolor. Yango ezwamaka na sima na ba éléments ya formulaire mosusu mpo na kopekisa inconsistance ya fonte. - Mpo na bokengi, the
<body>azali na esakolakibackground-color, kozanga kokokisa na#fff.
Stack ya ba fonts native
Bootstrap esalelaka “stack ya bafonte native” to “stack ya bafonte ya système” mpo na kosala makomi malamu na aparɛyi nyonso mpe na OS. Bafonte oyo ya système esalemi mpenzampenza na makanisi ya baaparɛyi ya lelo, na kobongisama ya kobongola na ba écrans, lisungi ya bafonte oyo ekoki kobongwana, mpe makambo mosusu. Tanga mingi na ntina ya ba stacks ya ba fonts natifs na article oyo ya 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;
Yebá ete lokola ebele ya bafonte ezali na bafonte ya emoji, bilembo mingi ya unicode ya elembo/dingbat oyo emonanaka mingi ekozala lokola ba pictographes ya langi mingi. Emonani na bango ekokesana, engebene lolenge oyo basaleli na fonte ya emoji natif ya navigateur/plateforme, mpe bakozala na bopusi te na lolenge moko ya CSS color.
Yango font-familyesalelami na <body>mpe ezwamaka na ndenge ya automatique na mokili mobimba na kati ya Bootstrap mobimba. Pona ko changer global font-family, mise à jour $font-family-basepe recompiler Bootstrap.
Mitó ya makambo mpe baparagrafe
Ba éléments nionso ya motó ya likambo —ndakisa, <h1>—mpe <p>ezongisami na esika na yango mpo na margin-topkolongola yango. Mitó ya makambo margin-bottom: .5remebakisami mpe baparagrafe margin-bottom: 1remmpo na kotya esika oyo ezali pɛtɛɛ.
| Motó ya likambo | Ndakisa |
|---|---|
<h1></h1> |
h1. Motó ya likambo ya bootstrap |
<h2></h2> |
h2. Motó ya likambo ya bootstrap |
<h3></h3> |
h3. Motó ya likambo ya bootstrap |
<h4></h4> |
h4. Motó ya likambo ya bootstrap |
<h5></h5> |
h5. Motó ya likambo ya bootstrap |
<h6></h6> |
h6. Motó ya likambo ya bootstrap |
Ba liste
Ba liste nyonso— <ul>, <ol>, mpe <dl>—ezali na yango oyo margin-topelongolami mpe a margin-bottom: 1rem. Ba liste oyo ekangami ezali na margin-bottom. To réinitialiser pe ba éléments ya padding-lefton na.<ul><ol>
- Ba liste nionso ezali na marge na yango ya likolo oyo elongolami
- Na marge ya se na bango normalisé
- Ba liste oyo ekangami ezali na marge ya nse te
- Na ndenge wana bazalaka na apparence moko plus égale
- Mingimingi ntango elandi na makambo mingi ya liste
- Padding ya gauche pe ezo réinitialiser
- Tala liste oyo esalemi na ordre
- Na mwa biloko ya liste
- Ezali na lolenge moko ya kotala na mobimba na yango
- Lokola liste ya kala oyo ezalaki na ordre te
Mpo na kosala styling ya pete, hiérarchie ya polele, mpe esika ya malamu koleka, baliste ya bandimbola ezali na margins ya sika. <dd>s kozongisa margin-leftna esika 0mpe kobakisa margin-bottom: .5rem. <dt>s ezali na makomi ya moindo makasi .
- Ba liste ya bandimbola
- Liste ya kolimbola ezali malamu mpenza mpo na kolimbola maloba.
- Liloba
- Ndimbola mpo na liloba yango.
- Ndimbola ya mibale mpo na liloba yango moko.
- Liloba mosusu
- Ndimbola mpo na liloba oyo mosusu.
Code ya kati ya ligne
Envelopper ba fragments ya code inline na <code>. Sala makasi okima ba parenthèses ya angle HTML.
<section>esengeli kozingama lokola inline.
For example, <code><section></code> should be wrapped as inline.
Ba blocs ya code
Salelá <pre>s mpo na milɔngɔ mingi ya code. Encore une fois, sala makasi okima ba parenthèses nionso ya angle na code pona rendu malamu. Elemento <pre>ezo réinitialiser pona kolongola na yango margin-toppe kosalela remba unité pona na yango 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>
Ba variables oyo ezali
Mpo na kolakisa ba variables salela <var>tag.
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
Entrée ya mosaleli
Salelá <kbd>mpo na komonisa bokɔti oyo mbala mingi bakɔtaka na nzela ya klaviatware.
Mpo na kobongisa ba paramètres, finá 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>
Exemple ya sortie
Mpo na kolakisa sortie ya échantillon oyo euti na programme moko salela <samp>tag.
<samp>This text is meant to be treated as sample output from a computer program.</samp>
Bamesa
Ba tableaux ezali mua ajusté na style <caption>s, collapse ba frontières, pe ko assurer consistent text-alignna mobimba. Mbongwana mosusu mpo na bandelo, padding, mpe makambo mosusu eyaka elongo na .tablekelasi .
| Motó ya likambo ya tableau | Motó ya likambo ya tableau | Motó ya likambo ya tableau | Motó ya likambo ya tableau |
|---|---|---|---|
| Cellule ya mesa | Cellule ya mesa | Cellule ya mesa | Cellule ya mesa |
| Cellule ya mesa | Cellule ya mesa | Cellule ya mesa | Cellule ya mesa |
| Cellule ya mesa | Cellule ya mesa | Cellule ya mesa | Cellule ya mesa |
Baformilɛrɛ
Ba éléments ya forme ndenge na ndenge ezo rebooté pona ba styles ya base ya pete. Talá mwa mbongwana oyo eleki ntina:
<fieldset>s ezali na bandelo te, padding te, to marge te mpo ete ekoki kosalelama na pete lokola ba enveloppes mpo na ba entrées individuelles to ba groupes ya ba entrées.<legend>s, lokola ba fieldsets, ebongwani mpe na lolenge mpo elakisama lokola motó ya likambo ya mitindo.<label>s etiamaki nadisplay: inline-blockmpo na kopesa nzelamarginya kosalelama.<input>s,<select>s,<textarea>s, mpe<button>s ezali mingimingi kotalelama na Normalize, kasi Reboot elongolaka bangomarginmpe ebongisiline-height: inherit, mpe.<textarea>s ebongwani mpo na kozala kaka na bonene ya kobongola na ndenge ya vertical lokola kobongola bonene ya horizontal mbala mingi “ebukaka” layout ya lokasa.<button>s mpe<input>ba éléments ya bouton bazali nacursor: pointertango:not(:disabled).
Mbongwana yango, mpe makambo mosusu, emonisami awa na nse.
Soutien ya entrée ya date & couleur
Bobatela na makanisi ba entrées ya date esimbami mobimba te na ba navigateurs nionso, elingi koloba Safari.
Ba pointeurs na ba boutons
Reboot ezali na bobongisi mpo role="button"na kobongola curseur ya liboso na pointer. Bakisa attribut oyo na ba éléments mpo na kosalisa kolakisa ba éléments ezali interactifs. Role oyo ezali nécessaire te pona <button>ba éléments, oyo ezuaka cursorchangement na yango moko.
<span role="button" tabindex="0">Non-button element button</span>
Misc ba éléments
Adresi
Elemento <address>ezongisami na mikolo mpo na kozongisa na esika ya liboso ya navigateur font-styleuta italicna normal. line-heightezali mpe sikawa kozwa libula, mpe margin-bottom: 1remebakisami. <address>s ezali mpo na kolakisa ba sango ya boyokani mpo na nkɔkɔ oyo azali penepene (to nzoto mobimba ya mosala). Bobatela formatage na kosukisa milɔngɔ na <br>.
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890. Ezali ndenge nini? Kombo mobimba
liboso.ya [email protected]
Blockquote ya kosala
Par défaut marginna blockquotes ezali 1em 40px, yango wana to réinitialiser yango na 0 0 1remmpo na eloko moko oyo ezali na boyokani mingi na ba éléments mosusu.
Citation oyo eyebani malamu, oyo ezali na kati ya élément ya blockquote.
Moto moko ya lokumu na Source Title
Ba éléments ya kati ya ligne
Elemento <abbr>ezuaka styling ya base mpo na kosala ete ezala na bokeseni na kati ya makomi ya paragrafe.
Na mokuse
Par défaut cursorna résumé ezali text, yango wana to réinitialiser yango na mpo na pointerko transmettre que élément ekoki ko interagir na yango na ko cliquer na yango.
Mwa makambo ya mikemike
Infos ebele na ba détails.
Kutu makambo mosusu ya mikemike
Talá kutu makambo mosusu oyo etali makambo yango.
[hidden]Attribut ya HTML5
HTML5 ebakisi attribut ya sika ya mokili mobimba na kombo[hidden] , oyo ezali na style lokola display: nonepar défaut. Kodefa likanisi moko uta na PureCSS , tozali kobongisa likolo ya default oyo na kosala [hidden] { display: none !important; }mpo na kosalisa kopekisa ya yango displaykozwa na mbalakaka koleka.
<input type="text" hidden>
Kozanga boyokani ya jQuery
[hidden]ezali compatible te na jQuery's $(...).hide()na ba $(...).show()méthodes. Yango wana, tozali te actuellement surtout endorse [hidden]sur ba techniques mosusu pona ko gérer ba displayya ba éléments.
Pona kaka ko changer visibilité ya élément moko, elingi koloba ya yango displaye modifié te pe élément ekoki kaka ko affecter flux ya document, salela classe na.invisible esika na yango.