Main content ah kal rawh Docs navigation ah kal rawh
Check
in English

Reboot leh rawh

Reboot, element-specific CSS inthlak danglamna file pakhata dahkhawmna, Bootstrap chu kickstart la, baseline mawi tak, inmil leh awlsam tak siam turin a siam ang.

Hmachhawn

Reboot hian Normalize a siam a, HTML element tam tak chu element selector chauh hmangin opinionated style engemaw zat a pe a ni. Additional styling hi class-ah chauh tih a ni. Entirnan, <table>style thenkhat chu baseline awlsam zawk atan kan reboot a, a hnuah .table, .table-bordered, leh a dangte kan pe leh thin.

Reboot-a override tur kan thlan chhan leh kan kaihhruaina leh chhante chu hetiang hi a ni:

  • Browser default value thenkhat chu scalable component spacing atan rems aiah s hmang turin update rawh.em
  • A pumpelh tur margin-topa ni . Vertical margin te chu a tlakbuak thei a, beisei loh result a chhuak thei bawk. Mahse, a pawimawh zawk chu, direction of pakhat marginchu rilru model awlsam zawk a ni.
  • Device size hrang hranga scaling awlsam zawk nan block element te hian rems atan margins an hmang tur a ni.
  • font-related property declaration te chu a tlem berah dah la, a inherittheih phawt chuan hmang rawh.

CSS a danglamna tur a awm

v5.2.0 ah dah belh a ni

@importv5.1.1 hmang hian kan CSS bundle zawng zawng ( bootstrap.css, bootstrap-reboot.css, leh bootstrap-grid.css) te pawh huamin kan mamawh s te chu kan standardise a , _root.scss. Hei hian :rootbundle zawng zawngah level CSS variable a belh vek a, chu bundle-ah chuan engzat nge hman a nih pawhin. A tawpah chuan Bootstrap 5 hian hun kal zelah CSS variable tam zawk a dah belh zel dawn a, chu chu Sass recompile reng ngai lovin real-time customization tam zawk pek theih nan a ni. Kan kalphung chu kan source Sass variable te hi la in CSS variable ah kan chantir thin. Chutiang chuan CSS variable i hmang lo a nih pawhin Sass thiltihtheihna zawng zawng chu i la nei vek a ni. Hei hi a la kal zel a, a taka kalpui theih nan hun a duh dawn a ni.

Entirnan, style :roottlangpui atan heng CSS variable te hi han ngaihtuah teh:<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};
  

Practice-ah chuan chu variable te chu Reboot ah hetiang hian kan apply leh thin:

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
}

Chu chuan i duh angin real-time customization i siam thei a ni:

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

Page a default a ni

The <html>and <body>elements te hi update a ni a, page-wide default tha zawk a awm theih nan. A bik takin:

  • The box-sizingchu element tin chungah globally set a ni— *::beforeleh *::after, to border-box. Hei hian padding emaw border emaw avanga element zau zawng puan tawh chu a pelh ngai lo tih a tichiang a ni.
    • , ah hian base font-sizea puang lo a <html>, mahse 16pxassumed (browser default) a ni. font-size: 1remis applied on the <body>for easy responsive type-scaling via media queries chutih rualin user duhzawng zah chungin leh awlsam zawka hman theih a nih theih nan. $font-size-rootHe browser default hi variable siam danglamin override theih a ni .
  • The <body>pawhin global font-family, font-weight, line-height, leh color. Hei hi a hnuah form element thenkhatin font inmil lohna tur ven nan an inherit thin.
  • Hriselna atan chuan, the <body>has a declared background-color, defaulting to #fff.

Native font stack a awm bawk

Bootstrap hian device leh OS tinah text rendering tha ber tur atan “native font stack” emaw “system font stack” emaw a hmang thin. Heng system font te hi tunlai device te ngaihtuah chungin a bik taka siam a ni a, screen-a rendering tihchangtlun te, variable font support te leh thil dang tam tak a awm bawk. Native font stack chungchang hi he Smashing Magazine article ah hian chhiar belh rawh .

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

Font stack-ah hian emoji fonts a awm avangin, common symbol/dingbat Unicode character tam tak chu multicolored pictograph angin an render dawn tih hre reng ang che. An hmel lan dan a inang lo ang a, browser/platform-a native emoji font-a style hman dan azirin, CSS colorstyle engmahin a nghawng dawn lo.

Hei hi Bootstrap pumpuiah global-in automatic-a inherited- font-familyah hman a ni. <body>Global switch tur chuan Bootstrap font-familychu update $font-family-basela, recompile rawh.

Thupui leh paragraph te

Heading element zawng zawng—eg, <h1>—leh <p>an margin-toppaih chhuah theih nan reset vek an ni. Headings te margin-bottom: .5remdah belh leh paragraph margin-bottom: 1remte pawh awlsam taka inhlat theih nan.

Heading tih a ni Entirna
<h1></h1> h1. Bootstrap tih thupui hmangin
<h2></h2> h2. Bootstrap tih thupui hmangin
<h3></h3> h3. Bootstrap tih thupui hmangin
<h4></h4> h4. Bootstrap tih thupui hmangin
<h5></h5> h5. Bootstrap tih thupui hmangin
<h6></h6> h6. Bootstrap tih thupui hmangin

Horizontal dan siam a ni

<hr>Element chu tih awlsam a ni tawh . Browser default ang bawkin <hr>s pawh hi style hmangin an style a border-top, default an nei a opacity: .25, automatic in an border-colorvia an inherit a, chutah chuan parent hmanga set a colornih hunah pawh a tel . colorText, border, leh opacity utilities hmangin an siam danglam thei bawk.





html tih a ni
<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">

List te a awm

List zawng zawng— <ul>, <ol>, leh —chu <dl>an margin-toppaih vek a, a margin-bottom: 1rem. Nested list te hian an nei lo margin-bottom. padding-leftOn <ul>leh <ol>elements te pawh kan reset tawh bawk .

  • List zawng zawngah hian an top margin tihbo vek a ni
  • Tin, an bottom margin chu a normal ta a ni
  • Nested list te hian bottom margin an nei lo
    • Chutiang chuan hmel inang zawk an nei a ni
    • A bik takin list item tam zawkin an zui hunah
  • Left padding pawh reset a ni tawh bawk
  1. Hetah hian ordered list kan rawn tarlang e
  2. List item tlemte nen
  3. Overall look pawh a inang vek a ni
  4. A hmaa unordered list ang khan

Styling awlsam zawk, hierarchy chiang zawk, leh spacing tha zawk neih nan description list-ah margins updated a awm a. <dd>s reset margin-leftleh 0add margin-bottom: .5rem. <dt>s chu bold takin a ziak a .

Thuziak list te a awm
Description list hi terms sawifiahna atan a tha ber.
Hunbi
Thumal awmzia sawifiahna.
Thumal khata hrilhfiahna pahnihna.
Term dang a ni leh bawk
He thumal dang awmzia sawifiahna.

Inline code a awm bawk

Code inline snippet te chu <code>. HTML angle bracket atang hian tlanchhuah ngei ngei tur a ni.

Entirnan, <section>inline angin wrapped tur a ni.
html tih a ni
For example, <code>&lt;section&gt;</code> should be wrapped as inline.

Code block a awm bawk

<pre>Code line tam tak atan s hmang ang che . Vawi khat chu rendering dik tak neih theih nan code chhunga angle bracket awm zawng zawng chu escape ngei ngei tur a ni. Element chu a paih chhuah a, a tan unit hman <pre>turin reset a ni.margin-topremmargin-bottom

<p>Sample text here...</p>
<p>And another line of sample text here...</p>
html tih a ni
<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>

Variables te pawh a awm

Variable tarlanna atan <var>tag hmang ang che.

y = m x + b tih a ni
html tih a ni
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

User input a ni

<kbd>Keyboard hmanga input luh tlangpui chu entir nan hmang rawh .

Directory thlak tur chuan a cdhnuaiah directory hming ziak la.
Settings edit tur chuan press rawh ctrl + ,
html tih a ni
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>

Sample output a ni

Program atanga sample output tarlanna atan <samp>tag hmang ang che.

He thuziak hi computer program atanga sample output anga ngaih tur a ni.
html tih a ni
<samp>This text is meant to be treated as sample output from a computer program.</samp>

Table te pawh a awm

Table te chu style <caption>s angin tlem an siamrem a, border te chu collapse a ni a, a chhung zawngin a inmil theih nan a enkawl text-alignbawk. Border, padding, leh thil dang dang tihdanglamna chu .tableclass nen a rawn thleng a ni .

Hei hi entirnan table a ni a, hei hi a chhunga thu awmte sawifiahna atana a caption a ni.
Table thupuiah hian Table thupuiah hian Table thupuiah hian Table thupuiah hian
Table cell a ni Table cell a ni Table cell a ni Table cell a ni
Table cell a ni Table cell a ni Table cell a ni Table cell a ni
Table cell a ni Table cell a ni Table cell a ni Table cell a ni
html tih a ni
<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>

Form hrang hrang

Base style awlsam zawk siam nan form element hrang hrang reboot a ni tawh bawk. A danglamna langsar zual thenkhat chu hetiang hi a ni:

  • <fieldset>s te hian border, padding, margin an neih loh avangin awlsam takin input pakhat zel emaw input group hrang hrang atan wrapper atan an hmang thei a ni.
  • <legend>s pawh fieldset ang bawkin heading of sorts anga tarlan theih turin restyle a ni bawk.
  • <label>s chu hman display: inline-blockphalsak turin set margina ni.
  • <input>s, <select>s, <textarea>s, leh <button>s te hi Normalize hian a address tam ber a, mahse Reboot hian an marginleh set line-height: inherit, pawh a paih chhuak thin.
  • <textarea>s chu horizontal resizing hian page layout a “break” fo avangin vertical-a resizable chauh a nih theih nan siam danglam a ni.
  • <button>s leh <input>button element te hian cursor: pointerengtik laiin nge :not(:disabled).

Heng inthlak danglamna te, leh a dangte hi a hnuaiah hian tarlan a ni.

Entirna legend

100 a ni

Date & color input theihna tur a ni

Date inputs hi browser zawng zawngin an support kim lo tih hre reng ang che , chu chu Safari a ni.

Button hrang hranga pointer te

Reboot ah hian enhancement a awm a, role="button"chu chu default cursor chu pointer. He attribute hi element-ah te dah la, element-te chu interactive an nihzia tilang turin a pui ang. He role hi <button>element hrang hrangte tan chuan a tul lo va, anmahni cursorinthlak danglamna an hmu thin.

Button ni lo element button a awm bawk
html tih a ni
<span role="button" tabindex="0">Non-button element button</span>

Misc element hrang hrang a awm

Chenna hmun

Element <address>chu update a ni a, browser default font-stylechu italicto normal. line-heightpawh tunah chuan rochun a margin-bottom: 1remni tawh a, tih belh a ni tawh bawk. <address>s chu pi leh pu hnai ber (a nih loh leh hnathawh pum pui) biak theihna tur information tarlanna atan a ni. Line te chu <br>.


A rilru a hah lutuk chuan a rilru a buai em em a, a rilru a hah lutuk chuan a rilru a buai em em bawk a. 1355 Market St, Suite 900
San Francisco, CA 94103 P
: (123) 456-7890
Hming kimchang
hmasa [email protected]

Blockquote a ni

marginBlockquotes-a default chu , a nih avangin chu chu element dang nena inmil zawk thil atan 1em 40pxkan reset a ni.0 0 1rem

Quote hriat hlawh tak, blockquote element chhunga awm.

Source Title -a mi hmingthang tak

Inline elements te a awm

Element hian <abbr>paragraph text zingah a langsar theih nan basic styling a dawng a ni.

HTML tawifelna element chu a ni .

Khaihtawi

cursorSummary-a default chu text, a nih avangin chu chu kan reset a, pointerchu chu element chu click-in a inzawm theih thu hriattir turin kan reset a ni.

A chipchiar deuh deuh

A chipchiar zawka hriat belh duh tan.

Chu aia chipchiar zawk pawh

Hetah hian chipchiar zawkin a chipchiar zawkin kan rawn tarlang e.

HTML5 [hidden]tih hi a ni

HTML5 hian global attribute thar a rawn dah belh a, a hming chu[hidden]display: none , a ni a, chu chu default angin a style a ni. Borrowing an idea from PureCSS , kan siam that a, he default hi kan siam that a, a accidentally overridden [hidden] { display: none !important; }loh nan tanpui turin kan siam a displayni.

<input type="text" hidden>
jQuery nena inmil lo

[hidden]jQuery's $(...).hide()leh $(...).show()methods te nen a inmil lo. Chuvangin, tun dinhmunah chuan of elements [hidden]enkawl dan tur technique dang aiin kan endorse bik lo .display

Element pakhat visibility toggle mai tur, a displaysiam danglam loh leh element chuan document flow a la nghawng thei tihna a ni a, chu ai chuan .invisibleclass hmang zawk rawh.