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.$font-size-root
He browser default hi variable siam danglamin override theih a ni .
- , ah hian base
- The
<body>
pawhin globalfont-family
,font-weight
,line-height
, lehcolor
. 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 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,
// 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 symbol/dingbat unicode character hman tlanglawn tam tak chu multi-colored 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 color
style engmahin a nghawng dawn lo.
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></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-top
paih vek a, a margin-bottom: 1rem
. Nested list te hian an nei lo margin-bottom
. padding-left
On <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 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.
- 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.
<section>
inline angin wrapped tur a ni.
For example, <code><section></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-top
rem
margin-bottom
<p>Sample text here...</p>
<p>And another line of sample text here...</p>
<pre><code><p>Sample text here...</p>
<p>And another line of sample text here...</p>
</code></pre>
Variables te pawh a awm
Variable tarlanna atan <var>
tag hmang ang che.
<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 .
Settings edit tur chuan press rawh ctrl + ,
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.
<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-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.<button>
s leh<input>
button element te hiancursor: pointer
engtik laiin nge:not(:disabled)
.
Heng inthlak danglamna te, leh a dangte hi a hnuaiah hian tarlan 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 cursor
inthlak danglamna an hmu thin.
<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-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
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.
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.
<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 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.