Enghraifft

Dewislen gyd-destunol y gellir ei thoglo ar gyfer dangos rhestrau o ddolenni. Wedi'i wneud yn rhyngweithiol gyda'r ategyn JavaScript cwympo .

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu" >   
  <li> <a tabindex="-1" href="#"> Gweithredu </a> < / li >  
  <li><a tabindex = " -1" href = " # " > Gweithred arall </a></li>  
  <li><a tabindex = " -1" href = " # " > Rhywbeth arall yma </a></li>  
  <li class = "divider" ></li> 
  <li><a tabindex = " -1" href = " #"> Dolen wedi gwahanu </a></li>  
</ul>

Marcio

Gan edrych ar y gwymplen yn unig, dyma'r HTML gofynnol. Mae angen i chi lapio sbardun y gwymplen a'r gwymplen o fewn .dropdown, neu elfen arall sy'n datgan position: relative;. Yna dim ond creu'r ddewislen.

<div class = "dropdown" > 
  <!-- Dolen neu fotwm i doglo'r gwymplen -->
  <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
    <li> <a tabindex="-1" href="#"> Gweithredu </a> < / li >  
    <li><a tabindex = " -1" href = " # " > Gweithred arall </a></li>  
    <li><a tabindex = " -1" href = " # " > Rhywbeth arall yma </a></li>  
    <li class = "divider" ></li> 
    <li><a tabindex = " -1" href = " #"> Dolen wedi gwahanu </a></li>  
  </ul>
</div>

Opsiynau

Alinio bwydlenni i'r dde ac ychwanegu cynnwys lefelau ychwanegol o gwymplenni.

Alinio'r bwydlenni

Ychwanegu .pull-rightat a .dropdown-menui'r dde alinio'r ddewislen.

<ul class = "dropdown-menu pull-right" role = "menu" aria-labelledby = "dLabel" >   
  ...
</ul>

Dewisiadau dewislen anabl

Ychwanegu .disabledat <li>yn y gwymplen i analluogi'r ddolen.

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu" >   
  <li><a tabindex = " -1" href = " #"> Dolen arferol </a></li >  
  <li class = "disabled" < a tabindex = "-1 " href = " # " > Dolen analluog </a></li>   
  <li><a tabindex = " -1" href = " #"> Dolen arall </a></li >  
</ul>

Is-ddewislenni ar gwymplenni

Ychwanegwch lefel ychwanegol o gwymplenni, yn ymddangos ar hofran fel rhai OS X, gyda rhai ychwanegiadau marcio syml. Ychwanegwch .dropdown-submenuat unrhyw rai limewn cwymplen sy'n bodoli eisoes ar gyfer steilio awtomatig.

Diofyn

Dropup

Is-ddewislen chwith

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
  ...
  <li class = "dropdown-submenu" > 
    <a tabindex=" -1" href="#"> Mwy o ddewisiadau </a> _ _  
    <ul class = "dropdown-menu" > 
      ...
    </ul>
  </li>
</ul>

Enghreifftiau

Dau opsiwn sylfaenol, ynghyd â dau amrywiad mwy penodol.

Grŵp botwm sengl

Lapiwch gyfres o fotymau gyda .btnmewn .btn-group.

<div class = "btn-group" > 
  <button class = "btn" > Chwith </button> 
  <button class = "btn" > Canol </button> 
  <button class = "btn" > Dde </button> 
</div>

Grwpiau botwm lluosog

Cyfuno setiau o <div class="btn-group">i <div class="btn-toolbar">gydrannau mwy cymhleth.

<div class = "btn-bar offer" > 
  <div class = "btn-group" > 
    ...
  </div>
</div>

Grwpiau botymau fertigol

Gwnewch i set o fotymau ymddangos wedi'u pentyrru'n fertigol yn hytrach nag yn llorweddol.

<div class = "btn-group btn-group-vertical" > 
  ...
</div>

Blasau blwch siec a radio

Gall grwpiau botwm hefyd weithredu fel radios, lle gall un botwm yn unig fod yn weithredol, neu flychau ticio, lle gall unrhyw nifer o fotymau fod yn weithredol. Edrychwch ar y dogfennau JavaScript ar gyfer hynny.

Cwympiadau mewn grwpiau botwm

Pennau i fyny!Rhaid i fotymau gyda dropdowns gael eu lapio'n unigol yn eu rhai eu hunain .btn-groupo fewn a .btn-toolbarar gyfer rendrad cywir.

Trosolwg ac enghreifftiau

Defnyddiwch unrhyw fotwm i sbarduno cwymplen trwy ei osod o fewn a .btn-groupa darparu'r marc dewislen cywir.

<div class = "btn-group" > 
  <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"> _ _ _ _ _ _   
    Gweithred
    <span class = "caret" ></span> 
  </a>
  <ul class = "dropdown-menu" > 
    <!-- dolenni dewislen -->
  </ul>
</div>

Yn gweithio gyda phob maint botwm

Mae cwymplenni botwm yn gweithio ar unrhyw faint: .btn-large, .btn-small, neu .btn-mini.

Angen JavaScript

Mae cwymplenni botwm yn gofyn am ategyn cwymplen Bootstrap i weithio.

Mewn rhai achosion - fel symudol - bydd cwymplenni yn ymestyn y tu allan i'r olygfan. Mae angen i chi ddatrys yr aliniad â llaw neu gyda JavaScript arferol.

Hollti botymau botwm

Gan adeiladu ar yr arddulliau grŵp botwm a marcio, gallwn greu botwm hollt yn hawdd. Mae botymau hollti yn cynnwys gweithred safonol ar y chwith a thogl cwymplen ar y dde gyda chysylltiadau cyd-destunol.

<div class = "btn-group" > 
  <button class = "btn" > Gweithredu </button> 
  <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" ></span> 
  </button>
  <ul class = "dropdown-menu" > 
    <!-- dolenni dewislen -->
  </ul>
</div>

Meintiau

Defnyddiwch y dosbarthiadau botwm ychwanegol .btn-mini, .btn-small, neu .btn-largear gyfer maint.

<div class = "btn-group" > 
  <button class = "btn btn-mini" > Gweithredu </button> 
  <button class = "btn btn-mini dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" ></span> 
  </button>
  <ul class = "dropdown-menu" > 
    <!-- dolenni dewislen -->
  </ul>
</div>

Dewislenni gollwng

Gall cwymplenni hefyd gael eu toglo o'r gwaelod i fyny trwy ychwanegu un dosbarth at riant uniongyrchol .dropdown-menu. Bydd yn troi cyfeiriad y .caretac yn ail-leoli'r ddewislen ei hun i symud o'r gwaelod i fyny yn lle o'r brig i lawr.

<div class = "dropup btn-group" > 
  <button class = "btn" > Gollwng </button> 
  <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" ></span> 
  </button>
  <ul class = "dropdown-menu" > 
    <!-- dolenni dewislen -->
  </ul>
</div>

Rhagosodiadau ysgafn Yr un marcio, dosbarthiadau gwahanol

Mae'r holl gydrannau nav yma - tabiau, pils, a rhestrau - yn rhannu'r un marcio sylfaenol ac arddulliau trwy'r .navdosbarth.

Tabiau sylfaenol

Cymerwch ddolen reolaidd <ul>ac ychwanegwch .nav-tabs:

<ul class = "nav nav-tabs" > 
  <li class = "active" > 
    <a href="#"> Cartref </a> _ _ _ 
  </li>
  <li><a href = " #"> ... </a></li > 
  <li><a href = " #"> ... </a></li > 
</ul>

Pils sylfaenol

Cymerwch yr un HTML, ond defnyddiwch .nav-pillsyn lle hynny:

<ul class = "nav nav-pills" > 
  <li class = "active" > 
    <a href="#"> Cartref </a> _ _ _ 
  </li>
  <li><a href = " #"> ... </a></li > 
  <li><a href = " #"> ... </a></li > 
</ul>

Cyflwr anabl

Ar gyfer unrhyw gydran llywio (tabiau, tabledi, neu restr), ychwanegwch .disabledar gyfer dolenni llwyd a dim effeithiau hofran . Bydd modd clicio ar ddolenni, fodd bynnag, oni bai eich bod yn dileu'r hrefpriodoledd. Fel arall, fe allech chi weithredu JavaScript arferol i atal y cliciau hynny.

<ul class = "nav nav-pills" > 
  ...
  <li class = "disabled" <a href = " #" > Cartref </a></li>  
  ...
</ul>

Aliniad cydran

I alinio dolenni llywio, defnyddiwch y .pull-leftneu .pull-rightddosbarthiadau cyfleustodau. Bydd y ddau ddosbarth yn ychwanegu fflôt CSS i'r cyfeiriad penodedig.

Stackable

Gan fod tabiau a phils yn llorweddol yn ddiofyn, ychwanegwch ail ddosbarth, .nav-stacked, i'w gwneud yn ymddangos wedi'u pentyrru'n fertigol.

Tabiau wedi'u pentyrru

<ul class = "nav nav-tabs nav-stacked" > 
  ...
</ul>

Pils wedi'u pentyrru

<ul class = "nav nav-pills nav-stacked" > 
  ...
</ul>

Cwympiadau

Ychwanegwch gwymplenni gydag ychydig o HTML ychwanegol a'r ategyn JavaScript cwymplenni .

Tabiau gyda dropdowns

<ul class = "nav nav-tabs" > 
  <li class = "dropdown" > 
    <a class = "dropdown-toggle" 
       data-toggle = "gwymp"
       href = "#" >
        Gollwng i lawr
        <b class = "caret" ></b> 
      </a>
    <ul class = "dropdown-menu" > 
      <!-- dolenni -->
    </ul>
  </li>
</ul>

Pils gyda dropdowns

<ul class = "nav nav-pills" > 
  <li class = "dropdown" > 
    <a class = "dropdown-toggle" 
       data-toggle = "gwymp"
       href = "#" >
        Gollwng i lawr
        <b class = "caret" ></b> 
      </a>
    <ul class = "dropdown-menu" > 
      <!-- dolenni -->
    </ul>
  </li>
</ul>

rhestrau llywio

Ffordd syml a hawdd o adeiladu grwpiau o gysylltiadau llywio â phenawdau dewisol. Maen nhw'n cael eu defnyddio orau mewn bariau ochr fel y Finder yn OS X.

Rhestr llywio enghreifftiol

Cymerwch restr o ddolenni ac ychwanegwch class="nav nav-list":

<ul class = "nav nav-list" > 
  <li class = "nav-header" > Pennawd y rhestr </li> 
  < li class = " active " <a href = " # " > Cartref </a></li>  
  <li><a href="#"> Llyfrgell </a> < / li> 
  ...
</ul>

NodynAr gyfer nythu o fewn rhestr llywio, cynhwyswch class="nav nav-list"ar unrhyw nyth <ul>.

Rhanwyr llorweddol

Ychwanegwch rannwr llorweddol trwy greu eitem rhestr wag gyda'r dosbarth .divider, fel hyn:

<ul class = "nav nav-list" > 
  ...
  <li class = "divider" ></li> 
  ...
</ul>

Nav tabladwy

Dewch â'ch tabiau'n fyw gydag ategyn syml i newid rhwng cynnwys trwy dabiau. Mae Bootstrap yn integreiddio tabiau tabladwy mewn pedair arddull: top (diofyn), dde, gwaelod, a chwith.

Enghraifft tabladwy

I wneud tabiau'n dabl, crëwch .tab-paneID unigryw ar gyfer pob tab a'u lapio mewn .tab-content.

Rydw i yn Adran 1.

Helo, rydw i yn Adran 2.

Beth lan ferch, dyma Adran 3.

<div class = "tabable" > <!-- Dim ond ar gyfer tabiau chwith/dde sydd ei angen -->  
  <ul class = "nav nav-tabs" > 
    < li class = " active " <a href = " # tab1 " data- toggle = " tab " > Adran 1 </a></li>   
    < li><a href = " #tab2 " data-toggle = " tab " > Adran 2 </a></li>  
  </ul>
  <div class = "tab-content" > 
    <div class = "tab-pane active" id = "tab1" >  
      <p> Rwyf yn Adran 1. </p>
    </div>
    <div class = "tab-pane" id = "tab2" >  
      <p> Helo, rydw i yn Adran 2. </p>
    </div>
  </div>
</div>

Pylu mewn tabiau

I wneud i dabiau bylu i mewn, ychwanegwch .fadeat bob .tab-pane.

Angen ategyn jQuery

Mae pob tab tabable yn cael ei bweru gan ein ategyn jQuery ysgafn. Darllenwch fwy am sut i ddod â thabiau tabladwy yn fyw ar dudalen dogfennau JavaScript .

Tabladwy i unrhyw gyfeiriad

Tabiau ar y gwaelod

Trowch drefn yr HTML ac ychwanegwch ddosbarth i roi tabiau ar y gwaelod.

Rydw i yn Adran A.

Helo, rydw i yn Adran B.

Beth lan ferch, dyma Adran C.

<div class = "tabiau tabladwy-isod" > 
  <div class = "tab-content" > 
    ...
  </div>
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
</div>

Tabiau ar y chwith

Cyfnewidiwch y dosbarth i roi tabiau ar y chwith.

Rydw i yn Adran A.

Helo, rydw i yn Adran B.

Beth lan ferch, dyma Adran C.

<div class = "tabiau-chwith tabladwy" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "tab-content" > 
    ...
  </div>
</div>

Tabiau ar y dde

Cyfnewidiwch y dosbarth i roi tabiau ar y dde.

Rydw i yn Adran A.

Helo, rydw i yn Adran B.

Beth lan ferch, dyma Adran C.

<div class = "tabable tabs-right" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "tab-content" > 
    ...
  </div>
</div>

Bar llywio sylfaenol

I ddechrau, mae barrau llywio yn sefydlog (heb eu gosod ar y brig) ac yn cynnwys cefnogaeth ar gyfer enw prosiect a llywio sylfaenol. Rhowch un yn unrhyw le o fewn .container, sy'n gosod lled eich gwefan a'ch cynnwys.

<div class = "navbar" > 
  <div class = "navbar-mewnol" > 
    <a class="brand" href="#"> Teitl </a> _ _ _ _ _  
    <ul class = "nav" > 
      < li class = " active " <a href = " # " > Cartref </a></li>  
      <li><a href="#"> Dolen </a> < / li> 
      <li><a href="#"> Dolen </a> < / li> 
    </ul>
  </div>
</div>

Cydrannau navbar

Brand

Dim ond tag angor sydd ei angen ar ddolen syml i ddangos enw'ch brand neu'ch prosiect.

<a class="brand" href="#"> Enw'r prosiect </a> _ _ _ _

Dolenni llywio

Mae eitemau llywio yn syml i'w hychwanegu trwy restrau heb eu trefnu.

<ul class = "nav" > 
  <li class = "active" > 
    <a href="#"> Cartref </a> _ _ _ 
  </li>
  <li><a href="#"> Dolen </a> < / li> 
  <li><a href="#"> Dolen </a> < / li> 
</ul>

Gallwch chi ychwanegu rhanwyr yn hawdd at eich dolenni llywio gydag eitem rhestr wag a dosbarth syml. Ychwanegwch hwn rhwng dolenni:

<ul class = "nav" > 
  ...
  <li class = "divider-vertical" ></li> 
  ...
</ul>

Ffurflenni

I arddullio a lleoli ffurflen yn gywir o fewn y bar llywio, ychwanegwch y dosbarthiadau priodol fel y dangosir isod. Ar gyfer ffurflen ddiofyn, dylech ei chynnwys .navbar-forma naill ai .pull-leftneu .pull-rightei halinio'n iawn.

<form class = "navbar-form tynnu-chwith" > 
  <input type = "text" class = "span2" >  
  <button type = "submit" class = "btn" > Cyflwyno </button>  
</form>

Ffurflen chwilio

I gael ffurflen chwilio fwy wedi'i haddasu, ychwanegwch .navbar-searchat y mewnbwn formac .search-queryat y mewnbwn ar gyfer arddulliau arbenigol yn y bar llywio.

<form class = "navbar-search tynnu-chwith" > 
  <input type = " text " class = " search-query " placeholder = " Chwilio " >   
</form>

Aliniad cydran

Alinio dolenni nav, ffurflen chwilio, neu destun, defnyddiwch y .pull-leftneu .pull-rightddosbarthiadau cyfleustodau. Bydd y ddau ddosbarth yn ychwanegu fflôt CSS i'r cyfeiriad penodedig.

Defnyddio cwymplenni

Ychwanegwch gwymplenni a dropups i'r llywio gyda thipyn o farcio a'r ategyn JavaScript dropdowns .

<ul class = "nav" > 
  <li class = "dropdown" > 
    <a href="#" class="dropdown-toggle" data-toggle="dropdown"> _ _ _ _ _ _ _   
      Cyfrif
      <b class = "caret" ></b> 
    </a>
    <ul class = "dropdown-menu" > 
      ...
    </ul>
  </li>
</ul>

Ewch i'r dogfennau cwymplenni JavaScript i gael mwy o farcio a gwybodaeth am gwymplenni galwadau.

Testun

Lapiwch linynnau testun mewn elfen gyda .navbar-text, fel arfer ar <p>dag ar gyfer arwain a lliw cywir.

Amrywiadau arddangos dewisol

Gosodwch y bar llywio ar frig neu waelod y porth gwylio gyda dosbarth ychwanegol ar y rhan fwyaf allanol, .navbar.

Wedi'i osod i'r brig

Ychwanegwch .navbar-fixed-topa chofiwch roi cyfrif am yr ardal gudd oddi tano trwy ychwanegu o leiaf 40px paddingi'r ffeil <body>. Gwnewch yn siŵr eich bod yn ychwanegu hwn ar ôl y Bootstrap CSS craidd a chyn y CSS ymatebol dewisol.

<div class = "navbar navbar-fixed-top" > 
  ...
</div>

Wedi'i osod i'r gwaelod

Ychwanegu .navbar-fixed-bottomyn lle hynny.

<div class = "navbar navbar-fixed-bottom" > 
  ...
</div>

Bar llywio statig

Creu bar llywio lled llawn sy'n sgrolio i ffwrdd gyda'r dudalen trwy ychwanegu .navbar-static-top. Yn wahanol i'r .navbar-fixed-topdosbarth, nid oes angen i chi newid unrhyw badin ar y body.

<div class = "navbar navbar-static-top" > 
  ...
</div>

Bar llywio ymatebol

I weithredu bar llywio ymatebol sy'n cwympo, lapiwch eich cynnwys bar llywio mewn div sy'n cynnwys , .nav-collapse.collapse, ac ychwanegwch y botwm togbar navbar , .btn-navbar.

<div class = "navbar" > 
  <div class = "navbar-mewnol" > 
    <div class = "cynhwysydd" > 
 
      <!-- Defnyddir .btn-navbar fel togl ar gyfer cynnwys bar llywio sydd wedi cwympo -->
      <a class="btn btn-navbar" data-toggle="llewygu" data-target=".nav-collapse"> _ _ _ _ _ _   
        <span class = "icon-bar" ></span> 
        <span class = "icon-bar" ></span> 
        <span class = "icon-bar" ></span> 
      </a>
 
      <!-- Byddwch yn siwr i adael y brand allan yna os ydych am iddo gael ei ddangos -->
      <a class="brand" href="#"> Enw'r prosiect </a> _ _ _ _  
 
      <!-- Popeth rydych chi ei eisiau wedi'i guddio ar 940px neu lai, rhowch ef yma -->
      <div class = "meddwl nav-cwymp" > 
        <!-- .nav, .navbar-search, .navbar-form, ac ati -->
      </div>
 
    </div>
  </div>
</div>

Pennau i fyny! Mae angen yr ategyn cwympo a ffeil CSS ymatebol Bootstrap ar y bar llywio ymatebol .

Amrywiad gwrthdro

Addaswch olwg y bar llywio trwy ychwanegu .navbar-inverse.

<div class = "navbar navbar-gwrthdro" > 
  ...
</div>

Enghreifftiau

Un enghraifft wedi'i dangos gan y gallai gael ei harddangos ar draws sawl tudalen.

<ul class = "breadcrumb" > 
  <li><a href="#"> Cartref </a> < span class = " divider" > < / span></li>   
  <li><a href="#"> Llyfrgell </a> < span class = " divider" > < / span></li>   
  <li class = "active" > Data </li> 
</ul>

Tudaleniad safonol

Tudaleniad syml wedi'i ysbrydoli gan Rdio, gwych ar gyfer apiau a chanlyniadau chwilio. Mae'r bloc mawr yn anodd ei golli, yn hawdd ei raddio, ac mae'n darparu ardaloedd clicio mawr.

<div class = "tudalen" > 
  <ul>
    <li><a href="#"> Cyn </a> < / li> 
    <li><a href="#"> 1 </a> < / li> 
    <li><a href="#"> 2 </a> < / li> 
    <li><a href="#"> 3 </a> < / li> 
    <li><a href="#"> 4 </a> < / li> 
    <li><a href="#"> 5 </a> < / li> 
    <li><a href="#"> Nesaf </a> < / li> 
  </ul>
</div>

Opsiynau

Gwladwriaethau anabl a gweithredol

Gellir addasu dolenni ar gyfer gwahanol amgylchiadau. Defnyddiwch .disabledar gyfer dolenni na ellir eu clicio ac .activei nodi'r dudalen gyfredol.

<div class = "tudalen" > 
  <ul>
    <li class = "disabled" < a href = "#" > & laquo ; </a></li>  
    <li class = "active" <a href = " #" > 1 </a></li>  
    ...
  </ul>
</div>

Gallwch gyfnewid angorau gweithredol neu anabl yn ddewisol am rychwantau i gael gwared ar ymarferoldeb clicio tra'n cadw'r arddulliau bwriedig.

<div class = "tudalen" > 
  <ul>
    <li class = "disabled" ><span> « </span></li> 
    <li class = "active" ><span> 1 </li> 
    ...
  </ul>
</div>

Meintiau

Awydd tudaleniad mwy neu lai? Ychwanegu .pagination-large, .pagination-small, neu .pagination-miniar gyfer meintiau ychwanegol.

<div class = "pagination page-large" > 
  <ul>
    ...
  </ul>
</div>
<div class = "tudalen" > 
  <ul>
    ...
  </ul>
</div>
<div class = "pagination page-small" > 
  <ul>
    ...
  </ul>
</div>
<div class = "pagination-mini" > 
  <ul>
    ...
  </ul>
</div>

Aliniad

Ychwanegwch un o ddau ddosbarth dewisol i newid aliniad y dolenni tudaleniad: .pagination-centereda .pagination-right.

<div class = "pagination-centered tudalen" > 
  ...
</div>

<div class = "tudalen tudalen-dde" > 
  ...
</div>

Galwr

Dolenni cyflym blaenorol ac nesaf ar gyfer gweithrediadau tudaleniad syml gyda marcio ysgafn ac arddulliau. Mae'n wych ar gyfer gwefannau syml fel blogiau neu gylchgronau.

Enghraifft ddiofyn

Yn ddiofyn, mae'r peiriant galw yn canoli dolenni.

<ul class = "pager" > 
  <li><a href="#"> Cynt </a> < / li> 
  <li><a href="#"> Nesaf </a> < / li> 
</ul>

Dolenni wedi'u halinio

Fel arall, gallwch alinio pob dolen i'r ochrau:

<ul class = "pager" > 
  <li class = "previous" > 
    <a href = "#"> & larr ; Hynach </a> 
  </li>
  <li class = "nesaf" > 
    <a href = "#"> Newyddach → </a> 
  </li>
</ul>

Cyflwr anabl dewisol

Mae dolenni galwr hefyd yn defnyddio'r .disableddosbarth cyfleustodau cyffredinol o'r dudalen.

<ul class = "pager" > 
  <li class = "analluog yn flaenorol" > 
    <a href = "#"> & larr ; Hynach </a> 
  </li>
  ...
</ul>

Labelau

Labelau	Marcio
Diofyn	`<span class="label">Default</span>`
Llwyddiant	`<span class="label label-success">Success</span>`
Rhybudd	`<span class="label label-warning">Warning</span>`
Pwysig	`<span class="label label-important">Important</span>`
Gwybodaeth	`<span class="label label-info">Info</span>`
gwrthdro	`<span class="label label-inverse">Inverse</span>`

Bathodynnau

Enw	Enghraifft	Marcio
Diofyn	1	`<span class="badge">1</span>`
Llwyddiant	2	`<span class="badge badge-success">2</span>`
Rhybudd	4	`<span class="badge badge-warning">4</span>`
Pwysig	6	`<span class="badge badge-important">6</span>`
Gwybodaeth	8	`<span class="badge badge-info">8</span>`
gwrthdro	10	`<span class="badge badge-inverse">10</span>`

Hawdd cwympo

Er mwyn gweithredu'n hawdd, bydd labeli a bathodynnau'n cwympo'n syml (trwy ddewisydd CSS :empty) pan nad oes cynnwys yn bodoli.

Uned arwr

Cydran ysgafn, hyblyg i arddangos cynnwys allweddol ar eich gwefan. Mae'n gweithio'n dda ar wefannau marchnata a chynnwys-trwm.

Helo Byd!

Mae hon yn uned arwr syml, cydran syml ar ffurf jumbotron ar gyfer tynnu sylw ychwanegol at gynnwys neu wybodaeth dan sylw.

Dysgu mwy

<div class = "uned arwr" > 
  <h1> Pennawd </h1>
  <p> Tagline </p>
  <p>
    <a class="btn btn-primary btn-large"> _ 
      Dysgu mwy
    </a>
  </p>
</div>

Pennawd tudalen

Cragen syml ar gyfer bylchau h1priodol a segmentu adrannau o gynnwys ar dudalen. Gall ddefnyddio'r elfen , elfen h1ddiofyn smallyn ogystal â'r rhan fwyaf o gydrannau eraill (gydag arddulliau ychwanegol).

<div class = "page-header" > 
  <h1> Pennawd tudalen enghreifftiol <small> Is-destun ar gyfer pennyn </small></h1>
</div>

Mân-luniau diofyn

Yn ddiofyn, mae mân-luniau Bootstrap wedi'u cynllunio i arddangos delweddau cysylltiedig heb fawr o farcio gofynnol.

Hynod customizable

Gydag ychydig o farcio ychwanegol, mae'n bosibl ychwanegu unrhyw fath o gynnwys HTML fel penawdau, paragraffau, neu fotymau mewn mân-luniau.

Label bawd

Cras justo odio, dapibus ac facilisis yn, egestas eget quam. Ystyr geiriau: Donec id elit non mi porta gravida yn eget metus. Nullam id dolor id ultricies vehicula ut id elit.

Gweithred Gweithred
Label bawd

Cras justo odio, dapibus ac facilisis yn, egestas eget quam. Ystyr geiriau: Donec id elit non mi porta gravida yn eget metus. Nullam id dolor id ultricies vehicula ut id elit.

Gweithred Gweithred
Label bawd

Cras justo odio, dapibus ac facilisis yn, egestas eget quam. Ystyr geiriau: Donec id elit non mi porta gravida yn eget metus. Nullam id dolor id ultricies vehicula ut id elit.

Gweithred Gweithred

Pam defnyddio mân-luniau

Mae mân-luniau ( .media-gridhyd at v1.4 yn flaenorol) yn wych ar gyfer gridiau o luniau neu fideos, canlyniadau chwilio delwedd, cynhyrchion manwerthu, portffolios, a llawer mwy. Gallant fod yn ddolenni neu'n gynnwys statig.

Marcio syml, hyblyg

Mae marcio bawd yn syml - a ulgydag unrhyw nifer o lielfennau yw'r cyfan sydd ei angen. Mae hefyd yn hynod hyblyg, gan ganiatáu ar gyfer unrhyw fath o gynnwys gyda dim ond ychydig mwy o farcio i lapio'ch cynnwys.

Yn defnyddio meintiau colofnau grid

Yn olaf, mae'r gydran mân-luniau yn defnyddio dosbarthiadau system grid presennol - fel .span2neu .span3- i reoli dimensiynau bawd.

Marcio

Fel y soniwyd yn flaenorol, mae'r marcio gofynnol ar gyfer mân-luniau yn ysgafn ac yn syml. Dyma gip ar y gosodiad rhagosodedig ar gyfer delweddau cysylltiedig :

<ul class = "bawdluniau" > 
  <li class = "span4" > 
    <a href="#" class="bawdlun"> _ _ _ _ _  
      <img data-src = "holder.js/300x200" alt = "" >  
    </a>
  </li>
  ...
</ul>

Ar gyfer cynnwys HTML wedi'i deilwra mewn mân-luniau, mae'r marcio yn newid ychydig. Er mwyn caniatáu cynnwys lefel bloc yn unrhyw le, rydym yn cyfnewid y <a>am <div>debyg:

<ul class = "bawdluniau" > 
  <li class = "span4" > 
    <div class = "bawdlun" > 
      <img data-src = "holder.js/300x200" alt = "" >  
      <h3> Label bawd </h3>
      <p> Pennawd bawd... </p>
    </div>
  </li>
  ...
</ul>

Mwy o enghreifftiau

Archwiliwch eich holl opsiynau gyda'r dosbarthiadau grid amrywiol sydd ar gael i chi. Gallwch hefyd gymysgu a chyfateb gwahanol feintiau.

Rhybudd rhagosodedig

Lapiwch unrhyw destun a botwm diswyddo dewisol .alertar gyfer neges rhybudd sylfaenol.

Rhybudd! Mae'n well gwirio chi'ch hun, nid ydych chi'n edrych yn rhy dda.

<div class = "rhybudd" > 
  <button type = "button" class = "close" data-dismiss = "alert" > × </button>   
  <strong> Rhybudd! </strong> Gorau gwirio yo hunan, nid ydych yn edrych yn rhy dda.
</div>

Diystyru botymau

Mae porwyr Safari Symudol ac Opera Symudol, yn ogystal â'r data-dismiss="alert"priodoledd, yn gofyn href="#"am ddiystyru rhybuddion wrth ddefnyddio <a>tag.

<a href="#" class="close" data-dismiss="alert"> & times ; _ _ _ _ _ </a>

Fel arall, gallwch ddefnyddio <button>elfen gyda'r priodoledd data, yr ydym wedi dewis ei gwneud ar gyfer ein dogfennau. Wrth ddefnyddio <button>, rhaid i chi gynnwys type="button"neu ni all eich ffurflenni eu cyflwyno.

<button type = "button" class = "close" data-dismiss = "alert" > × </button>

Diystyru rhybuddion trwy JavaScript

Defnyddiwch yr ategyn rhybuddion jQuery i ddiystyru rhybuddion yn gyflym ac yn hawdd.

Opsiynau

Ar gyfer negeseuon hirach, cynyddwch y padin ar frig a gwaelod y pecyn rhybuddio trwy ychwanegu .alert-block.

Rhybudd!

Mae'n well gwirio chi'ch hun, nid ydych chi'n edrych yn rhy dda. Nulla vitae elit libero, pharetra augue. Cwlwm comodo cwrsws magna, neu scelerisque nisl consectetur et.

<div class = "bloc rhybuddio" > 
  <button type = "button" class = "close" data-dismiss = "alert" > × </button>   
  <h4> Rhybudd! </h4>
  Mae'n well gwirio chi'ch hun, nid ydych chi'n ...
</div>

Dewisiadau cyd-destunol

Ychwanegu dosbarthiadau dewisol i newid arwyddocâd rhybudd.

Gwall neu berygl

O snap! Newidiwch ychydig o bethau a cheisiwch gyflwyno eto.

<div class = "alert alert-error" > 
  ...
</div>

Llwyddiant

Da iawn! Rydych chi wedi darllen y neges rhybuddio bwysig hon yn llwyddiannus.

<div class = "alert alert-success" > 
  ...
</div>

Gwybodaeth

Pennau i fyny! Mae angen eich sylw ar y rhybudd hwn, ond nid yw'n hynod bwysig.

<div class = "alert alert-info" > 
  ...
</div>

Enghreifftiau a marcio

Syml

Bar cynnydd diofyn gyda graddiant fertigol.

<div class = "cynnydd" > 
  <div class = "bar" style = " lled : 60 %; " ></div>   
</div>

Stripiog

Yn defnyddio graddiant i greu effaith streipiog. Ddim ar gael yn IE7-8.

<div class = "cynnydd progress-striped" > 
  <div class = "bar" style = " lled : 20 %; " ></div>   
</div>

Animeiddiedig

Ychwanegu .activeat .progress-stripedi animeiddio'r streipiau o'r dde i'r chwith. Ddim ar gael ym mhob fersiwn o IE.

<div class = "cynnydd progress-striped active" > 
  <div class = "bar" style = " lled : 40 %; " ></div>   
</div>

Wedi'i bentyrru

Rhowch fariau lluosog yn yr un peth .progressi'w pentyrru.

<div class = "cynnydd" > 
  <div class = " bar-llwyddiant bar" style = " lled : 35 %; " ></div>   
  <div class = "bar-warning" style = " lled : 20 %; " ></div>   
  <div class = "bar-berygl bar" style = " lled : 10 %; " ></div>   
</div>

Opsiynau

Lliwiau ychwanegol

Mae bariau cynnydd yn defnyddio rhai o'r un dosbarthiadau botwm a rhybuddio ar gyfer arddulliau cyson.

<div class = "gwybodaeth cynnydd cynnydd" > 
  <div class = " bar" style = " lled : 20 % " ></div>   
</div>
<div class = "cynnydd cynnydd-llwyddiant" > 
  <div class = " bar" style = " lled : 40 % " ></div>   
</div>
<div class = "rhybudd cynnydd" > 
  <div class = "bar" style = " lled : 60 % " ></div>   
</div>
<div class = "cynnydd cynnydd-perygl" > 
  <div class = " bar" style = " lled : 80 % " ></div>   
</div>

Bariau streipiog

Yn debyg i'r lliwiau solet, mae gennym fariau cynnydd streipiog amrywiol.

<div class = "progress progress-info progress-striped" > 
  <div class = " bar" style = " lled : 20 % " ></div>   
</div>
<div class = "cynnydd progress-success progress-striped" > 
  <div class = " bar" style = " lled : 40 % " ></div>   
</div>
<div class = "cynnydd cynnydd-rhybudd cynnydd-streipiog" > 
  <div class = "bar" style = " lled : 60 % " ></div>   
</div>
<div class = "cynnydd cynnydd-perygl cynnydd-streipiog" > 
  <div class = " bar" style = " lled : 80 % " ></div>   
</div>

Cefnogaeth porwr

Mae bariau cynnydd yn defnyddio graddiannau CSS3, trawsnewidiadau ac animeiddiadau i gyflawni eu holl effeithiau. Ni chefnogir y nodweddion hyn yn IE7-9 neu fersiynau hŷn o Firefox.

Nid yw fersiynau cynharach nag Internet Explorer 10 ac Opera 12 yn cefnogi animeiddiadau.

Arddulliau gwrthrych haniaethol ar gyfer adeiladu gwahanol fathau o gydrannau (fel sylwadau blog, Trydar, ac ati) sy'n cynnwys delwedd wedi'i halinio i'r chwith neu'r dde ochr yn ochr â chynnwys testunol.

Enghraifft ddiofyn

Mae'r cyfryngau rhagosodedig yn caniatáu arnofio gwrthrych cyfryngau (delweddau, fideo, sain) i'r chwith neu'r dde o bloc cynnwys.

Pennawd cyfryngau

Cras sit amet nibh libero, in gravida nulla. Null neu metus scelerisque ante sollicitudin comodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis yn faucibws.

Pennawd cyfryngau

<div class = "media" > 
  <a class="pull-left" href="#"> _ _ _ _ _  
    <img class = "media-object" data-src = "holder.js/64x64" >  
  </a>
  <div class = "media-body" > 
    <h4 class = "media-heading" >Pennawd cyfryngau </h4> 
    ...
 
    <!-- Gwrthrych cyfrwng nythu -->
    <div class = "media" > 
      ...
    </div>
  </div>
</div>

Rhestr cyfryngau

Gydag ychydig o farcio ychwanegol, gallwch ddefnyddio cyfryngau y tu mewn i'r rhestr (defnyddiol ar gyfer edafedd sylwadau neu restrau erthyglau).

Pennawd cyfryngau

Cras sit amet nibh libero, in gravida nulla. Null neu metus scelerisque ante sollicitudin comodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Pennawd cyfryngau nythu
Cras sit amet nibh libero, in gravida nulla. Null neu metus scelerisque ante sollicitudin comodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Pennawd cyfryngau nythu
Cras sit amet nibh libero, in gravida nulla. Null neu metus scelerisque ante sollicitudin comodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Pennawd cyfryngau nythu
Cras sit amet nibh libero, in gravida nulla. Null neu metus scelerisque ante sollicitudin comodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Pennawd cyfryngau
Cras sit amet nibh libero, in gravida nulla. Null neu metus scelerisque ante sollicitudin comodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

<ul class = "list-media" > 
  <li class = "media" > 
    <a class="pull-left" href="#"> _ _ _ _ _  
      <img class = "media-object" data-src = "holder.js/64x64" >  
    </a>
    <div class = "media-body" > 
      <h4 class = "media-heading" >Pennawd cyfryngau </h4> 
      ...
 
      <!-- Gwrthrych cyfrwng nythu -->
      <div class = "media" > 
        ...
     </div>
    </div>
  </li>
</ul>

ffynhonnau

Defnyddiwch y ffynnon fel effaith syml ar elfen i roi effaith mewnosod iddo.

Edrychwch, rydw i mewn ffynnon!

<div class = "wel" > 
  ...
</div>

Dosbarthiadau dewisol

Padin rheoli a chorneli crwn gyda dau ddosbarth addasydd dewisol.

Edrychwch, rydw i mewn ffynnon!

<div class = "wel well-large" > 
  ...
</div>

Edrychwch, rydw i mewn ffynnon!

<div class = "wel well-small" > 
  ...
</div>

Eicon cau

Defnyddiwch yr eicon cau generig ar gyfer diystyru cynnwys fel moddau a rhybuddion.

<button class = "cau" > × </button>

Mae dyfeisiau iOS angen href="#"digwyddiadau clicio os byddai'n well gennych ddefnyddio angor.

<a class="close" href = " # " > × </a>

Dosbarthiadau cynorthwywyr

Dosbarthiadau syml â ffocws ar gyfer arddangosiad bach neu newidiadau ymddygiad.

.tynnu-chwith

Arnofio elfen ar ôl

class = "tynnu i'r chwith"

. tynnu - chwith {
  arnofio : chwith ;
}

.tynnu-dde

Arnofio elfen i'r dde

class = "tynnu i'r dde"

. tynnu - dde {
  arnofio : iawn ;
}

.medd

Newid lliw elfen i#999

class = "tawel"

. tawel {
  lliw : #999; 
}

.clearfix

Clirio'r floatar unrhyw elfen

class = "clearfix"

. clirio {
  * chwyddo : 1 ; 
  &: cyn ,
  &: ar ôl {
    arddangos : bwrdd ;
    cynnwys : "" ; 
  }
  &: ar ôl {
    eglur : y ddau ;
  }
}

Cwymplenni

Enghraifft

Marcio

Opsiynau

Alinio'r bwydlenni

Dewisiadau dewislen anabl

Is-ddewislenni ar gwymplenni

Grwpiau botwm

Enghreifftiau

Grŵp botwm sengl

Grwpiau botwm lluosog

Grwpiau botymau fertigol

Blasau blwch siec a radio

Cwympiadau mewn grwpiau botwm

Dewislenni botwm

Trosolwg ac enghreifftiau

Yn gweithio gyda phob maint botwm

Angen JavaScript

Hollti botymau botwm

Meintiau

Dewislenni gollwng

Nav: tabiau, tabledi, a rhestrau

Rhagosodiadau ysgafn Yr un marcio, dosbarthiadau gwahanol

Tabiau sylfaenol

Pils sylfaenol

Cyflwr anabl

Aliniad cydran

Stackable

Tabiau wedi'u pentyrru

Pils wedi'u pentyrru

Cwympiadau

Tabiau gyda dropdowns

Pils gyda dropdowns

rhestrau llywio

Rhestr llywio enghreifftiol

Rhanwyr llorweddol

Nav tabladwy

Enghraifft tabladwy

Pylu mewn tabiau

Angen ategyn jQuery

Tabladwy i unrhyw gyfeiriad

Tabiau ar y gwaelod

Tabiau ar y chwith

Tabiau ar y dde

Navbar

Bar llywio sylfaenol

Cydrannau navbar

Brand

Dolenni llywio

Ffurflenni

Ffurflen chwilio

Aliniad cydran

Defnyddio cwymplenni

Testun

Amrywiadau arddangos dewisol

Wedi'i osod i'r brig

Wedi'i osod i'r gwaelod

Bar llywio statig

Bar llywio ymatebol

Amrywiad gwrthdro

Briwsion bara

Enghreifftiau

Tudalennu Dau opsiwn ar gyfer tudalennu trwy gynnwys

Tudaleniad safonol

Opsiynau

Gwladwriaethau anabl a gweithredol

Meintiau

Aliniad

Galwr

Enghraifft ddiofyn

Dolenni wedi'u halinio

Cyflwr anabl dewisol

Labeli a bathodynnau

Labelau

Bathodynnau

Hawdd cwympo

Cydrannau teipograffig

Uned arwr

Helo Byd!

Pennawd tudalen