in English

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 tsipika fototra 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,
  // 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;

Mariho fa satria misy endri-tsoratra emoji ao amin'ny fonon'ny endri-tsoratra, maro ireo tarehin-tsoratra Unicode marika/dingbat mahazatra no hadika ho sary miloko maro loko. Hiovaova ny endrik'izy ireo, miankina amin'ny fomba ampiasaina amin'ny endri-tsoratra emoji teratany an'ny navigateur/sehatra, ary tsy hisy fiantraikany amin'ny colorendrika CSS izy ireo.

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. Ny lisitra voatokana dia tsy misy margin-bottom.

Ny lisitra rehetra dia nesorina ny sisiny ambony
Ary nilamina ny sisiny ambany
Tsy misy sisiny ambany ny lisitra voatokana
- Amin'izany fomba izany dia manana endrika mirindra kokoa izy ireo
- Indrindra rehefa arahin'ny lisitra maromaro kokoa
Naverina ihany koa ny padding havia

Ity misy lisitra voalamina
Miaraka amin'ny lisitra vitsivitsy
Mitovy endrika amin'ny ankapobeny izy io
Toy ny lisitra tsy voalamina teo aloha

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.
teny: Famaritana ny teny.; Famaritana faharoa amin'ny teny mitovy.
Teny iray hafa: Famaritana ho an'ity teny hafa ity.

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 fitoviana text-alignmanerana. Ny fanovana fanampiny ho an'ny sisin-tany, ny padding, ary ny maro hafa dia tonga miaraka amin'ny .tablekilasy .

Tabilao ohatra ity, ary ity no lohateniny hamaritana ny ao anatiny.
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.

Tondro amin'ny bokotra

Ny reboot dia misy fanatsarana role="button"hanovana ny cursor default ho pointer. Ampio amin'ny singa ity toetra ity mba hanondroana ny singa mifanentana. Ity andraikitra ity dia tsy ilaina amin'ny <button>singa, izay mahazo ny cursorfanovana azy manokana.

Bokotra singa tsy misy bokotra

<span role="button" tabindex="0">Non-button element button</span>

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.

Teny nalaina fanta-daza, voarakitra ao anaty singa blockquote.

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 .