Source

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, sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;

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.

  • Lorem ipsum dolor thu amet
  • A rilru a buai em em a, a rilru a hah em em bawk a
  • Integer molestie lorem chu massa ah a awm a
  • Facilisis ah hian a awm a
  • Nulla volutpat a ni a, a hlimthla a ni
    • Phasellus iaculis chu a lo chhuak a
    • Purus sodales chu a hring chhuak thin
    • A rilru a buai em em a, a rilru a hah em em bawk a
    • A rilru a buai em em a, a rilru a hah em em bawk a. Ac tristique libero volutpat at
  • A rilru a buai em em a, a rilru a hah em em bawk a. Faucibus porta lacus fringilla vel
  • Aenean thu amet erat nunc
  • Eget porttitor lorem a ni
  1. Lorem ipsum dolor thu amet
  2. A rilru a buai em em a, a rilru a hah em em bawk a
  3. Integer molestie lorem chu massa ah a awm a
  4. Facilisis ah hian a awm a
  5. Nulla volutpat a ni a, a hlimthla a ni
  6. A rilru a buai em em a, a rilru a hah em em bawk a. Faucibus porta lacus fringilla vel
  7. Aenean thu amet erat nunc
  8. Eget porttitor lorem a ni

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.
Euismod tih a ni
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. eget lacinia odio sem.
Donec id elit non mi porta gravida chu eget metus ah a awm a.
Malesuada chu a ni
A rilru a buai em em a, a rilru a hah em em bawk a. Etiam porta sem malesuada magna mollis euismod.

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.

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

Entirna legend

100 a ni

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

A rilru a buai em em a, a rilru a hah em em bawk a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere chu a ante a ni.

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.