Ederede
Akwụkwọ na ihe atụ maka ụdị edemede Bootstrap, gụnyere ntọala zuru ụwa ọnụ, isiokwu, ederede ahụ, ndepụta, na ndị ọzọ.
Ntọala zuru ụwa ọnụ
Bootstrap na-esetịpụ ihe ngosi zuru ụwa ọnụ, akwụkwọ edemede na ụdị njikọ. Mgbe achọrọ njikwa ọzọ, lelee klas ịba uru ederede .
- Jiri nchịkọta font nke na-ahọrọ nke kacha mma
font-family
maka OS na ngwaọrụ ọ bụla. - Maka ụdị ngụkọ yana ịnweta, anyị na-eche na mgbọrọgwụ ndabere ihe nchọgharị
font-size
(nke bụ 16px) ka ndị ọbịa nwee ike hazie ndabara ihe nchọgharị ha ka ọ dị mkpa. - Jiri
$font-family-base
,$font-size-base
, na$line-height-base
njiri mara dị ka ntọala ederede anyị etinyere na<body>
. - Tọọ ụcha njikọ zuru ụwa ọnụ site
$link-color
na ma tinye akara njikọ naanị na:hover
. - Jiri
$body-bg
ka ịtọọbackground-color
na<body>
(#fff
na ndabara).
Enwere ike ịchọta ụdị ndị a n'ime _reboot.scss
, a na-akọwakwa mgbanwe mgbanwe ụwa na _variables.scss
. Gbaa mbọ hụ na itinye $font-size-base
n'ime rem
.
Isi okwu
Isi HTML niile, <h1>
site na <h6>
, dị.
Isi | Ọmụmaatụ |
---|---|
|
h1. Isiokwu bootstrap |
|
h2. Isiokwu bootstrap |
|
h3. Isiokwu bootstrap |
|
h4. Isiokwu bootstrap |
|
h5. Isiokwu bootstrap |
|
h6. Isiokwu bootstrap |
.h1
A na-enwetakwa site na .h6
klaasị, n'ihi na mgbe ịchọrọ ka ị dakọtara n'ụdị font nke isiokwu mana enweghị ike iji ihe HTML jikọtara ya.
h1. Isiokwu bootstrap
h2. Isiokwu bootstrap
h3. Isiokwu bootstrap
h4. Isiokwu bootstrap
h5. Isiokwu bootstrap
h6. Isiokwu bootstrap
Na-ahazi isiokwu
Jiri klaasị ịba uru agbakwunyere iji megharịa obere isiokwu nke abụọ sitere na Bootstrap 3.
Isi ihe ngosi mara mma Site na ederede sekọndrị dara ada
Gosipụta isiokwu
Emebere ihe isi okwu ọdịnala ka ọ rụọ ọrụ kacha mma na anụ nke ọdịnaya ibe gị. Mgbe ịchọrọ isi okwu iji pụta ìhè, tụlee iji isiokwu ngosi - ụdị isiokwu buru ibu, nke nwere echiche karịa. Buru n'uche na isiokwu ndị a anaghị anabata na ndabara, mana ọ ga-ekwe omume ịme ka nha font na-anabata ya .
Ngosipụta 1 |
Ngosipụta 2 |
Ngosipụta 3 |
Ngosipụta 4 |
Ndu
Mee ka paragraf pụta ìhè site n'ịgbakwunye .lead
.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor omee. Duis mollis, ọ bụghị commodo luctus.
Ihe ederede inline
Ịke maka ihe HTML5 inline nkịtị.
Ị nwere ike iji mkpado akara napụta ìhèederede.
Ezubere ahịrị ederede a ka ewere ya dị ka ederede ehichapụ.
Ezubere ahịrị ederede a ka a na-emeso ya ka ọ bụghịzi eziokwu.
Ezubere ahịrị ederede a ka ewere ya dị ka mgbakwunye na akwụkwọ ahụ.
Ahịrị ederede a ga-atụgharị dị ka etinyere n'okpuru
Ezubere ahịrị ederede a ka ewere ya dị ka ezigbo mbipụta.
Asụgharịkwara ahịrị a ka ọ bụrụ ederede siri ike.
A sụgharịrị ahịrị a ka ọ bụrụ ederede italicized.
.mark
na .small
klaasị dịkwa maka itinye otu ụdị dị ka <mark>
yana <small>
mgbe ị na-ezere mmetụta semantic ọ bụla na-achọghị nke mkpado ahụ ga-eweta.
Mgbe egosiri n'elu, nweere onwe gị iji <b>
na <i>
HTML5. <b>
bu n'obi ime ka okwu ma ọ bụ nkebiokwu pụta ìhè na-ebupụtaghị mkpa ọzọ ebe ọ <i>
na-abụkarị maka olu, okwu teknụzụ, wdg.
Ngwa ederede
Gbanwee nhazi ederede, mgbanwe, ụdị, ịdị arọ na agba site na iji ngwa ederede na ngwa agba anyị .
Ndebiri
Mmejuputa HTML nke ahaziri <abbr>
ahazi maka ndebiri na mkpọ okwu iji gosi ụdị gbasaara na hover. Mbibiri nwere akara ndabara wee nweta cursor enyemaka iji nyekwuo ọnọdụ na hover yana ndị ọrụ teknụzụ enyemaka.
Tinye .initialism
na ndebiri maka obere mkpụrụedemede pere mpe.
atr
HTML
Ihe mgbochi
Maka ịhota ngọngọ nke ọdịnaya sitere na isi mmalite ọzọ n'ime akwụkwọ gị. Kechie <blockquote class="blockquote">
gburugburu HTML ọ bụla dị ka ntinye akwụkwọ.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer na-emepe emepe.
Ịkpọ aha isi iyi
Tinye <footer class="blockquote-footer">
maka ịchọpụta isi iyi. Kechie aha ọrụ isi mmalite na <cite>
.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer na-emepe emepe.
Nhazi
Jiri ngwa ederede dị ka achọrọ iji gbanwee nhazi nke blockquote gị.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer na-emepe emepe.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer na-emepe emepe.
Ndepụta
Ekebeghị ụdị
Wepu ndabara list-style
na oke aka ekpe na ihe ndetu (naanị ụmụaka ozugbo). This only applys to instant children list things , meaning you will need to add the class for any ested lists as well.
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem na massa
- Facilisis na pretium nisl aliquet
- Ngwa ngwa ngwa ngwa
- Phasellus iaculis bụ ihe atụ
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat na
- Faucibus Porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
N'ahịrị
Wepu mgbọ ndetu wee tinye ọkụ margin
na ngwakọta nke klaasị abụọ, .list-inline
na .list-inline-item
.
- Lorem ipsum
- Phasellus iaculis
- Nulla volutpat
Nhazi ndepụta nkọwa
Hazie usoro na nkọwa n'usoro site na iji klaasị eburu ụzọ kọwaa (ma ọ bụ ngwakọta semantic). Maka ogologo okwu, ị nwere ike itinye .text-truncate
klas na nhọrọ iji ellipsis kụchie ederede.
- Ndepụta nkọwa
- Ndepụta nkọwa zuru oke maka ịkọwa okwu.
- Euismod
-
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Achọpụtaghị m porta gravida na eget metus.
- Malesuada porta
- Etiam porta sem malesuada magna mollis euismod.
- A na-agbajisị okwu ndị gbajiri agbaji
- Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
- Akwu
-
- Ndepụta nkọwa akwụrụ
- Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.
Ogo mkpụrụedemede na-anabata
Ụgbọ mmiri Bootstrap v4.3 nwere nhọrọ iji mee ka nha font na-anabata ya, na-enye ohere ka ederede na-etowanye karịa n'ofe ngwaọrụ na nha nlele. Enwere ike ịgbanye RFS$enable-responsive-font-sizes
site n'ịgbanwe mgbanwe Sass ka ọ bụrụ true
na ịchịkọta Bootstrap.
Iji kwado RFS , anyị na-eji mixin Sass dochie ihe font-size
onwunwe anyị. A ga-achịkọta nha mkpụrụedemede na-anabata n'ime calc()
ọrụ yana ngwakọta rem
na nkeji nlele iji mee ka omume nchacha na-anabata. Enwere ike ịchọta ihe gbasara RFS na nhazi ya na ebe nchekwa GitHub ya .