Source

Reboot nakambe

Reboot, nhlengeleto wa ku cinca ka CSS loku kongomeke ka elemente eka fayili yin’we, kickstart Bootstrap ku nyika xisekelo xo saseka, lexi nga cincekiki, na xo olova xo aka eka xona.

Manghenelo

Reboot yi aka eka Normalize, yi nyika swiaki swo tala swa HTML hi switayele leswi nga na mavonelo yo karhi hi ku tirhisa ntsena swihlawulekisi swa swiaki. Ku engetela switayili swi endliwa ntsena hi titlilasi. Xikombiso, hi tlhela hi pfula <table>switayele swin’wana ku kuma xisekelo xo olova ivi endzhaku hi nyika .table, .table-bordered, na swin’wana.

Hi leswi swiletelo swa hina na swivangelo swo hlawula leswi u faneleke ku swi tlula eka Reboot:

Pfuxeta mimpimo yin’wana ya xiviri ya browser ku tirhisa rems ematshan’wini ya ems eka ku hambana ka swiphemu loku ringanisiwaka.
Papalata margin-top. Ti margin leti yimisiweke tinga wa, ti humesa mbuyelo lowu nga languteriwangiki. Kambe xa nkoka swinene, nkongomiso wun’we wa margini xikombiso xo olova xa mianakanyo.
Ku olova ku ringanisa ku tsemakanya vukulu bya switirhisiwa, swiaki swa xibokisana swi fanele ku tirhisa rems eka margins.
Hlayisa switiviso swa fontswihlawulekisi leswi fambelanaka na swona swi ri ehansi, u tirhisa inheritloko swi koteka.

Swihlawulekisi swa matluka

Swiaki swa <html>na <body>swi pfuxetiwa ku nyika swihlawulekisi swo antswa swa tluka hinkwaro. Hi ku kongoma swinene:

The box-sizingyi vekiwile emisaveni hinkwayo eka xiaki xin’wana ni xin’wana—ku katsa *::beforeni na *::after, ku ya eka border-box. Leswi switiyisisa leswaku ku anama loku tivisiweke ka elemente ayi tshuki yi tlula hikokwalaho ka padding kumbe border.
- Ku hava xisekelo font-sizelexi tivisiweke eka <html>, kambe 16pxxi tekiwa (xihlawulekisi xa browser). font-size: 1remyi tirhisiwa eka the <body>for easy responsive type-scaling hi ku tirhisa swivutiso swa vuhangalasi bya mahungu loko ku ri karhi ku xixima swihlawulekisi swa vatirhisi na ku tiyisisa endlelo leri fikelelaka swinene.
The <body>yi tlhela yi veka global font-family, line-height, na text-align. Leswi swi dya ndzhaka endzhaku hi swiaki swin’wana swa xivumbeko ku sivela ku nga fambisani ka fonto.
Ku kuma vuhlayiseki, the <body>has a declared background-color, ku tsandzeka ku #fff.

Xithaki xa fonto ya ntumbuluko

Tifonto ta webu ta ntolovelo (Helvetica Neue, Helvetica, na Arial) ti hoxiwile eka Bootstrap 4 naswona ti siviwe hi “xithaki xa tifonto ta ntumbuluko” leswaku ku ta endliwa matsalwa lamanene eka xitirhisiwa xin’wana ni xin’wana ni le ka OS. Hlaya swo tala hi switachi swa tifonto ta ntumbuluko eka xihloko lexi xa Smashing Magazine .

$font-family-sans-serif:
  // Safari for OS X and iOS (San Francisco)
  -apple-system,
  // Chrome < 56 for OS X (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;

Leswi font-familyswi tirhisiwa eka <body>na ku tisungulela ku dya ndzhaka ya misava hinkwayo eka Bootstrap hinkwayo. Ku cinca global font-family, pfuxeta $font-family-basena ku tlhela u hlengeleta Bootstrap.

Tinhloko-mhaka ni tindzimana

Swiaki hinkwaswo swa nhlokomhaka—xikombiso, <h1>—naswona <p>swi tlhela swi vekiwa leswaku swi margin-topsusiwa. Ku engeteriwe tinhloko-mhaka margin-bottom: .5remni tindzimana margin-bottom: 1remleswaku swi olova ku swi veka exikarhi.

Nhlokomhaka	Xikombiso
`<h1></h1>`	h1. Nhlokomhaka ya bootstrap
`<h2></h2>`	h2. Nhlokomhaka ya bootstrap
`<h3></h3>`	h3. Nhlokomhaka ya bootstrap
`<h4></h4>`	h4. Nhlokomhaka ya bootstrap
`<h5></h5>`	h5. Nhlokomhaka ya bootstrap
`<h6></h6>`	h6. Nhlokomhaka ya bootstrap

Minxaxamelo ya swilo

Minxaxamelo hinkwayo— <ul>, <ol>, na <dl>—yi margin-topsusiwile ya yona na a margin-bottom: 1rem. Minxaxamelo leyi pfanganisiweke a yi na margin-bottom.

Lorem ipsum dolor tshama amet
Consectetur leyi nga ni mafurha yo tala
Nhlayo leyi heleleke ya molestie lorem eka massa
Facilisis eka xirhendzevutani xa pretium nisl aliquet
Nulla volutpat xitsonga xitsonga xitsonga xitsonga
- Xiphemu xa xirhendzevutani xa iaculis neque
- Purus sodales ya switsongwatsongwana swa ultricies
- Vestibulum laoreet xirho xa xirhendzevutani sem
- Ac tristique libero xitsonga xitsonga xitsonga xitsonga
Faucibus porta lacus xihlala xa xirhendzevutani xa xirhendzevutani
Aenean tshama amet erat nunc
Eget porttitor xitsonga xitsonga

Lorem ipsum dolor tshama amet
Consectetur leyi nga ni mafurha yo tala
Nhlayo leyi heleleke ya molestie lorem eka massa
Facilisis eka xirhendzevutani xa pretium nisl aliquet
Nulla volutpat xitsonga xitsonga xitsonga xitsonga
Faucibus porta lacus xihlala xa xirhendzevutani xa xirhendzevutani
Aenean tshama amet erat nunc
Eget porttitor xitsonga xitsonga

Ku kuma xitayili xo olova, xiyimo xa le henhla lexi nga erivaleni, na ku hambana ko antswa, minxaxamelo ya tinhlamuselo yi pfuxetile margins. <dd>s tlherisela margin-lefteka 0na ku engetela margin-bottom: .5rem. <dt>s yi tsariwile hi ku olova .

Minxaxamelo ya tinhlamuselo: Nxaxamelo wa tinhlamuselo wu hetisekile ku hlamusela marito.
Euismod: Vestibulum id ligula porta felis euismod xitombo xa xitombo xa xitombo xa xitombo xa xitombo xa xitombo xa xitombo xa xitombo.; Donec id elit leyi nga riki na mi porta gravida eka eget metus.
Malesuada ya xitsonga: Etiam porta sem malesuada leyikulu leyi nga ni vuxiyaxiya.

Tsalwa leri fomatiweke ka ha ri emahlweni

Xiaki <pre>xi tlhela xi vekiwa ku susa xa xona margin-topni ku tirhisa remtiyuniti ta xona margin-bottom.

.xikombiso-xiaki { .
  margin-ehansi: 1rem;
} .

Matafula

Matafula ya lulamisiwile nyana eka xitayili <caption>s, ku wisa mindzilakano, naswona ya tiyisisa ku nga cinci text-alignhinkwako. Ku cinca loku engetelekeke ka mindzilakano, ku padding ni swin’wana swi ta ni .tabletlilasi .

Leri i tafula ra xikombiso, naswona leri i xitlhokovetselo xa rona xo hlamusela leswi nga endzeni.
Nhlokomhaka ya tafula	Nhlokomhaka ya tafula	Nhlokomhaka ya tafula	Nhlokomhaka ya tafula
Sele ya tafula	Sele ya tafula	Sele ya tafula	Sele ya tafula
Sele ya tafula	Sele ya tafula	Sele ya tafula	Sele ya tafula
Sele ya tafula	Sele ya tafula	Sele ya tafula	Sele ya tafula

Swivumbeko

Swiaki swo hambana swa xivumbeko swi pfuriwile nakambe eka switayele swa xisekelo swo olova. Hi leswi swin’wana swa ku cinca loku xiyekaka swinene:

<fieldset>s a yi na mindzilakano, padding, kumbe margin leswaku yi ta tirhisiwa hi ku olova tanihi swifunengeto swa swingheniso swa munhu hi xiyexe kumbe mintlawa ya swingheniso.
<legend>s, ku fana na ti fieldsets, na tona ti endliwile hi vuntshwa leswaku ti kombisiwa tanihi nhlokomhaka ya tinxaka.
<label>s ti vekiwile eka display: inline-blockku pfumelela marginku tirhisiwa.
<input>s, <select>s, <textarea>s, na <button>s ti langutisiwa ngopfu hi Normalize, kambe Reboot yi susa ya vona marginna yi veka line-height: inherit, na yona.
<textarea>s ti cinciwa leswaku ti nga cinciwa ntsena hi ndlela yo yima tanihi leswi ku cinca sayizi loku nga etlhelo hakanyingi ku “tshovaka” xivumbeko xa pheji.

Ku cinca loku, ni swin’wana, swi kombisiwile laha hansi.

Swiaki swo hambana-hambana

Kherefu

Xiaki <address>xi pfuxetiwa ku tlhela xi veka xivumbeko xa browser ku font-stylesuka eka italicku ya eka normal. line-heightna yona sweswi yi kumiwile ndzhaka, naswona margin-bottom: 1remyi engeteriwile. <address>s i ya ku humesa vuxokoxoko bya vuhlanganisi bya kokwa wa le kusuhi (kumbe nhlengeletano hinkwayo ya ntirho). Hlayisa ku fometa hi ku heta milayeni hi <br>.

Twitter, Inc.
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890. Xihlamusela-marito xa Xitsonga

Vito leri heleleke
ro [email protected]

Xibokisana xa swilo

Default margineka blockquotes i 1em 40px, kutani hi tlherisela sweswo eka 0 0 1remeka nchumu wun’wana lowu fambelanaka swinene na swiaki swin’wana.

Lorem ipsum dolor tshama amet, consectetur adipiscing xiyimo xa le henhla. Nhlayo leyi heleleke ya posuere erat a ante.

Munhu loyi a dumeke eka Source Title

Swiaki swa le ndzeni ka layini

Xiaki <abbr>xi amukela xitayili xa masungulo ku endla leswaku xi humelela exikarhi ka tsalwa ra ndzimana.

Nulla attr vitae elit libero, ku nga pharetra augue.

Nkomiso

Default cursoreka nkatsakanyo i text, kutani hi tlherisela sweswo eka pointerku hundzisela leswaku elemente yi nga tirhisana na yona hi ku yi tsindziyela.

Vuxokoxoko byin’wana

More info hi vuxokoxoko.

Vuxokoxoko lebyi engetelekeke swinene

Hi lebyi vuxokoxoko lebyi engetelekeke swinene malunghana ni vuxokoxoko bya kona.

`[hidden]`Xihlawulekisi xa HTML5

HTML5 yi engetela xihlawulekisi lexintshwa xa misava hinkwayo lexi vuriwaka[hidden] , lexi endliweke hi xitayili tanihi display: nonehi ku tiyimisela. Ku lomba mianakanyo ku suka eka PureCSS , hi antswisa eka ku tiyimisela loku hi ku endla [hidden] { display: none !important; }ku pfuneta ku sivela ya yona displayku va yi tluleriwi hi xihoxo. Hambileswi [hidden]yi nga seketeriwiki hi ntumbuluko hi IE10, xitiviso lexi nga erivaleni eka CSS ya hina xi rhendzeleka ni xiphiqo xexo.

<input type="text" hidden>

Ku nga fambisani ka jQuery

[hidden]a yi fambisani na jQuery's $(...).hide()na $(...).show()tindlela. Hikwalaho, sweswi a hi seketeli ngopfu-ngopfu ku [hidden]tlula tindlela tin’wana to lawula displayta swiaki.

Ku cinca ntsena ku vonaka ka xiaki, leswi vulaka leswaku xa xona displaya xi cinciwanga naswona xiaki xa ha kota ku khumba ku khuluka ka tsalwa, tirhisa tlilasi ematshan’wini ya sweswo..invisible