Source

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 na 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 (ya navigateur par défaut). 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 basaleli 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 OS X and iOS (San Francisco)
  -apple-system,
  // Chrome < 56 for OS X (San Francisco)
  BlinkMacSystemFont,
  // Windows
  "Segoe UI",
  // Android
  "Roboto",
  // Basic web fallback
  "Helvetica Neue", Arial, sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;

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.

  • Lorem ipsum dolor vanda amet
  • Consectetur elit oyo ezali na mafuta
  • Moléstie ya motángo mobimba lorem na massa
  • Facilisis na aliquet ya nisl ya prétium
  • Nulla volutpat azali na nzoto kolɔngɔnɔ
    • Eloko oyo babengi Phasellus iaculis neque
    • Ba sodales ya purus ba ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libéré volutpat na
  • Faucibus porta lacus oyo ezali na mpɛmbɛ
  • Aenean afanda amet erat nunc
  • Eget porttitor lorem na kombo ya nzambe
  1. Lorem ipsum dolor vanda amet
  2. Consectetur elit oyo ezali na mafuta
  3. Moléstie ya motángo mobimba lorem na massa
  4. Facilisis na aliquet ya nisl ya prétium
  5. Nulla volutpat azali na nzoto kolɔngɔnɔ
  6. Faucibus porta lacus oyo ezali na mpɛmbɛ
  7. Aenean afanda amet erat nunc
  8. Eget porttitor lorem na kombo ya nzambe

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.
Euismod
Vestibulum id ligula porta felis euismod semper ezwa lacinia odio sem.
Donec id elit non mi porta gravida na eget metus.
Malesuada ezali porta
Etiam porta sem malesuada ya monene ya mollis euismod.

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.

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

Ndakisa ya lisapo

100

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

Lorem ipsum dolor vanda amet, consectetur elit oyo ezo boma nzoto. Motango mobimba posuere erat a ante.

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.