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
rem
s na esika yaem
s 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 yamargin
ezali 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
rem
s mpo namargin
s. - Bomba ba déclarations ya
font
ba propriétés oyo etali -na minimum, kosalelainherit
soki likoki ezali.
Ba variables ya CSS
Ebakisami na v5.1.1
Na v5.1.1, to standardiser ba @import
s na biso oyo esengeli na kati ya ba paquets na biso nionso ya CSS (y compris bootstrap.css
, bootstrap-reboot.css
, mpe bootstrap-grid.css
mpo na ko inclure _root.scss
. Yango ebakisi :root
ba variables ya CSS ya niveau na ba paquets nionso, sans considération ya combien na yango esalemi na ba paquets wana. Na suka Bootstrap 5 ekolanda kosala tala ba variables CSS mingi oyo ebakisami na tango.
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-sizing
ezali na mokili mobimba oyo etyami likoló na eloko nyonso —bakisa mpe*::before
mpe*::after
, naborder-box
. Yango esalaka ete bonene ya élément oyo esakolami eleka jamais mpo na remplissage to ndelo.- Base
font-size
moko te esakolami na<html>
, kasi16px
ekanisami (ya navigateur par défaut).font-size: 1rem
ezali 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 basaleli mpe ko assurer approche moko ya accessible mingi. Défaut oyo ya navigateur ekoki kozala overridé na ko modifier$font-size-root
variable.
- 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-family
esalelami 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-base
pe recompiler Bootstrap.
Ba variables ya CSS
Lokola Bootstrap 5 ezali kokoba kokola, ba styles mingi mpe mingi ekotongama na ba variables CSS lokola moyen ya kopesa personnalisation mingi na temps réel sans besoin ya ko recompiler toujours Sass. Approche na biso ezali ya kozua ba variables na biso ya Sass source pe ko transformer yango na ba variables CSS. Na ndenge wana, ata osaleli ba variables ya CSS te, ozali kaka na puissance nionso ya Sass. Yango ezali naino kosalama mpe ekozwa ntango mpo na kosalela yango mobimba.
Ndakisa, tala ba :root
variables oyo ya CSS pona ba <body>
styles communs:
@if $font-size-root != null {
--#{$variable-prefix}root-font-size: #{$font-size-root};
}
--#{$variable-prefix}body-font-family: #{$font-family-base};
--#{$variable-prefix}body-font-size: #{$font-size-base};
--#{$variable-prefix}body-font-weight: #{$font-weight-base};
--#{$variable-prefix}body-line-height: #{$line-height-base};
--#{$variable-prefix}body-color: #{$body-color};
@if $body-text-align != null {
--#{$variable-prefix}body-text-align: #{$body-text-align};
}
--#{$variable-prefix}body-bg: #{$body-bg};
Na pratique, ba variables wana ezo appliqué sima na Reboot lokola boye:
body {
margin: 0; // 1
font-family: var(--#{$variable-prefix}body-font-family);
@include font-size(var(--#{$variable-prefix}body-font-size));
font-weight: var(--#{$variable-prefix}body-font-weight);
line-height: var(--#{$variable-prefix}body-line-height);
color: var(--#{$variable-prefix}body-color);
text-align: var(--#{$variable-prefix}body-text-align);
background-color: var(--#{$variable-prefix}body-bg); // 2
-webkit-text-size-adjust: 100%; // 3
-webkit-tap-highlight-color: rgba($black, 0); // 4
}
Oyo epesaka yo nzela ya kosala ba personnalisations en temps réel ndenge nini olingi:
<body style="--bs-body-color: #333;">
<!-- ... -->
</body>
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-top
kolongola yango. Mitó ya makambo margin-bottom: .5rem
ebakisami mpe baparagrafe margin-bottom: 1rem
mpo 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-top
elongolami mpe a margin-bottom: 1rem
. Ba liste oyo ekangami ezali na margin-bottom
. To réinitialiser pe ba éléments ya padding-left
on na.<ul>
<ol>
- Ba liste nionso ezali na marge na yango ya likolo oyo elongolami
- Et marge inférieure na bango e normaliser
- 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 margin
s ya sika. <dd>
s kozongisa margin-left
na esika 0
mpe 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-top
pe kosalela rem
ba 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
Bamesa ebongisami mwa moke na lolenge <caption>
s, bandelo ya kokwea, mpe kosala ete ezala ntango text-align
nyonso. Mbongwana ya kobakisa mpo na bandelo, padding, mpe mingi mosusu eyaka elongo na .table
kelasi .
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 e 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-block
mpo na kopesa nzelamargin
ya kosalelama.<input>
s,<select>
s,<textarea>
s, mpe<button>
s ezali mingimingi kotalelama na Normalize, kasi Reboot elongolaka bangomargin
mpe 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: pointer
tango: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 cursor
changement 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-style
uta italic
na normal
. line-height
ezali mpe sikawa libula, mpe margin-bottom: 1rem
ebakisami. <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 margin
na blockquotes ezali 1em 40px
, yango wana to réinitialiser yango na 0 0 1rem
mpo 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 cursor
na résumé ezali text
, yango wana to réinitialiser yango na mpo na pointer
ko 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: none
par 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 display
kozwa 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 display
ya ba éléments.
Pona kaka ko changer visibilité ya élément moko, elingi koloba ya yango display
e modifié te pe élément ekoki kaka ko affecter flux ya document, salela classe na.invisible
esika na yango.