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
rem
s aiah s hmang turin update rawh.em
- A pumpelh tur
margin-top
a ni . Vertical margin te chu a tlakbuak thei a, beisei loh result a chhuak thei bawk. Mahse, a pawimawh zawk chu, direction of pakhatmargin
chu rilru model awlsam zawk a ni. - Device size hrang hranga scaling awlsam zawk nan block element te hian
rem
s atanmargin
s an hmang tur a ni. font
-related property declaration te chu a tlem berah dah la, ainherit
theih 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-sizing
chu element tin chungah globally set a ni—*::before
leh*::after
, toborder-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-size
a puang lo a<html>
, mahse16px
assumed (browser default) a ni.font-size: 1rem
is 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.
- , ah hian base
- The
<body>
pawhin globalfont-family
,line-height
, lehtext-align
. Hei hi a hnuah form element thenkhatin font inmil lohna tur ven nan an inherit thin. - Hriselna atan chuan, the
<body>
has a declaredbackground-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 .
Hei hi Bootstrap pumpuiah global-in automatic-a inherited- font-family
ah hman a ni. <body>
Global switch tur chuan Bootstrap font-family
chu update $font-family-base
la, recompile rawh.
Thupui leh paragraph te
Heading element zawng zawng—eg, <h1>
—leh <p>
an margin-top
paih chhuah theih nan reset vek an ni. Headings te margin-bottom: .5rem
dah belh leh paragraph margin-bottom: 1rem
te pawh awlsam taka inhlat theih nan.
Heading tih a ni | Entirna |
---|---|
|
h1. Bootstrap tih thupui hmangin |
|
h2. Bootstrap tih thupui hmangin |
|
h3. Bootstrap tih thupui hmangin |
|
h4. Bootstrap tih thupui hmangin |
|
h5. Bootstrap tih thupui hmangin |
|
h6. Bootstrap tih thupui hmangin |
List te a awm
List zawng zawng— <ul>
, <ol>
, leh —chu <dl>
an margin-top
paih 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
- 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
- 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
Styling awlsam zawk, hierarchy chiang zawk, leh spacing tha zawk neih nan description list-ah margin
s updated a awm a. <dd>
s reset margin-left
leh 0
add 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-top
rem
margin-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-align
bawk. Border, padding, leh thil dang dang tihdanglamna chu .table
class nen a rawn thleng 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 hmandisplay: inline-block
phalsak turin setmargin
a ni.<input>
s,<select>
s,<textarea>
s, leh<button>
s te hi Normalize hian a address tam ber a, mahse Reboot hian anmargin
leh setline-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.
Misc element hrang hrang a awm
Chenna hmun
Element <address>
chu update a ni a, browser default font-style
chu italic
to normal
. line-height
pawh tunah chuan rochun a margin-bottom: 1rem
ni 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
margin
Blockquotes-a default chu , a nih avangin chu chu element dang nena inmil zawk thil atan 1em 40px
kan 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.
Inline elements te a awm
Element hian <abbr>
paragraph text zingah a langsar theih nan basic styling a dawng a ni.
Khaihtawi
cursor
Summary-a default chu text
, a nih avangin chu chu kan reset a, pointer
chu 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 display
ni. [hidden]
IE10-in native-a a support loh laiin , kan CSS-a explicit declaration chuan chu harsatna chu a paltlang a ni.
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 display
siam danglam loh leh element chuan document flow a la nghawng thei tihna a ni a, chu ai chuan .invisible
class hmang zawk rawh.