Bootstrap

Bonn CSS

Eilimintí HTML bunúsacha styled agus feabhsaithe le ranganna sínte.

Clóghrafaíocht

Ceannteidil

Tá gach ceannteideal HTML, <h1>tríd <h6>ar fáil.

h1. Ceannteideal 1

h2. Ceannteideal 2

h3. Ceannteideal 3

h4. Ceannteideal 4

h5. Ceannteideal 5
h6. Ceannteideal 6

Cóip coirp

Is é réamhshocrú domhanda Bootstrap font-sizená 14pxline-height , le 20px . Cuirtear é seo i bhfeidhm ar na <body>hailt agus ar na hailt go léir. Ina theannta sin, <p>faigheann (míreanna) corrlach íochtair leath a n-airde líne (10px de réir réamhshocraithe).

Nullam quis risus eget urna mollis ornare vel eu leo. Le sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Le sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida agus eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

<p> ... </p>

Cóip comhlacht luaidhe

Déan alt seasamh amach trí chur leis .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor dolor. Duis mollis, est non commodo luctus.

<p class = "luaidhe" > ... </p>

Tógtha le Níos lú

Tá an scála clóghrafach bunaithe ar dhá athróg NÍOS LÚ in athróga . gan : @baseFontSizeagus @baseLineHeight. Is é an chéad cheann an clómhéid a úsáidtear tríd síos agus is é an dara ceann an bonnlíne airde. Bainimid úsáid as na hathróga sin agus roinnt mata simplí chun na himill, na stuáil, agus na hairde líne de gach cineál againn agus níos mó a chruthú. Déan iad a shaincheapadh agus déanann Bootstrap iad a oiriúnú.

Béim

Bain úsáid as clibeanna béime réamhshocraithe HTML le stíleanna éadroma.

<small>

Chun inlíne nó bloic téacs a dhíbhéim, bain úsáid as an chlib bheag.

Tá sé i gceist go ndéileálfaí leis an líne téacs seo mar phriontáil mhín.

<p> <small> Tá sé i gceist go ndéileálfar leis an líne téacs seo mar phriontáil mhín. </small> </p>

Trom

Chun béim a chur ar phíosa téacs le meáchan cló níos troime.

Tá an píosa téacs seo a leanas rindreáilte mar théacs trom .

<strong> rinneadh mar théacs trom </strong>

iodálach

Chun béim a chur ar phíosa téacs le cló iodálach.

Léirítear an píosa téacs seo a leanas mar théacs iodálach .

<em> arna rindreáil mar théacs iodálach </em>

Cinnirí suas!Thig leat a úsáid <b>agus <i>i HTML5. <b>Tá sé i gceist focail nó frásaí a aibhsiú gan tábhacht bhreise a chur in iúl agus <i>é don chuid is mó do ghuthú, téarmaí teicniúla, etc.

Ranganna ailínithe

Téacs a athailíniú go héasca le comhpháirteanna le ranganna ailínithe téacs.

Téacs ailínithe ar chlé.

Téacs ailínithe sa lár.

Téacs ailínithe ar dheis.

  1. <p class = "text-left" > Téacs ailínithe ar chlé. </p> 
  2. <p class = "text-center" > Téacs ailínithe sa lár. </p> 
  3. <p class = "text-right" > Téacs ailínithe ar dheis. </p>

Ranganna béime

Cuir an bhrí in iúl trí dhath le dornán de ranganna fóntais béime.

Fusce dapibus, tellus ac cursus comodo, tortor mauris nibh.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

Aeinean eu leo ​​quam. Pellentesque ornare semi lacinia quam venenatis.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

  1. <p class = "muted" > Fusce dapibus, tellus ac cursus comodo, tortor mauris nibh. </p> 
  2. <p class = "text-warning" > Etiam porta sem malesuada magna mollis euismod. </p> 
  3. <p class = "text-error" > Donec ullamcorper nulla non metus auctor fringilla. </p> 
  4. <p class = "text-info" > Aeinean leo quam. Pellentesque ornare semi lacinia quam venenatis. </p> 
  5. <p class = "text-success" > Duis mollis, tá sé neamh-comodo luctus, is é an porttitor ligula anois. </p>

Giorrúcháin

Cur i bhfeidhm stílithe <abbr>eilimint HTML do ghiorrúcháin agus acrainmneacha chun an leagan leathnaithe ar ainlíon a thaispeáint. Tá teorainn íochtair poncaithe éadrom agus cúrsóir cabhrach ar ainlíon ag giorrúcháin a bhfuil titletréith ag baint leo, ag soláthar comhthéacs breise maidir le hover.

<abbr>

Le haghaidh téacs méadaithe ar ainliú fada ar ghiorrúchán, cuir an titletréith san áireamh.

Giorrúchán den tréith focal is ea attr .

<abbr title = "attribute" > attr </abbr>

<abbr class="initialism">

Cuir .initialismle giorrúchán le haghaidh clómhéid atá beagán níos lú.

Is é HTML an rud is fearr ó arán slisnithe.

<abbr title = "Teanga Marcála HyperText" class = "tosaíocht" > HTML </abbr>

Seoltaí

Cuir eolas teagmhála i láthair don sinsear is gaire nó don chorpas iomlán oibre.

<address>

Caomhnaigh an fhormáidiú trí gach líne a chríochnú le <br>.

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
Ainm Iomlán
[email protected] 
  1. <seoladh>
  2.   <strong> Twitter, Inc. </strong><br>
  3.   795 Folsom Ave, Suite 600 <br>
  4.   San Francisco, CA 94107 <br>
  5.   <abbr title = "Fón" > P: </abbr> (123) 456-7890 
  6. </seoladh>
  7.  
  8. <seoladh>
  9.   <strong> Ainm Iomlán </strong><br>
  10.   <a href = "mailto:#"> [email protected] </a> _ 
  11. </seoladh>

Blockquotes

Chun bloic ábhar a lua ó fhoinse eile laistigh de do dhoiciméad.

Blockquote réamhshocraithe

Wrap <blockquote>thart ar aon HTML mar an ceanglófar. Le haghaidh Sleachta díreach molaimid a <p>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Slánuimhir posuere erat a ante.

  1. <blockquote>
  2.   <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Slánuimhir posuere erat a ante. </p>
  3. </blockquote>

Roghanna Blockquote

Athraíonn stíl agus ábhar le haghaidh athruithe simplí ar bhlocchuóta caighdeánach.

Foinse a ainmniú

Cuir <small>clib leis chun an fhoinse a shainaithint. Wrap ainm an tsaothair foinse i <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Slánuimhir posuere erat a ante.

Duine a bhfuil cáil air in Source Title 
  1. <blockquote>
  2.   <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Slánuimhir posuere erat a ante. </p>
  3.   <small> Duine cáiliúil <cite title = "Teideal Foinse" > Teideal Foinse </cite></small> 
  4. </blockquote>

Taispeántais mhalartacha

Bain úsáid as .pull-rightle haghaidh blocchuóta ar snámh, atá ailínithe ar dheis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Slánuimhir posuere erat a ante.

Duine a bhfuil cáil air in Source Title 
  1. <blockquote class = "tarraingt ar dheis" > 
  2.   ...
  3. </blockquote>

Liostaí

Neamhordúil

Liosta míreanna nach mbaineann an t-ordú go sainráite leo .

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • slánuimhir molestie lorem ag massa
  • Facilisis i pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttititor sem
    • Ac tristique libero volutpat ag
  • Faucibus porta lacus fringilla nó
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
  1. <ul>
  2.   <li> ... </li>
  3. </ul>

D'ordaigh

Liosta de na míreanna ina bhfuil ábhar sainráite san ord.

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. slánuimhir molestie lorem ag massa
  4. Facilisis i pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla nó
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem
  1. <ol>
  2.   <li> ... </li>
  3. </ol>

Gan stíl

Bain an réamhshocrú list-styleagus fág stuáil ar mhíreanna liosta (leanaí láithreach amháin).

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • slánuimhir molestie lorem ag massa
  • Facilisis i pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttititor sem
    • Ac tristique libero volutpat ag
  • Faucibus porta lacus fringilla nó
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
  1. <ul class = "unstyled" > 
  2.   <li> ... </li>
  3. </ul>

I líne

Cuir na míreanna liosta go léir ar líne amháin inline-blockagus roinnt stuáil éadrom.

  • Ipsum
  • Phasellus iaculis
  • Níl ort ach
  1. <ul rang = "inlíne" > 
  2.   <li> ... </li>
  3. </ul>

Cur síos

Liosta téarmaí agus na tuairiscí a bhaineann leo.

Liostaí cur síos
Tá liosta tuairisce foirfe chun téarmaí a shainiú.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida agus eget metus.
Porta Malesuada
Etiam porta sem malesuada magna mollis euismod. 
  1. <dl>
  2.   <dt> ... </dt>
  3.   <dd> ... </dd>
  4. </dl>

Cur síos cothrománach

Déan téarmaí agus tuairiscí i <dl>líne suas taobh le taobh.

Liostaí cur síos
Tá liosta tuairisce foirfe chun téarmaí a shainiú.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida agus eget metus.
Porta Malesuada
Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper eget lacinia
Fusce dapibus, tellus ac cursus comodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. 
  1. <dl class = "dl-cothrománach" > 
  2.   <dt> ... </dt>
  3.   <dd> ... </dd>
  4. </dl>

Cinnirí suas!Teascóidh liostaí tuairisce cothrománacha téarmaí atá ró-fhada le feistiú sa cholún ar chlé text-overflow. I bpoirt amhairc níos cúinge, athróidh siad go dtí an leagan amach réamhshocraithe cruachta.

Cód

I líne

Wrap sleachta inlíne den chód le <code>.

Mar shampla, <section>ba chóir a bheith fillte mar inlíne. 
  1. Mar shampla , <code> & lt ; ba cheart alt & gt ;</ code > a fhilleadh mar inlíne .

Bloc bunúsach

Úsáid <pre>le haghaidh línte iolracha de chód. Bí cinnte éalú ó aon lúibíní uillinne sa chód le haghaidh rindreála cuí.

<p>Téacs samplach anseo...</p>
  1. <réamh>
  2.   <p>téacs samplach anseo...</p>
  3. </pre>

Cinnirí suas!Bí cinnte cód a choinneáil laistigh de <pre>chlibeanna chomh gar don taobh clé agus is féidir; déanfaidh sé gach tabs.

Is féidir leat an rang a chur leis go roghnach .pre-scrollablea shocróidh uasairde 350px agus a sholáthróidh scrollbharra y-ais.

Táblaí

Stíleanna réamhshocraithe

Maidir le stíliú bunúsach - stuáil éadrom agus gan ach roinnteoirí cothrománacha - cuir an bunrang .tablele haon <table>.

# Ainm Sloinne Ainm úsáideora
1 Marcáil Otto @mdo
2 Iacób Thornton @saille
3 Larry an t-éan @twitter 
  1. < tábla rang = "tábla" > 
  2.   …
  3. </table>

Ranganna roghnacha

Cuir aon cheann de na ranganna seo a leanas leis an .tablembunrang.

.table-striped

Cuireann sé stiallacha séabra le haon ró tábla laistigh den roghnóir <tbody>trí :nth-childCSS (níl sé ar fáil in IE7-8).

# Ainm Sloinne Ainm úsáideora
1 Marcáil Otto @mdo
2 Iacób Thornton @saille
3 Larry an t-éan @twitter 
  1. <table class = "table table-striped" > 
  2.   …
  3. </table>

.table-bordered

Cuir teorainneacha agus coirnéil chothromú leis an mbord.

# Ainm Sloinne Ainm úsáideora
1 Marcáil Otto @mdo
Marcáil Otto @getbootstrap
2 Iacób Thornton @saille
3 Larry an t-éan @twitter 
  1. <table class = "table-bordered" > 
  2.   …
  3. </table>

.table-hover

Cumasaigh staid ainlithe ar na sraitheanna boird laistigh de <tbody>.

# Ainm Sloinne Ainm úsáideora
1 Marcáil Otto @mdo
2 Iacób Thornton @saille
3 Larry an t-éan @twitter 
  1. <table class = "table-hover" > 
  2.   …
  3. </table>

.table-condensed

Déanann sé táblaí níos dlúithe trí stuáil cille a ghearradh ina dhá leath.

# Ainm Sloinne Ainm úsáideora
1 Marcáil Otto @mdo
2 Iacób Thornton @saille
3 Larry an t-éan @twitter 
  1. < tábla rang = "tábla comhdhlúite" > 
  2.   …
  3. </table>

Ranganna ró-roghnacha

Úsáid ranganna comhthéacsúla chun sraitheanna tábla a dhathú.

Aicme Cur síos
.success Léiríonn gníomh rathúil nó dearfach.
.error Léiríonn gníomh contúirteach nó a d’fhéadfadh a bheith diúltach.
.warning Tugann sé le fios rabhadh a bhféadfadh gá aird a thabhairt air.
.info Úsáidtear é mar mhalairt ar na stíleanna réamhshocraithe.
# Táirge Íocaíocht Tógtha Stádas
1 TB - Míosúil 01/04/2012 Ceadaithe
2 TB - Míosúil 02/04/2012 Diúltaithe
3 TB - Míosúil 03/04/2012 Ar feitheamh
4 TB - Míosúil 04/04/2012 Glaoigh isteach le deimhniú 
  1. ...
  2.   < tr class = "rath" >
  3.     <td> 1 < /td>
  4.     <td>TB - Míosúil</ td >
  5.     < td > 01/04/2012 < / td >
  6.     <td>Ceadaithe</ td >
  7.   </ t >
  8. ...

Marcáil tábla tacaithe

Liosta de na heilimintí tábla HTML tacaithe agus conas ba cheart iad a úsáid.

Chlib Cur síos
<table> Eilimint fillte chun sonraí a thaispeáint i bhformáid tábla
<thead> Eilimint coimeádán le haghaidh sraitheanna ceanntásca tábla ( <tr>) chun colúin tábla a lipéadú
<tbody> Eilimint coimeádán le haghaidh sraitheanna boird ( <tr>) i gcorp an tábla
<tr> Eilimint coimeádán le haghaidh sraith de chealla tábla ( <td>nó <th>) atá le feiceáil ar ró amháin
<td> Cill tábla réamhshocraithe
<th> Cill tábla speisialta le haghaidh lipéid colún (nó ró, ag brath ar raon feidhme agus socrúcháin).
<caption> Cur síos nó achoimre ar a bhfuil sa tábla, atá úsáideach go háirithe do léitheoirí scáileáin 
  1. <tábla>
  2.   <caption> ... </caption>
  3.   <thead>
  4.     <tr>
  5.       <th> ... </th>
  6.       <th> ... </th>
  7.     </tr>
  8.   </thead>
  9.   <tbody>
  10.     <tr>
  11.       <td> ... </td>
  12.       <td> ... </td>
  13.     </tr>
  14.   </tbody>
  15. </table>

Foirmeacha

Stíleanna réamhshocraithe

Faigheann rialuithe foirm aonair stíliú, ach gan aon bhunrang riachtanach ar na <form>hathruithe nó athruithe móra sa mharcáil. Torthaí i lipéid chruachta, ailínithe ar chlé ar bharr rialuithe foirme.

Finscéal Sampla de théacs cabhrach blocleibhéil anseo. 
  1. <foirm>
  2.   <fieldset>
  3.     <legend> Finscéal </legend>
  4.     <label> Ainm an lipéid </label>
  5.     <input type = "text" placeholder = "Clóscríobh rud éigin…" >  
  6.     <span class = "help-block" > Sampla de théacs cabhrach blocleibhéil anseo. </span> 
  7.     <label class = "ticbhosca" > 
  8.       <input type = "ticbox" > Seiceáil mé amach 
  9.     </label>
  10.     <button type = "submit" class = "btn" > Cuir isteach </button>  
  11.   </fieldset>
  12. </form>

Leagan amach roghnach

San áireamh le Bootstrap tá trí leagan amach foirmeacha roghnacha do chásanna úsáide coitianta.

Foirm chuardaigh

Cuir .form-searchleis an bhfoirm agus .search-queryleis an <input>le haghaidh ionchur téacs seach-chothromaithe.

  1. <form class = "form-search" > 
  2.   <input type = "text" class = ""put-medium search-query" >  
  3.   <button type = "submit" class = "btn" > Cuardaigh </button>  
  4. </form>

Foirm inlíne

Cuir .form-inlinele lipéid chlé-ailínithe agus rialtáin inlíne bloc le haghaidh leagan amach dlúth.

  1. <form class = "form-inline" > 
  2.   <input type = "text" class = "input-small" placeholder = "R-phost" >   
  3.   <input type = "password" class = "input-small" placeholder = "Pasfhocal" >   
  4.   <label class = "ticbhosca" > 
  5.     <input type = "ticbhosca" > Cuimhnigh orm 
  6.   </label>
  7.   <button type = "submit" class = "btn" > Sínigh isteach </button>  
  8. </form>

Foirm chothrománach

Ailínigh na lipéid ar dheis agus snámhphointe ar chlé chun iad a thaispeáint ar an líne chéanna le rialuithe. Teastaíonn na hathruithe marcála is mó ó fhoirm réamhshocraithe:

  • Cuir .form-horizontalleis an bhfoirm
  • Wrap lipéid agus rialuithe i.control-group
  • Cuir .control-labelleis an lipéad
  • Wrap aon rialuithe gaolmhara isteach .controlsle haghaidh ailíniú cuí
  1. <form class = "form-horizontal" > 
  2.   <div class = "control-group" > 
  3.     <label class = " control-label " for = " inputEmail " > Ríomhphost </label>  
  4.     <div class = "rialuithe" > 
  5.       <input type = "text" id = "inputEmail" placeholder = "Ríomhphost" >   
  6.     </div>
  7.   </div>
  8.   <div class = "control-group" > 
  9.     <label class = " control-label " for = " inputPassword " > Focal Faire </label>  
  10.     <div class = "rialuithe" > 
  11.       <input type = "password" id = "inputPassword" placeholder = "Pasfhocal" >   
  12.     </div>
  13.   </div>
  14.   <div class = "control-group" > 
  15.     <div class = "rialuithe" > 
  16.       <label class = "ticbhosca" > 
  17.         <input type = "ticbhosca" > Cuimhnigh orm 
  18.       </label>
  19.       <button type = "submit" class = "btn" > Sínigh isteach </button>  
  20.     </div>
  21.   </div>
  22. </form>

Rialuithe foirm tacaithe

Samplaí de rialuithe caighdeánacha foirme tacaithe i leagan amach foirme samplach.

Ionchuir

Rialú foirmeacha is coitianta, réimsí ionchuir téacs-bhunaithe. Áirítear tacaíocht do gach cineál HTML5: téacs, pasfhocal, datetime, datetime-áitiúil, dáta, mí, am, seachtain, uimhir, ríomhphost, url, cuardaigh, teil, agus dath.

Éilíonn úsáid sonraithe typei gcónaí.

  1. <input type = "text" placeholder = "Ionchur téacs" >

Réimse téacs

Rialú foirme a thacaíonn le línte iolracha téacs. Athraigh rowsan tréith de réir mar is gá.

  1. <textarea sraitheanna = "3" ></textarea>

Seiceálacha agus raidiónna

Tá ticbhoscaí ann chun rogha amháin nó roinnt roghanna a roghnú ar liosta agus tá raidiónna chun rogha amháin a roghnú as go leor.

Réamhshocrú (cruachta)


  1. <label class = "ticbhosca" > 
  2.   <input type = "ticbox" value = "" >  
  3.   Rogha a haon é seo agus sin - bí cinnte an fáth a bhfuil sé iontach a chur san áireamh
  4. </label>
  5.  
  6. <label class = "raidió" > 
  7.   <input type = "radio" name = "optionsRadios" id = "optionsRadios1" value = "rogha1" seiceáilte >     
  8.   Rogha a haon é seo agus sin - bí cinnte an fáth a bhfuil sé iontach a chur san áireamh
  9. </label>
  10. <label class = "raidió" > 
  11.   <input type = "radio" name = "optionsRadios" id = "optionsRadios2" value = "option2" >    
  12.   Is féidir le rogha a dó a bheith ina rud eile agus má roghnaítear é díroghnófar rogha a haon
  13. </label>

ticbhoscaí inlíne

Cuir an .inlinerang le sraith ticbhoscaí nó raidiónna le go mbeidh rialtáin le feiceáil ar an líne chéanna.

  1. <label class = "ticbhosca inlíne" > 
  2.   <input type = "checkbox" id = "inlineCheckbox1" value = "option1" > 1   
  3. </label>
  4. <label class = "ticbhosca inlíne" > 
  5.   <input type = "checkbox" id = "inlineCheckbox2" value = "option2" > 2   
  6. </label>
  7. <label class = "ticbhosca inlíne" > 
  8.   <input type = "ticbox " id = "inlineCheckbox3" value = "option3" > 3   
  9. </label>

Roghnaíonn

Úsáid an rogha réamhshocraithe nó sonraigh a multiple="multiple"chun roghanna iolracha a thaispeáint ag an am céanna.


  1. <roghnaigh>
  2.   <rogha> 1 </option>
  3.   <rogha> 2 </option>
  4.   <rogha> 3 </option>
  5.   <rogha> 4 </option>
  6.   <rogha> 5 </option>
  7. </select>
  8.  
  9. <select il = "multiple" > 
  10.   <rogha> 1 </option>
  11.   <rogha> 2 </option>
  12.   <rogha> 3 </option>
  13.   <rogha> 4 </option>
  14.   <rogha> 5 </option>
  15. </select>

Rialuithe foirmeacha a leathnú

Ag cur leis na rialuithe brabhsálaí atá ann cheana féin, cuimsíonn Bootstrap comhpháirteanna foirme úsáideacha eile.

Ionchuir réamhshuite agus i gceangal leis

Cuir téacs nó cnaipí leis roimh nó tar éis aon ionchur téacsbhunaithe. Tabhair faoi deara selectnach dtacaítear le heilimintí anseo.

Roghanna réamhshocraithe

Wrap .add-onagus an inputle ceann amháin de dhá rang chun téacs a réamh-mheas nó a cheangal le hionchur.

@

.00 
  1. <div class = "input-prepend" > 
  2.   <span class = "ad-on" > @ </span> 
  3.   <input class = "span2" id = "prependedInput" type = "text" placeholder = "Ainm Úsáideora" >    
  4. </div>
  5. <div class = "input-append" > 
  6.   <input class = "span2" id = "appendedInput " type = "text" >   
  7.   <span class = "ad-on" > .00 </span> 
  8. </div>

comhcheangailte

Bain úsáid as an dá rang agus as dhá chás .add-onchun ionchur a réamh-mheas agus a chur i gceangal leis.

$ .00 
  1. <div class = "ionchur-prepend ionchur-aguisín" > 
  2.   <span class = "ad-on" > $ </span> 
  3.   <input class = "span2" id = "appendedPrependedInput " type = "text" >   
  4.   <span class = "ad-on" > .00 </span> 
  5. </div>

Cnaipí in ionad téacs

In ionad <span>le téacs, úsáid a .btnchun cnaipe (nó dhó) a cheangal le hionchur.

  1. <div class = "input-append" > 
  2.   <input class = "span2" id = "appendedInputButton " type = "text" >   
  3.   <button class = "btn" type = "cnaipe" > Téigh! </cnaipe>  
  4. </div>
  1. <div class = "input-append" > 
  2.   <input class = "span2" id = "appendedInputButtons " type = "text" >   
  3.   <button class = "btn" type = "cnaipe" > Cuardach </button>  
  4.   <button class = "btn" type = "cnaipe" > Roghanna </button>  
  5. </div>

Cnaipí anuas

  1. <div class = "input-append" > 
  2.   <input class = "span2" id = "appendedDropdownButton " type = "text" >   
  3.   <div class = "btn-group" > 
  4.     <button class = "btn dropdown-toggle" data-toggle = "anuas" >  
  5.       Gníomh
  6.       <span class = "caret" ></span> 
  7.     </cnaipe>
  8.     <ul class = "roghchlár anuas" > 
  9.       ...
  10.     </ul>
  11.   </div>
  12. </div>
  1. <div class = "input-prepend" > 
  2.   <div class = "btn-group" > 
  3.     <button class = "btn dropdown-toggle" data-toggle = "anuas" >  
  4.       Gníomh
  5.       <span class = "caret" ></span> 
  6.     </cnaipe>
  7.     <ul class = "roghchlár anuas" > 
  8.       ...
  9.     </ul>
  10.   </div>
  11.   <input class = "span2" id = "prependedDropdownButton" type = "text" >   
  12. </div>
  1. <div class = "ionchur-prepend ionchur-aguisín" > 
  2.   <div class = "btn-group" > 
  3.     <button class = "btn dropdown-toggle" data-toggle = "anuas" >  
  4.       Gníomh
  5.       <span class = "caret" ></span> 
  6.     </cnaipe>
  7.     <ul class = "roghchlár anuas" > 
  8.       ...
  9.     </ul>
  10.   </div>
  11.   <input class = "span2" id = "appendedPrependedDropdownButton " type = "text" >   
  12.   <div class = "btn-group" > 
  13.     <button class = "btn dropdown-toggle" data-toggle = "anuas" >  
  14.       Gníomh
  15.       <span class = "caret" ></span> 
  16.     </cnaipe>
  17.     <ul class = "roghchlár anuas" > 
  18.       ...
  19.     </ul>
  20.   </div>
  21. </div>

Grúpaí anuas deighilte

  1. <foirm>
  2.   <div class = "input-prepend" > 
  3.     <div class = "btn-group" > ... </div> 
  4.     <input type = "text" > 
  5.   </div>
  6.   <div class = "input-append" > 
  7.     <input type = "text" > 
  8.     <div class = "btn-group" > ... </div> 
  9.   </div>
  10. </form>

Foirm chuardaigh

  1. <form class = "form-search" > 
  2.   <div class = "input-append" > 
  3.     <input type = "text" class = "span2 search-query" >  
  4.     <button type = "submit" class = "btn" > Cuardaigh </button>  
  5.   </div>
  6.   <div class = "input-prepend" > 
  7.     <button type = "submit" class = "btn" > Cuardaigh </button>  
  8.     <input type = "text" class = "span2 search-query" >  
  9.   </div>
  10. </form>

Rialú méid

Úsáid ranganna coibhneasta méide cosúil .input-largele d'ionchuir nó meaitseáil le méideanna na gcolún greille ag baint úsáide as .span*ranganna.

Ionchuir leibhéal bloc

Déan aon eilimint <input>nó <textarea>eilimint a iompar féin mar eilimint bhlocleibhéil.

  1. <input class = "input-block-level" type = "text" placeholder = ".input-block-level" >

Méid choibhneasta

  1. <input class = "input-mini" type = "text" placeholder = ".input-mini" >   
  2. <input class = "input-small" type = "text" placeholder = ".input-small" >   
  3. <input class = "input-medium" type = "text" placeholder = ".input-medium" >   
  4. <input class = "input-large" type = "text" placeholder = ".input-large" >   
  5. <input class = "input-xlarge" type = "text" placeholder = ".input-xlarge" >   
  6. <input class = "input-xxlarge" type = "text" placeholder = ".input-xxlarge" >

Cinnirí suas!I leaganacha amach anseo, beidh muid ag athrú úsáid na ranganna ionchuir coibhneasta seo chun ár méideanna cnaipí a mheaitseáil. Mar shampla, .input-largeméadóidh sé stuáil agus clómhéid an ionchuir.

Méid greille

Bain úsáid as .span1chun .span12ionchuir a mheaitseálann na méideanna céanna de na colúin ghreille.

  1. <input class = "span1" type = "text" placeholder = ".span1" >   
  2. <input class = "span2" type = "text" placeholder = ".span2" >   
  3. <input class = "span3" type = "text" placeholder = ".span3" >   
  4. <roghnaigh class = "span1" > 
  5.   ...
  6. </select>
  7. <roghnaigh class = "span2" > 
  8.   ...
  9. </select>
  10. <roghnaigh class = "span3" > 
  11.   ...
  12. </select>

Le haghaidh ionchuir eangaí iolracha in aghaidh an líne, bain úsáid as an .controls-rowrang mionathraithe chun spásáil chuí a dhéanamh . Snámhann sé na hionchuir chun spás bán a thit, socraíonn sé na himill chuí, agus glanann sé an snámhán.

  1. <div class = "rialuithe" > 
  2.   <input class = "span5" type = "text" placeholder = ".span5" >   
  3. </div>
  4. <div class = "rialaíonn-ró" > 
  5.   <input class = "span4" type = "text" placeholder = ".span4" >   
  6.   <input class = "span1" type = "text" placeholder = ".span1" >   
  7. </div>
  8. ...

Ionchuir neamh-inchurtha

Cuir sonraí i láthair i bhfoirm nach féidir eagarthóireacht a dhéanamh uirthi gan úsáid a bhaint as marcáil fhoirme iarbhír.

Roinnt luach anseo 
  1. <span class = "input-xlarge uneditable-input" > Luach éigin anseo </span>

Foirm gníomhartha

Críochnaigh foirm le grúpa gníomhartha (cnaipí). Nuair a chuirtear iad laistigh de .form-actions, fleascfaidh na cnaipí go huathoibríoch chun teacht suas leis na rialuithe foirme.

  1. <div class = "foirm-ghníomhartha" > 
  2.   <button type = "submit" class = "btn btn-primary" > Sábháil na hathruithe </button>  
  3.   <button type = "button" class = "btn" > Cealaigh </button>  
  4. </div>

Téacs cabhrach

Tacaíocht leibhéal inlíne agus bloc le haghaidh téacs cabhrach atá le feiceáil thart ar rialuithe foirmeacha.

Cabhair inlíne

Téacs cabhrach inlíne 
  1. <input type = "text" <span class = "help-inline" > Téacs cabhrach inlíne </span>

Cuir bac ar chabhair

Bloc níos faide de théacs cabhrach a bhriseann ar líne nua agus a d’fhéadfadh dul thar líne amháin. 
  1. <input type = "text" <span class = "help-block" > Bloc níos faide de théacs cabhrach a bhriseann isteach ar líne nua agus a d'fhéadfadh dul thar líne amháin. </span>

Foirm stáit rialaithe

Aiseolas a sholáthar d'úsáideoirí nó do chuairteoirí le stáit aiseolais bhunúsacha ar rialuithe foirmeacha agus lipéid.

Fócas ionchuir

Bainimid na outlinestíleanna réamhshocraithe ar roinnt rialuithe foirme agus cuirimid box-shadowi bhfeidhm ina áit do :focus.

  1. <input class = "input-xlarge" id = "focusedInput" type = "text" value = "Tá sé seo dírithe..." >

Ionchuir neamhbhailí

Ionchuir stíle trí fheidhmiúlacht réamhshocraithe brabhsálaí le :invalid. Sonraigh a type, cuir an requiredaitreabúid mura bhfuil an réimse roghnach, agus (más infheidhme) sonraigh pattern.

Níl sé seo ar fáil i leaganacha de Internet Explorer 7-9 mar gheall ar easpa tacaíochta do roghnóirí bréige CSS.

  1. <input class = "span3" type = "r-phost" ag teastáil >

Ionchuir dhíchumasaithe

Cuir an disabledtréith ar ionchur chun ionchur úsáideora a chosc agus cuma beagán difriúil a spreagadh.

  1. <input class = "input-xlarge" id = "disabledInput" type = "text" placeholder = "Díchumasaíodh ionchur anseo... " >

Staideanna bailíochtaithe

Áiríonn Bootstrap stíleanna bailíochtaithe do theachtaireachtaí earráide, rabhaidh, faisnéise agus ratha. Le húsáid, cuir an rang cuí leis an timpeallacht .control-group.

Seans go ndeachaigh rud éigin mícheart
Ceartaigh an earráid le do thoil
Tógtar an t-ainm úsáideora
Woohoo! 
  1. <div class = "rabhadh grúpa rialaithe" > 
  2.   <label class = "control-label" for = "inputWarning" > Ionchur leis an rabhadh </label>  
  3.   <div class = "rialuithe" > 
  4.     <input type = "text" id = "inputWarning" >  
  5.     <span class = "help-inline" > Seans go ndeachaigh rud éigin mícheart </span> 
  6.   </div>
  7. </div>
  8.  
  9. <div class = "earráid ghrúpa rialaithe" > 
  10.   <label class = "control-label" for = "inputError" > Ionchur leis an earráid </label>  
  11.   <div class = "rialuithe" > 
  12.     <input type = "text" id = "inputError" >  
  13.     <span class = "help-inline" > Cheartaigh an earráid </span> le do thoil 
  14.   </div>
  15. </div>
  16.  
  17. <div class = "faisnéis grúpa rialaithe" > 
  18.   <label class = "control-label" for = "inputInfo" > Ionchur le faisnéis </label>  
  19.   <div class = "rialuithe" > 
  20.     <input type = "text" id = "inputInfo" >  
  21.     <span class = "help-inline" > Tá an t- ainm úsáideora glactha cheana </span> 
  22.   </div>
  23. </div>
  24.  
  25. <div class = "rath grúpa rialaithe" > 
  26.   <label class = "control-label" for = "inputSuccess" > D'éirigh leis an ionchur </label>  
  27.   <div class = "rialuithe" > 
  28.     <input type = "text" id = "inputSuccess" >  
  29.     <span class = "help-inline" > Woohoo! </span> 
  30.   </div>
  31. </div>

Cnaipí

Cnaipí réamhshocraithe

Is féidir stíleanna cnaipí a chur i bhfeidhm ar aon rud leis an .btnrang a chuirtear i bhfeidhm. Mar sin féin, go hiondúil beidh tú ag iarraidh iad seo a chur i bhfeidhm ar ghnéithe amháin <a>agus ar an rindreáil is fearr.<button>

Cnaipe class="" Cur síos
btn Cnaipe caighdeánach liath le grádán
btn btn-primary Soláthraíonn sé meáchan amhairc breise agus sainaithníonn sé an gníomh príomhúil i sraith cnaipí
btn btn-info Úsáidtear é mar mhalairt ar na stíleanna réamhshocraithe
btn btn-success Léiríonn gníomh rathúil nó dearfach
btn btn-warning Léiríonn sé gur cheart a bheith cúramach leis an ngníomh seo
btn btn-danger Léiríonn gníomh contúirteach nó a d’fhéadfadh a bheith diúltach
btn btn-inverse Cnaipe liath dorcha malartach, gan a bheith ceangailte le gníomh nó úsáid shéimeantach
btn btn-link Cuir béim ar chnaipe trí chuma a bheith air mar nasc agus iompar cnaipe á chothabháil

Comhoiriúnacht tras-bhrabhsálaí

Ní ghearrann IE9 grádáin chúlra ar choirnéil chruinne, mar sin bainimid amach é. Gaolmhar, cuireann IE9 buttongnéithe míchumais i bhfeidhm, rud a fhágann go bhfuil an téacs liath le scáth téacs olc nach féidir linn a shocrú.

Méideanna cnaipe

An bhfuil fonn ort cnaipí níos mó nó níos lú? Cuir .btn-large, .btn-small, nó .btn-minile haghaidh méideanna breise.

  1. <p>
  2.   <button class = "btn btn-large btn-primary" type = "cnaipe" > Cnaipe mór </cnaipe>  
  3.   <button class = "btn btn-large" type = "cnaipe" > Cnaipe mór </button>  
  4. </p>
  5. <p>
  6.   <button class = "btn btn-primary" type = "cnaipe" > Cnaipe réamhshocraithe </button>  
  7.   <button class = "btn" type = "cnaipe" > Cnaipe réamhshocraithe </button>  
  8. </p>
  9. <p>
  10.   <button class = "btn btn-small btn-primary" type = "cnaipe" > Cnaipe beag </cnaipe>  
  11.   <button class = "btn btn-small" type = "cnaipe" > Cnaipe beag </cnaipe>  
  12. </p>
  13. <p>
  14.   <button class = "btn btn-mini btn-primary" type = "cnaipe" > Cnaipe mion </cnaipe>  
  15.   <button class = "btn btn-mini" type = "cnaipe" > Cnaipe mion </button>  
  16. </p>

Cruthaigh cnaipí blocleibhéil - iad siúd a théann trasna leithead iomlán tuismitheora - trí .btn-block.

  1. <button class = "btn btn-large btn-block btn-primary" type = "cnaipe" > Cnaipe bloc-leibhéil </button>  
  2. <button class = "btn btn-large btn-block" type = "cnaipe" > Cnaipe bloc-leibhéil </cnaipe>

Stát faoi mhíchumas

Déan breathnú ar chnaipí nach féidir a chliceáil ach iad a mhaolú 50%.

Gné ancaire

Cuir an .disabledrang le <a>cnaipí.

Nasc príomhúil Nasc 

  1. <a href="#" class="btn btn-large btn-primary faoi mhíchumas"> Príomhnasc </a> _  
  2. <a href="#" class="btn btn-large disabled"> Nasc </a> _ _ _

Cinnirí suas!Úsáidimid .disabledmar rang fóntais anseo, cosúil leis an .activerang coitianta, mar sin níl aon réimír ag teastáil. Chomh maith leis sin, níl an rang seo ach le haghaidh aeistéitiúla; ní mór duit JavaScript saincheaptha a úsáid chun naisc a dhíchumasú anseo.

Eilimint cnaipe

Cuir an disabledtréith le <button>cnaipí.

  1. <button type = "button" class = "btn btn-large btn-primary disabled" disabled = "díchumasaithe" > Cnaipe príomhúil </button>   
  2. <button type = "button" class = "btn btn-large" díchumasaithe > Cnaipe </button>

Rang a haon, clibeanna iolracha

Úsáid an .btnrang ar eilimint <a>, <button>, nó .<input>

Nasc 
  1. <a class="btn" href=""> Nasc </a> _ _ _ _ _  
  2. <button class = "btn" type = "submit" > Cnaipe </button>  
  3. <input class = "btn" type = "button" value = "Ionchur" >   
  4. <input class = "btn" type = "submit" value = "Cuir isteach" >

Mar dhea-chleachtas, déan iarracht an eilimint do do chomhthéacs a mheaitseáil chun rindreáil trasbhrabhsálaí a chinntiú. Má tá input, úsáid le <input type="submit">haghaidh do chnaipe.

Íomhánna

Cuir ranganna le <img>heilimint chun íomhánna a stíliú go héasca in aon tionscadal.

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

Cinnirí suas! .img-roundedagus .img-circlenach n-oibríonn siad in IE7-8 mar gheall ar easpa border-radiustacaíochta.

Deilbhíní le Glyphicons

Glyphs deilbhín

140 deilbhín i bhfoirm sprite, ar fáil i liath dorcha (réamhshocraithe) agus bán, arna soláthar ag Glyphicons .

  • íocón-gloine
  • icon-ceol
  • icon-cuardach
  • icon-clúdach
  • deilbhín-chroí
  • icon-réalta
  • icon-réalta-folamh
  • deilbhín-úsáideoir
  • icon-scannán
  • icon-ú-mór
  • íocón-ú
  • deilbhín-ú-liosta
  • íocón-ceart go leor
  • icon-bain
  • icon-zoom-in
  • icon-zoom-out
  • íocón
  • deilbhín-comhartha
  • íocón-cog
  • deilbhín-bruscar
  • icon-bhaile
  • icon-comhad
  • icon-time
  • deilbhín-bhóthar
  • icon-íoslódáil-alt
  • icon-íoslódáil
  • deilbhín-uaslódáil
  • deilbhín-bosca isteach
  • icon-imirt-chiorcal
  • deilbhín-athuair
  • icon-refresh
  • icon-list-alt
  • icon-glas
  • deilbhín-bratach
  • icon-cluasáin
  • icon-volume-off
  • icon-imleabhar-síos
  • icon-imleabhar-suas
  • deilbhín-qrcode
  • icon-barcode
  • deilbhín-chlib
  • icon-clibeanna
  • deilbhín-leabhar
  • deilbhín-leabharmharc
  • icon-print
  • deilbhín-ceamara
  • icon-font
  • deilbhín-trom
  • íocón-iodálach
  • icon-text-airde
  • deilbhín-téacs-leithead
  • icon-ailíniú-clé
  • icon-ailíniú-lár
  • deilbhín-ailíniú-ar dheis
  • icon-align-justify
  • deilbhín-liosta
  • icon-fleasc-chlé
  • deilbhín-fleasc-ar dheis
  • icon-facetime-físeán
  • deilbhín-pictiúr
  • íocón-pheann luaidhe
  • icon-mapa-marcóir
  • icon-choigeartú
  • deilbhín-tint
  • icon-eagar
  • icon-share
  • icon-seiceáil
  • icon-bogadh
  • íocón-céim ar gcúl
  • icon-tapa-siar
  • íocón ar gcúl
  • íocón-imirt
  • íocón-sos
  • íocón-stad
  • icon-ar aghaidh
  • icon-tapa-ar aghaidh
  • icon-céim ar aghaidh
  • icon-eject
  • icon-chevron-chlé
  • icon-chevron-ar dheis
  • icon-plus-comhartha
  • deilbhín-lúide-comhartha
  • icon-bain-comhartha
  • deilbhín-ok-comhartha
  • deilbhín-ceist-comhartha
  • icon-info-sign
  • icon-scáileán
  • icon-bain-ciorcal
  • icon-ok-ciorcal
  • icon-ban-ciorcal
  • icon-arrow-clé
  • icon-arrow-deas
  • icon-arrow-up
  • icon-arrow-síos
  • icon-share-alt
  • icon-athraigh méid-iomlán
  • icon-athraigh méid-beag
  • íocón-móide
  • deilbhín-lúide
  • icon-réiltín
  • deilbhín-exclamation-sign
  • íocón-bronntanas
  • íocón-duilleog
  • íocón-tine
  • icon-eye-open
  • íocón-eye-gar
  • deilbhín-rabhaidh-comhartha
  • íocón-eitleán
  • icon-féilire
  • icon-randamach
  • íocón-trácht
  • deilbhín-mhaighnéad
  • icon-chevron-suas
  • icon-chevron-síos
  • deilbhín-retweet
  • íocón-siopadóireacht-cart
  • deilbhín-fillteán-gar
  • icon-fillteán-oscailte
  • icon-athraigh méid-ingearach
  • icon-athraigh méid-cothrománach
  • deilbhín-hdd
  • deilbhín-bullhorn
  • íocón-cloig
  • deilbhín-teastas
  • icon-ordóga-suas
  • icon-ordóga-síos
  • deilbhín-lámh-dheis
  • deilbhín-lámh-chlé
  • icon-hand-up
  • icon-hand-down
  • icon-circle-arrow-deas
  • icon-ciorcal-saighead-chlé
  • icon-ciorcal-arrow-up
  • icon-ciorcal-arrow-síos
  • icon-globe
  • icon-stíl
  • icon-tascanna
  • icon-scagaire
  • icon-gearrtha
  • icon-lánscáileán

Leithdháileadh Glyphicons

De ghnáth ní bhíonn Glyphicons Halflings ar fáil saor in aisce, ach tá socrú déanta idir Bootstrap agus cruthaitheoirí Glyphicons tar éis é seo a dhéanamh gan aon chostas duitse mar fhorbróirí. Mar bhuíochas, iarraimid ort nasc roghnach ar ais chuig Glyphicons a chur isteach nuair is praiticiúil.

Conas a úsáid

<i>Teastaíonn clib le haicme ar leith ó gach deilbhín , agus í roimh ré icon-. Chun é a úsáid, cuir an cód seo a leanas beagnach áit ar bith:

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

Tá stíleanna ar fáil freisin le haghaidh deilbhíní inbhéartaithe (bán), réidh le haicme amháin breise. Déanfaimid an aicme seo a fhorfheidhmiú go sonrach maidir le hover agus stáit ghníomhacha do naisc nascleanúna agus anuas.

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

Cinnirí suas!Nuair a bheidh tú ag úsáid teaghráin in aice le téacs, mar atá i gcnaipí nó naisc nascleanúna, bí cinnte go bhfágfá spás i ndiaidh na <i>clibe le spásáil cheart a dhéanamh.

Deilbhíní samplaí

Úsáid iad i gcnaipí, i ngrúpaí cnaipí le haghaidh barra uirlisí, nascleanúint, nó ionchuir fhoirm réamhullmhaithe.

Cnaipí

Grúpa cnaipí i mbarra uirlisí cnaipe
  1. <div class = "btn-toolbar" > 
  2.   <div class = "btn-group" > 
  3.     <a class="btn" href="#" > < i class = "icon-align-left" > < /i></a>   
  4.     <a class="btn" href="#" > < i class = "icon-align-center" > < /i></a>   
  5.     <a class="btn" href="#" > < i class = "icon-align-right" > < /i></a>   
  6.     <a class="btn" href="#" > < i class = "icon-align-justify" > < /i></a>   
  7.   </div>
  8. </div>
Íoslódáil i ngrúpa cnaipí
Úsáideoir 
  1. <div class = "btn-group" > 
  2.   <a class="btn btn-primary" href="#" > <i class = " icon-user icon-white" > < /i> Úsáideoir </a>   
  3.   <a class="btn btn-primary dropdown-toggle" data-toggle = " dropdown " href = " # " > < span class = " caret " ></span></a>    
  4.   <ul class = "roghchlár anuas" > 
  5.     <li><a href = "#" ><i class = "icon-pencil" ></i> Cuir in eagar </a></li>  
  6.     <li><a href = "#" ><i class = "icon-bruscar" ></i> Scrios </a></li>  
  7.     <li><a href = "#" ><i class = "icon-ban-circle" ></i> Cosc </a></li>  
  8.     <li class = "divider" ></li> 
  9.     <li><a href = "#" ><i class = "i" ></i> Déan admin </a></li>  
  10.   </ul>
  11. </div>
Méideanna cnaipe
Réalt Réalt Réalt 
  1. <a  class="btn btn-large" href="#" > <i class = " icon-star" > < /i> Réalt </a>  
  2. < rang  class="btn btn-small" href="#" > <i class " icon-star" > < /i> Réalt </a>  
  3. < rang  class="btn btn-mini" href="#" > <i class " icon-star" > < /i> Réalt </a>

Loingseoireacht

  1. <ul class = "nav nav-list" > 
  2.   <li class = "gníomhach" ><a href =   " # " ><i class = "icon-home icon-white" ></i> Baile </a></li> 
  3.   <li><a href =  "#" ><i class = "icon-book" ></i> Leabharlann </a></li> 
  4.   <li><a href =  "#" ><i class = "icon-pencil" ></i> Feidhmchláir </a></li> 
  5.   <li><a href =  "#" ><i class = "i" ></i> Ilghnéitheach </a></li> 
  6. </ul>

Réimsí foirm

  1. <div class = "control-group" >
  2.   <label class = "lipéad rialaithe"   for = "inputIcon" > Seoladh ríomhphoist </label>
  3.   <div class = "rialuithe" >
  4.     <div class = "input-prepend" >
  5.       <span class = "breiseán" ><i   class = "icon-envelope" ></i></span>
  6.       <input class = "span2" id = "inputIcon"    type = "text" >
  7.     </div>
  8.   </div>
  9. </div>