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.

He page ah hian

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

Hetah hian ordered list kan rawn tarlang e
List item tlemte nen
Overall look pawh a inang vek a ni
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

Entirna input

Entirnan email

Entirnan telephone

Entirna url

Entirna number

Entirna zawng rawh

Entirna range

Entirnan file input

Entirnan thlang rawh

He checkbox hi check la

Option pakhat chu hei leh chu a ni Option pahnihna hi thil dang a ni bawk a, chu chu heng fancy form controls te wrapping lantir nan super long a ni bawk. Option pathumna chu disable a ni

Entirna textarea

Entirna ni

Entirna hun

Entirna password

Entirnan datetime-local tih ang chi

Entirna kar

Entirna thla

Entirna rawng

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

Reboot leh rawh

Hmachhawn

CSS a danglamna tur a awm

Page a default a ni

Native font stack a awm bawk

Thupui leh paragraph te

Horizontal dan siam a ni

List te a awm

Inline code a awm bawk

Code block a awm bawk

Variables te pawh a awm

User input a ni

Sample output a ni

Table te pawh a awm

Form hrang hrang

Date & color input theihna tur a ni

Button hrang hranga pointer te

Misc element hrang hrang a awm

Chenna hmun

Blockquote a ni

Inline elements te a awm

Khaihtawi

HTML5 [hidden]tih hi a ni

jQuery nena inmil lo

HTML5 `[hidden]`tih hi a ni