Penawdau

Mae pob pennawd HTML, <h1>drwodd <h6>ar gael.

h1. Pennawd 1

h2. Pennawd 2

h3. Pennawd 3

h4. Pennawd 4

h5. Pennawd 5

h6. Pennawd 6

Copi corff

Rhagosodiad byd-eang Bootstrap font-sizeyw 14px , gydag line-height20px . Cymhwysir hyn i'r a phob paragraff. Yn ogystal, mae (paragraffau) yn cael ymyl isaf o hanner eu huchder llinell (10px yn ddiofyn).<body><p>

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

Cum 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. Ystyr geiriau: Donec id elit non mi porta gravida yn eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

<p> ... </p>

Copi corff arweiniol

Gwnewch i baragraff sefyll allan trwy ychwanegu .lead.

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

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

Adeiladwyd gyda Llai

Mae'r raddfa deipograffig yn seiliedig ar ddau newidyn LLAI mewn newidynnau .less : @baseFontSizea @baseLineHeight. Y cyntaf yw maint y ffont sylfaen a ddefnyddir drwyddi draw a'r ail yw uchder y llinell sylfaen. Rydyn ni'n defnyddio'r newidynnau hynny a rhywfaint o fathemateg syml i greu'r ymylon, padinau, ac uchder llinell o'n holl fath a mwy. Addaswch nhw ac mae Bootstrap yn addasu.

Pwyslais

Defnyddiwch dagiau pwyslais rhagosodedig HTML gydag arddulliau ysgafn.

`<small>`

I ddad-bwysleisio mewnlin neu flociau o destun, defnyddiwch y tag bach.

Mae'r llinell hon o destun i fod i gael ei thrin fel print mân.

<p> <small> Mae'r llinell hon o destun i fod i gael ei thrin fel print mân. </small> </p>

Beiddgar

Am bwysleisio pyt o destun gyda phwysau ffont trymach.

Mae'r darn canlynol o destun wedi'i rendro fel testun trwm .

<strong> wedi'i rendro fel testun trwm </strong>

italig

Am bwysleisio pyt o destun gyda llythrennau italig.

Mae'r darn canlynol o destun wedi'i rendro fel testun italig .

<em> wedi'i rendro fel testun italig </em>

Pennau i fyny!Mae croeso i chi ddefnyddio <b>ac <i>yn HTML5. <b>i fod i amlygu geiriau neu ymadroddion heb gyfleu pwysigrwydd ychwanegol tra ei fod <i>yn bennaf ar gyfer llais, termau technegol, ac ati.

Dosbarthiadau aliniad

Ailalinio testun yn hawdd i gydrannau gyda dosbarthiadau alinio testun.

Testun wedi'i alinio i'r chwith.

Testun wedi'i alinio yn y canol.

Testun wedi'i alinio i'r dde.

<p class = "text-chwith" > Testun wedi'i alinio i'r chwith. </p> 
<p class = "text-center" > Testun wedi'i alinio yn y canol. </p> 
<p class = "text-right" > Testun wedi'i alinio i'r dde. </p>

Dosbarthiadau pwyslais

Cyfleu ystyr trwy liw gyda llond llaw o ddosbarthiadau cyfleustodau pwyslais.

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

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

Aenean eu leo quam. Pellentesque ornare sem 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" > Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis. </p> 
<p class = "text-success" > Duis mollis, est non commodo luctus, nisi erat porttitor ligula. </p>

Byrfoddau

Gweithrediad arddulliedig o <abbr>elfen HTML ar gyfer byrfoddau ac acronymau i ddangos y fersiwn estynedig ar hofran. Mae gan dalfyriadau â titlephriodoledd ymyl gwaelod doredig golau a chyrchwr cymorth ar hofran, gan roi cyd-destun ychwanegol ar hofran.

`<abbr>`

Ar gyfer testun estynedig ar hofran hir o dalfyriad, cynhwyswch y titlepriodoledd.

Talfyriad o'r gair priodoledd yw attr .

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

`<abbr class="initialism">`

Ychwanegu .initialismat dalfyriad ar gyfer maint ffont ychydig yn llai.

HTML yw'r peth gorau ers bara wedi'i sleisio.

<abbr title = "HyperText Markup Language" class = "gychwyniad" > HTML </abbr>

Cyfeiriadau

Cyflwyno gwybodaeth gyswllt ar gyfer eich hynafiad agosaf neu'r corff cyfan o waith.

`<address>`

Cadw fformatio trwy orffen pob llinell gyda <br>.

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890

Enw Llawn
[email protected]

<cyfeiriad>
  <strong> Twitter, Inc .</strong><br>
  795 Folsom Ave, Swît 600 <br>
  San Francisco, CA 94107 <br>
  <abbr title = "Ffôn" > P: </abbr> (123) 456-7890 
</cyfeiriad>
 
<cyfeiriad>
  <strong> Enw Llawn </strong><br>
  <a href = " mailto:#"> [email protected] </a> 
</cyfeiriad>

Blockquotes

Am ddyfynnu blociau o gynnwys o ffynhonnell arall yn eich dogfen.

Blockquote diofyn

Lapiwch <blockquote>unrhyw HTML fel y dyfyniad. Ar gyfer dyfynbrisiau syth rydym yn argymell a <p>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cyfanrif posuere erat ante.

<blockquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cyfanrif posuere erat ante. </p>
</blockquote>

Opsiynau Blockquote

Mae arddull a chynnwys yn newid ar gyfer amrywiadau syml ar blockquote safonol.

Enwi ffynhonnell

Ychwanegu <small>tag ar gyfer adnabod y ffynhonnell. Lapiwch enw'r gwaith ffynhonnell yn <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cyfanrif posuere erat ante.
Rhywun enwog yn Source Title

<blockquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cyfanrif posuere erat ante. </p>
  <small> Rhywun enwog <cite title = "Teitl Ffynhonnell" > Teitl Ffynhonnell </cite></small> 
</blockquote>

Arddangosfeydd amgen

Defnyddiwch .pull-rightar gyfer blockquote arnofiol, wedi'i alinio i'r dde.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cyfanrif posuere erat ante.
Rhywun enwog yn Source Title

<blockquote class = "tynnu i'r dde" > 
  ...
</blockquote>

Rhestrau

Heb drefn

Rhestr o eitemau lle nad yw'r drefn o bwys penodol.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Cyfanrif molestie lorem yn massa
Facilitis in pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttititor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

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

Archebwyd

Rhestr o eitemau lle mae'r drefn o bwys penodol.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Cyfanrif molestie lorem yn massa
Facilitis in pretium nisl aliquet
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

<ol>
  <li> ... </li>
</ol>

Unstyled

Tynnwch y list-stylepadin rhagosodedig a chwith ar eitemau rhestr (plant ar unwaith yn unig).

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Cyfanrif molestie lorem yn massa
Facilitis in pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttititor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

<ul class = "unstyled" > 
  <li> ... </li>
</ul>

Mewn llinell

Rhowch yr holl eitemau rhestr ar un llinell gyda inline-blockphadin ysgafn.

Ystyr geiriau: Lorem ipsum
Phasellus iaculis
Ystyr geiriau: Nulla volutpat

<ul class = "inline" > 
  <li> ... </li>
</ul>

Disgrifiad

Rhestr o dermau gyda'u disgrifiadau cysylltiedig.

Rhestri disgrifiadau: Mae rhestr ddisgrifiad yn berffaith ar gyfer diffinio termau.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Ystyr geiriau: Donec id elit non mi porta gravida yn eget metus.
Porthladd Malesuada: Etiam porta sem malesuada magna mollis euismod.

<dl>
  <dt> ... </dt>
  <dd> ... </dd>
</dl>

Disgrifiad llorweddol

Gwnewch dermau a disgrifiadau mewn <dl>llinell ochr yn ochr.

Rhestri disgrifiadau: Mae rhestr ddisgrifiad yn berffaith ar gyfer diffinio termau.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Ystyr geiriau: Donec id elit non mi porta gravida yn eget metus.
Porthladd 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-horizontal" > 
  <dt> ... </dt>
  <dd> ... </dd>
</dl>

Pennau i fyny!Bydd rhestrau disgrifiadau llorweddol yn cwtogi termau sy'n rhy hir i ffitio yn y gosodiad colofn chwith text-overflow. Mewn mannau gwylio culach, byddant yn newid i'r cynllun pentyrru diofyn.

Mewn llinell

Lapiwch bytiau mewnol o god gyda <code>.

Er enghraifft, <section>dylid ei lapio fel llinell.

Er enghraifft , <code> & lt ; Dylai adran & gt ;</ code > gael ei lapio fel mewn llinell .

Bloc sylfaenol

Defnyddiwch <pre>ar gyfer llinellau cod lluosog. Gwnewch yn siŵr eich bod yn dianc rhag unrhyw fracedi ongl yn y cod ar gyfer rendro priodol.

<p>Testun enghreifftiol yma...</p>

<pre>
  <p>Testun enghreifftiol yma...</p>
</pre>

Pennau i fyny!Gwnewch yn siŵr eich bod yn cadw'r cod o fewn <pre>y tagiau mor agos at y chwith â phosibl; bydd yn rendro pob tab.

Gallwch ychwanegu'r .pre-scrollabledosbarth yn ddewisol a fydd yn gosod uchder mwyaf o 350px ac yn darparu bar sgrolio echel-y.

Arddulliau rhagosodedig

Ar gyfer steilio sylfaenol - padin ysgafn a dim ond rhanwyr llorweddol - ychwanegwch y dosbarth sylfaen .tableat unrhyw <table>.

#	Enw cyntaf	Enw olaf	Enw defnyddiwr
1	Marc	Otto	@mdo
2	Jacob	Thornton	@braster
3	Larry	yr Aderyn	@twitter

< table class = " bwrdd " > 
  …
</table>

Dosbarthiadau dewisol

Ychwanegwch unrhyw un o'r dosbarthiadau canlynol i'r dosbarth .tablesylfaen.

`.table-striped`

Yn ychwanegu stribedi sebra at unrhyw res tabl o fewn y <tbody>dewisydd :nth-childCSS (ddim ar gael yn IE7-8).

#	Enw cyntaf	Enw olaf	Enw defnyddiwr
1	Marc	Otto	@mdo
2	Jacob	Thornton	@braster
3	Larry	yr Aderyn	@twitter

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

`.table-bordered`

Ychwanegu borderi a chorneli crwn i'r bwrdd.

#	Enw cyntaf	Enw olaf	Enw defnyddiwr
1	Marc	Otto	@mdo
1	Marc	Otto	@getbootstrap
2	Jacob	Thornton	@braster
3	Larry yr Aderyn		@twitter

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

`.table-hover`

Galluogi cyflwr hofran ar resi bwrdd o fewn <tbody>.

#	Enw cyntaf	Enw olaf	Enw defnyddiwr
1	Marc	Otto	@mdo
2	Jacob	Thornton	@braster
3	Larry yr Aderyn		@twitter

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

`.table-condensed`

Yn gwneud byrddau'n fwy cryno trwy dorri padin celloedd yn ei hanner.

#	Enw cyntaf	Enw olaf	Enw defnyddiwr
1	Marc	Otto	@mdo
2	Jacob	Thornton	@braster
3	Larry yr Aderyn		@twitter

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

Dosbarthiadau rhes dewisol

Defnyddiwch ddosbarthiadau cyd-destunol i liwio rhesi tabl.

Dosbarth	Disgrifiad
`.success`	Yn dynodi gweithred lwyddiannus neu gadarnhaol.
`.error`	Yn dynodi gweithred beryglus neu a allai fod yn negyddol.
`.warning`	Yn dynodi rhybudd a allai fod angen sylw.
`.info`	Fe'i defnyddir fel dewis arall i'r arddulliau diofyn.

#	Cynnyrch	Taliad a Gymerwyd	Statws
1	TB - Yn fisol	01/04/2012	Cymeradwy
2	TB - Yn fisol	02/04/2012	Wedi gwrthod
3	TB - Yn fisol	03/04/2012	Arfaeth
4	TB - Yn fisol	04/04/2012	Galwch i mewn i gadarnhau

...
  < tr class = "llwyddiant" >
    <td> 1 < /td>
    <td>TB - Misol</ td >
    < td > 01/04/2012 < / td >
    <td>Cymeradwywyd</ td >
  </ tr >
...

Marcio tabl â chymorth

Rhestr o elfennau HTML tabl a gefnogir a sut y dylid eu defnyddio.

Tag	Disgrifiad
`<table>`	Elfen lapio ar gyfer arddangos data mewn fformat tabl
`<thead>`	Elfen cynhwysydd ar gyfer rhesi pennyn tabl ( `<tr>`) i labelu colofnau tabl
`<tbody>`	Elfen gynhwysydd ar gyfer rhesi bwrdd ( `<tr>`) yng nghorff y bwrdd
`<tr>`	Elfen cynhwysydd ar gyfer set o gelloedd bwrdd ( `<td>`neu `<th>`) sy'n ymddangos ar un rhes
`<td>`	Cell tabl rhagosodedig
`<th>`	Cell bwrdd arbennig ar gyfer labeli colofn (neu res, yn dibynnu ar gwmpas a lleoliad).
`<caption>`	Disgrifiad neu grynodeb o'r hyn sydd yn y tabl, sy'n arbennig o ddefnyddiol i ddarllenwyr sgrin

<bwrdd>
  <caption> ... </caption>
  <pen>
    <tr>
      <th> ... </th>
      <th> ... </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> ... </td>
      <td> ... </td>
    </tr>
  </tbody>
</table>

Arddulliau rhagosodedig

Mae rheolyddion ffurf unigol yn derbyn steilio, ond heb unrhyw ddosbarth sylfaen gofynnol ar y <form>newidiadau mawr yn y marcio. Yn arwain at labeli wedi'u pentyrru, wedi'u halinio i'r chwith ar ben rheolyddion ffurflenni.

<ffurflen>
  <set maes>
    <legend> Chwedl </legend>
    <label> Enw label </label>
    <input type = "text" placeholder = "Teipiwch rywbeth…" >  
    <span class = "help-block" > Testun cymorth lefel bloc enghreifftiol yma. </span> 
    <label class = "blwch ticio" > 
      <input type = "ticbox" > Gwiriwch fi allan 
    </label>
    <button type = "submit" class = "btn" > Cyflwyno </button>  
  </fieldset>
</form>

Cynlluniau dewisol

Yn gynwysedig gyda Bootstrap mae tri chynllun ffurf dewisol ar gyfer achosion defnydd cyffredin.

Ffurflen chwilio

Ychwanegu .form-searchat y ffurflen ac .search-queryat y <input>ar gyfer mewnbwn testun all-gron.

<form class = "form-search" > 
  <input type = "text" class = "ymholiad-cyfrwng mewnbwn" >  
  <button type = "submit" class = "btn" > Chwilio </button>  
</form>

Ffurf inline

Ychwanegu .form-inlinear gyfer labeli wedi'u halinio i'r chwith a rheolyddion bloc mewnol ar gyfer cynllun cryno.

<form class = "form-inline" > 
  <input type = "text" class = "input-small" placeholder = "E-bost" >   
  <input type = "cyfrinair" class = "input-small" placeholder = "Cyfrinair" >   
  <label class = "blwch ticio" > 
    <input type = " checkbox " > Cofiwch fi 
  </label>
  <button type = "submit" class = "btn" > Mewngofnodi </button>  
</form>

Ffurf llorweddol

Alinio labeli i'r dde a'u arnofio i'r chwith i wneud iddynt ymddangos ar yr un llinell â rheolyddion. Mae angen y newidiadau marcio mwyaf o ffurflen ddiofyn:

Ychwanegu .form-horizontalat y ffurflen
Lapiwch labeli a rheolyddion i mewn.control-group
Ychwanegu .control-labelat y label
Lapiwch unrhyw reolaethau cysylltiedig .controlsi'w halinio'n iawn

<form class = "form-horizontal" > 
  <div class = "control-group" > 
    <label class = " control-label " for = " mewnbwnEmail " > E-bost </label>  
    <div class = "rheolaethau" > 
      <input type = " text " id = " inputEmail " placeholder = " E-bost " >   
    </div>
  </div>
  <div class = "control-group" > 
    <label class = " control-label " for = " mewnbwnPassword " > Cyfrinair </label>  
    <div class = "rheolaethau" > 
      <input type = "cyfrinair" id = "inputPassword" placeholder = " Cyfrinair" >   
    </div>
  </div>
  <div class = "control-group" > 
    <div class = "rheolaethau" > 
      <label class = "blwch ticio" > 
        <input type = " checkbox " > Cofiwch fi 
      </label>
      <button type = "submit" class = "btn" > Mewngofnodi </button>  
    </div>
  </div>
</form>

Rheolaethau ffurf a gefnogir

Enghreifftiau o reolaethau ffurf safonol a gefnogir mewn cynllun ffurf enghreifftiol.

Mewnbynnau

Rheolaeth ffurf fwyaf cyffredin, meysydd mewnbwn seiliedig ar destun. Yn cynnwys cefnogaeth ar gyfer pob math HTML5: testun, cyfrinair, datetime, datetime-local, dyddiad, mis, amser, wythnos, rhif, e-bost, url, chwilio, ffôn, a lliw.

Yn gofyn am ddefnyddio penodedig typebob amser.

<input type = "text" placeholder = "Mewnbwn testun" >

Ardal destun

Rheoli ffurf sy'n cefnogi llinellau lluosog o destun. Newid rowspriodoledd yn ôl yr angen.

<textarea rows = " 3" ></textarea>

Blychau siec a radios

Mae blychau ticio ar gyfer dewis un neu sawl opsiwn mewn rhestr tra bod setiau radio ar gyfer dewis un opsiwn o blith llawer.

Rhagosodedig (wedi'i bentyrru)

<label class = "blwch ticio" > 
  <input type = "" checkbox" value = "" >  
  Opsiwn un yw hwn a'r llall - gwnewch yn siŵr eich bod yn cynnwys pam ei fod yn wych
</label>
 
<label class = "radio" > 
  <input type = " radio" name = "optionsRadios" id = "optionsRadios1" value = "option1" wedi'i wirio >     
  Opsiwn un yw hwn a'r llall - gwnewch yn siŵr eich bod yn cynnwys pam ei fod yn wych
</label>
<label class = "radio" > 
  <input type = "radio" name = "optionsRadios" id = "optionsRadios2" value = "option2" >    
  Gall opsiwn dau fod yn rhywbeth arall a bydd ei ddewis yn dad-ddewis opsiwn un
</label>

Blychau ticio mewnol

Ychwanegwch y .inlinedosbarth at gyfres o flychau ticio neu radios ar gyfer rheolyddion yn ymddangos ar yr un llinell.

<label class = "blwch ticio mewnol" > 
  <input type = "checkbox" id = "inlineCheckbox1" value = "option1" > 1   
</label>
<label class = "blwch ticio mewnol" > 
  <input type = " checkbox " id = " inlineCheckbox2 " value = "option2" > 2   
</label>
<label class = "blwch ticio mewnol" > 
  <input type = "checkbox" id = "inlineCheckbox3" value = "option3" > 3   
</label>

Yn dewis

Defnyddiwch yr opsiwn rhagosodedig neu nodwch a multiple="multiple"i ddangos opsiynau lluosog ar unwaith.

<dewis>
  <option> 1 </option>
  <option> 2 </option>
  <option> 3 </option>
  <option> 4 </option>
  <option> 5 </option>
</select>
 
<select multiple = "lluosog" > 
  <option> 1 </option>
  <option> 2 </option>
  <option> 3 </option>
  <option> 4 </option>
  <option> 5 </option>
</select>

Ymestyn rheolaethau ffurflen

Gan ychwanegu ar ben rheolaethau porwr presennol, mae Bootstrap yn cynnwys cydrannau ffurf defnyddiol eraill.

Mewnbynnau wedi'u rhagamcanu a'u hatodi

Ychwanegu testun neu fotymau cyn neu ar ôl unrhyw fewnbwn sy'n seiliedig ar destun. Sylwch nad selectyw elfennau yn cael eu cefnogi yma.

Opsiynau diofyn

Lapiwch .add-onac an inputgydag un o ddau ddosbarth i ragbaratoi neu atodi testun i fewnbwn.

<div class = "input-prepend" > 
  <span class = "add-on" > @ </span> 
  < input class = "span2" id = "prependedInput" type = "text" placeholder = "Enw defnyddiwr" >    
</div>
<div class = "mewnbwn-atodiad" > 
  < input class = "span2" id = "appendedInput" type = "text" >   
  <span class = "add-on" > .00 </span> 
</div>

Cyfunol

Defnyddiwch y ddau ddosbarth a dau enghraifft o .add-oni ragpendynnu ac atodi mewnbwn.

<div class = "input-prepend mewnbwn-atodiad" > 
  <span class = "add-on" > $ </span> 
  < input class = "span2" id = "appendedPrependedInput" type = "text" >   
  <span class = "add-on" > .00 </span> 
</div>

Botymau yn lle testun

Yn lle <span>gyda thestun, defnyddiwch a .btni atodi botwm (neu ddau) i fewnbwn.

<div class = "mewnbwn-atodiad" > 
  < input class = "span2" id = "appendedInputButton" type = "text" >   
  <button class = "btn" type = "botwm" > Ewch! </button>  
</div>

<div class = "mewnbwn-atodiad" > 
  < input class = "span2" id = "appendedInputButtons" type = "text" >   
  <button class = "btn" type = "button" > Chwilio </button>  
  <button class = "btn" type = "button" > Dewisiadau </button>  
</div>

Cwympiadau botwm

<div class = "mewnbwn-atodiad" > 
  < input class = "span2" id = "appendedDropdownButton" type = "text" >   
  <div class = "btn-group" > 
    <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
      Gweithred
      <span class = "caret" ></span> 
    </button>
    <ul class = "dropdown-menu" > 
      ...
    </ul>
  </div>
</div>

<div class = "input-prepend" > 
  <div class = "btn-group" > 
    <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
      Gweithred
      <span class = "caret" ></span> 
    </button>
    <ul class = "dropdown-menu" > 
      ...
    </ul>
  </div>
  < input class = "span2" id = "prependedDropdownButton" type = "text" >   
</div>

<div class = "input-prepend mewnbwn-atodiad" > 
  <div class = "btn-group" > 
    <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
      Gweithred
      <span class = "caret" ></span> 
    </button>
    <ul class = "dropdown-menu" > 
      ...
    </ul>
  </div>
  < input class = "span2" id = "appendedPrependedDropdownButton" type = "text" >   
  <div class = "btn-group" > 
    <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
      Gweithred
      <span class = "caret" ></span> 
    </button>
    <ul class = "dropdown-menu" > 
      ...
    </ul>
  </div>
</div>

Grwpiau cwymplen wedi'u segmentu

<ffurflen>
  <div class = "input-prepend" > 
    <div class = "btn-group" > ... </div> 
    <input type = "text" > 
  </div>
  <div class = "mewnbwn-atodiad" > 
    <input type = "text" > 
    <div class = "btn-group" > ... </div> 
  </div>
</form>

Ffurflen chwilio

<form class = "form-search" > 
  <div class = "mewnbwn-atodiad" > 
    <input type = "text" class = "span2 search-query" >  
    <button type = "submit" class = "btn" > Chwilio </button>  
  </div>
  <div class = "input-prepend" > 
    <button type = "submit" class = "btn" > Chwilio </button>  
    <input type = "text" class = "span2 search-query" >  
  </div>
</form>

Rheoli maint

Defnyddiwch ddosbarthiadau maint cymharol fel .input-largeneu parwch eich mewnbynnau i feintiau colofnau grid gan ddefnyddio .span*dosbarthiadau.

Mewnbynnau lefel bloc

Gwnewch i unrhyw elfen <input>neu <textarea>elfen ymddwyn fel elfen lefel bloc.

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

Maint cymharol

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

Pennau i fyny!Mewn fersiynau yn y dyfodol, byddwn yn newid y defnydd o'r dosbarthiadau mewnbwn cymharol hyn i gyd-fynd â maint ein botymau. Er enghraifft, .input-largebydd yn cynyddu padin a maint ffont mewnbwn.

Maint grid

Defnyddiwch .span1i .span12ar gyfer mewnbynnau sy'n cyfateb i'r un maint â'r colofnau grid.

< input class = "span1" type = "text" placeholder = ".span1" >   
< input class = " span2 " type = " text " placeholder = " .span2 " >   
< input class = " span3 " type = " text " placeholder = " .span3 " >   
<dewiswch class = "span1" > 
  ...
</select>
<dewiswch class = "span2" > 
  ...
</select>
<dewiswch class = "span3" > 
  ...
</select>

Ar gyfer mewnbynnau grid lluosog fesul llinell, defnyddiwch y .controls-rowdosbarth addasydd ar gyfer bylchau priodol . Mae'n arnofio'r mewnbynnau i ddymchwel gofod gwyn, yn gosod yr ymylon cywir, ac yn clirio'r fflôt.

<div class = "rheolaethau" > 
  < input class = " span5 " type = " text " placeholder = " .span5 " >   
</div>
<div class = "rheoli rheolaethau-rhes" > 
  < input class = " span4 " type = " text " placeholder = " .span4 " >   
  < input class = "span1" type = "text" placeholder = ".span1" >   
</div>
...

Mewnbynnau anaddas

Cyflwyno data ar ffurf na ellir ei olygu heb ddefnyddio marcio ffurf gwirioneddol.

<span class = "input-xlarge uneditable-input" > Peth gwerth yma </span>

Ffurfio gweithredoedd

Gorffennwch ffurflen gyda grŵp o gamau gweithredu (botymau). Pan gânt eu gosod o fewn .form-actions, bydd y botymau yn mewnoli'n awtomatig i gyd-fynd â rheolyddion y ffurflen.

<div class = "form-actions" > 
  <button type = "submit" class = "btn btn-primary" > Cadw newidiadau </button>  
  <button type = "button" class = "btn" > Canslo </button>  
</div>

Testun cymorth

Cefnogaeth lefel fewnol a bloc ar gyfer testun cymorth sy'n ymddangos o amgylch rheolyddion ffurflen.

Cymorth mewnol

<input type = " text " <span class = " help-inline " > Testun cymorth mewnol </ span>

Rhwystro help

<input type = "text" <span class = "help-block" > Bloc hirach o destun cymorth sy'n torri i linell newydd ac a all ymestyn y tu hwnt i un llinell. </span>

Cyflyrau rheoli ffurf

Rhoi adborth i ddefnyddwyr neu ymwelwyr gyda chyflyrau adborth sylfaenol ar reolaethau ffurflenni a labeli.

Ffocws mewnbwn

Rydym yn dileu'r outlinearddulliau rhagosodedig ar rai rheolyddion ffurf ac yn cymhwyso a box-shadowyn ei le ar gyfer :focus.

<input class = "input-xlarge" id = "focusedInput" type = "text" value = "Mae hwn wedi'i ffocysu..." >

Mewnbynnau annilys

Mewnbynnau arddull trwy ymarferoldeb porwr rhagosodedig gyda :invalid. Nodwch a type, ychwanegwch y requiredbriodwedd os nad yw'r maes yn ddewisol, ac (os yw'n berthnasol) nodwch pattern.

Nid yw hwn ar gael mewn fersiynau o Internet Explorer 7-9 oherwydd diffyg cefnogaeth i ddetholwyr ffug CSS.

< input class = "span3" type = "email" required >

Mewnbynnau anabl

Ychwanegwch y disabledpriodoledd ar fewnbwn i atal mewnbwn defnyddwyr a sbarduno golwg ychydig yn wahanol.

<input class = "input-xlarge" id = "disabledInput" type = "text" placeholder = "Mewnbwn wedi'i analluogi yma..." wedi'i analluogi >

Cyflyrau dilysu

Mae Bootstrap yn cynnwys arddulliau dilysu ar gyfer negeseuon gwall, rhybudd, gwybodaeth a llwyddiant. I'w ddefnyddio, ychwanegwch y dosbarth priodol i'r .control-group.

<div class = "rhybudd grŵp rheoli" > 
  <label class = " control-label " for = " mewnbwnWarning " > Mewnbwn gyda rhybudd </label>  
  <div class = "rheolaethau" > 
    <input type = "text" id = "inputWarning" >  
    <span class = "help-inline" > Efallai bod rhywbeth wedi mynd o'i le </span> 
  </div>
</div>
 
<div class = "gwall rheoli-grŵp" > 
  <label class = " control-label " for = " mewnbwnError " > Mewnbwn gyda gwall </label>  
  <div class = "rheolaethau" > 
    <input type = "text" id = "MewnputError" >  
    <span class = "help-inline" > Cywirwch y gwall </span> os gwelwch yn dda 
  </div>
</div>
 
<div class = "gwybodaeth grŵp rheoli" > 
  <label class = " control-label " for = " mewnbwnInfo " > Mewnbwn gyda gwybodaeth </label>  
  <div class = "rheolaethau" > 
    <input type = "text" id = "inputInfo" >  
    <span class = "help-inline" > Enw defnyddiwr wedi ei gymryd yn barod </span> 
  </div>
</div>
 
<div class = "llwyddiant grŵp rheoli" > 
  <label class = " control-label " for = " mewnbwn Llwyddiant " > Mewnbwn yn llwyddiannus </label>  
  <div class = "rheolaethau" > 
    <input type = "text" id = "inputSuccess" >  
    <span class = "help-inline" > Woohoo! </span> 
  </div>
</div>

Botymau rhagosodedig

Gellir cymhwyso arddulliau botwm i unrhyw beth gyda'r .btndosbarth wedi'i gymhwyso. Fodd bynnag, yn nodweddiadol byddwch am gymhwyso'r rhain i elfennau yn unig <a>ar <button>gyfer y rendrad gorau.

Botwm	dosbarth =""	Disgrifiad
	`btn`	Botwm llwyd safonol gyda graddiant
	`btn btn-primary`	Yn darparu pwysau gweledol ychwanegol ac yn nodi'r prif weithred mewn set o fotymau
	`btn btn-info`	Fe'i defnyddir fel dewis arall i'r arddulliau rhagosodedig
	`btn btn-success`	Yn dynodi gweithred lwyddiannus neu gadarnhaol
	`btn btn-warning`	Yn nodi y dylid bod yn ofalus gyda'r cam hwn
	`btn btn-danger`	Yn dynodi gweithred beryglus neu a allai fod yn negyddol
	`btn btn-inverse`	Botwm llwyd tywyll bob yn ail, heb ei glymu i weithred neu ddefnydd semantig
	`btn btn-link`	Disgrifiwch fotwm trwy wneud iddo edrych fel dolen wrth gynnal ymddygiad botwm

Cydweddoldeb traws-borwr

Nid yw IE9 yn cnydio graddiannau cefndir ar gorneli crwn, felly rydyn ni'n ei dynnu. Yn gysylltiedig, mae IE9 yn jancio buttonelfennau anabl, gan wneud y testun yn llwyd gyda chysgod testun cas na allwn ei drwsio.

Meintiau botwm

Awydd botymau mwy neu lai? Ychwanegu .btn-large, .btn-small, neu .btn-miniar gyfer meintiau ychwanegol.

<p>
  <button class = "btn btn-large btn-primary" type = "button" > Botwm mawr </button>  
  <button class = "btn btn-large" type = "button" > Botwm mawr </button>  
</p>
<p>
  <button class = "btn btn-primary" type = "button" > Botwm rhagosodedig </button>  
  <button class = "btn" type = "button" > Botwm rhagosodedig </button>  
</p>
<p>
  <button class = "btn btn-small btn-primary" type = "button" > Botwm bach </button>  
  <button class = "btn btn-small" type = "button" > Botwm bach </button>  
</p>
<p>
  <button class = "btn btn-mini btn-primary" type = "button" > Botwm mini </button>  
  <button class = "btn btn-mini" type = "button" > Botwm mini </button>  
</p>

Creu botymau lefel bloc - y rhai sy'n rhychwantu lled llawn rhiant - trwy ychwanegu .btn-block.

<button class = "btn btn-large btn-block btn-primary" type = "botwm" > Botwm lefel bloc </button>  
<button class = "btn btn-large btn-block" type = "botwm" > Botwm lefel bloc </button>

Cyflwr anabl

Gwnewch i fotymau edrych na ellir eu clicio trwy eu pylu'n ôl 50%.

Elfen angor

Ychwanegu'r .disableddosbarth at <a>fotymau.

Cyswllt cynradd Cyswllt

<a href = " # " class = " btn btn-large btn-primary disabled " > Prif ddolen </a>  
<a href = " # " class = " btn btn-large disabled " > Dolen </a>

Pennau i fyny!Rydym yn defnyddio .disabledfel dosbarth cyfleustodau yma, yn debyg i'r .activedosbarth cyffredin, felly nid oes angen rhagddodiad. Hefyd, dim ond ar gyfer esthetig y mae'r dosbarth hwn; rhaid i chi ddefnyddio JavaScript wedi'i deilwra i analluogi dolenni yma.

Elfen botwm

Ychwanegwch y disabledpriodoledd i <button>fotymau.

< button type = " button " class = " btn btn-large btn-primary disabled " disabled = " analluog " > Botwm cynradd </button>   
<button type = "button" class = "btn btn-large" anabl > Botwm </button>

Un dosbarth, tagiau lluosog

Defnyddiwch y .btndosbarth ar <a>, <button>, neu <input>elfen.

<a class="btn" href=""> Cyswllt </a> _ _ _ _ _  
<button class = "btn" type = "submit" > Botwm </button>  
< input class = "btn" type = "button" value = "Mewnbwn" >   
< input class = "btn" type = "submit" value = "Cyflwyno" >

Fel arfer gorau, ceisiwch baru'r elfen ar gyfer eich cyd-destun i sicrhau rendrad traws-borwr cyfatebol. Os oes gennych chi input, defnyddiwch <input type="submit">fotwm ar gyfer eich.

Ychwanegu dosbarthiadau at <img>elfen i steilio delweddau yn hawdd mewn unrhyw brosiect.

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

Pennau i fyny! .img-roundedac .img-circlenid ydynt yn gweithio yn IE7-8 oherwydd diffyg border-radiuscefnogaeth.

Glyffau eicon

140 o eiconau ar ffurf corlun, ar gael mewn llwyd tywyll (diofyn) a gwyn, wedi'u darparu gan Glyphicons .

eicon-gwydr
eicon-cerddoriaeth
eicon-chwilio
eicon-amlen
eicon-galon
eicon-seren
eicon-seren-gwag
eicon-ddefnyddiwr
eicon-ffilm
eicon-th-mawr
eicon-th
eicon-th-rhestr
eicon-iawn
eicon-tynnu
eicon-chwyddo i mewn
eicon-chwyddo-allan
eicon-off
eicon-signal
eicon-cog
eicon-sbwriel
eicon-cartref
eicon-ffeil
eicon-amser
eicon-ffordd
eicon-lawrlwytho-alt
eicon-lawrlwytho
eicon-llwytho i fyny
eicon-mewnflwch
eicon-chwarae-cylch
eicon-ailadrodd
eicon-adnewyddu
eicon-rhestr-alt
eicon-clo
eicon-faner
eicon-chlustffonau
icon-volume-off
eicon-cyfrol-lawr
eicon-cyfrol-i fyny
eicon-qrcode
eicon-cod bar
eicon-tag
eicon-tagiau
eicon-lyfr
eicon-nod tudalen
eicon-print
eicon-camera
eicon-ffont
eicon-beiddgar
eicon-italig
eicon-testun-uchder
eicon-testun-lled
eicon-alinio-chwith
eicon-alinio-canolfan
eicon-alinio-dde
eicon-alinio-cyfiawnhau
eicon-rhestr
eicon-mewndent-chwith
eicon-mewndent-dde
eicon-facetime-fideo
eicon-llun
eicon-pensil
eicon-map-marcwr
eicon-addasu
eicon-arlliw
eicon-olygu
rhannu eicon
eicon-wirio
eicon-symud
eicon-cam yn ôl
eicon-cyflym-yn-ôl
eicon-yn ôl
chwarae eicon
eicon-saib
eicon-stop
eicon-ymlaen
eicon-cyflym-ymlaen
eicon-cam ymlaen
eicon-dafliad
icon-chevron-chwith
eicon-chevron-dde
icon-plus-sign
eicon-minws-arwydd
eicon-tynnu-arwydd
eicon-iawn-arwydd
eicon-cwestiwn-arwydd
eicon-info-sign
eicon-sgrinlun
eicon-tynnu-cylch
eicon-iawn-cylch
eicon-gwaharddiad-cylch
eicon-saeth-chwith
eicon-saeth-dde
eicon-saeth i fyny
eicon-saeth-lawr
eicon-rhannu-alt
eicon-newid maint-llawn
eicon-newid maint-bach
eicon-plws
eicon-minws
eicon-seren
eicon-ebychnod-arwydd
eicon-rhodd
eicon-dail
eicon-tân
eicon-llygad-agored
eicon-llygad-agos
eicon-rhybudd-arwydd
eicon-awyren
eicon-calendr
eicon-hap
eicon-sylw
eicon-magnet
icon-chevron-up
icon-chevron-down
eicon-aildrydar
eicon-siopa-cart
icon-folder-close
eicon-ffolder-agored
eicon-newid maint-fertigol
eicon-newid maint-llorweddol
eicon-hdd
icon-bullhorn
eicon-cloch
tystysgrif eicon
eicon-bawd-up
eicon-bawd-lawr
eicon-llaw-dde
eicon-llaw-chwith
eicon-llaw i fyny
eicon-llaw-lawr
icon-circle-arrow-dde
icon-circle-arrow-chwith
icon-circle-arrow-up
icon-cylch-saeth-lawr
eicon-globe
eicon-wrench
eicon-tasgau
eicon-hidlo
eicon-brîff
eicon-sgrin lawn

Priodoli Glyphicons

Fel arfer nid yw Glyphicons Halflings ar gael am ddim, ond mae trefniant rhwng Bootstrap a chrewyr Glyphicons wedi gwneud hyn yn bosibl heb unrhyw gost i chi fel datblygwyr. Fel diolch, gofynnwn i chi gynnwys dolen ddewisol yn ôl i Glyphicons pryd bynnag y bo'n ymarferol.

Sut i ddefnyddio

Mae angen <i>tag â dosbarth unigryw ar gyfer pob eicon, wedi'i rag-osod â icon-. I'w ddefnyddio, rhowch y cod canlynol bron yn unrhyw le:

<i class = "chwiliad eicon" ></i>

Mae yna hefyd arddulliau ar gael ar gyfer eiconau gwrthdro (gwyn), wedi'u paratoi gydag un dosbarth ychwanegol. Byddwn yn gorfodi'r dosbarth hwn yn benodol ar hofran a chyflyrau gweithredol ar gyfer dolenni llywio a gollwng.

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

Pennau i fyny!Wrth ddefnyddio llinynnau wrth ymyl testun, fel mewn botymau neu ddolenni nav, gwnewch yn siŵr eich bod yn gadael bwlch ar ôl y <i>tag ar gyfer y bylchau cywir.

Enghreifftiau eicon

Defnyddiwch nhw mewn botymau, grwpiau botwm ar gyfer bar offer, llywio, neu fewnbynnau ffurf wedi'u rhagpendodi.

Botymau

Grŵp botwm mewn bar offer botwm

<div class = "btn-bar offer" > 
  <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>

Cwymp mewn grŵp botymau

Defnyddiwr

<div class = "btn-group" > 
  <a class="btn btn-primary" href = " # " ><i class = " icon -user icon-white " ></i> Defnyddiwr </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 = "eicon-pensil" ></i> Golygu </a></li>  
    <li><a href = " #" ><i class = "icon-sbwriel" ></i> Dileu </a></li>  
    <li><a href = " # " ><i class = " icon-ban-circle " ></i> Gwaharddiad </a></li>  
    <li class = "divider" ></li> 
    < li><a href = " # " ><i class = " i " ></i> Gwneud gweinyddwr </a></li>  
  </ul>
</div>

Meintiau botwm

Seren Seren Seren

<a class="btn btn-large" href = " # " > <i class = " eicon-seren " ></i> Seren </a>   
<a class="btn btn-small" href = " # " > <i class = " eicon-seren " ></i> Seren </a>   
<a class="btn btn-mini" href = " # " > <i class = " eicon-seren " ></i> Seren </a>

Llywio

<ul class = "nav nav-list" > 
  < li class = " active " <a href = " # " ><i class = " icon-home icon-white " ></i> Hafan </a></li>   
  <li><a href = " #" ><i class = "llyfr eicon" ></i> Llyfrgell </a></li>  
  <li><a href = " #" ><i class = "eicon-pensil" ></i> Ceisiadau </a></li>  
  <li><a href = " # " ><i class = " i " ></i> Misc </a></li>  
</ul>

Ffurfio meysydd

<div class = "control-group" > 
  <label class = " control-label " for = " inputIcon " > Cyfeiriad e-bost </label>  
  <div class = "rheolaethau" > 
    <div class = "input-prepend" > 
      <span class = "add-on" ><i class = "icon-envelope" ></i></span>  
      < input class = "span2" id = "inputIcon" type = "text" >   
    </div>
  </div>
</div>

Teipograffeg

Penawdau

h1. Pennawd 1

h2. Pennawd 2

h3. Pennawd 3

h4. Pennawd 4

h5. Pennawd 5

h6. Pennawd 6

Copi corff

Copi corff arweiniol

Adeiladwyd gyda Llai

Pwyslais

<small>

Beiddgar

italig

Dosbarthiadau aliniad

Dosbarthiadau pwyslais

Byrfoddau

<abbr>

<abbr class="initialism">

Cyfeiriadau

<address>

Blockquotes

Blockquote diofyn

Opsiynau Blockquote

Enwi ffynhonnell

Arddangosfeydd amgen

Rhestrau

Heb drefn

Archebwyd

Unstyled

Mewn llinell

Disgrifiad

Disgrifiad llorweddol

Côd

Mewn llinell

Bloc sylfaenol

Byrddau

Arddulliau rhagosodedig

Dosbarthiadau dewisol

.table-striped

.table-bordered

.table-hover

.table-condensed

Dosbarthiadau rhes dewisol

Marcio tabl â chymorth

Ffurflenni

Arddulliau rhagosodedig

Cynlluniau dewisol

Ffurflen chwilio

Ffurf inline

Ffurf llorweddol

Rheolaethau ffurf a gefnogir

Mewnbynnau

Ardal destun

Blychau siec a radios

Rhagosodedig (wedi'i bentyrru)

Blychau ticio mewnol

Yn dewis

Ymestyn rheolaethau ffurflen

Mewnbynnau wedi'u rhagamcanu a'u hatodi

Opsiynau diofyn

Cyfunol

Botymau yn lle testun

Cwympiadau botwm

Grwpiau cwymplen wedi'u segmentu

Ffurflen chwilio

Rheoli maint

Mewnbynnau lefel bloc

Maint cymharol

Maint grid

Mewnbynnau anaddas

Ffurfio gweithredoedd

Testun cymorth

Cymorth mewnol

Rhwystro help

Cyflyrau rheoli ffurf

Ffocws mewnbwn

Mewnbynnau annilys

Mewnbynnau anabl

`<small>`

`<abbr>`

`<abbr class="initialism">`

`<address>`

`.table-striped`

`.table-bordered`

`.table-hover`

`.table-condensed`