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.

Amin'ity pejy ity

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.

CSS variables

Nampiana v5.2.0

Miaraka amin'ny v5.1.1, nanara-penitra ny @imports takianay amin'ny fitambaran'ny CSS rehetra (anisan'izany ny bootstrap.css, bootstrap-reboot.css, ary bootstrap-grid.css) mba hampidirana _root.scss. Izany dia manampy :rootny fari-piainan'ny CSS amin'ny fehezam-boninkazo rehetra, na firy amin'izy ireo no ampiasaina ao anatin'io fonosana io. Amin'ny farany, ny Bootstrap 5 dia hanohy hahita ireo fari-piadidiana CSS fanampiny fanampiny rehefa mandeha ny fotoana, mba hanomezana fanamboarana amin'ny fotoana tena izy nefa tsy mila mamerina ny Sass foana. Ny fomba fiasantsika dia ny maka ireo fari-piadidiana Sass loharano ary manova azy ireo ho fari-piadidiana CSS. Amin'izany fomba izany, na dia tsy mampiasa CSS variables aza ianao dia mbola manana ny herin'ny Sass rehetra. Mbola an-dalam-pandrosoana izany ary mila fotoana hanatanterahana izany.

Ohatra, diniho ireto :rootvariable CSS ireto ho an'ny fomba mahazatra <body>:

  @if $font-size-root != null {
    --#{$prefix}root-font-size: #{$font-size-root};
  }
  --#{$prefix}body-font-family: #{$font-family-base};
  @include rfs($font-size-base, --#{$prefix}body-font-size);
  --#{$prefix}body-font-weight: #{$font-weight-base};
  --#{$prefix}body-line-height: #{$line-height-base};
  --#{$prefix}body-color: #{$body-color};
  @if $body-text-align != null {
    --#{$prefix}body-text-align: #{$body-text-align};
  }
  --#{$prefix}body-bg: #{$body-bg};

Amin'ny fampiharana, ireo variable ireo dia ampiharina amin'ny Reboot toy izao:

body {
  margin: 0; // 1
  font-family: var(--#{$prefix}body-font-family);
  @include font-size(var(--#{$prefix}body-font-size));
  font-weight: var(--#{$prefix}body-font-weight);
  line-height: var(--#{$prefix}body-line-height);
  color: var(--#{$prefix}body-color);
  text-align: var(--#{$prefix}body-text-align);
  background-color: var(--#{$prefix}body-bg); // 2
  -webkit-text-size-adjust: 100%; // 3
  -webkit-tap-highlight-color: rgba($black, 0); // 4
}

Izany dia mamela anao hanao fanamboarana amin'ny fotoana tena izy araka izay tianao:

<body style="--bs-body-color: #333;">
  <!-- ... -->
</body>

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. Ity navigateur default ity dia azo ovaina amin'ny alàlan'ny fanovana ny $font-size-rootvariable.
Mametraka <body>global font-family, font-weight, line-height, ary color. 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

Bootstrap dia mampiasa "stack font native" na "stack font system" ho an'ny famoahana lahatsoratra tsara indrindra amin'ny fitaovana sy OS rehetra. Ireo endri-tsoratra rafitra ireo dia novolavolaina manokana miaraka amin'ireo fitaovana ankehitriny ao an-tsaina, miaraka amin'ny famandrihana nohatsaraina eo amin'ny efijery, fanohanana endri-tsoratra miovaova, sy ny maro hafa. Mamakia bebe kokoa momba ny antontam-peon'ny teratany ato amin'ity lahatsoratra Smashing Magazine ity .

$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,
  // older macOS and iOS
  "Helvetica Neue"
  // Linux
  "Noto Sans",
  "Liberation Sans",
  // Basic web fallback
  Arial,
  // 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 ny fitambaran'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

Fitsipika marindrano

Notsotsotra ilay <hr>singa. Mitovy amin'ny navigateur default, <hr>ny s dia atao amin'ny alàlan'ny border-top, manana default opacity: .25ary mandova ho azy border-coloramin'ny alàlan'ny color, ao anatin'izany ny fotoana colorapetraka amin'ny alàlan'ny ray aman-dreny. Izy ireo dia azo ovaina miaraka amin'ny fampiasa lahatsoratra, sisintany ary opacity.

html

<hr>

<div class="text-success">
  <hr>
</div>

<hr class="border border-danger border-2 opacity-50">
<hr class="border border-primary border-3 opacity-75">

Lisitra

Ny lisitra rehetra— <ul>, <ol>, ary <dl>— dia margin-topnesorina ary a margin-bottom: 1rem. Ny lisitra voatokana dia tsy misy margin-bottom. Naverinay ihany koa ny padding-lefton <ul>sy ny <ol>singa.

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.

Kaody inline

Fonosy sombin-kaody an-tsipika miaraka amin'ny <code>. Ataovy azo antoka fa mandositra ny brackets zoro HTML.

Ohatra, <section>tokony hofonosina toy ny inline.

html

For example, <code>&lt;section&gt;</code> should be wrapped as inline.

Sakana kaody

Ampiasao <pre>s amin'ny andalana maromaro amin'ny kaody. Indray mandeha, ataovy azo antoka fa mandositra ny brackets amin'ny zoro amin'ny kaody mba handikana araka ny tokony ho izy. Ny <pre>singa dia averina mba hanesorana azy margin-topsy hampiasa remireo singa ho an'ny margin-bottom.

<p>Sample text here...</p>
<p>And another line of sample text here...</p>

html

<pre><code>&lt;p&gt;Sample text here...&lt;/p&gt;
&lt;p&gt;And another line of sample text here...&lt;/p&gt;
</code></pre>

hiovaova

Ho an'ny fanondro ny fari-piainana dia ampiasao ny <var>tag.

y = m x + b

html

<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

Fampidirana mpampiasa

Ampiasao ny <kbd>famantarana ny fampidirana izay matetika ampidirina amin'ny klavier.

Raha te hanova lahatahiry dia soraty cdarahin'ny anaran'ny lahatahiry.
Raha hanova ny fanovana dia tsindrio ctrl + ,

html

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>

Santionany vokatra

Mba hanondroana santionany vokatra avy amin'ny programa dia ampiasao ny <samp>tag.

Ity lahatsoratra ity dia natao ho raisina ho santionany vokatra avy amin'ny programa informatika.

html

<samp>This text is meant to be treated as sample output from a computer program.</samp>

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

html

<table>
  <caption>
    This is an example table, and this is its caption to describe the contents.
  </caption>
  <thead>
    <tr>
      <th>Table heading</th>
      <th>Table heading</th>
      <th>Table heading</th>
      <th>Table heading</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
  </tbody>
</table>

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.

Fanohanana fampidirana daty sy loko

Ataovy ao an-tsaina fa ny fampidirana daty dia tsy tohanan'ny navigateur rehetra, izany hoe Safari.

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

html

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

Ny singa fanafohezana HTML .

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.

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

Avereno indray

fomba Fiasa

CSS variables

Pejy tsy mety

Antontan'ny endritsoratra teratany

Lohateny sy fehintsoratra

Fitsipika marindrano

Lisitra

Kaody inline

Sakana kaody

hiovaova

Fampidirana mpampiasa

Santionany vokatra

latabatra

teny

Fanohanana fampidirana daty sy loko

Tondro amin'ny bokotra

singa samihafa

Adiresy

Blockquote

Elements inline

FAMINTINANA

HTML5 [hidden]toetra

jQuery tsy mifanaraka

HTML5 `[hidden]`toetra