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.

<p class = "text-left" > Téacs ailínithe ar chlé. </p> 
<p class = "text-center" > Téacs ailínithe sa lár. </p> 
<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.

<p class = "muted" > Fusce dapibus, tellus ac cursus comodo, tortor mauris nibh. </p> 
<p class = "text-warning" > Etiam porta sem malesuada magna mollis euismod. </p> 
<p class = "text-error" > Donec ullamcorper nulla non metus auctor fringilla. </p> 
<p class = "text-info" > Aeinean leo quam. Pellentesque ornare semi lacinia quam venenatis. </p> 
<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]

<seoladh>
  <strong> Twitter, Inc. </strong><br>
  795 Folsom Ave, Suite 600 <br>
  San Francisco, CA 94107 <br>
  <abbr title = "Fón" > P: </abbr> (123) 456-7890 
</seoladh>
 
<seoladh>
  <strong> Ainm Iomlán </strong><br>
  <a href = "mailto:#"> [email protected] </a> _ 
</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.

<blockquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Slánuimhir posuere erat a ante. </p>
</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

<blockquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Slánuimhir posuere erat a ante. </p>
  <small> Duine cáiliúil <cite title = "Teideal Foinse" > Teideal Foinse </cite></small> 
</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

<blockquote class = "tarraingt ar dheis" > 
  ...
</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

<ul>
  <li> ... </li>
</ul>

D'ordaigh

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

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
slánuimhir molestie lorem ag massa
Facilisis i pretium nisl aliquet
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla nó
Aenean sit amet erat nunc
Eget porttitor lorem

<ol>
  <li> ... </li>
</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

<ul class = "unstyled" > 
  <li> ... </li>
</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

<ul rang = "inlíne" > 
  <li> ... </li>
</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.

<dl>
  <dt> ... </dt>
  <dd> ... </dd>
</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.

<dl class = "dl-cothrománach" > 
  <dt> ... </dt>
  <dd> ... </dd>
</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.

I líne

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

Mar shampla, <section>ba chóir a bheith fillte mar inlíne.

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>

<réamh>
  <p>téacs samplach anseo...</p>
</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.

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

< tábla rang = "tábla" > 
  …
</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

<table class = "table table-striped" > 
  …
</table>

`.table-bordered`

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

#	Ainm	Sloinne	Ainm úsáideora
1	Marcáil	Otto	@mdo
1	Marcáil	Otto	@getbootstrap
2	Iacób	Thornton	@saille
3	Larry an t-éan		@twitter

<table class = "table-bordered" > 
  …
</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

<table class = "table-hover" > 
  …
</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

< tábla rang = "tábla comhdhlúite" > 
  …
</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ú

...
  < tr class = "rath" >
    <td> 1 < /td>
    <td>TB - Míosúil</ td >
    < td > 01/04/2012 < / td >
    <td>Ceadaithe</ td >
  </ t >
...

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

<tábla>
  <caption> ... </caption>
  <thead>
    <tr>
      <th> ... </th>
      <th> ... </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> ... </td>
      <td> ... </td>
    </tr>
  </tbody>
</table>

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.

<foirm>
  <fieldset>
    <legend> Finscéal </legend>
    <label> Ainm an lipéid </label>
    <input type = "text" placeholder = "Clóscríobh rud éigin…" >  
    <span class = "help-block" > Sampla de théacs cabhrach blocleibhéil anseo. </span> 
    <label class = "ticbhosca" > 
      <input type = "ticbox" > Seiceáil mé amach 
    </label>
    <button type = "submit" class = "btn" > Cuir isteach </button>  
  </fieldset>
</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.

<form class = "form-search" > 
  <input type = "text" class = ""put-medium search-query" >  
  <button type = "submit" class = "btn" > Cuardaigh </button>  
</form>

Foirm inlíne

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

<form class = "form-inline" > 
  <input type = "text" class = "input-small" placeholder = "R-phost" >   
  <input type = "password" class = "input-small" placeholder = "Pasfhocal" >   
  <label class = "ticbhosca" > 
    <input type = "ticbhosca" > Cuimhnigh orm 
  </label>
  <button type = "submit" class = "btn" > Sínigh isteach </button>  
</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í

<form class = "form-horizontal" > 
  <div class = "control-group" > 
    <label class = " control-label " for = " inputEmail " > Ríomhphost </label>  
    <div class = "rialuithe" > 
      <input type = "text" id = "inputEmail" placeholder = "Ríomhphost" >   
    </div>
  </div>
  <div class = "control-group" > 
    <label class = " control-label " for = " inputPassword " > Focal Faire </label>  
    <div class = "rialuithe" > 
      <input type = "password" id = "inputPassword" placeholder = "Pasfhocal" >   
    </div>
  </div>
  <div class = "control-group" > 
    <div class = "rialuithe" > 
      <label class = "ticbhosca" > 
        <input type = "ticbhosca" > Cuimhnigh orm 
      </label>
      <button type = "submit" class = "btn" > Sínigh isteach </button>  
    </div>
  </div>
</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í.

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

<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)

<label class = "ticbhosca" > 
  <input type = "ticbox" value = "" >  
  Rogha a haon é seo agus sin - bí cinnte an fáth a bhfuil sé iontach a chur san áireamh
</label>
 
<label class = "raidió" > 
  <input type = "radio" name = "optionsRadios" id = "optionsRadios1" value = "rogha1" seiceáilte >     
  Rogha a haon é seo agus sin - bí cinnte an fáth a bhfuil sé iontach a chur san áireamh
</label>
<label class = "raidió" > 
  <input type = "radio" name = "optionsRadios" id = "optionsRadios2" value = "option2" >    
  Is féidir le rogha a dó a bheith ina rud eile agus má roghnaítear é díroghnófar rogha a haon
</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.

<label class = "ticbhosca inlíne" > 
  <input type = "checkbox" id = "inlineCheckbox1" value = "option1" > 1   
</label>
<label class = "ticbhosca inlíne" > 
  <input type = "checkbox" id = "inlineCheckbox2" value = "option2" > 2   
</label>
<label class = "ticbhosca inlíne" > 
  <input type = "ticbox " id = "inlineCheckbox3" value = "option3" > 3   
</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.

<roghnaigh>
  <rogha> 1 </option>
  <rogha> 2 </option>
  <rogha> 3 </option>
  <rogha> 4 </option>
  <rogha> 5 </option>
</select>
 
<select il = "multiple" > 
  <rogha> 1 </option>
  <rogha> 2 </option>
  <rogha> 3 </option>
  <rogha> 4 </option>
  <rogha> 5 </option>
</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.

<div class = "input-prepend" > 
  <span class = "ad-on" > @ </span> 
  <input class = "span2" id = "prependedInput" type = "text" placeholder = "Ainm Úsáideora" >    
</div>
<div class = "input-append" > 
  <input class = "span2" id = "appendedInput " type = "text" >   
  <span class = "ad-on" > .00 </span> 
</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.

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

Cnaipí in ionad téacs

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

<div class = "input-append" > 
  <input class = "span2" id = "appendedInputButton " type = "text" >   
  <button class = "btn" type = "cnaipe" > Téigh! </cnaipe>  
</div>

<div class = "input-append" > 
  <input class = "span2" id = "appendedInputButtons " type = "text" >   
  <button class = "btn" type = "cnaipe" > Cuardach </button>  
  <button class = "btn" type = "cnaipe" > Roghanna </button>  
</div>

Cnaipí anuas

<div class = "input-append" > 
  <input class = "span2" id = "appendedDropdownButton " type = "text" >   
  <div class = "btn-group" > 
    <button class = "btn dropdown-toggle" data-toggle = "anuas" >  
      Gníomh
      <span class = "caret" ></span> 
    </cnaipe>
    <ul class = "roghchlár anuas" > 
      ...
    </ul>
  </div>
</div>

<div class = "input-prepend" > 
  <div class = "btn-group" > 
    <button class = "btn dropdown-toggle" data-toggle = "anuas" >  
      Gníomh
      <span class = "caret" ></span> 
    </cnaipe>
    <ul class = "roghchlár anuas" > 
      ...
    </ul>
  </div>
  <input class = "span2" id = "prependedDropdownButton" type = "text" >   
</div>

<div class = "ionchur-prepend ionchur-aguisín" > 
  <div class = "btn-group" > 
    <button class = "btn dropdown-toggle" data-toggle = "anuas" >  
      Gníomh
      <span class = "caret" ></span> 
    </cnaipe>
    <ul class = "roghchlár anuas" > 
      ...
    </ul>
  </div>
  <input class = "span2" id = "appendedPrependedDropdownButton " type = "text" >   
  <div class = "btn-group" > 
    <button class = "btn dropdown-toggle" data-toggle = "anuas" >  
      Gníomh
      <span class = "caret" ></span> 
    </cnaipe>
    <ul class = "roghchlár anuas" > 
      ...
    </ul>
  </div>
</div>

Grúpaí anuas deighilte

<foirm>
  <div class = "input-prepend" > 
    <div class = "btn-group" > ... </div> 
    <input type = "text" > 
  </div>
  <div class = "input-append" > 
    <input type = "text" > 
    <div class = "btn-group" > ... </div> 
  </div>
</form>

Foirm chuardaigh

<form class = "form-search" > 
  <div class = "input-append" > 
    <input type = "text" class = "span2 search-query" >  
    <button type = "submit" class = "btn" > Cuardaigh </button>  
  </div>
  <div class = "input-prepend" > 
    <button type = "submit" class = "btn" > Cuardaigh </button>  
    <input type = "text" class = "span2 search-query" >  
  </div>
</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.

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

Méid choibhneasta

<input class = "input-mini" type = "text" placeholder = ".input-mini" >   
<input class = "input-small" type = "text" placeholder = ".input-small" >   
<input class = "input-medium" type = "text" placeholder = ".input-medium" >   
<input class = "input-large" type = "text" placeholder = ".input-large" >   
<input class = "input-xlarge" type = "text" placeholder = ".input-xlarge" >   
<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.

<input class = "span1" type = "text" placeholder = ".span1" >   
<input class = "span2" type = "text" placeholder = ".span2" >   
<input class = "span3" type = "text" placeholder = ".span3" >   
<roghnaigh class = "span1" > 
  ...
</select>
<roghnaigh class = "span2" > 
  ...
</select>
<roghnaigh class = "span3" > 
  ...
</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.

<div class = "rialuithe" > 
  <input class = "span5" type = "text" placeholder = ".span5" >   
</div>
<div class = "rialaíonn-ró" > 
  <input class = "span4" type = "text" placeholder = ".span4" >   
  <input class = "span1" type = "text" placeholder = ".span1" >   
</div>
...

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.

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

<div class = "foirm-ghníomhartha" > 
  <button type = "submit" class = "btn btn-primary" > Sábháil na hathruithe </button>  
  <button type = "button" class = "btn" > Cealaigh </button>  
</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

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

Cuir bac ar chabhair

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

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

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

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

<div class = "rabhadh grúpa rialaithe" > 
  <label class = "control-label" for = "inputWarning" > Ionchur leis an rabhadh </label>  
  <div class = "rialuithe" > 
    <input type = "text" id = "inputWarning" >  
    <span class = "help-inline" > Seans go ndeachaigh rud éigin mícheart </span> 
  </div>
</div>
 
<div class = "earráid ghrúpa rialaithe" > 
  <label class = "control-label" for = "inputError" > Ionchur leis an earráid </label>  
  <div class = "rialuithe" > 
    <input type = "text" id = "inputError" >  
    <span class = "help-inline" > Cheartaigh an earráid </span> le do thoil 
  </div>
</div>
 
<div class = "faisnéis grúpa rialaithe" > 
  <label class = "control-label" for = "inputInfo" > Ionchur le faisnéis </label>  
  <div class = "rialuithe" > 
    <input type = "text" id = "inputInfo" >  
    <span class = "help-inline" > Tá an t- ainm úsáideora glactha cheana </span> 
  </div>
</div>
 
<div class = "rath grúpa rialaithe" > 
  <label class = "control-label" for = "inputSuccess" > D'éirigh leis an ionchur </label>  
  <div class = "rialuithe" > 
    <input type = "text" id = "inputSuccess" >  
    <span class = "help-inline" > Woohoo! </span> 
  </div>
</div>

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.

<p>
  <button class = "btn btn-large btn-primary" type = "cnaipe" > Cnaipe mór </cnaipe>  
  <button class = "btn btn-large" type = "cnaipe" > Cnaipe mór </button>  
</p>
<p>
  <button class = "btn btn-primary" type = "cnaipe" > Cnaipe réamhshocraithe </button>  
  <button class = "btn" type = "cnaipe" > Cnaipe réamhshocraithe </button>  
</p>
<p>
  <button class = "btn btn-small btn-primary" type = "cnaipe" > Cnaipe beag </cnaipe>  
  <button class = "btn btn-small" type = "cnaipe" > Cnaipe beag </cnaipe>  
</p>
<p>
  <button class = "btn btn-mini btn-primary" type = "cnaipe" > Cnaipe mion </cnaipe>  
  <button class = "btn btn-mini" type = "cnaipe" > Cnaipe mion </button>  
</p>

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

<button class = "btn btn-large btn-block btn-primary" type = "cnaipe" > Cnaipe bloc-leibhéil </button>  
<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

<a href="#" class="btn btn-large btn-primary faoi mhíchumas"> Príomhnasc </a> _  
<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í.

<button type = "button" class = "btn btn-large btn-primary disabled" disabled = "díchumasaithe" > Cnaipe príomhúil </button>   
<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>

<a class="btn" href=""> Nasc </a> _ _ _ _ _  
<button class = "btn" type = "submit" > Cnaipe </button>  
<input class = "btn" type = "button" value = "Ionchur" >   
<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.

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

<img src = "..." class = "img-rounded" >  
<img src = "..." class = "img-circle" >  
<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.

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:

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

<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

<div class = "btn-toolbar" > 
  <div class = "btn-group" > 
    <a class="btn" href="#" > < i class = "icon-align-left" > < /i></a>   
    <a class="btn" href="#" > < i class = "icon-align-center" > < /i></a>   
    <a class="btn" href="#" > < i class = "icon-align-right" > < /i></a>   
    <a class="btn" href="#" > < i class = "icon-align-justify" > < /i></a>   
  </div>
</div>

Íoslódáil i ngrúpa cnaipí

Úsáideoir

<div class = "btn-group" > 
  <a class="btn btn-primary" href="#" > <i class = " icon-user icon-white" > < /i> Úsáideoir </a>   
  <a class="btn btn-primary dropdown-toggle" data-toggle = " dropdown " href = " # " > < span class = " caret " ></span></a>    
  <ul class = "roghchlár anuas" > 
    <li><a href = "#" ><i class = "icon-pencil" ></i> Cuir in eagar </a></li>  
    <li><a href = "#" ><i class = "icon-bruscar" ></i> Scrios </a></li>  
    <li><a href = "#" ><i class = "icon-ban-circle" ></i> Cosc </a></li>  
    <li class = "divider" ></li> 
    <li><a href = "#" ><i class = "i" ></i> Déan admin </a></li>  
  </ul>
</div>

Méideanna cnaipe

Réalt Réalt Réalt

<a class="btn btn-large" href="#" > <i class = " icon-star" > < /i> Réalt </a>   
<a class="btn btn-small" href="#" > <i class = " icon-star" > < /i> Réalt </a>   
<a class="btn btn-mini" href="#" > <i class = " icon-star" > < /i> Réalt </a>

Loingseoireacht

<ul class = "nav nav-list" > 
  <li class = "active" ><a href = " # " ><i class = "icon-home icon-white" ></i> Baile </a></li>   
  <li><a href = "#" ><i class = "icon-book" ></i> Leabharlann </a></li>  
  <li><a href = "#" ><i class = "icon-pencil" ></i> Feidhmchláir </a></li>  
  <li><a href = "#" ><i class = "i" ></i> Ilghnéitheach </a></li>  
</ul>

Réimsí foirm

<div class = "control-group" > 
  <label class = "control-label" for = "inputIcon" > Seoladh ríomhphoist </label>  
  <div class = "rialuithe" > 
    <div class = "input-prepend" > 
      <span class = "breiseán" ><i class = "icon-envelope" ></i></span>  
      <input class = "span2" id = "inputIcon" type = "text" >   
    </div>
  </div>
</div>

Clóghrafaíocht

Ceannteidil

h1. Ceannteideal 1

h2. Ceannteideal 2

h3. Ceannteideal 3

h4. Ceannteideal 4

h5. Ceannteideal 5

h6. Ceannteideal 6

Cóip coirp

Cóip comhlacht luaidhe

Tógtha le Níos lú

Béim

<small>

Trom

iodálach

Ranganna ailínithe

Ranganna béime

Giorrúcháin

<abbr>

<abbr class="initialism">

Seoltaí

<address>

Blockquotes

Blockquote réamhshocraithe

Roghanna Blockquote

Foinse a ainmniú

Taispeántais mhalartacha

Liostaí

Neamhordúil

D'ordaigh

Gan stíl

I líne

Cur síos

Cur síos cothrománach

Cód

I líne

Bloc bunúsach

Táblaí

Stíleanna réamhshocraithe

Ranganna roghnacha

.table-striped

.table-bordered

.table-hover

.table-condensed

Ranganna ró-roghnacha

Marcáil tábla tacaithe

Foirmeacha

Stíleanna réamhshocraithe

Leagan amach roghnach

Foirm chuardaigh

Foirm inlíne

Foirm chothrománach

Rialuithe foirm tacaithe

Ionchuir

Réimse téacs

Seiceálacha agus raidiónna

Réamhshocrú (cruachta)

ticbhoscaí inlíne

Roghnaíonn

Rialuithe foirmeacha a leathnú

Ionchuir réamhshuite agus i gceangal leis

Roghanna réamhshocraithe

comhcheangailte

Cnaipí in ionad téacs

Cnaipí anuas

Grúpaí anuas deighilte

Foirm chuardaigh

Rialú méid

Ionchuir leibhéal bloc

Méid choibhneasta

Méid greille

Ionchuir neamh-inchurtha

Foirm gníomhartha

Téacs cabhrach

Cabhair inlíne

Cuir bac ar chabhair

Foirm stáit rialaithe

Fócas ionchuir

Ionchuir neamhbhailí

Ionchuir dhíchumasaithe

`<small>`

`<abbr>`

`<abbr class="initialism">`

`<address>`

`.table-striped`

`.table-bordered`

`.table-hover`

`.table-condensed`