in English

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 ya ems 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 ya marginezali 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 na margins.
  • Bomba ba déclarations ya fontba propriétés oyo etali -na minimum, kosalela inheritsoki 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, na border-box. Yango esalaka ete bonene ya élément oyo esakolami eleka jamais mpo na remplissage to ndelo.
  • Base font-sizemoko te esakolami na <html>, kasi 16pxekanisami (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.
  • The <body>mpe etie un global font-family, line-height, mpe text-align. Yango ezwamaka na sima na ba éléments ya formulaire mosusu mpo na kopekisa inconsistance ya fonte.
  • Mpo na bokengi, the <body>azali na esakolaki background-color, kozanga kokokisa na #fff.

Stack ya ba fonts native

Ba fonts web ya défaut (Helvetica Neue, Helvetica, mpe Arial) elongolami na Bootstrap 4 mpe e remplacé na “stack ya ba fonts native” mpo na rendu ya texte ya malamu na appareil nionso mpe na OS. Tanga mingi na ntina ya ba stacks ya ba fonts natifs na article oyo ya Smashing Magazine .

$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;

Yeba ete lokola ebele ya bafonte ezali na bafonte ya emoji, bilembo mingi ya Unicode ya elembo/dingbat oyo emonanaka mingi ekosalama 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.

  • 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
  1. Tala liste oyo esalemi na ordre
  2. Na mwa biloko ya liste
  3. Ezali na lolenge moko ya kotala na mobimba na yango
  4. 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.

Mokanda oyo esalemi liboso

Elemento <pre>ezo réinitialiser pona kolongola na yango margin-toppe kosalela remba unité pona na yango margin-bottom.

.ndakisa-elemento { .
  margin-na nse: 1rem;
} .

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 .

Oyo ezali tableau ya ndakisa, mpe oyo ezali caption na yango mpo na kolimbola makambo oyo ezali na kati.
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 na display: inline-blockmpo na kopesa nzela marginya kosalelama.
  • <input>s, <select>s, <textarea>s, mpe <button>s ezali mingimingi kotalelama na Normalize, kasi Reboot elongolaka bango marginmpe ebongisi line-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 na cursor: pointertango :not(:disabled).

Mbongwana yango, mpe makambo mosusu, emonisami awa na nse.

Ndakisa ya lisapo

100

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.

Bouton ya élément oyo ezali ya bouton te 
<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>.

Twitter, Inc.
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.

Nulla attr vitae elit libero, augue moko ya ba pharetra.

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. Alors que [hidden]ezali nativement soutenu te na IE10, déclaration explicite na CSS na biso ezuaka autour ya problème wana.

<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.