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 (9px 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="lead">...</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á an líne téacs seo ceaptha a bheith mar phriontáil mhín.</small>
</p>

<strong>

Chun béim a chur ar phíosa téacs le tábhachtach

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

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

<em>

Chun béim a chur ar phíosa téacs le strus

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

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

Giorrúcháin

Cur i bhfeidhm stílithe <abbr>eilimint HTML do ghiorrúcháin agus acrainmneacha chun an leagan méadaithe 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="attribute" class="initialism">attr</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.

Blockqoute 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. Tá an tslánuimhir roimhe seo.</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. Tá an tslánuimhir roimhe seo.</p>
  <small>Duine cáiliúil <cite title="Foinse Teideal">Foinse Teideal</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="pull-right">
  ...
</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.

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

Gan stíl

Liosta de na míreanna nach bhfuil aon list-stylestuáil chlé nó breise ar bith acu.

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

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 rang="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 gcláir 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. 
Mar shampla, ba cheart <code><section></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.

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 
<table class="table">
  …
</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-IE8).

# 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
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 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 
<table class="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.
.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 
...
  <tr class="success">
    <td>1</td>
    <td>TB - Míosúil</td>
    <td>01/04/2012</td>
    <td>Ceadaithe</td>
  </tr>
...

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 do lipéid cholúin (nó ró, ag brath ar raon feidhme agus socrúcháin)
Ní mór é a úsáid laistigh de a<thead>
<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>

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. 
<foirm>
  <legend>Eochair</legend>
  <label>Ainm lipéid</label>
  <input type="text" placeholder="Clóscríobh rud éigin…">
  <span class="help-block">Sampla téacs cabhrach blocleibhéil anseo.</span>
  <label class="ticbox">
    <input type="checkbox"> Seiceáil mé amach
  </label>
  <button type="submit" class="btn">Cuir isteach</button>
</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="cheist chuardaigh-mheán-ionchuir">
  <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íomhphost">
  <input type="password" class="input-small" placeholder="Pasfhocal">
  <label class="ticbox">
    <input type="checkbox"> 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í
Finscéal 
<form class="form-horizontal">
  <div class="control-group">
    <label class="control-label" for="inputEmail">Ríomhphost</label>
    <div class="controls">
      <input type="text" id="inputEmail" placeholder="Ríomhphost">
    </div>
  </div>
  <div class="control-group">
    <label class="control-label" le haghaidh="inputPassword">Pasfhocal</label>
    <div class="controls">
      <input type="password" id="inputPassword" placeholder="Pasfhocal">
    </div>
  </div>
  <div class="control-group">
    <div class="controls">
      <label class="ticbox">
        <input type="checkbox"> 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 rowan tréith de réir mar is gá.

<textarea rows="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="ticbox">
  <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="radio">
  <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" seiceáilte>
  Rogha a haon é seo agus sin - bí cinnte an fáth a bhfuil sé iontach a chur san áireamh
</label>
<label class="radio">
  <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="checkbox" 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 multiple="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.

@

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

$ .00 
<div class="input-prepend ionchur-aguisín">
  <span class="add-on">$</span><input class="span2" id="AppendedPrependedInput" size="16" type="text"><span class="add-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" size="16" type="text"><button class="btn" type="button">Téigh!</button>
</div>

<div class="input-append">
  <input class="span2" id="AppendedInputButtons" size="16" type="text"><button class="btn" type="button">Cuardaigh</button><button class="btn" type= "cnaipe"> Roghanna</button>
</div>

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.

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 rang="1">
  ...
</select>
<roghnaigh rang="span2">
  ...
</select>
<roghnaigh rang="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ámhphointe.

<div class="controls">
  <input class="span5" type="text" placeholder=".span5">
</div>
<div class="rialaíonn an tsraith rialuithe">
  <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.

Roinnt luach anseo 
<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-horizontal, fleascfaidh na cnaipí go huathoibríoch chun teacht suas leis na rialuithe foirme.

<div class="form-actions">
  <button type="submit" class="btn btn-primary">Sábháil athruithe</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

Téacs cabhrach inlíne 
<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. 
<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 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=" ionchur díchumasaithe anseo...">

Staideanna bailíochtaithe

Áiríonn Bootstrap stíleanna bailíochtaithe do theachtaireachtaí earráide, rabhaidh 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
Woohoo! 
<div class="rabhadh grúpa rialaithe">
  <label class="control-label" for="inputWarning">Ionchur le rabhadh</label>
  <div class="controls">
    <input type="text" id="inputWarning">
    <span class="help-inline">Seans go ndeachaigh rud éigin mícheart</span>
  </div>
</div>
<div class="earráid control-group">
  <label class="control-label" for="inputError">Ionchur leis an earráid</label>
  <div class="controls">
    <input type="text" id="inputError">
    <span class="help-inline">Cheartaigh an earráid</span>, le do thoil
  </div>
</div>
<div class="control-group success">
  <label class="control-label" for="inputSuccess">Ionchur rathúil</label>
  <div class="controls">
    <input type="text" id="inputSuccess">
    <span class="help-inline">Woohoo!</span>
  </div>
</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.

<p>
  <button class="btn btn-large btn-primary" type="cnaipe">Cnaipe mór</cnaipe>
  <button class="btn btn-large" type="button">Cnaipe mór</button>
</p>
<p>
  <button class="btn btn-primary" type="button">Cnaipe réamhshocraithe</button>
  <button class="btn" type="button">Cnaipe réamhshocraithe</button>
</p>
<p>
  <button class="btn btn-small btn-primary" type="cnaipe">Cnaipe beag</cnaipe>
  <button class="btn btn-small" type="button">Cnaipe beag</button>
</p>
<p>
  <button class="btn btn-mini btn-primary" type="cnaipe">Cnaipe mion</cnaipe>
  <button class="btn btn-mini" type="button">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-mór btn-block btn-primary" type="cnaipe">Cnaipe leibhéalta bloc</button>
<button class="btn btn-large btn-block" type="cnaipe">Cnaipe leibhéalta bloc</button>

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 bunscoile Nasc 

<a href="#" class="btn btn-large btn-primary díchumasaithe">Bunnasc</a>
<a href="#" class="btn btn-large díchumasaithe">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.

Eilimint cnaipe

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

<button type="button" class="btn btn-large btn-primary díchumasaithe" disabled="disabled">Cnaipe bunscoile</button>
<button type="button" class="btn btn-large" díchumasaithe>Cnaipe</cnaipe>

Rang a haon, clibeanna iolracha

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

Nasc 
<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="Submit">

Mar chleachtas is fearr, déan iarracht an eilimint do do chomhthéacs a mheaitseáil chun rindreáil trasbhrabhsálaí meaitseá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.

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

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
  • icon-céim ar gcúl
  • icon-tapa-ar gcúl
  • í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 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 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 rang="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 rang="btn-group">
  <a class="btn btn-bunscoile" 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="dropdown-menu">
    <li><a href="#"><i class="icon-pencil"></i> Cuir in eagar</a></li>
    <li><a href="#"><i class="icon-trash"></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>
Cnaipe beag
<a class="btn btn-small" href="#"><i class="icon-star"></i></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="controls">
    <div class="input-prepend">
    <span class="add-on"><i class="icon-envelope"><i><span> class="span2" id="inputIcon" type="text">
  </div>
</div>