Bootstrap a wɔde hyɛ mu

Gyina CSS so

HTML nneɛma a ɛho hia a wɔayɛ no sɛnea wɔpɛ na wɔde adesua ahorow a wotumi trɛw mu ayɛ no yiye.

Typography a wɔde kyerɛw nsɛm

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ɔakyerɛw no 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ɛ́ wusi nsɛm a wɔakyerɛw no fã bi so dua a ɛho hia

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ɛ́ wode adwennwen si nsɛm a wɔakyerɛw no fã bi so dua no

Wɔakyerɛ nsɛm no fã bi 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.

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.

  1. <p adesuakuw = "wɔayɛ mum" > Fusce dapibus, tellus ac nnome commodo, tortor mauris nibh. </p> no 
  2. <p class = "nkyerɛwee-kɔkɔbɔ" > Etiam porta sem malesuada magna mollis euismod. </p> no 
  3. <p class = "nkyerɛwee-mfomso" > Donec ullamcorper nulla a ɛnyɛ metus auctor fringilla. </p> no 
  4. <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 
  5. <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 a ɛfa long hover of an abbreviation ho 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] 
  1. <address>
  2.   <strong> Twitter, Inc. </strong><br> Nsɛm a wɔka kyerɛ
  3.   795 Folsom Ave, Ɔdan 600 <br>
  4.   San Francisco, CA 94107 <br> . Ɔde ne nsa kyerɛɛ ne so
  5.   <abbr asɛmti = "Telefon" > P: </abbr> (123) 456-7890. Ɔde ne nsa kyerɛɛ ne so, na ɔde ne nsa kyerɛɛ ne so bio 
  6. </address> no ho
  7.  
  8. <address>
  9.   <strong> Edin mũ no nyinaa </strong><br>
  10.   <a href = "mailto:#" > nea edi kan.a etwa [email protected] </a> 
  11. </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ɛ nea 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.

  1. <asɛm a wɔde siw ano>
  2.   | _ Nkyekyɛm a edi mũ posuere erat a ante. </p> no
  3. </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 
  1. <asɛm a wɔde siw ano>
  2.   | _ Nkyekyɛm a edi mũ posuere erat a ante. </p> no
  3.   <small> Obi a wagye din <cite title = "Fibea Asɛmti" > Fibea Asɛmti </cite></small> 
  4. </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 
  1. <blockquote adesuakuw = "twe-nifa" > 
  2.   ...
  3. </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
  1. <ul> no
  2.   <li> ... </li> na ɛwɔ hɔ
  3. </ul>

Wɔahyɛ sɛ

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

  1. Lorem ipsum dolor tena ase amet
  2. Consectetur adipiscing a ɛyɛ fɛ yiye
  3. Integer molestie lorem wɔ massa no mu
  4. Facilisis a ɛwɔ pretium nisl aliquet mu
  5. Nulla volutpat a ɛyɛ aduru a wɔde yɛ aduru
  6. Faucibus porta lacus a ɛyɛ fɛ a ɛyɛ fɛ
  7. Aenean tena ase amet erat nunc
  8. Eget porttitor a ɔyɛ ɔkyerɛkyerɛfo
  1. <ol> no
  2.   <li> ... </li> na ɛwɔ hɔ
  3. </ol>

Wɔannwene no

Nneɛma a wɔahyehyɛ a list-stylebenkum so padding biara nni mu anaasɛ ɛka ho.

  • 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
  1. <ul class = "wɔnnwene" > 
  2.   <li> ... </li> na ɛwɔ hɔ
  3. </ul>

Nkyerɛmu

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

Nkyerɛkyerɛmu 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 awotwaa mu nsuo a ɛwɔ akyi berɛmo mu.
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. 
  1. <dl> na ɛwɔ hɔ
  2.   <dt> ... </dt> na ɛwɔ hɔ
  3.   <dd> ... </dd> na ɛwɔ hɔ
  4. </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 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 awotwaa mu nsuo a ɛwɔ akyi berɛmo mu.
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 ɛyɛ mmerɛw sɛ wobɛtra ase amet risus. 
  1. <dl adesuakuw = "dl-a ɛkɔ soro" > 
  2.   <dt> ... </dt> na ɛwɔ hɔ
  3.   <dd> ... </dd> na ɛwɔ hɔ
  4. </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.

Mmarahyɛ Bagua

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. 
  1. Sɛ nhwɛso no , ɛsɛ sɛ wɔkyekyere <code><section> </ code > 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>
  1. <pre> no
  2.   <p>Nsɛm a wɔakyerɛw no nhwɛso wɔ ha...</p>
  3. </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.

Nnwinnade ahorow

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 
  1. <pon adesua = "pon" > 
  2.   ...
  3. </table> no

Adesua ahorow a wobetumi apaw

Fa adesua ahorow a edidi so yi mu biara ka adesua a ɛwɔ .tablennyinaso no ho.

.table-striped

Ɔde zebra-striping ka table row biara a ɛwɔ <tbody>via :nth-childCSS selector no mu (ɛnyɛ wɔ IE7-IE8 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 
  1. <pon adesua = "pon pon-striped" > 
  2.   ...
  3. </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
Marko Otto na ɔkyerɛwee @getbootstrap na ɛyɛ
2. 2. Yakob Thornton na ɔkyerɛwee @kɛseɛ
3. 3 Larry Anomaa no @twitter so 
  1. <table class = "pon a ɛwɔ pon so" > 
  2.   ...
  3. </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 
  1. <pon adesua = "pon pon-hover" > 
  2.   ...
  3. </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 
  1. <table class = "pon pon-a wɔatwa no tiaa" > 
  2.   ...
  3. </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 
  1. ...
  2.   < tr class = "nkonimdi" >
  3.     <td> 1 < /td> na ɛwɔ hɔ
  4.     <td>TB - Ɔsram biara</ td >
  5.     <td> 01 / 04 / 2012 < /td>. Ɔde ne nsa kyerɛɛ ne so
  6.     <td>Wɔapene so</ td >
  7.   </ tr > no
  8. ...

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
Ɛsɛ sɛ wɔde di dwuma wɔ a<thead>
<caption> Nea pon no kura ho nkyerɛkyerɛmu anaa nsɛm a wɔaboaboa ano, titiriw a ɛho wɔ mfaso ma screen akenkanfo 
  1. <pon>
  2.   <nsɛmfua> ... </nsɛmfua>
  3.   <ti>
  4.     <tr>
  5.       <th> ... </th> no ho asɛm
  6.       <th> ... </th> no ho asɛm
  7.     </tr>a ɛwɔ hɔ
  8.   </thead> no ho
  9.   <nipadua>
  10.     <tr>
  11.       <td> ... </td> na ɛwɔ hɔ
  12.       <td> ... </td> na ɛwɔ hɔ
  13.     </tr>a ɛwɔ hɔ
  14.   </tbody> no ho
  15. </table> no

Nkyerɛwee ahorow

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.

Okunini Nhwɛsoɔ block-level mmoa nsɛm wɔ ha. 
  1. <fom>
  2.   <anansesɛm> Atetesɛm </anansesɛm>
  3.   <label> Label din </label>
  4.   <input type = "text" placeholder = "Twerɛ biribi..." >  
  5.   <span class = "help-block" > Nhwɛsoɔ block-level mmoa nkyerɛwee wɔ ha. </span> no 
  6.   <label adesuakuw = "nhyɛnsode adaka" > 
  7.     <input type = "checkbox" > Hwɛ me 
  8.   </label> a wɔde kyerɛw nsɛm
  9.   <button type = "fa kɔ" class = "btn" > Fa kɔ </button>  
  10. </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.

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

Inline kratasin no

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

  1. <fom adesuakuw = "fom-inline" > 
  2.   <nhyɛaseɛ su = "nkyerɛwee" adesuakuw = "nhyɛaseɛ-ketewa" beaeɛ = "Email" >   
  3.   <input type = "password" class = "input-ketewa" beae = "Asɛmfua" >   
  4.   <label adesuakuw = "nhyɛnsode adaka" > 
  5.     <input type = "checkbox" > Kae me 
  6.   </label> a wɔde kyerɛw nsɛm
  7.   <button type = "submit" class = "btn" > Fa wo ho hyɛ mu </button>  
  8. </form>

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

Fa label ahorow no hyia nifa na fa hyɛ benkum so na ama ada adi wɔ line koro no ara so sɛ controls no. Ɛhwehwɛ sɛ wɔyɛ nsakrae kɛse wɔ markup mu fi default form so:

  • 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
Okunini 
  1. <fom adesuakuw = "fom-horizontal" > 
  2.   <div class = "ahyɛnsodeɛ-kuo" > 
  3.     <label class = "ahyɛnsodeɛ-ahyɛnsodeɛ" ma = "inputEmail" > Email </label>  
  4.     <div adesuakuw = "ahyɛnsode" > 
  5.       <nhyɛaseɛ type = "nkyerɛwee" id = "nhyɛaseɛEmail" beaeɛ = "Email" >   
  6.     </div> no
  7.   </div> no
  8.   <div class = "ahyɛnsodeɛ-kuo" > 
  9.     <label class = "control-label" ma = "asɛmfua a wɔde hyɛ mu" > Asɛmfua </label>  
  10.     <div adesuakuw = "ahyɛnsode" > 
  11.       <nhyɛaseɛ type = "asɛmfua" id = "nhyɛaseɛAsɛmfua" beaeɛ = "Asɛmfua" >   
  12.     </div> no
  13.   </div> no
  14.   <div class = "ahyɛnsodeɛ-kuo" > 
  15.     <div adesuakuw = "ahyɛnsode" > 
  16.       <label adesuakuw = "nhyɛnsode adaka" > 
  17.         <input type = "checkbox" > Kae me 
  18.       </label> a wɔde kyerɛw nsɛm
  19.       <button type = "submit" class = "btn" > Fa wo ho hyɛ mu </button>  
  20.     </div> no
  21.   </div> no
  22. </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.

  1. <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.

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

Nnaka a wɔde hyɛ 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) .


  1. <label adesuakuw = "nhyɛnsode adaka" > 
  2.   <input type = "nhyɛaseɛ adaka" botae = "" >  
  3.   Ɔkwan a edi kan ne eyi ne ɛno —hwɛ hu sɛ wode nea enti a ɛyɛ kɛse no bɛka ho
  4. </label> a wɔde kyerɛw nsɛm
  5.  
  6. <label adesuakuw = "radio" > 
  7.   <input type = "radio" din = "optionsRadios" id = "optionsRadios1" botae = "option1" a wɔahyɛ >     
  8.   Ɔkwan a edi kan ne eyi ne ɛno —hwɛ hu sɛ wode nea enti a ɛyɛ kɛse no bɛka ho
  9. </label> a wɔde kyerɛw nsɛm
  10. <label adesuakuw = "radio" > 
  11.   <input type = "radio" din = "optionsRadios" id = "optionsRadios2" botae = "ɔpaw2" >    
  12.   Option two betumi ayɛ biribi foforo na sɛ wopaw no a, ɛbɛyi option one no afi hɔ
  13. </label> a wɔde kyerɛw nsɛm

Nneɛma a wɔde hyɛ mu

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

  1. <label class = "nhyɛnsodeɛ adaka no mu" > 
  2.   <input type = "nhyɛaseɛ adaka" id = "inlineCheckbox1" botae = "ɔpaw1" > 1   
  3. </label> a wɔde kyerɛw nsɛm
  4. <label class = "nhyɛnsodeɛ adaka no mu" > 
  5.   <input type = "nhyɛaseɛ adaka" id = "inlineCheckbox2" botae = "ɔpaw2" > 2   
  6. </label> a wɔde kyerɛw nsɛm
  7. <label class = "nhyɛnsodeɛ adaka no mu" > 
  8.   <input type = "nhyɛaseɛ adaka" id = "inlineCheckbox3" botae = "ɔpaw3" > 3   
  9. </label> a wɔde kyerɛw nsɛm

Ɔpaw

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


  1. <paw>
  2.   <apaw> 1 </apaw>
  3.   <apaw> 2 </apaw>
  4.   <apaw> 3 </apaw>
  5.   <apaw> 4 </apaw>
  6.   <apaw> 5 ​​</apaw>
  7. </paw>
  8.  
  9. <paw dodow = "dodow" > 
  10.   <apaw> 1 </apaw>
  11.   <apaw> 2 </apaw>
  12.   <apaw> 3 </apaw>
  13.   <apaw> 4 </apaw>
  14.   <apaw> 5 ​​</apaw>
  15. </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.

@

.00 na ɛwɔ hɔ 
  1. <div adesuakuw = "nhyɛase-prepend" > 
  2.   <span class = "add-on" > @ </span><input class = "span2" id = "prependedInput" kɛse = "16" type = "nkyerɛwee" beae = "Ɔdefo din" >      
  3. </div> no
  4. <div class = "nhyɛase-a wɔde ka ho" > 
  5.   < nhyɛaseɛ adesuakuw = "span2" id = "a wɔde aka hoInput" kɛseɛ = "16" type = "nkyerɛwee" ><span adesuakuw = "add-on" > .00 </span>     
  6. </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.

$ .00 na ɛwɔ hɔ 
  1. <div class = "nhyɛase-prepend nhyɛase-fa" > 
  2.   <span class = "add-on" > $ </span><input class = "span2" id = "appendedPrependedInput" kɛseɛ = "16" type = "nsɛm" ><span adesua = "add-on" > .00 </span> no      
  3. </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.


  1. <div class = "nhyɛase-a wɔde ka ho" > 
  2.   <input class = "span2" id = "appendedInputButton" kɛse = "16" type = "nkyerɛwee" ><button adesuakuw = "btn" type = "button" > Kɔ! </button> no ho      
  3. </div> no
  4.  
  5. <div class = "nhyɛase-a wɔde ka ho" > 
  6.   <input class = "span2" id = "appendedInputButtons" size = "16" type = "nkyerɛwee" ><button adesuakuw = "btn" type = "button" > Hwehwɛ </button><button adesuakuw = "btn" type = "button" > Nneɛma a wobɛpaw </button>        
  7. </div> no

Hwehwɛ kratasin no

  1. <form class = "kwan-hwehwɛ" > 
  2.   <div class = "nhyɛase-a wɔde ka ho" > 
  3.     <input type = "nkyerɛwee" adesuakuw = "span2 hwehwɛ-asɛmmisa" >  
  4.     <button type = "submit" class = "btn" > Hwehwɛ </bɔtn>  
  5.   </div> no
  6.   <div adesuakuw = "nhyɛase-prepend" > 
  7.     <button type = "submit" class = "btn" > Hwehwɛ </bɔtn>  
  8.     <input type = "nkyerɛwee" adesuakuw = "span2 hwehwɛ-asɛmmisa" >  
  9.   </div> no
  10. </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.

Sizing a ɛfa ho

  1. <input class = "input-mini" type = "nkyerɛwee" beae a wɔde hyɛ = ".input-mini" >   
  2. <input class = "input-ketewa" type = "nkyerɛwee" beae = ".input-ketewa" >   
  3. <input class = "input-medium" type = "nkyerɛwee" beae a wɔde hyɛ = ".input-medium" >   
  4. <input class = "input-kɛse" type = "nkyerɛwee" beae = ".input-kɛse" >   
  5. <input class = "input-xlarge" type = "nkyerɛwee" beae a wɔde hyɛ = ".input-xlarge" >   
  6. <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.

  1. <input class = "span1" type = "nkyerɛwee" beae = ".span1" >   
  2. <input class = "span2" type = "nkyerɛwee" beae = ".span2" >   
  3. <input class = "span3" type = "nkyerɛwee" beae = ".span3" >   
  4. <paw adesuakuw = "span1" > 
  5.   ...
  6. </paw>
  7. <paw adesuakuw = "span2" > 
  8.   ...
  9. </paw>
  10. <paw adesuakuw = "span3" > 
  11.   ...
  12. </paw>

Sɛ wopɛ grid inputs pii wɔ line biara mu a, fa .controls-rowmodifier class no di dwuma ma spacing a ɛfata . Ɛ floats inputs no ma collapse white-space, hyehyɛ margins a ɛfata, na clears float no.

  1. <div adesuakuw = "ahyɛnsode" > 
  2.   <input class="span5" type="text" placeholder=".span5">
  3. </div>
  4. <div class="controls controls-row">
  5.   <input class="span4" type="text" placeholder=".span4">
  6.   <input class="span1" type="text" placeholder=".span1">
  7. </div>
  8. ...

Uneditable inputs

Present data in a form that's not editable without using actual form markup.

Some value here 
  1. <span class="input-xlarge uneditable-input">Some value here</span>

Form actions

End a form with a group of actions (buttons). When placed within a .form-horizontal, the buttons will automatically indent to line up with the form controls.

  1. <div class="form-actions">
  2.   <button type="submit" class="btn btn-primary">Save changes</button>
  3.   <button type="button" class="btn">Cancel</button>
  4. </div>

Help text

Inline and block level support for help text that appears around form controls.

Inline help

Inline help text 
  1. <input type="text"><span class="help-inline">Inline help text</span>

Block help

A longer block of help text that breaks onto a new line and may extend beyond one line. 
  1. <input type="text"><span class="help-block">A longer block of help text that breaks onto a new line and may extend beyond one line.</span>

Form control states

Provide feedback to users or visitors with basic feedback states on form controls and labels.

Input focus

We remove the default outline styles on some form controls and apply a box-shadow in its place for :focus.

  1. <input class="input-xlarge" id="focusedInput" type="text" value="This is focused...">

Disabled inputs

Add the disabled attribute on an input to prevent user input and trigger a slightly different look.

  1. <input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

Validation states

Bootstrap includes validation styles for error, warning, info, and success messages. To use, add the appropriate class to the surrounding .control-group.

Something may have gone wrong
Please correct the error
Username is taken
Woohoo! 
  1. <div class="control-group warning">
  2.   <label class="control-label" for="inputWarning">Input with warning</label>
  3.   <div class="controls">
  4.     <input type="text" id="inputWarning">
  5.     <span class="help-inline">Something may have gone wrong</span>
  6.   </div>
  7. </div>
  8. <div class="control-group error">
  9.   <label class="control-label" for="inputError">Input with error</label>
  10.   <div class="controls">
  11.     <input type="text" id="inputError">
  12.     <span class="help-inline">Please correct the error</span>
  13.   </div>
  14. </div>
  15. <div class="control-group success">
  16.   <label class="control-label" for="inputSuccess">Input with success</label>
  17.   <div class="controls">
  18.     <input type="text" id="inputSuccess">
  19.     <span class="help-inline">Woohoo!</span>
  20.   </div>
  21. </div>

Buttons

Default buttons

Button styles can be applied to anything with the .btn class applied. However, typically you'll want to apply these to only <a> and <button> elements for the best rendering.

Button class="" Description
btn Standard gray button with gradient
btn btn-primary Provides extra visual weight and identifies the primary action in a set of buttons
btn btn-info Used as an alternative to the default styles
btn btn-success Indicates a successful or positive action
btn btn-warning Indicates caution should be taken with this action
btn btn-danger Indicates a dangerous or potentially negative action
btn btn-inverse Alternate dark gray button, not tied to a semantic action or use
btn btn-link Deemphasize a button by making it look like a link while maintaining button behavior

Cross browser compatibility

IE9 doesn't crop background gradients on rounded corners, so we remove it. Related, IE9 jankifies disabled button elements, rendering text gray with a nasty text-shadow that we cannot fix.

Button sizes

Fancy larger or smaller buttons? Add .btn-large, .btn-small, or .btn-mini for additional sizes.

  1. <p>
  2.   <button class="btn btn-large btn-primary" type="button">Large button</button>
  3.   <button class="btn btn-large" type="button">Large button</button>
  4. </p>
  5. <p>
  6.   <button class="btn btn-primary" type="button">Default button</button>
  7.   <button class="btn" type="button">Default button</button>
  8. </p>
  9. <p>
  10.   <button class="btn btn-small btn-primary" type="button">Small button</button>
  11.   <button class="btn btn-small" type="button">Small button</button>
  12. </p>
  13. <p>
  14.   <button class="btn btn-mini btn-primary" type="button">Mini button</button>
  15.   <button class="btn btn-mini" type="button">Mini button</button>
  16. </p>

Create block level buttons—those that span the full width of a parent— by adding .btn-block.

  1. <button class="btn btn-large btn-block btn-primary" type="button">Block level button</button>
  2. <button class="btn btn-large btn-block" type="button">Block level button</button>

Disabled state

Make buttons look unclickable by fading them back 50%.

Anchor element

Add the .disabled class to <a> buttons.

Primary link Link 

  1. <a href="#" class="btn btn-large btn-primary disabled">Primary link</a>
  2. <a href="#" class="btn btn-large disabled">Link</a>

Heads up! We use .disabled as a utility class here, similar to the common .active class, so no prefix is required. Also, this class is only for aesthetic; you must use custom JavaScript to disable links here.

Button element

Add the disabled attribute to <button> buttons.

  1. <button type="button" class="btn btn-large btn-primary disabled" disabled="disabled">Primary button</button>
  2. <button type="button" class="btn btn-large" disabled>Button</button>

One class, multiple tags

Use the .btn class on an <a>, <button>, or <input> element.

Link 
  1. <a class="btn" href="">Link</a>
  2. <button class="btn" type="submit">Button</button>
  3. <input class="btn" type="button" value="Input">
  4. <input class="btn" type="submit" value="Submit">

As a best practice, try to match the element for your context to ensure matching cross-browser rendering. If you have an input, use an <input type="submit"> for your button.

Images

Add classes to an <img> element to easily style images in any project.

  1. <img src="..." class="img-rounded">
  2. <img src="..." class="img-circle">
  3. <img src="..." class="img-polaroid">

Heads up! .img-rounded and .img-circle do not work in IE7-8 due to lack of border-radius support.

Icons by Glyphicons

Icon glyphs

140 icons in sprite form, available in dark gray (default) and white, provided by Glyphicons.

  • icon-glass
  • icon-music
  • icon-search
  • icon-envelope
  • icon-heart
  • icon-star
  • icon-star-empty
  • icon-user
  • icon-film
  • icon-th-large
  • icon-th
  • icon-th-list
  • icon-ok
  • icon-remove
  • icon-zoom-in
  • icon-zoom-out
  • icon-off
  • icon-signal
  • icon-cog
  • icon-trash
  • icon-home
  • icon-file
  • icon-time
  • icon-road
  • icon-download-alt
  • icon-download
  • icon-upload
  • icon-inbox
  • icon-play-circle
  • icon-repeat
  • icon-refresh
  • icon-list-alt
  • icon-lock
  • icon-flag
  • icon-headphones
  • icon-volume-off
  • icon-volume-down
  • icon-volume-up
  • icon-qrcode
  • icon-barcode
  • icon-tag
  • icon-tags
  • icon-book
  • icon-bookmark
  • icon-print
  • icon-camera
  • icon-font
  • icon-bold
  • icon-italic
  • icon-text-height
  • icon-text-width
  • icon-align-left
  • icon-align-center
  • icon-align-right
  • icon-align-justify
  • icon-list
  • icon-indent-left
  • icon-indent-right
  • icon-facetime-video
  • icon-picture
  • icon-pencil
  • icon-map-marker
  • icon-adjust
  • icon-tint
  • icon-edit
  • icon-share
  • icon-check
  • icon-move
  • icon-step-backward
  • icon-fast-backward
  • icon-backward
  • icon-play
  • icon-pause
  • icon-stop
  • icon-forward
  • icon-fast-forward
  • icon-step-forward
  • icon-eject
  • icon-chevron-left
  • icon-chevron-right
  • icon-plus-sign
  • icon-minus-sign
  • icon-remove-sign
  • icon-ok-sign
  • icon-question-sign
  • icon-info-sign
  • icon-screenshot
  • icon-remove-circle
  • icon-ok-circle
  • icon-ban-circle
  • icon-arrow-left
  • icon-arrow-right
  • icon-arrow-up
  • icon-arrow-down
  • icon-share-alt
  • icon-resize-full
  • icon-resize-small
  • icon-plus
  • icon-minus
  • icon-asterisk
  • icon-exclamation-sign
  • icon-gift
  • icon-leaf
  • icon-fire
  • icon-eye-open
  • icon-eye-close
  • icon-warning-sign
  • icon-plane
  • icon-calendar
  • icon-random
  • icon-comment
  • icon-magnet
  • icon-chevron-up
  • icon-chevron-down
  • icon-retweet
  • icon-shopping-cart
  • icon-folder-close
  • icon-folder-open
  • icon-resize-vertical
  • icon-resize-horizontal
  • icon-hdd
  • icon-bullhorn
  • icon-bell
  • icon-certificate
  • icon-thumbs-up
  • icon-thumbs-down
  • icon-hand-right
  • icon-hand-left
  • icon-hand-up
  • icon-hand-down
  • icon-circle-arrow-right
  • icon-circle-arrow-left
  • icon-circle-arrow-up
  • icon-circle-arrow-down
  • icon-globe
  • icon-wrench
  • icon-tasks
  • icon-filter
  • icon-briefcase
  • icon-fullscreen

Glyphicons attribution

Glyphicons Halflings are normally not available for free, but an arrangement between Bootstrap and the Glyphicons creators have made this possible at no cost to you as developers. As a thank you, we ask you to include an optional link back to Glyphicons whenever practical.

How to use

All icons require an <i> tag with a unique class, prefixed with icon-. To use, place the following code just about anywhere:

  1. <i class="icon-search"></i>

There are also styles available for inverted (white) icons, made ready with one extra class. We will specifically enforce this class on hover and active states for nav and dropdown links.

  1. <i class="icon-search icon-white"></i>

Heads up! When using beside strings of text, as in buttons or nav links, be sure to leave a space after the <i> tag for proper spacing.

Icon examples

Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.

Buttons

Button group in a button toolbar
  1. <div class="btn-toolbar">
  2.   <div class="btn-group">
  3.  
  4.     <a class="btn" href="#"><i class="icon-align-left"></i></a>
  5.     <a class="btn" href="#"><i class="icon-align-center"></i></a>
  6.     <a class="btn" href="#"><i class="icon-align-right"></i></a>
  7.     <a class="btn" href="#"><i class="icon-align-justify"></i></a>
  8.   </div>
  9. </div>
Dropdown in a button group
User 
  1. <div class="btn-group">
  2.   <a class="btn btn-primary" href="#"><i class="icon-user icon-white"></i> User</a>
  3.   <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
  4.   <ul class="dropdown-menu">
  5.     <li><a href="#"><i class="icon-pencil"></i> Edit</a></li>
  6.     <li><a href="#"><i class="icon-trash"></i> Delete</a></li>
  7.     <li><a href="#"><i class="icon-ban-circle"></i> Ban</a></li>
  8.     <li class="divider"></li>
  9.     <li><a href="#"><i class="i"></i> Make admin</a></li>
  10.   </ul>
  11. </div>
Small button
  1. <a class="btn btn-small" href="#"><i class="icon-star"></i></a>

Navigation

  1. <ul class="nav nav-list">
  2.   <li class="active"><a href="#"><i class="icon-home icon-white"></i> Home</a></li>
  3.   <li><a href="#"><i class="icon-book"></i> Library</a></li>
  4.   <li><a href="#"><i class="icon-pencil"></i> Applications</a></li>
  5.   <li><a href="#"><i class="i"></i> Misc</a></li>
  6. </ul>

Form fields

  1. <div class="control-group">
  2.   <label class="control-label" for="inputIcon">Email address</label>
  3.   <div class="controls">
  4.     <div class="input-prepend">
  5.       <span class="add-on"><i class="icon-envelope"></i></span>
  6.       <input class="span2" id="inputIcon" type="text">
  7.     </div>
  8.   </div>
  9. </div>