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.

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.
  • The <body>pawhin global font-family, line-height, leh text-align. 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 4-ah hian default web font (Helvetica Neue, Helvetica, leh Arial) te chu paih a ni a, device leh OS tinah text rendering tha ber neih theih nan “native font stack” hmangin thlak a ni. Native font stack chungchang hi he Smashing Magazine article ah hian chhiar belh rawh .

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

Font stack-ah hian emoji fonts a awm avangin, common symbol/dingbat Unicode character tam tak chu multi-colored pictograph angin a 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

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.

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

Preformat tawh thuziak

Element chu a paih chhuah a, a tan unit hman <pre>turin reset a ni.margin-topremmargin-bottom

.entirna-element { .
  margin-a hnuai lam: 1rem;
} a ni.

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

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

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

A rilru a buai em em a, a rilru a hah em em bawk a. Nulla attr vitae elit libero, a pharetra augue.

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. [hidden]IE10-in native-a a support loh laiin , kan CSS-a explicit declaration chuan chu harsatna chu a paltlang a ni.

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