Agbalẽtata ƒe nuŋɔŋlɔ
Nuŋlɔɖiwo kple kpɔɖeŋuwo na Bootstrap nuŋɔŋlɔ, siwo dometɔ aɖewoe nye xexeame katã ƒe ɖoɖowo, tanyawo, ŋutilã me nuŋɔŋlɔwo, xexlẽdzesiwo, kple bubuwo.
Xexeame katã ƒe ɖoɖowo
Bootstrap ɖoa xexeame katã ƒe ɖeɖefia veviwo, nuŋɔŋlɔ, kple kadodo ƒe atsyãwo. Ne ehiã be woakpɔ ŋusẽ ɖe edzi geɖe wu la, ke lé ŋku ɖe nuŋɔŋlɔ ƒe viɖenu ƒe klasswo ŋu .
- Zã native font stack si tia nyuitɔ kekeake
font-familyna OS kple mɔ̃ ɖesiaɖe. - Ne èdi be yeakpɔ ƒomevi ƒe dzidzenu si me nusianu le eye wòate ŋu age ɖe eme la, míezãa web-browser la ƒe root si woɖo ɖi
font-size(zi geɖe la, 16px) ale be amedzrowo nate ŋu atrɔ asi le woƒe web-browser ƒe nɔnɔme gbãtɔwo ŋu ne ehiã. - Zã
$font-family-base,$font-size-base, kple$line-height-basenɔnɔmewo abe míaƒe agbalẽtata ƒe gɔmeɖoanyi si wozã ɖe<body>. - Ðo xexeame katã ƒe kadodo ƒe amadede to
$link-color. - Zãe nàtsɔ
$body-bgaɖo abackground-colorɖe<body>(#fffle gɔmedzedzea me).
Woateŋu akpɔ atsyã siawo le _reboot.scss, eye woɖe xexeame katã ƒe tɔtrɔwo gɔme le _variables.scss. Kpɔ egbɔ be yeɖoe $font-size-baseɖe rem.
Tanyawo
HTML tanyawo katã, <h1>to <h6>, dzi la li.
| Tanya ƒe tanya | Kpɔɖeŋu |
|---|---|
<h1></h1> |
h1. Bootstrap ƒe tanya |
<h2></h2> |
h2. Bootstrap ƒe tanya |
<h3></h3> |
h3. Bootstrap ƒe tanya |
<h4></h4> |
h4. Bootstrap ƒe tanya |
<h5></h5> |
h5. Bootstrap ƒe tanya |
<h6></h6> |
h6. Bootstrap ƒe tanya |
<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>
.h1to .h6klasswo hã li, na ne èdi be yeawɔ ɖeka kple tanya aɖe ƒe nuŋɔŋlɔ ƒe nɔnɔme gake màte ŋu azã HTML ƒe akpa si do ƒome kplii o.
h1. Bootstrap ƒe tanya
h2. Bootstrap ƒe tanya
h3. Bootstrap ƒe tanya
h4. Bootstrap ƒe tanya
h5. Bootstrap ƒe tanya
h6. Bootstrap ƒe tanya
<p class="h1">h1. Bootstrap heading</p>
<p class="h2">h2. Bootstrap heading</p>
<p class="h3">h3. Bootstrap heading</p>
<p class="h4">h4. Bootstrap heading</p>
<p class="h5">h5. Bootstrap heading</p>
<p class="h6">h6. Bootstrap heading</p>Tanyawo ƒe tɔtrɔ ɖe nɔnɔmewo ŋu
Zã dɔwɔnu ƒe klass siwo le eme nàtsɔ agbugbɔ awɔ tanya sue evelia ƒe nuŋɔŋlɔ tso Bootstrap 3 me.
Fancy display heading Kple nuŋɔŋlɔ evelia si fa
<h3>
Fancy display heading
<small class="text-muted">With faded secondary text</small>
</h3>Fia tanyawo
Wotrɔ asi le tanya ƒe akpa deŋgɔwo ŋu be woawɔ dɔ nyuie wu le wò axaa me nyawo ƒe lã me. Ne èhiã tanya aɖe be wòato vovo la, bu tanya si woɖena fiana zazã ŋu —tanya ƒe atsyã si lolo wu, si me amewo ƒe susu le vie wu.
<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>
<h1 class="display-5">Display 5</h1>
<h1 class="display-6">Display 6</h1>
Woɖoa ɖeɖefia ƒe tanyawo to $display-font-sizesSass ƒe anyigbatata kple tɔtrɔ eve dzi, $display-font-weightkple $display-line-height.
Woate ŋu atrɔ asi le ɖeɖefia ƒe tanyawo ŋu to tɔtrɔ eve dzi, $display-font-familyeye $display-font-style.
$display-font-sizes: (
1: 5rem,
2: 4.5rem,
3: 4rem,
4: 3.5rem,
5: 3rem,
6: 2.5rem
);
$display-font-family: null;
$display-font-style: null;
$display-font-weight: 300;
$display-line-height: $headings-line-height;
Nɔ ŋgɔ
Na memamã aɖe nato vovo to .lead.
Esia nye memama gbãtɔ. Eto vovo tso memamã siwo wozãna edziedzi gbɔ.
<p class="lead">
This is a lead paragraph. It stands out from regular paragraphs.
</p>Nuŋɔŋlɔ ƒe akpa siwo le fli me
Atsyã na HTML5 ƒe akpa siwo bɔ ɖe fli me.
Àte ŋu azã dzesi ƒe dzesi la atsɔnyatinuŋɔɖi.
Woɖoe be woabu nuŋɔŋlɔ ƒe fli sia abe nuŋɔŋlɔ si woɖe ɖa ene.
Woɖoe be woabu nuŋɔŋlɔa ƒe fli sia be megade pɛpɛpɛ o.
Woɖoe be woabu nuŋɔŋlɔ ƒe fli sia be enye nusi wotsɔ kpe ɖe nuŋlɔɖia ŋu.
Nuŋɔŋlɔ ƒe fli sia aɖe egɔme abe alesi woɖe fli ɖe ete ene.
Woɖoe be woabu nuŋɔŋlɔa ƒe fli sia be enye nuŋɔŋlɔ nyuiwo.
Woɖe fli sia gɔme abe nuŋɔŋlɔ dzẽ ene.
Woɖe fli sia gɔme abe nuŋɔŋlɔ si wotsɔ nuŋɔŋlɔ si me woŋlɔ nu ɖo ene.
<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined.</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>Kpɔ nyuie be ele be woazã dzeside mawo hena gɔmesese ƒe taɖodzinu:
<mark>tsi tre ɖi na nuŋɔŋlɔ si wode dzesii alo te gbe ɖe edzi hena numekugbalẽ alo nuŋɔŋlɔ ƒe taɖodzinuwo.<small>tsi tre ɖi na nya siwo wogblɔ ɖe axadzi kple nuŋɔŋlɔ suewo, abe nutata ƒe gomenɔamesi kple senyawo ene.<s>tsi tre ɖi na nusiwo megale vevie o alo womegade pɛpɛpɛ o.<u>tsi tre ɖi na nuŋɔŋlɔ si le fli me ƒe didime aɖe si wòle be woaɖe gɔme le mɔ si aɖee afia be nuŋlɔɖi si menye nuŋɔŋlɔ o le eme.
Ne èdi be yeawɔ yeƒe nuŋɔŋlɔa ƒe atsyã la, ele be nàzã klass siwo gbɔna boŋ:
.markawɔ atsyã siwo wozãna le<mark>..smallawɔ atsyã siwo wozãna le<small>..text-decoration-underlineawɔ atsyã siwo wozãna le<u>..text-decoration-line-throughawɔ atsyã siwo wozãna le<s>.
Togbɔ be womeɖee fia le etame o hã la, zãe faa <b>eye nàzãe <i>le HTML5 me. <b>woɖoe be wòate gbe ɖe nyawo alo nyagbewo dzi evɔ maɖe vevienyenye bubu aɖeke afia o, evɔ <i>wònye gbe, mɔ̃ɖaŋunyawo, kple bubuawo tɔ koŋ.
Nuŋɔŋlɔ ƒe dɔwɔnuwo
Trɔ nuŋɔŋlɔ ƒe ɖoɖowɔwɔ, tɔtrɔ, atsyã, kpekpeme, fli-kɔkɔme, atsyɔ̃ɖoɖo kple amadede kple míaƒe nuŋɔŋlɔ ƒe dɔwɔnuwo kple amadede ƒe dɔwɔnuwo .
Kpuienyawo
Stylized dɔwɔwɔ HTML ƒe <abbr>element na kpukpuiwo kple kpukpuiwo be woaɖe kekeɖenudɔwɔwɔ afia le hover. Kpuiewo ƒe fli teti gbãtɔ eye woxɔa kpekpeɖeŋu ƒe dzesi be woana nya siwo ƒo xlãe bubuwo le hover kple kpekpeɖeŋu mɔ̃ɖaŋunuwo zãlawo.
Tsɔ kpe .initialismɖe kpukpui aɖe ŋu hena ŋɔŋlɔdzesi ƒe lolome si le sue vie.
attr
HTML ƒe nuŋɔŋlɔ
<p><abbr title="attribute">attr</abbr></p>
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>Blockquotes ƒe nyawo
Le nyatakaka siwo ƒe akpa aɖewo yɔ tso teƒe bubu le wò nuŋlɔɖia me ta. Kpe <blockquote class="blockquote">HTML ɖesiaɖe ɖe edzi abe nyayɔyɔa ene.
Nyayɔyɔ nyanyɛ aɖe, si le blockquote ƒe akpa aɖe me.
<blockquote class="blockquote">
<p>A well-known quote, contained in a blockquote element.</p>
</blockquote>Ŋkɔ na dzɔtsoƒe aɖe
HTML spec la bia be woatsɔ blockquote ƒe nɔnɔme aɖo <blockquote>. Ne èle attribution nam la, xatsa wò <blockquote>ɖe a me <figure>eye nàzã a <figcaption>alo block level element (le kpɔɖeŋu me, <p>) kple .blockquote-footerklass la. Kpɔ egbɔ be yexatsa dzɔtsoƒedɔa ƒe ŋkɔ ɖe eme <cite>hã.
Nyayɔyɔ nyanyɛ aɖe, si le blockquote ƒe akpa aɖe me.
<figure>
<blockquote class="blockquote">
<p>A well-known quote, contained in a blockquote element.</p>
</blockquote>
<figcaption class="blockquote-footer">
Someone famous in <cite title="Source Title">Source Title</cite>
</figcaption>
</figure>Ðoɖowɔwɔ ɖe ɖoɖo nu
Zã nuŋɔŋlɔ ƒe dɔwɔnuwo alesi wòhiãe nàtsɔ atrɔ wò blockquote ƒe ɖoɖowɔwɔ.
Nyayɔyɔ nyanyɛ aɖe, si le blockquote ƒe akpa aɖe me.
<figure class="text-center">
<blockquote class="blockquote">
<p>A well-known quote, contained in a blockquote element.</p>
</blockquote>
<figcaption class="blockquote-footer">
Someone famous in <cite title="Source Title">Source Title</cite>
</figcaption>
</figure>Nyayɔyɔ nyanyɛ aɖe, si le blockquote ƒe akpa aɖe me.
<figure class="text-end">
<blockquote class="blockquote">
<p>A well-known quote, contained in a blockquote element.</p>
</blockquote>
<figcaption class="blockquote-footer">
Someone famous in <cite title="Source Title">Source Title</cite>
</figcaption>
</figure>Ŋlɔ ŋkɔwo
Womewɔ atsyã aɖeke o
Ɖe axa si woɖo ɖi list-stylekple miame le nusiwo woŋlɔ ɖi la dzi (ɖeviwo enumake ɖeɖeko). This only applies to immediate children list items , si fia be ahiã be nàtsɔ klass la akpe ɖe xexlẽdzesi ɖesiaɖe si wotsɔ ƒo ƒui hã ŋu.
- Esia nye xexlẽdzesiwo.
- Edze abe womewɔ eƒe atsyã aɖeke kura o ene.
- Le ɖoɖo nu la, egakpɔtɔ nye xexlẽdzesiwo.
- Gake ɖevi ƒe akpa siwo le enumake ko ŋue atsyã sia ku ɖo.
- Ŋkɔwo ƒe xexlẽdzesi siwo wotsɔ ƒo ƒui:
- atsyã sia mekpɔa ŋusẽ ɖe wo dzi o
- agaɖe tu aɖe afia kokoko
- eye miame ƒe akpa si sɔ nanɔ wo si
- Esia ate ŋu aɖe vi kokoko le nɔnɔme aɖewo me.
<ul class="list-unstyled">
<li>This is a list.</li>
<li>It appears completely unstyled.</li>
<li>Structurally, it's still a list.</li>
<li>However, this style only applies to immediate child elements.</li>
<li>Nested lists:
<ul>
<li>are unaffected by this style</li>
<li>will still show a bullet</li>
<li>and have appropriate left margin</li>
</ul>
</li>
<li>This may still come in handy in some situations.</li>
</ul>Le fli me
Ðe tu siwo le xexlẽdzesi aɖe me ɖa eye nàtsɔ marginklass eve ƒokpli ade kekeli aɖewo me, .list-inlineeye .list-inline-item.
- Esia nye nusi woŋlɔ ɖe xexlẽdzesiwo me.
- Eye bubu hã.
- Gake woɖea wo fiana le fli me.
<ul class="list-inline">
<li class="list-inline-item">This is a list item.</li>
<li class="list-inline-item">And another one.</li>
<li class="list-inline-item">But they're displayed inline.</li>
</ul>Numeɖeɖe ƒe xexlẽdzesiwo ƒe ɖoɖowɔwɔ
Ðo nyawo kple nuŋlɔɖiwo ɖe ɖoɖo nu le tsia dzi to míaƒe grid system ƒe klass siwo woɖo ɖi do ŋgɔ (alo gɔmesese ƒe mixins) zazã me. Ne èdi be yeagblɔ nya didiwo la, àte ŋu atsɔ .text-truncateklass aɖe akpe ɖe eŋu ne èdi be yeatsɔ ellipsis atso nuŋɔŋlɔa me.
- Numeɖeɖewo ƒe xexlẽdzesiwo
- Numeɖeɖe ƒe xexlẽdzesi sɔ nyuie na nyawo gɔmeɖeɖe.
- Nya
-
Gɔmeɖeɖe na nya la.
Eye teƒe bubu aɖewo gɔmeɖeɖe nuŋɔŋlɔ.
- Nya bubu aɖe hã
- Gɔmesese sia le kpuie, eyata memamã bubuwo alo naneke meli o.
- Wotso nya si wotso la me
- Esia ate ŋu aɖe vi ne teƒea mesɔ gbɔ o. Etsɔa ellipsis kpena ɖe eŋu le eƒe nuwuwu.
- Atɔwɔwɔ
-
- Nested gɔmeɖeɖe ƒe xexlẽdzesi
- Mese be mielɔ̃ gɔmesese ƒe xexlẽdzesiwo. Mina matsɔ gɔmesese ƒe xexlẽdzesi ade wò gɔmesese ƒe xexlẽdzesi me.
<dl class="row">
<dt class="col-sm-3">Description lists</dt>
<dd class="col-sm-9">A description list is perfect for defining terms.</dd>
<dt class="col-sm-3">Term</dt>
<dd class="col-sm-9">
<p>Definition for the term.</p>
<p>And some more placeholder definition text.</p>
</dd>
<dt class="col-sm-3">Another term</dt>
<dd class="col-sm-9">This definition is short, so no extra paragraphs or anything.</dd>
<dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
<dd class="col-sm-9">This can be useful when space is tight. Adds an ellipsis at the end.</dd>
<dt class="col-sm-3">Nesting</dt>
<dd class="col-sm-9">
<dl class="row">
<dt class="col-sm-4">Nested definition list</dt>
<dd class="col-sm-8">I heard you like definition lists. Let me put a definition list inside your definition list.</dd>
</dl>
</dd>
</dl>Ŋɔŋlɔdzesiwo ƒe lolome siwo ɖoa nya ŋu
Le Bootstrap 5 me la, míewɔ ŋɔŋlɔdzesi ƒe lolome siwo ɖoa nya ŋu la ŋudɔ le gɔmedzedzea me, si na nuŋɔŋlɔwo te ŋu dzidze le dzɔdzɔme nu wu le mɔ̃a kple nukpɔkpɔ ƒe lolomewo me. Kpɔ RFS ƒe axaa ɖa be nànya alesi esia wɔa dɔe.
Sass ƒe nyawo
Nusiwo trɔna
Trɔtrɔ aɖewo siwo woɖo ɖi na tanyawo le woƒe lolome kple dometsotso ŋu.
$headings-margin-bottom: $spacer * .5;
$headings-font-family: null;
$headings-font-style: null;
$headings-font-weight: 500;
$headings-line-height: 1.2;
$headings-color: null;
Agbalẽtata ƒe akpa vovovo siwo ŋu woƒo nu tsoe le afisia kple le Reboot me hã ƒe tɔtrɔ siwo woɖo ɖi na wo.
$lead-font-size: $font-size-base * 1.25;
$lead-font-weight: 300;
$small-font-size: .875em;
$sub-sup-font-size: .75em;
$text-muted: $gray-600;
$initialism-font-size: $small-font-size;
$blockquote-margin-y: $spacer;
$blockquote-font-size: $font-size-base * 1.25;
$blockquote-footer-color: $gray-600;
$blockquote-footer-font-size: $small-font-size;
$hr-margin-y: $spacer;
$hr-color: inherit;
// fusv-disable
$hr-bg-color: null; // Deprecated in v5.2.0
$hr-height: null; // Deprecated in v5.2.0
// fusv-enable
$hr-border-color: null; // Allows for inherited colors
$hr-border-width: $border-width;
$hr-opacity: .25;
$legend-margin-bottom: .5rem;
$legend-font-size: 1.5rem;
$legend-font-weight: null;
$dt-font-weight: $font-weight-bold;
$list-inline-padding: .5rem;
$mark-padding: .1875em;
$mark-bg: $yellow-100;
Nusiwo wotsɔ tsakae
Mixin aɖeke meli si woɖo ɖi na nuŋɔŋlɔ o, gake Bootstrap zãa Responsive Font Sizing (RFS) .