Source

Avereno indray

Reboot, fitambarana fanovana CSS manokana amin'ny singa iray ao anaty rakitra tokana, kickstart Bootstrap mba hanomezana tsipika kanto, tsy miovaova ary tsotra hananganana azy.

fomba Fiasa

Reboot dia miorina amin'ny Normalize, manome singa HTML maro miaraka amin'ny fomba fijery somary tsy misy afa-tsy amin'ny alàlan'ny fisafidianana singa. Ny styling fanampiny dia atao amin'ny kilasy ihany. Ohatra, averinay indray ny <table>fomba sasany ho an'ny tondrozotra tsotra kokoa ary avy eo dia manome .table, .table-bordered, sy ny maro hafa.

Ireto ny torolalana sy antony hisafidianana izay hosoloina amin'ny Reboot:

Havaozy ny soatoavin'ny navigateur sasany hampiasaina rems fa tsy ems ho an'ny elanelan'ny singa azo esorina.
Halaviro margin-top. Mety hirodana ny sisiny mitsangana, ka miteraka vokatra tsy ampoizina. Ny tena zava-dehibe anefa, ny tari-dalana tokana margindia modely ara-tsaina tsotra kokoa.
Mba hanamafisana kokoa ny haben'ny fitaovana, ny singa sakana dia tokony hampiasa rems ho an'ny margins.
Tazony fontho faran'izay kely ny fanambaràna momba ny fananana mifandraika amin'izany, inheritraha azo atao.

Pejy tsy mety

Ny <html>sy <body>ny singa dia nohavaozina mba hanomezana default tsara kokoa manerana ny pejy. manokana kokoa:

Ny box-sizingdia napetraka maneran-tany amin'ny singa rehetra—anisan'izany *::beforeny *::after, to border-box. Izany dia miantoka fa ny sakan'ny singa nambara dia tsy mihoatra na oviana na oviana noho ny padding na sisintany.
Tsy misy fototra font-sizeambara amin'ny <html>, fa 16pxheverina (ny navigateur default). font-size: 1remdia ampiharina amin'ny <body>karazana-scaling mora mamaly amin'ny alàlan'ny fangatahan'ny haino aman-jery sady manaja ny safidin'ny mpampiasa ary miantoka ny fomba azo idirana kokoa.
Mametraka <body>global font-family, line-height, ary text-align. Ity dia nolovain'ny singa endrika sasany mba hisorohana ny tsy fitovian'ny endritsoratra.
Ho an'ny fiarovana, ny <body>manana nambara background-color, default amin'ny #fff.

Antontan'ny endritsoratra teratany

Ny endri-tsoratra an-tranonkala (Helvetica Neue, Helvetica, ary Arial) dia natsipy tao amin'ny Bootstrap 4 ary nosoloina "stack font native" ho an'ny famoahana lahatsoratra tsara indrindra amin'ny fitaovana sy OS rehetra. Mamakia bebe kokoa momba ny antontam-peon'ny teratany ato amin'ity lahatsoratra Smashing Magazine ity .

$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, sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;

Izany font-familydia ampiharina amin'ny <body>ary nolovaina ho azy maneran-tany manerana ny Bootstrap. Raha hanova ny global font-family, manavao $font-family-baseary mamerina indray ny Bootstrap.

Lohateny sy fehintsoratra

Ny singa lohateniny rehetra—ohatra, <h1>—ary <p>averina ho margin-topesorina. Nampiana lohateny margin-bottom: .5remsy fehintsoratra margin-bottom: 1remho mora ny elanelana.

sasin-tenin'ny	OHATRA
`<h1></h1>`	h1. Lohatenin'ny bootstrap
`<h2></h2>`	h2. Lohatenin'ny bootstrap
`<h3></h3>`	h3. Lohatenin'ny bootstrap
`<h4></h4>`	h4. Lohatenin'ny bootstrap
`<h5></h5>`	h5. Lohatenin'ny bootstrap
`<h6></h6>`	h6. Lohatenin'ny bootstrap

Lisitra

Ny lisitra rehetra— <ul>, <ol>, ary <dl>— dia margin-topnesorina ary a margin-bottom: 1rem. Tsy misy lisitra voatokana margin-bottom.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem sy massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem sy massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

Ho an'ny fomba tsotra kokoa, ambaratonga mazava, ary elanelana tsara kokoa, ny lisitry ny famaritana dia nohavaozina margins. <dd>s reset margin-leftary 0ampio margin-bottom: .5rem. <dt>s dia matavy .

Lisitry ny famaritana: Ny lisitry ny famaritana dia tonga lafatra amin'ny famaritana ny teny.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem.; Donec id elit non mi porta gravida and eget metus.
Malesuada porta: Etiam porta sem malesuada magna mollis euismod.

Lahatsoratra efa namboarina mialoha

Ny <pre>singa dia averina mba hanesorana azy margin-topsy hampiasa remireo singa ho an'ny margin-bottom.

.example-element {
  sisiny-ambany: 1rem;
}

latabatra

Ny latabatra dia amboarina kely amin'ny fomba <caption>s, mirodana ny sisin-tany, ary miantoka ny tsy fitovian'ny text-alignrehetra. Ny fanovana fanampiny ho an'ny sisin-tany, ny padding, ary ny maro hafa dia tonga miaraka amin'ny .tablekilasy .

Ity dia tabilao ohatra, ary ity no lohateny entiny ilazana ny votoatiny.
Lohatenin'ny latabatra	Lohatenin'ny latabatra	Lohatenin'ny latabatra	Lohatenin'ny latabatra
Efitra latabatra	Efitra latabatra	Efitra latabatra	Efitra latabatra
Efitra latabatra	Efitra latabatra	Efitra latabatra	Efitra latabatra
Efitra latabatra	Efitra latabatra	Efitra latabatra	Efitra latabatra

teny

Ny singa endrika isan-karazany dia naverina naverina ho an'ny fomba fototra tsotra kokoa. Ireto ny sasany amin'ireo fiovana misongadina indrindra:

<fieldset>Tsy manana sisin-tany, padding, na sisiny izy ireo mba ho mora ampiasaina ho famonosana ho an'ny fampidirana tsirairay na vondrona fampidirana.
<legend>s, toy ny fieldsets, dia navaozina ihany koa mba haseho ho lohatenin'ny karazana.
<label>s dia apetraka mba display: inline-blockavela marginhampiharina.
<input>s, <select>s, <textarea>s, ary <button>s dia matetika no resahin'ny Normalize, fa ny Reboot dia manala azy ireo marginary line-height: inheritkoa.
<textarea>s dia ovaina ho azo ovaina mitsangana fotsiny satria matetika "manapaka" ny fisehon'ny pejy ny fanovana ny haben'ny horizontaly.
<button>s sy ny <input>bokotra singa manana cursor: pointerrehefa :not(:disabled).

Ireo fiovana ireo sy ny maro hafa dia aseho eto ambany.

singa samihafa

Adiresy

Havaozina ny <address>singa mba hamerenana ny default amin'ny navigateur font-stylemanomboka italicamin'ny normal. line-heightefa lova koa ankehitriny, ary margin-bottom: 1remnampiana. <address>s dia ny fanolorana fampahalalana mifandray amin'ny razambe akaiky indrindra (na asa iray manontolo). Tehirizo ny fandrafetana amin'ny famaranana andalana miaraka amin'ny <br>.

Twitter, Inc.
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890

Anarana feno
[email protected]

Blockquote

Ny default marginamin'ny blockquotes dia 1em 40px, noho izany dia averinay izany 0 0 1remho zavatra mifanaraka kokoa amin'ny singa hafa.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Olona malaza amin'ny Lohateny Loharano

Elements inline

Ny <abbr>singa dia mahazo styling fototra mba hampisongadina azy amin'ny lahatsoratra andalana.

Nulla attr vitae elit libero, a pharetra augue.

FAMINTINANA

Ny default cursoramin'ny famintinana dia text, noho izany dia averinay izany pointermba hampita fa ny singa dia azo ifandraisana amin'ny fipihana azy.

Ny antsipiriany sasany

Fanazavana bebe kokoa momba ny antsipiriany.

Ny antsipiriany bebe kokoa

Ireto misy antsipiriany bebe kokoa momba ny antsipiriany.

HTML5 `[hidden]`toetra

HTML5 dia manampy toetra manerantany vaovao antsoina hoe[hidden] , izay atao display: noneamin'ny fomba mahazatra. Mindrana hevitra avy amin'ny PureCSS , manatsara an'io default io izahay amin'ny alàlan'ny [hidden] { display: none !important; }fanampiana amin'ny fisorohana azy displaytsy ho voasoloky tsy nahy. Na [hidden]dia tsy tohanan'ny IE10 ho an'ny teratany aza, ny fanambarana mazava ao amin'ny CSS-nay dia mamaha io olana io.

<input type="text" hidden>

jQuery tsy mifanaraka

[hidden]dia tsy mifanaraka amin'ny jQuery $(...).hide()sy ny $(...).show()fomba. Noho izany, tsy manohana manokana [hidden]ny teknika hafa amin'ny fitantanana ny displaysinga izahay amin'izao fotoana izao.

Raha te hanova fotsiny ny fahitan'ny singa iray, midika displayizany fa tsy ovaina ary mbola mety hisy fiantraikany amin'ny fandehan'ny antontan-taratasy ilay singa, ampiasao ny .invisiblekilasy .