Nsɛmti ahorow

HTML asɛmti nyinaa, <h1>through <h6>wɔ hɔ.

h1. Asɛmti 1

h2. Asɛmti 2

h3. Asɛmti 3

h4. Asɛmti 4

h5. Asɛmti 5

h6. Asɛmti 6

Nipadua no ho mfonini

Bootstrap no wiase nyinaa default font-sizeyɛ 14px , a a line-heightɛyɛ 20px . Wɔde eyi di dwuma wɔ <body>nkyekyem ahorow no ne ne nyinaa ho. Bio nso, <p>(nkyekyɛm ahorow) nya ase margin a ɛyɛ wɔn line-height fã (10px default).

Nullam quis risus eget urna mollis a ɛyɛ fɛ a ɛyɛ fɛ a ɛyɛ fɛ. Cum sociis natoque penatibus ne magnis awo montes, nascetur fɛwdi mus. Nullam id dolor id nibh ultricies kar a wɔde di dwuma.

Cum sociis natoque penatibus ne magnis awo montes, nascetur fɛwdi mus. Donec ullamcorper nulla a ɛnyɛ nea ɛyɛ adetɔnfo fringilla. Duis mollis, est a ɛnyɛ commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla a ɛnyɛ nea ɛyɛ adetɔnfo fringilla.

Maecenas sed diam eget risus varius blandit tena ase a ɛnyɛ magna. Donec id elit a ɛnyɛ mi porta gravida wɔ eget metus. Duis mollis, est a ɛnyɛ commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

<p> ... </p> na ɛwɔ hɔ

Lead nipadua no mfonini

Ma nkyekyem bi da nsow denam .lead.

Vivamus sagittis lacus vel augue laoreet a ɛyɛ mmerɛw sɛ wobɛtɔ no. Duis mollis, est a ɛnyɛ ade a wɔde yɛ nneɛma.

<p adesuakuw = "di anim" > ... </p>

Wɔde Less na esii

Typographic scale no gyina LESS nsakraeɛ mmienu so wɔ nsakraeɛ mu.less : @baseFontSizene @baseLineHeight. Nea edi kan ne base font-size a wɔde di dwuma wɔ ne nyinaa mu na nea ɛto so abien ne base line-height. Yɛde saa variables no ne akontabuo a ɛnyɛ den bi di dwuma de yɛ margins, paddings, ne line-heights a ɛwɔ yɛn type no nyinaa ne nea ɛkeka ho. Yɛ wɔn sɛnea wopɛ na Bootstrap no dannan wɔn ho.

Nnyinasoɔ

Fa HTML no default emphasis tags a ɛwɔ styles a emu yɛ hare no di dwuma.

`<small>`

Sɛ wopɛ sɛ woyi nsɛm a ɛwɔ mu anaa nsɛm a wɔabɔ no mu den so dua a, fa tag ketewa no di dwuma.

Wɔayɛ sɛ wɔbɛfa saa nsɛm a wɔahyehyɛ yi sɛ nkyerɛwde a ɛyɛ fɛ.

<p> <small> Wɔayɛ sɛ wɔbɛfa saa nsɛm a wɔakyerɛw no sɛ nkyerɛwde a ɛyɛ fɛ. </small> </p> no yɛ nea ɛwɔ hɔ

Akokoɔduro

Sɛ wode font-weight a emu yɛ duru si nsɛm a wɔakyerɛw no fã bi so dua.

Wɔakyerɛ nsɛm a edidi so yi ase sɛ nsɛm a ɛyɛ tuntum .

<strong> wɔakyerɛ ase sɛ nsɛm a ɛyɛ tuntum </strong>

Nkyerɛwee a wɔde nkyerɛwde a ɛyɛ mmerɛw ayɛ

Sɛ́ wubesi nsɛm a wɔakyerɛw no fã bi a wɔde italics ahyɛ mu so dua no.

Wɔakyerɛ nsɛm a edidi so yi ase sɛ nsɛm a wɔakyerɛw no italic .

<em> a wɔakyerɛ ase sɛ nsɛm a wɔakyerɛw no italic </em>

Ti a ɛwɔ soro!Te nka sɛ wowɔ ahofadi sɛ wode bedi dwuma <b>na wode adi dwuma <i>wɔ HTML5 mu. <b>no kyerɛ sɛ ɛbɛtwe adwene asi nsɛmfua anaa nsɛmfua so a ɛrenkyerɛ hia foforo a ɛho hia bere a <i>ɛyɛ nea ɛfa nne, mfiridwuma mu nsɛmfua, ne nea ɛkeka ho ho titiriw.

Alignment adesua ahorow

Ɛnyɛ den sɛ wobɛsan asiesie nsɛm no akɔ afã horow a ɛwɔ nsɛm a wɔde hyɛ adesua ahorow mu.

Nkyerɛwee a wɔahyɛ no agyirae wɔ benkum so.

Nsɛm a wɔahyehyɛ no mfinimfini.

Nsɛm a wɔahyehyɛ no pɛpɛɛpɛ.

<p class = "text-left" > Nkyerɛwee a wɔahyɛ no benkum so. </p> no 
<p class = "nkyerɛwee-mfinimfini" > Nkyerɛwee a wɔahyɛ no mfinimfini . </p> no 
<p class = "text-right" > Nsɛm a wɔahyehyɛ no nifa so. </p> no

Adesua ahorow a wosi so dua

Da ntease adi denam kɔla so denam nsa kakraa bi a wosi so dua mfaso adesua ahorow so.

Fusce dapibus, tellus ac nnome commodo, tortor mauris nibh.

Etiam porta sem ɔbarima a ɔyɛ ɔbarima a ɔyɛ ɔbarima.

Donec ullamcorper nulla a ɛnyɛ nea ɛyɛ adetɔnfo fringilla.

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis a ɛyɛ fɛ no yɛ nea ɛyɛ fɛ yiye.

Duis mollis, est a ɛnyɛ commodo luctus, nisi erat porttitor ligula.

<p adesuakuw = "wɔayɛ mum" > Fusce dapibus, tellus ac nnome commodo, tortor mauris nibh. </p> no 
<p class = "nkyerɛwee-kɔkɔbɔ" > Etiam porta sem malesuada magna mollis euismod. </p> no 
<p class = "nkyerɛwee-mfomso" > Donec ullamcorper nulla a ɛnyɛ metus auctor fringilla. </p> no 
<p class = "nsɛm-nsɛm" > Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis a ɛyɛ fɛ no yɛ nea ɛyɛ fɛ yiye. </p> no 
<p class = "nsɛm-a-nkonimdi" > Duis mollis, est a ɛnyɛ commodo luctus, nisi erat porttitor ligula. </p> no

Nsɛmfua a wɔatwa no tiaa

Stylized implementation of HTML's <abbr>element ma abbreviations ne acronyms de kyerɛ nkyerɛase a wɔatrɛw mu no wɔ hover so. Nsɛmfua a wɔatwa no tiaa a ɛwɔ titlesu bi wɔ ase hye a ɛwɔ nsensanee a ɛyɛ hann ne mmoa cursor wɔ hover so, a ɛma nsɛm a ɛfa ho foforo wɔ hover so.

`<abbr>`

Sɛ wopɛ nsɛm a wɔatrɛw mu wɔ long hover a ɛwɔ abbreviation bi so a, fa titleattribute no ka ho.

Asɛmfua su no a wɔatwa no tiaa ne attr .

<abbr asɛmti = "su" > attr </abbr>

`<abbr class="initialism">`

Fa ka .initialismasɛmfua tiawa bi ho ma font-size a ɛyɛ ketewaa bi.

HTML yɛ ade a eye sen biara fi bere a wɔatwitwa paanoo no.

<abbr title = "HyperText Markup Kasa" class = "mfiase" > HTML </abbr>

Address ahorow

Fa nana a ɔbɛn no anaa adwuma no nyinaa nkitahodi ho nsɛm kyerɛ.

`<address>`

Kora formatting so denam nkyerɛwde nyinaa a wode bɛhyɛ awiei no so <br>.

795
Folsom Ave, Suite 600
San Francisco, CA 94107 Kr
: (123)

Edin a edi mũ
[email protected]

<address>
  <strong> Twitter, Inc. </strong><br> Nsɛm a wɔka kyerɛ
  795 Folsom Ave, Ɔdan 600 <br>
  San Francisco, CA 94107 <br> . Ɔde ne nsa kyerɛɛ ne so
  <abbr asɛmti = "Telefon" > P: </abbr> (123) 456-7890. Ɔde ne nsa kyerɛɛ ne so, na ɔde ne nsa kyerɛɛ ne so bio 
</address> no ho
 
<address>
  <strong> Edin mũ no nyinaa </strong><br>
  <a href = "mailto:#" > nea edi kan.a etwa to@nhwɛso.com </a> 
</address> no ho

Nsɛm a wɔde siw ano

Sɛ wopɛ sɛ wofa nsɛm a wɔabɔ no mua a efi baabi foforo a ɛwɔ wo krataa no mu a.

Default a wɔde ahyɛ mu

Fa HTML<blockquote> biara kyekyere ho sɛ asɛm a wɔafa aka no. Sɛ wopɛ nsɛm a wɔafa aka tẽẽ a yɛkamfo kyerɛ sɛ .<p>

Lorem ipsum dolor tena amet, consectetur adipiscing a ɛyɛ fɛ a ɛyɛ fɛ. Nkyekyɛm a edi mũ posuere erat a ante.

<asɛm a wɔde siw ano>
  | _ Nkyekyɛm a edi mũ posuere erat a ante. </p> no
</blockquote> a wɔde kyerɛw nsɛm

Blockquote a wobɛpaw no

Style ne emu nsɛm sesa ma nsakrae a ɛnyɛ den wɔ standard blockquote so.

Fibea bi din a wɔbɛbɔ

Fa <small>tag ka ho na ama woahu baabi a wonya fi. Fa fibea adwuma no din kyekyere <cite>.

Lorem ipsum dolor tena amet, consectetur adipiscing a ɛyɛ fɛ a ɛyɛ fɛ. Nkyekyɛm a edi mũ posuere erat a ante.
Obi a wagye din wɔ Source Title mu

<asɛm a wɔde siw ano>
  | _ Nkyekyɛm a edi mũ posuere erat a ante. </p> no
  <small> Obi a wagye din <cite title = "Fibea Asɛmti" > Fibea Asɛmti </cite></small> 
</blockquote> a wɔde kyerɛw nsɛm

Nneɛma foforo a wɔde kyerɛ

Fa di dwuma .pull-rightma blockquote a ɛsensɛn nsu so, a ɛwɔ nifa so.

Lorem ipsum dolor tena amet, consectetur adipiscing a ɛyɛ fɛ a ɛyɛ fɛ. Nkyekyɛm a edi mũ posuere erat a ante.
Obi a wagye din wɔ Source Title mu

<blockquote adesuakuw = "twe-nifa" > 
  ...
</blockquote> a wɔde kyerɛw nsɛm

Nsɛm a wɔahyehyɛ

Wɔnhyɛ da

Nneɛma a wɔahyehyɛ a nhyehyɛe no ho nhia pefee.

Lorem ipsum dolor tena ase amet
Consectetur adipiscing a ɛyɛ fɛ yiye
Integer molestie lorem wɔ massa no mu
Facilisis a ɛwɔ pretium nisl aliquet mu
Nulla volutpat a ɛyɛ aduru a wɔde yɛ aduru
- Phasellus iaculis a ɛwɔ nipadua no mu
- Purus sodales a ɛyɛ aduru a ɛma obi ho yɛ hyew
- Vestibulum laoreet hyɛn gyinabea sem
- Ac tristique libero a ɔyɛ ɔbarima a ɔpɛ sɛ ɔyɛ biribiara
Faucibus porta lacus a ɛyɛ fɛ a ɛyɛ fɛ
Aenean tena ase amet erat nunc
Eget porttitor a ɔyɛ ɔkyerɛkyerɛfo

<ul> no
  <li> ... </li> na ɛwɔ hɔ
</ul>

Wɔahyɛ sɛ

Nneɛma a wɔahyehyɛ a nhyehyɛe no ho hia pefee wom.

Lorem ipsum dolor tena ase amet
Consectetur adipiscing a ɛyɛ fɛ yiye
Integer molestie lorem wɔ massa no mu
Facilisis a ɛwɔ pretium nisl aliquet mu
Nulla volutpat a ɛyɛ aduru a wɔde yɛ aduru
Faucibus porta lacus a ɛyɛ fɛ a ɛyɛ fɛ
Aenean tena ase amet erat nunc
Eget porttitor a ɔyɛ ɔkyerɛkyerɛfo

<ol> no
  <li> ... </li> na ɛwɔ hɔ
</ol>

Wɔannwene no

Yi default list-stylene benkum padding wɔ list nneɛma (mmofra ntɛm ara nkutoo).

Lorem ipsum dolor tena ase amet
Consectetur adipiscing a ɛyɛ fɛ yiye
Integer molestie lorem wɔ massa no mu
Facilisis a ɛwɔ pretium nisl aliquet mu
Nulla volutpat a ɛyɛ aduru a wɔde yɛ aduru
- Phasellus iaculis a ɛwɔ nipadua no mu
- Purus sodales a ɛyɛ aduru a ɛma obi ho yɛ hyew
- Vestibulum laoreet hyɛn gyinabea sem
- Ac tristique libero a ɔyɛ ɔbarima a ɔpɛ sɛ ɔyɛ biribiara
Faucibus porta lacus a ɛyɛ fɛ a ɛyɛ fɛ
Aenean tena ase amet erat nunc
Eget porttitor a ɔyɛ ɔkyerɛkyerɛfo

<ul class = "wɔnnwene" > 
  <li> ... </li> na ɛwɔ hɔ
</ul>

Inline no mu

Fa list nneɛma nyinaa gu line biako so ne inline-blockne padding bi a ɛyɛ hann.

Lorem ipsum a ɔyɛ ɔbarima
Phasellus a wɔfrɛ no iaculis a wɔfrɛ no iaculis
Nulla a ɔyɛ ɔkwasea

<ul adesuakuw = "inline" > 
  <li> ... </li> na ɛwɔ hɔ
</ul>

Nkyerɛmu

Nsɛmfua a wɔahyehyɛ a nkyerɛkyerɛmu ahorow a ɛbata ho.

Nkyerɛkyerɛmu ahorow a wɔahyehyɛ: Nkyerɛkyerɛmu a wɔahyehyɛ no yɛ pɛpɛɛpɛ ma nsɛmfua nkyerɛase.
Euismod ho asɛm: Vestibulum id ligula porta felis euismod nsuo a ɛyɛ fɛ a ɛma obi nya lacinia odio sem nec elit.; Donec id elit a ɛnyɛ mi porta gravida wɔ eget metus.
Malesuada a ɛwɔ porta: Etiam porta sem ɔbarima a ɔyɛ ɔbarima a ɔyɛ ɔbarima.

<dl> na ɛwɔ hɔ
  <dt> ... </dt> na ɛwɔ hɔ
  <dd> ... </dd> na ɛwɔ hɔ
</dl> no

Horizontal nkyerɛkyerɛmu

Yɛ nsɛmfua ne nkyerɛkyerɛmu ahorow a <dl>wɔahyehyɛ no nnidiso nnidiso wɔ nkyɛnkyɛn.

Nkyerɛkyerɛmu ahorow a wɔahyehyɛ: Nkyerɛkyerɛmu a wɔahyehyɛ no yɛ pɛpɛɛpɛ ma nsɛmfua nkyerɛase.
Euismod ho asɛm: Vestibulum id ligula porta felis euismod nsuo a ɛyɛ fɛ a ɛma obi nya lacinia odio sem nec elit.; Donec id elit a ɛnyɛ mi porta gravida wɔ eget metus.
Malesuada a ɛwɔ porta: Etiam porta sem ɔbarima a ɔyɛ ɔbarima a ɔyɛ ɔbarima.
Felis euismod semper a ɛma obi nya lacinia: Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut aduru a wɔde yɛ aduru a ɛma obi tena ase amet risus.

<dl adesuakuw = "dl-a ɛkɔ soro" > 
  <dt> ... </dt> na ɛwɔ hɔ
  <dd> ... </dd> na ɛwɔ hɔ
</dl> no

Ti a ɛwɔ soro!Horizontal description lists bɛtwa nsɛmfua a ɛware dodo sɛ ɛbɛhyɛ benkum column fix text-overflowno mu . Wɔ viewports teateaa mu no, wɔbɛsesa akɔ default stacked layout no so.

Inline no mu

Fa inline snippets a ɛwɔ code no mu no kyekyere <code>.

Sɛ nhwɛso no, <section>ɛsɛ sɛ wɔkyekyere no sɛ inline.

Sɛ nhwɛso no , <kode> & lt ; ɛsɛ sɛ wɔkyekyere ɔfã & gt ;</ code > no sɛ inline .

Mfitiaseɛ block

Fa di dwuma <pre>ma koodu nkyerɛwde ahorow pii. Hwɛ hu sɛ wubeguan afi angle brackets biara a ɛwɔ code no mu no mu na ama woatumi akyerɛ ase yiye.

<p>Nsɛm a wɔakyerɛw no nhwɛso wɔ ha...</p>

<pre> no
  <p>Nsɛm a wɔakyerɛw ho nhwɛso wɔ ha...</p>
</pre> no

Ti a ɛwɔ soro!Hwɛ hu sɛ wode code bɛto <pre>tags no mu a ɛbɛn benkum sɛnea wubetumi; ɛbɛkyerɛ tab ahorow no nyinaa ase.

Wubetumi apaw de .pre-scrollableadesuakuw a ɛbɛhyehyɛ max-height a ɛyɛ 350px na ama y-axis scrollbar no aka ho.

Default ahorow a wɔde yɛ nneɛma

Sɛ wopɛ sɛ woyɛ nneɛma titiriw a wɔde yɛ nneɛma—a wɔde hyɛ mu a ɛyɛ hare ne nneɛma a wɔde kyekyɛ nneɛma mu a ɛkɔ soro nkutoo a—fa nnyinaso adesuakuw .tableno ka biara <table>ho .

# .	Fie din	Abusuadin	Edin a wɔde di dwuma
1. 1.	Marko	Otto na ɔkyerɛwee	@mdo na ɔkyerɛwee
2. 2.	Yakob	Thornton na ɔkyerɛwee	@kɛseɛ
3. 3	Larry na ɔkyerɛwee	Anomaa no	@twitter so

<pon adesua = "pon" > 
  ...
</table> no

Adesua ahorow a wobetumi apaw

Fa adesua a edidi so yi mu biara ka adesua a edidi so yi ho .table.

`.table-striped`

Ɔde zebra-striping ka table row biara a ɛwɔ <tbody>via :nth-childCSS selector no mu (ɛnyɛ wɔ IE7-8 mu).

# .	Fie din	Abusuadin	Edin a wɔde di dwuma
1. 1.	Marko	Otto na ɔkyerɛwee	@mdo na ɔkyerɛwee
2. 2.	Yakob	Thornton na ɔkyerɛwee	@kɛseɛ
3. 3	Larry na ɔkyerɛwee	Anomaa no	@twitter so

<pon adesua = "pon pon-striped" > 
  ...
</table> no

`.table-bordered`

Fa ahye ne ntwea a ɛyɛ kurukuruwa ka pon no ho.

# .	Fie din	Abusuadin	Edin a wɔde di dwuma
1. 1.	Marko	Otto na ɔkyerɛwee	@mdo na ɔkyerɛwee
1. 1.	Marko	Otto na ɔkyerɛwee	@getbootstrap na ɛyɛ
2. 2.	Yakob	Thornton na ɔkyerɛwee	@kɛseɛ
3. 3	Larry Anomaa no		@twitter so

<table class = "pon a ɛwɔ pon so" > 
  ...
</table> no

`.table-hover`

Ma hover tebea nyɛ adwuma wɔ table rows a ɛwɔ a <tbody>.

# .	Fie din	Abusuadin	Edin a wɔde di dwuma
1. 1.	Marko	Otto na ɔkyerɛwee	@mdo na ɔkyerɛwee
2. 2.	Yakob	Thornton na ɔkyerɛwee	@kɛseɛ
3. 3	Larry Anomaa no		@twitter so

<pon adesua = "pon pon-hover" > 
  ...
</table> no

`.table-condensed`

Ɛma pon ahorow no yɛ ketewaa kɛse denam cell padding a etwitwa mu abien no so.

# .	Fie din	Abusuadin	Edin a wɔde di dwuma
1. 1.	Marko	Otto na ɔkyerɛwee	@mdo na ɔkyerɛwee
2. 2.	Yakob	Thornton na ɔkyerɛwee	@kɛseɛ
3. 3	Larry Anomaa no		@twitter so

<table class = "pon pon-a wɔatwa no tiaa" > 
  ...
</table> no

row adesua ahorow a wobetumi apaw

Fa nsɛm a ɛfa ho adesua ahorow di dwuma de kɔla pon row ahorow.

Klaase	Nkyerɛmu
`.success`	Ɛkyerɛ adeyɛ a edi mu anaasɛ ɛyɛ papa.
`.error`	Ɛkyerɛ adeyɛ a asiane wom anaasɛ ebetumi ayɛ bɔne.
`.warning`	Kyerɛ kɔkɔbɔ bi a ebia ebehia sɛ wɔde wɔn adwene si so.
`.info`	Wɔde di dwuma sɛ ɔkwan foforo a wɔfa so si default styles no ananmu.

# .	Adwadeɛ	Wɔagye Katua	Gyinabea
1. 1.	TB - Bosome biara	01/04/2012 na ɛyɛ	Agye atom
2. 2.	TB - Bosome biara	02/04/2012 na ɛyɛ	Wɔpowee
3. 3	TB - Bosome biara	03/04/2012 na ɛyɛ	Retwɛn
4. 4.	TB - Bosome biara	04/04/2012 na ɛyɛ	Frɛ mu na si so dua

...
  < tr class = "nkonimdi" >
    <td> 1 < /td> na ɛwɔ hɔ
    <td>TB - Ɔsram biara</ td >
    <td> 01 / 04 / 2012 < /td>. Ɔde ne nsa kyerɛɛ ne so
    <td>Wɔapene so</ td >
  </ tr > no
...

Wɔboa pon agyiraehyɛde

Kyerɛw table HTML elements a wɔboa ne sɛnea ɛsɛ sɛ wɔde di dwuma.

Ahyɛnsoɔ	Nkyerɛmu
`<table>`	Wrapping element a wɔde kyerɛ data wɔ tabular format mu
`<thead>`	Container element ma table header rows ( `<tr>`) de hyɛ table columns agyirae
`<tbody>`	Container element ma table rows ( `<tr>`) wɔ table no nipadua mu
`<tr>`	Container element ma table cells ( `<td>`anaa `<th>`) a epue wɔ row biako so
`<td>`	Default table cell a wɔde ahyɛ mu
`<th>`	Table cell soronko ma column (anaasɛ row, a egyina scope ne placement so) labels
`<caption>`	Nea pon no kura ho nkyerɛkyerɛmu anaa nsɛm a wɔaboaboa ano, titiriw a ɛho wɔ mfaso ma screen akenkanfo

<pon>
  <nsɛmfua> ... </nsɛmfua>
  <ti>
    <tr>
      <th> ... </th> no ho asɛm
      <th> ... </th> no ho asɛm
    </tr>a ɛwɔ hɔ
  </thead> no ho
  <nipadua>
    <tr>
      <td> ... </td> na ɛwɔ hɔ
      <td> ... </td> na ɛwɔ hɔ
    </tr>a ɛwɔ hɔ
  </tbody> no ho
</table> no

Default ahorow a wɔde yɛ nneɛma

Ankorankoro fom controls nya styling, nanso enni biribiara a wɔhwehwɛ base class wɔ <form>anaa nsakrae kɛse wɔ markup mu. Ɛde nkyerɛwde ahorow a wɔaboaboa ano, a wɔahyehyɛ no benkum so ba wɔ fom no sohwɛ ahorow no atifi.

<fom>
  <afuw mu nhyehyɛe>
    <anansesɛm> Atetesɛm </anansesɛm>
    <label> Label din </label>
    <input type = "text" placeholder = "Twerɛ biribi..." >  
    <span class = "help-block" > Nhwɛsoɔ block-level mmoa nkyerɛwee wɔ ha. </span> no 
    <label adesuakuw = "nhyɛnsode adaka" > 
      <input type = "checkbox" > Hwɛ me 
    </label> no ho nsɛm
    <button type = "fa kɔ" class = "btn" > Fa kɔ </button>  
  </afuw mu nhyehyɛe>
</form>

Nhyehyɛe ahorow a wobetumi apaw

Nea ɛka Bootstrap ho ne nkyerɛwde nhyehyɛe abiɛsa a wobetumi apaw ama nsɛm a wɔtaa de di dwuma.

Hwehwɛ kratasin no

Fa ka .form-searchkratasin no ho na .search-queryfa ka ho <input>ma nsɛm a wɔde hyɛ mu a ɛyɛ kurukuruwa kɛse.

<form class = "kwan-hwehwɛ" > 
  <input type = "text" class = "input-medium hwehwɛ-asɛmmisa" >  
  <button type = "submit" class = "btn" > Hwehwɛ </bɔtn>  
</form>

Inline kratasin no

Fa ka ho .form-inlinema benkum-aligned labels ne inline-block controls ma compact nhyehyɛe.

<fom adesuakuw = "fom-inline" > 
  <nhyɛaseɛ su = "nkyerɛwee" adesuakuw = "nhyɛaseɛ-ketewa" beaeɛ = "Email" >   
  <input type = "password" class = "input-ketewa" beae = "Asɛmfua" >   
  <label adesuakuw = "nhyɛnsode adaka" > 
    <input type = "checkbox" > Kae me 
  </label> no ho nsɛm
  <button type = "submit" class = "btn" > Fa wo ho hyɛ mu </button>  
</form>

Ɔkwan a wɔfa so yɛ ade a ɛkɔ soro

Fa label ahorow no hyɛ nifa so na fa gu benkum so na ama ada adi wɔ line koro no ara so sɛ controls ahorow no. Ɛhwehwɛ sɛ wɔyɛ nsakrae kɛse wɔ agyiraehyɛde mu fi kratasin a wɔahyɛ da ayɛ no mu:

Fa ka .form-horizontalkratasin no ho
Fa nkyerɛwde ne nneɛma a wɔde di dwuma no kyekyere mu.control-group
Fa ka .control-labellabel no ho
Fa controls biara a ɛbata ho no kyekyere mu .controlsma ɛne no hyia yiye

<fom adesuakuw = "fom-horizontal" > 
  <div class = "ahyɛnsodeɛ-kuo" > 
    <label class = "ahyɛnsodeɛ-ahyɛnsodeɛ" ma = "inputEmail" > Email </label>  
    <div adesuakuw = "ahyɛnsode" > 
      <nhyɛaseɛ type = "nkyerɛwee" id = "nhyɛaseɛEmail" beaeɛ = "Email" >   
    </div> no
  </div> no
  <div class = "ahyɛnsodeɛ-kuo" > 
    <label class = "control-label" for = "asɛmfua a wɔde hyɛ mu" > Asɛmfua </label>  
    <div adesuakuw = "ahyɛnsode" > 
      <nhyɛaseɛ type = "asɛmfua" id = "nhyɛaseɛAsɛmfua" beaeɛ = "Asɛmfua" >   
    </div> no
  </div> no
  <div class = "ahyɛnsodeɛ-kuo" > 
    <div adesuakuw = "ahyɛnsode" > 
      <label adesuakuw = "nhyɛnsode adaka" > 
        <input type = "checkbox" > Kae me 
      </label> no ho nsɛm
      <button type = "submit" class = "btn" > Fa wo ho hyɛ mu </button>  
    </div> no
  </div> no
</form>

Wɔboa kratasin sohwɛ ahorow

Nhwɛsoɔ a ɛfa standard form controls a wɔboa wɔ nhwɛsoɔ form layout mu.

Nsɛm a wɔde hyɛ mu

Fom sohwɛ a wɔtaa de di dwuma, nsɛm a wɔde hyɛ mu a egyina nsɛm so. Nea ɛka ho ne mmoa a wɔde ma HTML5 ahorow nyinaa: nsɛm, asɛmfua, datetime, datetime-local, date, ɔsram, bere, dapɛn, nɔma, email, url, hwehwɛ, tel, ne kɔla.

Ɛhwehwɛ sɛ wɔde a wɔakyerɛ di dwuma typebere nyinaa.

<input type = "nkyerɛwee" beae = "Nsɛm a wɔde hyɛ mu" >

Textarea a wɔde kyerɛw nsɛm

Form control a ɛboa nkyerɛwee ahorow pii. Sesa rowssu no sɛnea ɛho hia.

<nkyerɛweebea rows = "3" ></nkyerɛweebea>

Nnaka a wɔde hyɛ nneɛma mu ne radio ahorow

Checkboxes yɛ nea wɔde paw ɔkwan biako anaa pii wɔ list bi mu bere a radio ahorow yɛ nea wɔde paw ɔkwan biako fi pii mu.

Default (a wɔaboaboa ano) .

<label adesuakuw = "nhyɛnsode adaka" > 
  <input type = "nhyɛaseɛ adaka" botae = "" >  
  Ɔkwan a edi kan ne eyi ne ɛno —hwɛ hu sɛ wode nea enti a ɛyɛ kɛse no bɛka ho
</label> no ho nsɛm
 
<label adesuakuw = "radio" > 
  <input type = "radio" din = "optionsRadios" id = "optionsRadios1" botae = "option1" a wɔahyɛ >     
  Ɔkwan a edi kan ne eyi ne ɛno —hwɛ hu sɛ wode nea enti a ɛyɛ kɛse no bɛka ho
</label> no ho nsɛm
<label adesuakuw = "radio" > 
  <input type = "radio" din = "optionsRadios" id = "optionsRadios2" botae = "ɔpaw2" >    
  Option two betumi ayɛ biribi foforo na sɛ wopaw no a, ɛbɛyi option one no afi hɔ
</label> no ho nsɛm

Nneɛma a wɔde hyɛ mu

Fa .inlineadesua no ka checkboxes anaa radio ahorow a ɛtoatoa so ho ma controls no pue wɔ line koro no ara so.

<label class = "nhyɛnsodeɛ adaka no mu" > 
  <input type = "nhyɛaseɛ adaka" id = "inlineCheckbox1" botae = "ɔpaw1" > 1   
</label> no ho nsɛm
<label class = "nhyɛnsodeɛ adaka no mu" > 
  <input type = "nhyɛaseɛ adaka" id = "inlineCheckbox2" botae = "ɔpaw2" > 2   
</label> no ho nsɛm
<label class = "nhyɛnsodeɛ adaka no mu" > 
  <input type = "nhyɛaseɛ adaka" id = "inlineCheckbox3" botae = "ɔpaw3" > 3   
</label> no ho nsɛm

Ɔpaw

Fa default option no di dwuma anaa kyerɛ a multiple="multiple"na kyerɛ option ahorow pii prɛko pɛ.

<paw>
  <apaw> 1 </apaw>
  <apaw> 2 </apaw>
  <apaw> 3 </apaw>
  <apaw> 4 </apaw>
  <apaw> 5 </apaw>
</paw>
 
<paw dodow = "dodow" > 
  <apaw> 1 </apaw>
  <apaw> 2 </apaw>
  <apaw> 3 </apaw>
  <apaw> 4 </apaw>
  <apaw> 5 </apaw>
</paw>

Ntrɛwmu a wɔde di dwuma wɔ kratasin so

Sɛ wode ka ho wɔ browser controls a ɛwɔ hɔ dedaw no so a, Bootstrap de fom no afã afoforo a mfaso wɔ so ka ho.

Nsɛm a wɔde ahyɛ mu ne nea wɔde aka ho

Fa nsɛm anaa bɔtn ahorow ka ho ansa na wode nsɛm biara a egyina nsɛm so ahyɛ mu anaasɛ akyi. Hyɛ no nsow sɛ selectwɔmfa element ahorow nhyɛ ha.

Default ahorow a wobetumi apaw

Fa adesuakuw abien no mu biako kyekyere an .add-onne an inputho de prepend anaa fa nsɛm ka input bi ho.

<div adesuakuw = "nhyɛase-prepend" > 
  <span adesuakuw = "a wɔde ka ho" > @ </span> 
  <input class = "span2" id = "prependedInput" type = "nkyerɛwee" beae = "Ɔdefo din" >    
</div> no
<div class = "nhyɛase-a wɔde ka ho" > 
  <input class = "span2" id = "a wɔde ahyɛ muInput" type = "nkyerɛwee" >   
  <span adesuakuw = "a wɔde ka ho" > .00 </span> 
</div> no

Wɔaka abom

Fa adesua abien no nyinaa ne nhwɛso abien a ɛwɔ mu no .add-ondi dwuma de prepend na fa input bi ka ho.

<div class = "nhyɛase-prepend nhyɛase-fa" > 
  <span adesuakuw = "a wɔde ka ho" > $ </span> 
  <input class = "span2" id = "a wɔde ahyɛ muPrependedInput" type = "nkyerɛwee" >   
  <span adesuakuw = "a wɔde ka ho" > .00 </span> 
</div> no

Buttons mmom sen sɛ wobɛkyerɛw nsɛm

Sɛ́ anka <span>wode nsɛm bɛka ho no, fa a .btnfa bɔtn (anaa abien) bata nsɛm a wode bɛhyɛ mu ho.

<div class = "nhyɛase-a wɔde ka ho" > 
  <input class = "span2" id = "a wɔde ahyɛ muInputButton" type = "nkyerɛwee" >   
  <button class = "btn" type = "bɔtn" > Kɔ! </button> no ho  
</div> no

<div class = "nhyɛase-a wɔde ka ho" > 
  <nhyɛase adesuakuw = "span2" id = "a wɔde ahyɛ muButtons" type = "nkyerɛwee" >   
  <button class = "btn" type = "button" > Hwehwɛ </bɔtn>  
  <button class = "btn" type = "button" > Nneɛma a wobetumi apaw </button>  
</div> no

Button a ɛwɔ ase hɔ

<div class = "nhyɛase-a wɔde ka ho" > 
  <input class = "span2" id = "a wɔde aka hoDropdownButton" type = "nkyerɛwee" >   
  <div adesuakuw = "btn-kuw" > 
    <button class = "btn a ɛkɔ fam-toggle" data-toggle = "a ɛba fam" >  
      Anamɔntuo
      <span adesuakuw = "caret" ></span> 
    </button> no ho
    <ul class = "nsɛm a ɛwɔ ase hɔ" > 
      ...
    </ul>
  </div> no
</div> no

<div adesuakuw = "nhyɛase-prepend" > 
  <div adesuakuw = "btn-kuw" > 
    <button class = "btn a ɛkɔ fam-toggle" data-toggle = "a ɛba fam" >  
      Anamɔntuo
      <span adesuakuw = "caret" ></span> 
    </button> no ho
    <ul class = "nsɛm a ɛwɔ ase hɔ" > 
      ...
    </ul>
  </div> no
  <input class = "span2" id = "prependedDropdownButton" type = "nkyerɛwee" >   
</div> no

<div class = "nhyɛase-prepend nhyɛase-fa" > 
  <div adesuakuw = "btn-kuw" > 
    <button class = "btn a ɛkɔ fam-toggle" data-toggle = "a ɛba fam" >  
      Anamɔntuo
      <span adesuakuw = "caret" ></span> 
    </button> no ho
    <ul class = "nsɛm a ɛwɔ ase hɔ" > 
      ...
    </ul>
  </div> no
  <input class = "span2" id = "a wɔde ahyɛ muDropdownButton" type = "nkyerɛwee" >   
  <div adesuakuw = "btn-kuw" > 
    <button class = "btn a ɛkɔ fam-toggle" data-toggle = "a ɛba fam" >  
      Anamɔntuo
      <span adesuakuw = "caret" ></span> 
    </button> no ho
    <ul class = "nsɛm a ɛwɔ ase hɔ" > 
      ...
    </ul>
  </div> no
</div> no

Akuw a wɔde nneɛma gu fam a wɔakyekyɛ mu

<fom>
  <div adesuakuw = "nhyɛase-prepend" > 
    <div adesuakuw = "btn-kuw" > ... </div> 
    <input type = "nkyerɛwee" > 
  </div> no
  <div class = "nhyɛase-a wɔde ka ho" > 
    <input type = "nkyerɛwee" > 
    <div adesuakuw = "btn-kuw" > ... </div> 
  </div> no
</form>

Hwehwɛ kratasin no

<form class = "kwan-hwehwɛ" > 
  <div class = "nhyɛase-a wɔde ka ho" > 
    <input type = "nkyerɛwee" adesuakuw = "span2 hwehwɛ-asɛmmisa" >  
    <button type = "submit" class = "btn" > Hwehwɛ </bɔtn>  
  </div> no
  <div adesuakuw = "nhyɛase-prepend" > 
    <button type = "submit" class = "btn" > Hwehwɛ </bɔtn>  
    <input type = "nkyerɛwee" adesuakuw = "span2 hwehwɛ-asɛmmisa" >  
  </div> no
</form>

Di sizing so

Fa relative sizing classes te sɛ .input-largeanaa ɛne wo inputs no hyia grid column sizes a wode .span*classes di dwuma no hyia.

Block level nsɛm a wɔde hyɛ mu

Ma biribiara <input>anaa <textarea>element biara nyɛ n’ade te sɛ block level element.

<input class = "input-block-level" type = "nkyerɛwee" beae a wɔde hyɛ = ".input-block-level" >

Sizing a ɛfa ho

<input class = "input-mini" type = "nkyerɛwee" beae a wɔde hyɛ = ".input-mini" >   
<input class = "input-ketewa" type = "nkyerɛwee" beae = ".input-ketewa" >   
<input class = "input-medium" type = "nkyerɛwee" beae a wɔde hyɛ = ".input-medium" >   
<input class = "input-kɛse" type = "nkyerɛwee" beae = ".input-kɛse" >   
<input class = "input-xlarge" type = "nkyerɛwee" beae = ".input-xlarge" >   
<input class = "input-xxlarge" type = "nkyerɛwee" beae a wɔde hyɛ = ".input-xxlarge" >

Ti a ɛwɔ soro!Wɔ daakye nkyerɛase ahorow mu no, yɛbɛsesa sɛnea wɔde saa relative input class ahorow yi di dwuma no ma ɛne yɛn button akɛse no ahyia. Sɛ nhwɛso no, .input-largeɛbɛma padding ne font-size a ɛwɔ input bi mu no ayɛ kɛse.

Grid no kɛseyɛ

Fa .span1to di dwuma .span12ma nsɛm a wɔde hyɛ mu a ɛne grid columns no akɛse koro no ara hyia.

<input class = "span1" type = "nkyerɛwee" beae = ".span1" >   
<input class = "span2" type = "nkyerɛwee" beae = ".span2" >   
<input class = "span3" type = "nkyerɛwee" beae = ".span3" >   
<paw adesuakuw = "span1" > 
  ...
</paw>
<paw adesuakuw = "span2" > 
  ...
</paw>
<paw adesuakuw = "span3" > 
  ...
</paw>

Sɛ wopɛ grid inputs pii wɔ line biara mu a, fa .controls-rowmodifier class no di dwuma ma spacing a ɛfata . Ɛde nsɛm a wɔde ahyɛ mu no hyɛ nsuo mu ma ɛbubu white-space, ɛde margins a ɛfata si hɔ, na ɛpopa float no.

<div adesuakuw = "ahyɛnsode" > 
  <input class = "span5" type = "nkyerɛwee" beae = ".span5" >   
</div> no
<div class = "ahyɛnsodeɛ-row" > 
  <input class = "span4" type = "nkyerɛwee" beae = ".span4" >   
  <input class = "span1" type = "nkyerɛwee" beae = ".span1" >   
</div> no
...

Nsɛm a wɔde hyɛ mu a wontumi nsiesie

Fa data kyerɛ wɔ ɔkwan a ɛnyɛ nea wotumi sesa so a wɔmfa fom agyiraehyɛde ankasa nni dwuma.

<span class = "input-xlarge uneditable-input" > Nneɛma bi a ɛsom bo wɔ ha </span>

Form nneyɛe

Fa nneyɛe kuw (buttons) ba awiei kratasin bi. Sɛ wode si a , mu a .form-actions, bɔtɔn ahorow no bɛkɔ mu ara kwa ma ɛne kratasin no sohwɛ ahorow no ahyia.

<div class = "ɔkwan-nneɛma" > 
  <button type = "submit" class = "btn btn-primary" > Fa nsakraeɛ sie </button>  
  <button type = "button" adesuakuw = "btn" > Twa mu </button>  
</div> no

Mmoa nsɛm

Inline ne block level mmoa ma mmoa nsɛm a epue wɔ fom controls ho.

Mmoa a ɛwɔ intanɛt so

<input type = "text" ><span class = "mmoa-inline" > Inline mmoa nsɛm </span>

Siw mmoa ano

<input type = "text" ><span class = "help-block" > Mmoa nkyerɛwee a ɛware a ɛpaapae kɔ nkyerɛwde foforo so na ebetumi atrɛw asen nkyerɛwde biako. </span> no

Form control tebea horow

Fa nsɛm a wɔka kyerɛ wɔn a wɔde di dwuma anaa nsrahwɛfo a wɔde nsɛm a wɔka kyerɛ titiriw a ɛfa kratasin sohwɛ ne nkyerɛwde ahorow ho ma.

Fa w’adwene si so

Yɛyi default outlinestyles a ɛwɔ form controls bi so no na yɛde a box-shadowsi n’ananmu ma :focus.

<input class = "input-xlarge" id = "focusedInput" type = "nkyerɛwee" botae = "Eyi yɛ nea wɔde wɔn adwene si so..." >

Nsɛm a wɔde hyɛ mu a enni mu

Style inputs via default browser dwumadie a ɛwɔ :invalid. Kyerɛ a type, fa requiredsu no ka ho sɛ afuw no nyɛ nea wopɛ a, na (sɛ ɛfata a) kyerɛ a pattern.

Eyi nni hɔ wɔ Internet Explorer 7-9 nkyerɛase ahorow mu esiane sɛ wonnya mmoa mma CSS pseudo selectors nti.

<input class = "span3" type = "email" a ɛho hia >

Nsɛm a wɔde hyɛ mu a wɔadi dɛm

Fa disabledattribute no ka ho wɔ input bi so na asiw ɔdefo no input ano na woakanyan hwɛ soronko kakra.

<input class = "input-xlarge" id = "disabledInput" type = "text" beaeɛ = "Wɔagyae nsɛm a wɔde hyɛ mu wɔ ha..." wɔagyae >

Validation ka sɛ

Bootstrap no de validation styles ma mfomso, kɔkɔbɔ, info, ne nkonimdi nkrasɛm ka ho. Sɛ wode bedi dwuma a, fa adesuakuw a ɛfata no ka nea atwa ho ahyia no ho .control-group.

<div class = "ahyɛnsodeɛ-kuo kɔkɔbɔ" > 
  <label class = "control-label" for = "inputWarning" > Nsɛm a wɔde hyɛ mu a kɔkɔbɔ wom </label>  
  <div adesuakuw = "ahyɛnsode" > 
    <nhyɛaseɛ type = "nkyerɛwee" id = "nhyɛaseɛKɔkɔbɔ" >  
    <span class = "help-inline" > Ebia biribi anyɛ yiye </span> 
  </div> no
</div> no
 
<div class = "ahyɛnsodeɛ-kuo mfomsoɔ" > 
  <label class = "control-label" for = "inputError" > Nsɛm a wɔde hyɛ mu a mfomso wom </label>  
  <div adesuakuw = "ahyɛnsode" > 
    <nsɛm a wɔde hyɛ mu no su = "nkyerɛwee" id = "nsɛm a wɔde hyɛ mu Mfomso" >  
    <span class = "help-inline" > Yɛsrɛ wo siesie mfomso no </span> 
  </div> no
</div> no
 
<div class = "ahyɛnsodeɛ-kuo ho nsɛm" > 
  <label class = "control-label" for = "nsɛm a wɔde hyɛ mu" > Nsɛm a wɔde hyɛ mu </label>  
  <div adesuakuw = "ahyɛnsode" > 
    <nsɛm a wɔde hyɛ mu no su = "nkyerɛwee" id = "nsɛm a wɔde hyɛ mu" >  
    <span class = "help-inline" > Wɔafa dwumadie din dedaw </span> 
  </div> no
</div> no
 
<div class = "ahyɛnsodeɛ-kuo nkonimdie" > 
  <label class = "control-label" for = "inputSuccess" > Nsɛm a wɔde hyɛ mu a ɛyɛ nkonimdi </label>  
  <div adesuakuw = "ahyɛnsode" > 
    <nhyɛaseɛ type = "nkyerɛwee" id = "nhyɛaseɛNkonimdie" >  
    <span adesuakuw = "mmoa-inline" > Woohoo! </span> no 
  </div> no
</div> no

Nneɛma a wɔde ahyɛ mu

Wobetumi de button styles adi dwuma wɔ biribiara ho a wɔde .btnadesuakuw no adi dwuma. Nanso, mpɛn pii no wobɛpɛ sɛ wode eyinom di dwuma wɔ nkutoo <a>ne <button>elements ma nkyerɛase a eye sen biara.

Bɔtom	adesuakuw=""	Nkyerɛmu
	`btn`	Standard grey button a ɛwɔ gradient
	`btn btn-primary`	Ɛma aniwa mu duru a ɛboro so na ɛkyerɛ adeyɛ titiriw a ɛwɔ bɔtn ahorow bi mu
	`btn btn-info`	Wɔde di dwuma sɛ ɔkwan foforo a wɔfa so si default styles no ananmu
	`btn btn-success`	Ɛkyerɛ adeyɛ a edi mu anaasɛ ɛyɛ papa
	`btn btn-warning`	Ɛkyerɛ sɛ ɛsɛ sɛ wɔyɛ ahwɛyiye wɔ adeyɛ yi ho
	`btn btn-danger`	Ɛkyerɛ adeyɛ a asiane wom anaasɛ ebetumi ayɛ bɔne
	`btn btn-inverse`	Fa bɔton a ɛyɛ tuntum a ɛyɛ fitaa no sesa, ɛnyɛ nea wɔde kyekyere nkyerɛase adeyɛ anaa dwumadie bi ho
	`btn btn-link`	Si bɔtn bi so dua kɛse denam ma a wobɛma ayɛ te sɛ link bere a wokura bɔtn suban mu no so

Cross browser a ɛne ne ho hyia

IE9 ntwitwa akyi gradients wɔ ntwea a ɛyɛ kurukuruwa so, enti yeyi fi hɔ. Nea ɛfa ho no, IE9 jankifies buttonelements a wɔadi dɛm, rendering text gray ne nasty text-shadow a yentumi nsiesie.

Button akɛse a ɛwɔ hɔ

Fancy akɛse anaa nketewa buttons? Fa .btn-large, .btn-small, anaa .btn-minika ho sɛ wopɛ sɛ wunya akɛse afoforo a.

<p> na ɛwɔ hɔ
  <button class = "btn btn-kɛseɛ btn-primary" type = "bɔtn" > Bɔtɔn kɛseɛ </button>  
  <button class = "btn btn-kɛse" type = "bɔtn" > Bɔtɔn kɛse </button>  
</p> no
<p> na ɛwɔ hɔ
  <button class = "btn btn-primary" type = "bɔtn" > Nsɛm a wɔahyehyɛ </ button >  
  <button class = "btn" type = "button" > Nsɛm a wɔahyehyɛ </button>  
</p> no
<p> na ɛwɔ hɔ
  <button class = "btn btn-ketewa btn-mfitiaseɛ" type = "button" > Button ketewa </button>  
  <button class = "btn btn-ketewa" type = "button" > Bɔton ketewa </button>  
</p> no
<p> na ɛwɔ hɔ
  <bɔtn adesuakuw = "btn btn-mini btn-primary" type = "bɔtɔn" > Mini bɔtn </bɔtn>  
  <bɔtn adesua = "btn btn-mini" type = "bɔtn" > Mini bɔtn </bɔtn>  
</p> no

Yɛ block level buttons—nea ɛtrɛw ɔwofo bi ntrɛwmu nyinaa mu—denam .btn-block.

<button class = "btn btn-kɛseɛ btn-block btn-primary" type = "button" > Siw level bɔtn </button>  
<button class = "btn btn-kɛseɛ btn-block" type = "button" > Block level bɔtn </button>

Tebea a wɔadi dɛm

Ma buttons nyɛ sɛ unclickable denam fading wɔn akyi 50%.

Ankora element a ɛwɔ hɔ

Fa .disabledadesuakuw no ka <a>bɔtn ahorow ho.

Nkitahodi titiriw Link

<a href = "#" class = "btn btn-kɛseɛ btn-mfitiaseɛ no ayɛ adwuma" > Mfitiaseɛ link </a>  
<a href = "#" class = "btn btn-kɛse no ayɛ adwuma" > Link </a>

Ti a ɛwɔ soro!Yɛde di dwuma .disabledsɛ utility class wɔ ha, a ɛte sɛ common .activeclass no, enti prefix biara ho nhia. Afei nso, adesuakuw yi yɛ afɛfɛde nkutoo de; ɛsɛ sɛ wode JavaScript a wɔahyɛ da ayɛ no di dwuma na ama link ahorow a ɛwɔ ha no ayɛ adwuma.

Bɔton no mu ade

Fa disabledsu no ka <button>bɔtn ahorow ho.

<button type = "button" class = "btn btn-kɛse btn-mfitiaseɛ no ayɛ adwuma" disabled = "disabled" > Mfitiaseɛ button </button>   
<button type = "button" class = "btn btn-kɛse" a wɔagyae > Bɔton </bɔtn>

Adesuakuw biako, tag ahorow pii

Fa .btnadesua no di dwuma wɔ <a>, <button>, anaa <input>element bi so.

<a adesuakuw = "btn" href = "" > Nkitahodi </a>  
<button class = "btn" type = "fa kɔ" > Bɔton </bɔtn>  
<input class = "btn" type = "button" botae = "Nsɛm a wɔde hyɛ mu" >   
<input class = "btn" type = "fa kɔ" botae = "Fa kɔ" >

Sɛ́ adeyɛ a eye sen biara no, bɔ mmɔden sɛ wobɛma element no ahyia ama wo nsɛm a ɛfa ho no na ama woahwɛ ahu sɛ cross-browser nkyerɛase no bɛyɛ pɛ. Sɛ wowɔ input, fa bi di dwuma <input type="submit">ma wo bɔtn no.

Fa adesua ahorow ka <img>element bi ho na ama ayɛ mmerɛw sɛ wobɛhyehyɛ mfonini ahorow wɔ adwuma biara mu.

<img src = "..." adesuakuw = "img-a wɔayɛ no kurukuruwa" >  
<img src = "..." adesuakuw = "img-kuruwa" >  
<img src = "..." adesuakuw = "img-polaroid" >

Ti a ɛwɔ soro! .img-roundedna .img-circleɛnyɛ adwuma wɔ IE7-8 mu esiane border-radiusmmoa a wonnya nti.

Ahyɛnsode ahorow a wɔde kyerɛw nsɛm

140 ahyɛnsodeɛ wɔ sprite kwan so, ɛwɔ hɔ wɔ tuntum fitaa (default) ne fitaa, a Glyphicons de ama .

ahyɛnsode-ahwehwɛ
icon-nnwom
ahyɛnsode-hwehwɛ
icon-envelope a wɔde kyerɛw nsɛm
ahyɛnsode-koma
ahyɛnsode-nsoromma
ahyɛnsode-nsoromma-a hwee nni mu
ahyɛnsode-ɔdefo
ahyɛnsode-sini
icon-th-kɛse a ɛto so abien
ahyɛnsode-th
ahyɛnsode-th-list
ahyɛnsode-ok
ahyɛnsode-yi fi hɔ
ahyɛnsode-a-yɛ-soom-in
icon-zoom-a ɛyɛ kɛse
ahyɛnsode-off
ahyɛnsode-nsɛnkyerɛnne
ahyɛnsode-cog
ahyɛnsode-nwura
ahyɛnsode-fie
ahyɛnsode-fael
ahyɛnsode-bere
ahyɛnsode-kwan
ahyɛnsode-twe-alt
ahyɛnsode-twe
ahyɛnsode-upload
ahyɛnsode-inbox
ahyɛnsode-agoru-kyinhyia
ahyɛnsode-a wɔasan ayɛ
ahyɛnsode-a ɛyɛ foforo
ahyɛnsode-kyerɛw-alt
ahyɛnsode-a wɔde hyɛ mu
ahyɛnsode-frankaa
ahyɛnsode-asɛm a wɔde bɔ asom
icon-volume-a wɔadum
icon-volume-a ɛkɔ fam
icon-volume-a ɛwɔ soro
ahyɛnsodeɛ-qrcode
ahyɛnsode-barcode a wɔde di dwuma
ahyɛnsode-tag
ahyɛnsode-tag ahorow
ahyɛnsode-nhoma
ahyɛnsode-nkyerɛwee
ahyɛnsode-tintim
ahyɛnsode-kamera
ahyɛnsode-font
ahyɛnsode-a ɛyɛ den
ahyɛnsode-nkyerɛwee
ahyɛnsode-nsɛm-a-korɔn
ahyɛnsode-nsɛm-trɛw
ahyɛnsode-align-benkum so
icon-align-mfinimfini
icon-align-nifa so
icon-align-bu no bem
ahyɛnsode-nkyerɛwee
ahyɛnsode-indent-benkum so
ahyɛnsode-indent-nifa so
ahyɛnsode-animbere-video
ahyɛnsode-mfonini
ahyɛnsode-pɛnsere
icon-map-agyiraehyɛde
ahyɛnsode-ayɛ nsakrae
ahyɛnsode-tint
ahyɛnsode-sesa
ahyɛnsode-kyɛ
ahyɛnsode-hwɛ
ahyɛnsode-a wɔde tu kwan
icon-anammɔn-akyi
ahyɛnsode-ntɛmntɛm-akyi
ahyɛnsode-akyi
icon-play a wɔde di agoru
ahyɛnsode-gyinabea
ahyɛnsode-gyinabea
ahyɛnsode-anim
icon-fast-forward a wɔde kɔ anim
icon-anammɔn-a ɛkɔ anim
ahyɛnsode-eject
ahyɛnsode-chevron-benkum so
ahyɛnsode-chevron-nifa so
ahyɛnsode-plus-sɛnkyerɛnne
ahyɛnsode-minus-sɛnkyerɛnne
ahyɛnsode-yi-nsɛnkyerɛnne
ahyɛnsode-ok-sɛnkyerɛnne
ahyɛnsode-asɛmmisa-sɛnkyerɛnne
ahyɛnsode-nsɛm-sɛnkyerɛnne
ahyɛnsode-a ɛwɔ screenshot so
ahyɛnsode-yi-kyinhyia
ahyɛnsode-ok-kyinhyia
ahyɛnsode-ban-kyinhyia
ahyɛnsode-agyan-benkum so
ahyɛnsode-agyan-nifa so
ahyɛnsode-agyan-a-kɔ soro
ahyɛnsode-agyan-a ɛkɔ fam
ahyɛnsode-kyɛ-alt
icon-resize-a ɛyɛ fɛ
ahyɛnsode-sesa-ketewa
ahyɛnsode-plus
ahyɛnsode-a wɔayi afi mu
ahyɛnsode-nsoromma
icon-exclamation-ahyɛnsode
ahyɛnsode-akyɛde
ahyɛnsode-ahaban
ahyɛnsode-ogya
icon-ani-abue
icon-ani-a wɔde hyɛ mu
ahyɛnsode-kɔkɔbɔ-sɛnkyerɛnne
ahyɛnsode-wimhyɛn
ahyɛnsode-kalenda so
ahyɛnsode-a ɛyɛ random
icon-nsɛm a wɔka kyerɛ
ahyɛnsode-magnet
ahyɛnsode-chevron-a ɛwɔ soro
ahyɛnsode-chevron-a ɛwɔ fam
ahyɛnsode-retweet
icon-adetɔ-teaseɛnam
ahyɛnsode-folda-a wɔato mu
ahyɛnsode-folda-abue
icon-resize-gyina hɔ pintinn
ahyɛnsode-sesa-kɛse-a ɛkɔ soro
ahyɛnsode-hdd
ahyɛnsode-nantwinini abɛn
ahyɛnsode-dɔn
icon-adansedi krataa
ahyɛnsode-nsateaa-a-kɔ soro
icon-nsateaa-a ɛwɔ fam
icon-nsa-nifa so
icon-nsa-benkum so
ahyɛnsode-nsa-a-kɔ soro
ahyɛnsode-nsa-ase-ase
ahyɛnsode-kuruwa-agyan-nifa
ahyɛnsode-kuruwa-agyan-benkum so
ahyɛnsode-kuruwa-agyan-a-kɔ soro
ahyɛnsode-kuruwa-agyan-a ɛkɔ fam
ahyɛnsode-wiase nyinaa
ahyɛnsode-safoa
ahyɛnsode-nnwuma
ahyɛnsode-filter
icon-briefcase a wɔde kyerɛw nneɛma
ahyɛnsode-a ɛwɔ screen no so

Glyphicons a ɛkyerɛ sɛ obi yɛ adwuma

Glyphicons Halflings taa nyɛ nea wontua hwee, nanso nhyehyɛe bi a ɛda Bootstrap ne Glyphicons abɔfo ntam no ama eyi ayɛ yiye a wontua hwee mma wo sɛ wɔn a wɔyɛ no. Sɛ́ aseda no, yɛsrɛ wo sɛ fa link a wopɛ a ɛsan kɔ Glyphicons no ka ho bere biara a ɛbɛyɛ yiye.

Sɛnea wɔde bedi dwuma

Ahyɛnsode ahorow nyinaa hwehwɛ <i>tag a ɛwɔ adesuakuw soronko bi, a wɔde icon-. Sɛ wode bedi dwuma a, ɛkame ayɛ sɛ fa koodu a edidi so yi to baabiara:

<i adesuakuw = "ahyɛnsode-hwehwɛ" ></i>

Afei nso, nneɛma ahorow bi wɔ hɔ a wɔde yɛ ahyɛnsode ahorow a wɔadan no (fitaa), a wɔayɛ no krado a wɔde adesuakuw biako aka ho. Yɛbɛhyɛ saa adesuakuw yi mu den titiriw wɔ hover ne active states so ama nav ne dropdown links.

<i class = "ahyɛnsode-hwehwɛ ahyɛnsode-fitaa" ></i>

Ti a ɛwɔ soro!Sɛ wode nsɛm a ɛwɔ nhama ho redi dwuma, te sɛ nea ɛwɔ bɔtn anaa nav link ahorow mu no a, hwɛ hu sɛ wubegyaw baabi wɔ <i>tag no akyi ama ntam kwan a ɛfata.

Ahyɛnsode ahorow a wɔde yɛ nhwɛso

Fa di dwuma wɔ bɔtn, bɔtn akuw ma adwinnade pon, akwantu, anaa kratasin a wɔde ahyɛ mu a wɔadi kan ahyɛ mu.

Nsɛmma nhoma no

Button kuw a ɛwɔ button adwinnade pon bi mu

<div adesuakuw = "btn-adwinnade" > 
  <div adesuakuw = "btn-kuw" > 
    <a adesuakuw = "btn" href = "#" ><i adesuakuw = "ahyɛnsode-hyehyɛ-benkum" ></i></a>   
    <a adesuakuw = "btn" href = "#" ><i adesuakuw = "ahyɛnsode-ahyɛnsode-mfinimfini" ></i></a>   
    <a adesuakuw = "btn" href = "#" ><i adesuakuw = "ahyɛnsode-hyehyɛ-nifa" ></i></a>   
    <a adesuakuw = "btn" href = "#" ><i adesuakuw = "ahyɛnsode-hyehyɛ-fata" ></i></a>   
  </div> no
</div> no

Dropdown wɔ button kuw bi mu

Ɔdefo

<div adesuakuw = "btn-kuw" > 
  <a class = "btn btn-primary" href = "#" ><i class = "ahyɛnsode-ɔdefo ahyɛnsode-fitaa" ></i> Ɔdefo </a>   
  <a adesuakuw = "btn btn-mfitiaseɛ a ɛwɔ ase-toggle" data-toggle = "afiri a ɛba fam" href = "#" ><span adesuakuw = "caret" ></span></a>    
  <ul class = "nsɛm a ɛwɔ ase hɔ" > 
    <li><a href = "#" ><i adesuakuw = "ahyɛnsode-pɛnsere" ></i> Sesa </a></li>  
    <li><a href = "#" ><i adesuakuw = "ahyɛnsode-nwura" ></i> Popa </a></li>  
    <li><a href = "#" ><i adesuakuw = "ahyɛnsode-ban-kyinhyia" ></i> Bara </a></li>  
    <li adesuakuw = "nkyekyɛmu" ></li> 
    <li><a href = "#" ><i class = "me" ></i> Yɛ admin </a></li>  
  </ul>
</div> no

Button akɛse a ɛwɔ hɔ

Nsoroma Nsoroma Nsoroma

<a adesuakuw = "btn btn-kɛse" href = "#" ><i adesuakuw = "ahyɛnsode-nsoromma" ></i> Nsoromma </a>   
<a adesuakuw = "btn btn-ketewa" href = "#" ><i adesuakuw = "ahyɛnsode-nsoromma" ></i> Nsoromma </a>   
<a adesuakuw = "btn btn-mini" href = "#" ><i adesuakuw = "ahyɛnsode-nsoromma" ></i> Nsoromma </a>

Nsɛm a Wɔka Kyerɛ

<ul adesuakuw = "nav nav-nkyerɛwee" > 
  <li class = "active" ><a href = "#" ><i class = "ahyɛnsodeɛ-fie ahyɛnsodeɛ-fitaa" </i> Fie </a></li>   
  <li><a href = "#" ><i adesuakuw = "ahyɛnsode-nhoma" ></i> Nhomakorabea </a></li>  
  <li><a href = "#" ><i adesuakuw = "ahyɛnsode-pencil" ></i> Nnwuma </a></li>  
  <li><a href = "#" ><i adesuakuw = "me" ></i> Nneɛma ahorow </a> </li>  
</ul>

Fom afuw ahorow

<div class = "ahyɛnsodeɛ-kuo" > 
  <label adesuakuw = "control-label" ma = "inputIcon" > Email address </label>  
  <div adesuakuw = "ahyɛnsode" > 
    <div adesuakuw = "nhyɛase-prepend" > 
      <span adesuakuw = "a wɔde ka ho" ><i adesuakuw = "ahyɛnsode-nkyerɛwde" ></i></span>  
      <nhyɛase adesuakuw = "span2" id = "nhyɛaseIcon" type = "nkyerɛwee" >   
    </div> no
  </div> no
</div> no

Typography a wɔde kyerɛw nsɛm

Nsɛmti ahorow

h1. Asɛmti 1

h2. Asɛmti 2

h3. Asɛmti 3

h4. Asɛmti 4

h5. Asɛmti 5

h6. Asɛmti 6

Nipadua no ho mfonini

Lead nipadua no mfonini

Wɔde Less na esii

Nnyinasoɔ

<small>

Akokoɔduro

Nkyerɛwee a wɔde nkyerɛwde a ɛyɛ mmerɛw ayɛ

Alignment adesua ahorow

Adesua ahorow a wosi so dua

Nsɛmfua a wɔatwa no tiaa

<abbr>

<abbr class="initialism">

Address ahorow

<address>

Nsɛm a wɔde siw ano

Default a wɔde ahyɛ mu

Blockquote a wobɛpaw no

Fibea bi din a wɔbɛbɔ

Nneɛma foforo a wɔde kyerɛ

Nsɛm a wɔahyehyɛ

Wɔnhyɛ da

Wɔahyɛ sɛ

Wɔannwene no

Inline no mu

Nkyerɛmu

Horizontal nkyerɛkyerɛmu

Mmara a wɔde ma

Inline no mu

Mfitiaseɛ block

Nnwinnade ahorow

Default ahorow a wɔde yɛ nneɛma

Adesua ahorow a wobetumi apaw

.table-striped

.table-bordered

.table-hover

.table-condensed

row adesua ahorow a wobetumi apaw

Wɔboa pon agyiraehyɛde

Nkyerɛwee ahorow

Default ahorow a wɔde yɛ nneɛma

Nhyehyɛe ahorow a wobetumi apaw

Hwehwɛ kratasin no

Inline kratasin no

Ɔkwan a wɔfa so yɛ ade a ɛkɔ soro

Wɔboa kratasin sohwɛ ahorow

Nsɛm a wɔde hyɛ mu

Textarea a wɔde kyerɛw nsɛm

Nnaka a wɔde hyɛ nneɛma mu ne radio ahorow

Default (a wɔaboaboa ano) .

Nneɛma a wɔde hyɛ mu

Ɔpaw

Ntrɛwmu a wɔde di dwuma wɔ kratasin so

Nsɛm a wɔde ahyɛ mu ne nea wɔde aka ho

Default ahorow a wobetumi apaw

Wɔaka abom

Buttons mmom sen sɛ wobɛkyerɛw nsɛm

Button a ɛwɔ ase hɔ

Akuw a wɔde nneɛma gu fam a wɔakyekyɛ mu

Hwehwɛ kratasin no

Di sizing so

Block level nsɛm a wɔde hyɛ mu

Sizing a ɛfa ho

Grid no kɛseyɛ

Nsɛm a wɔde hyɛ mu a wontumi nsiesie

Form nneyɛe

Mmoa nsɛm

Mmoa a ɛwɔ intanɛt so

Siw mmoa ano

Form control tebea horow

Fa w’adwene si so

Nsɛm a wɔde hyɛ mu a enni mu

Nsɛm a wɔde hyɛ mu a wɔadi dɛm

`<small>`

`<abbr>`

`<abbr class="initialism">`

`<address>`

`.table-striped`

`.table-bordered`

`.table-hover`

`.table-condensed`