Cydrannau

Mae dwsinau o gydrannau y gellir eu hailddefnyddio wedi'u hymgorffori yn Bootstrap i ddarparu llywio, rhybuddion, popovers, a llawer mwy.

Grwpiau botwm

Defnyddiwch grwpiau botwm i uno botymau lluosog gyda'i gilydd fel un gydran gyfansawdd. Adeiladwch nhw gyda chyfres o <a>neu <button>elfennau.

Arferion gorau

Rydym yn argymell y canllawiau canlynol ar gyfer defnyddio grwpiau botwm a bariau offer:

Defnyddiwch yr un elfen bob amser mewn grŵp botwm sengl, <a>neu <button>.
Peidiwch â chymysgu botymau o wahanol liwiau yn yr un grŵp botymau.
Defnyddiwch eiconau yn ychwanegol at neu yn lle testun, ond sicrhewch gynnwys testun alt a theitl lle bo'n briodol.

Dylid galw grwpiau Botwm Cysylltiedig â chwympiadau (gweler isod) ar wahân a bob amser gynnwys caret cwymplen i nodi ymddygiad arfaethedig.

Enghraifft ddiofyn

Dyma sut mae'r HTML yn edrych am grŵp botwm safonol wedi'i adeiladu gyda botymau tag angor:

Chwith Canol Iawn

<div class = "btn-group" > 
  <a class="btn" href="#"> 1 </a> _ _ _ _ _  
  <a class="btn" href="#"> 2 </a> _ _ _ _ _  
  <a class="btn" href="#"> 3 </a> _ _ _ _ _  
</div>

Enghraifft Bar Offer

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>

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.

Cael y javascript »

Pennau i fyny

Mae CSS ar gyfer grwpiau botwm mewn ffeil ar wahân, button-groups.less.

Cwympiadau botwm

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

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

Marcio enghreifftiol

Yn debyg i grŵp botwm, mae ein marcio yn defnyddio marcio botwm rheolaidd, ond gyda llond llaw o ychwanegiadau i fireinio'r arddull a chefnogi ategyn jQuery cwymplen Bootstrap.

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

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.

Marcio enghreifftiol

Rydym yn ehangu ar y cwymplenni botwm arferol i ddarparu ail weithred botwm sy'n gweithredu fel sbardun cwymplen ar wahân.

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

Rhagosodiadau ysgafn Yr un marcio, dosbarthiadau gwahanol

Dosbarth sylfaen pwerus

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

Pryd i ddefnyddio

Mae tabiau a tabledi yn wych ar gyfer adrannau o gynnwys neu lywio rhwng tudalennau o gynnwys cysylltiedig.

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.

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>

Stackable Gwnewch dabiau neu dabledi fertigol

Sut i bentyrru nhw

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 Ar gyfer cydrannau llywio uwch

Bwydlenni cyfoethog wedi'u gwneud yn hawdd

Mae cwymplenni mewn tabiau a thabiau Bootstrap yn hynod hawdd a dim ond ychydig o HTML ychwanegol ac ategyn jQuery ysgafn sydd eu hangen.

Ewch draw i'r dudalen Javascript i ddarllen y dogfennau ar gychwyn cwymplenni yn Bootstrap.

Tabiau gyda dropdowns

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

Rhestrau llywio Adeiladu systemau llywio syml wedi'u pentyrru, sy'n wych ar gyfer bariau ochr

Cymhwysiad-arddull llywio

Mae rhestrau llywio yn darparu 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.

Yn strwythurol, maen nhw wedi'u hadeiladu ar yr un arddulliau llywio craidd â thabiau a thablau, felly mae defnyddio ac addasu yn syml.

Gydag eiconau

Mae rhestrau llywio hefyd yn hawdd i'w harfogi ag eiconau. Ychwanegwch y tag cywir <i>gyda'r dosbarth ac rydych wedi'ch gosod.

Rhestr llywio enghreifftiol

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

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

Enghraifft gydag eiconau

Yr un enghraifft, ond gyda <i>thagiau ar gyfer eiconau.

<ul class = "nav nav-list" > 
  ...
  <li>
    <a href="#"> _ _ _ 
      <i class = "icon-book" ></i> 
      Llyfrgell
    </a>
  </li>
  ...
</ul>

Tablable nav Dod â thabiau'n fyw trwy javascript

Beth sydd wedi'i gynnwys

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.

Mae newid rhyngddynt yn hawdd a dim ond ychydig iawn o farcio sydd ei angen.

Enghraifft tabladwy

I wneud tabiau yn dabl, lapiwch y .nav-tabsdiv arall gyda dosbarth .tabbable.

Rydw i yn Adran 1.

Helo, rydw i yn Adran 2.

Beth lan ferch, dyma Adran 3.

Ategyn jQuery personol

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

Cael y javascript →

Marcio syml

Mae defnyddio tabiau tabadwy yn gofyn am div lapio, set o dabiau, a set o baneli cynnwys tabladwy.

<div class = "tabable" > 
  <ul class = "nav nav-tabs" > 
    < li class = " gweithredol " <a href = " #1 " data -toggle = " tab " > Adran 1 </a></li>   
    <li><a href = " #2 " data-toggle = " tab " > Adran 2 </a></li>  
  </ul>
  <div class = "tab-content" > 
    <div class = "tab-pane active" id = "1" >  
      <p> Rwyf yn Adran 1. </p>
    </div>
    <div class = "tab-pane" id = "2" >  
      <p> Helo, rydw i yn Adran 2. </p>
    </div>
  </div>
</div>

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>

Enghraifft bar llywio statig

Enghraifft o far llywio sefydlog (heb ei osod ar y brig) gydag enw'r prosiect, llywio, a ffurflen chwilio.

Navbar sgaffaldiau

Dim ond ychydig o divs sydd eu hangen ar y bar llywio i'w strwythuro'n dda ar gyfer arddangosiad statig neu sefydlog.

<div class = "navbar" > 
  <div class = "navbar-mewnol" > 
    <div class = "cynhwysydd" > 
      ...
    </div>
  </div>
</div>

Navbar sefydlog

I wneud y bar llywio wedi'i osod ar frig yr olygfan, ychwanegwch .navbar-fixed-topat y rhaniad mwyaf allanol, .navbar.

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

Yn eich CSS, bydd angen i chi hefyd roi cyfrif am y gorgyffwrdd y mae'n ei achosi trwy ychwanegu 40px neu fwy o badin at eich ffeil <body>. Gwnewch yn siŵr eich bod yn ychwanegu hwn ar ôl y Bootstrap CSS craidd a chyn y CSS ymatebol dewisol.

Enw cwmni

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>

Ffurflen chwilio

Mae ffurflenni chwilio yn derbyn arddulliau personol yn y bar llywio gyda'r .navbar-searchdosbarth. Cynnwys .pull-leftneu .pull-rightar y formi'w alinio.

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

Amrywiad ymatebol dewisol

Yn dibynnu ar faint o gynnwys yn eich bar uchaf, efallai y byddwch am weithredu'r opsiynau ymatebol. I wneud hynny, lapiwch eich cynnwys nav mewn div sy'n cynnwys , .nav-collapse.collapse, ac ychwanegwch y botwm toggle 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 = "nav-collapse" > 
        <!-- .nav, .navbar-search, .navbar-form, ac ati -->
      </div>
 
    </div>
  </div>
</div>

Pennau i fyny! Mae angen yr ategyn cwympo ar y bar llywio ymatebol .

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>

Aliniad cydran

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

Ychwanegu cwymplenni

Mae ychwanegu cwymplenni i'r nav yn hynod o syml, ond mae angen defnyddio ein ategyn javascript .

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

Cael y javascript →

Pam eu defnyddio

Defnyddir llywio briwsion bara fel ffordd o ddangos i ddefnyddwyr ble maent o fewn ap neu wefan, ond nid ar gyfer llywio cynradd. Cadwch eu defnydd yn brin ac yn gryno i fod yn fwyaf effeithiol.

Enghreifftiau

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

Marcio

HTML yw eich rhestr safonol heb ei threfnu gyda dolenni.

<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" > 
    <a href="#"> Data </a> _ _ _ 
  </li>
</ul>

tudalen amlgyfun

Pryd i ddefnyddio

Tudaleniad hynod or-syml a lleiaf posibl wedi'i ysbrydoli gan Rdio, sy'n wych 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.

Dolenni tudalen nodedig

Mae cysylltiadau yn addasadwy ac yn gweithio mewn nifer o amgylchiadau gyda'r dosbarth cywir. .disabledar gyfer dolenni na ellir eu clicio ac .activear gyfer y dudalen gyfredol.

Aliniad hyblyg

Ychwanegwch y naill neu'r llall o ddau ddosbarth dewisol i newid aliniad y dolenni tudaleniad: .pagination-centereda .pagination-right.

Enghreifftiau

Mae'r gydran tudaleniad rhagosodedig yn hyblyg ac yn gweithio mewn nifer o amrywiadau.

Marcio

Wedi'i lapio mewn <div>tudalen , dim ond tudalen <ul>.

<div class = "tudalen" > 
  <ul>
    <li><a href="#"> Cyn </a> < / li> 
    <li class = "active" > 
      <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="#"> Nesaf </a> < / li> 
  </ul>
</div>

Pager Am gysylltiadau cyflym blaenorol a nesaf

Ynglŷn â galwr

Mae'r gydran galwr yn set o ddolenni ar gyfer gweithrediadau tudaleniad syml gyda marcio ysgafn a hyd yn oed arddulliau ysgafnach. 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 ; Hyn </a> 
  </li>
  <li class = "nesaf" > 
    <a href = "#"> Newyddach → </a> 
  </li>
</ul>

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

Uned arwr

Mae Bootstrap yn darparu cydran ysgafn, hyblyg o'r enw uned arwyr i arddangos cynnwys ar eich gwefan. Mae'n gweithio'n dda ar wefannau marchnata a chynnwys-trwm.

Marcio

Lapiwch eich cynnwys mewn un divtebyg:

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

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

Pennawd tudalen

Cragen syml ar gyfer h1gosod allan a rhannu rhannau o gynnwys ar dudalen yn briodol. Gall ddefnyddio'r elfen , elfen h1ddiofyn smallyn ogystal â'r rhan fwyaf o gydrannau eraill (gydag arddulliau ychwanegol).

<div class = "page-haeder" > 
  <h1> Pennawd tudalen enghreifftiol </h1>
</div>

Mân-luniau rhagosodedig

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

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.

Y 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 = "span3" > 
    <a href="#" class="bawdlun"> _ _ _ _ _  
      <img src = "https://placehold.it/260x180" 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 = "span3" > 
    <div class = "bawdlun" > 
      <img src = "https://placehold.it/260x180" alt = "" >  
      <h5> Label bawd </h5>
      <p> Pennawd y mân-lun yma... </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.

Rhagosodiadau ysgafn

Dosbarth sylfaen wedi'i ailysgrifennu

Gyda Bootstrap 2, rydym wedi symleiddio'r dosbarth sylfaen: .alertyn lle .alert-message. Rydym hefyd wedi lleihau'r isafswm marcio sy'n ofynnol - dim <p>yn ofynnol yn ddiofyn, dim ond yr allanol <div>.

Neges rybuddio sengl

Ar gyfer cydran fwy gwydn gyda llai o god, rydym wedi dileu'r edrychiad gwahaniaethol ar gyfer rhybuddion bloc, negeseuon sy'n dod gyda mwy o badin ac fel arfer mwy o destun. Mae'r dosbarth hefyd wedi newid i .alert-block.

Mynd yn wych gyda javascript

Daw Bootstrap ag ategyn jQuery gwych sy'n cefnogi negeseuon effro, gan wneud eu diswyddo yn gyflym ac yn hawdd.

Cael yr ategyn »

Rhybuddion enghreifftiol

Lapiwch eich neges ac eicon cau dewisol mewn div gyda dosbarth syml.

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

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

Ymestyn y neges rhybuddio safonol yn hawdd gyda dau ddosbarth dewisol: .alert-blockar gyfer mwy o reolaethau padin a thestun ac .alert-headingar gyfer pennawd cyfatebol.

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" > 
  <a class="close" data-dismiss="alert"> × </a> _ _ _ _ _  
  <h4 class = "heading-alert" > 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.

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

Animeiddiedig

Yn cymryd yr enghraifft streipiog ac yn ei animeiddio.

< div class = " cynnydd cynnydd-perygl 
     gweithredol stripio cynnydd" >
  < div class = "bar" 
       style = " lled : 40 % ; " ></div> 
</div>

Opsiynau a chefnogaeth porwr

Lliwiau ychwanegol

Mae bariau cynnydd yn defnyddio rhai o'r un enwau dosbarth fel botymau a rhybuddion ar gyfer arddull tebyg.

.progress-info
.progress-success
.progress-danger

Fel arall, gallwch chi addasu'r ffeiliau LLAI a rholio eich lliwiau a'ch meintiau eich hun.

Ymddygiad

Mae bariau cynnydd yn defnyddio trawsnewidiadau CSS3, felly os ydych chi'n addasu'r lled yn ddeinamig trwy javascript, bydd yn newid maint yn esmwyth.

Os ydych chi'n defnyddio'r .activedosbarth, bydd eich .progress-stripedbariau cynnydd yn animeiddio'r streipiau o'r chwith i'r dde.

Cefnogaeth porwr

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

Nid yw Opera yn cefnogi animeiddiadau ar hyn o bryd.

Wells

Use the well as a simple effect on an element to give it an inset effect.

Look, I'm in a well!

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

Bathodynnau

Defnyddiwch fathodyn ar elfen ar gyfer cyfrif heb ei ddarllen neu fel dangosydd syml.

<span class = "badge" > 3 </div>

Close icon

Use the generic close icon for dismissing content like modals and alerts.

<a class="close">&times;</a>

Grwpiau botwm Ymuno â botymau i gael mwy o swyddogaethau tebyg i far offer

Grwpiau botwm

Arferion gorau

Enghraifft ddiofyn

Enghraifft Bar Offer

Blasau blwch siec a radio

Pennau i fyny

Cwymplenni botymau Cwymplenni cyd-destunol wedi'u hadeiladu ar grwpiau botwm

Cwympiadau botwm

Marcio enghreifftiol

Hollti botymau botwm

Marcio enghreifftiol

Nav, tabiau, a pils Llywio arddull rhestr hynod addasadwy

Rhagosodiadau ysgafn Yr un marcio, dosbarthiadau gwahanol

Dosbarth sylfaen pwerus

Pryd i ddefnyddio

Aliniad cydran

Tabiau sylfaenol

Pils sylfaenol

Stackable Gwnewch dabiau neu dabledi fertigol

Sut i bentyrru nhw

Tabiau wedi'u pentyrru

Pils wedi'u pentyrru

Cwympiadau Ar gyfer cydrannau llywio uwch

Bwydlenni cyfoethog wedi'u gwneud yn hawdd

Tabiau gyda dropdowns

Pils gyda dropdowns

Rhestrau llywio Adeiladu systemau llywio syml wedi'u pentyrru, sy'n wych ar gyfer bariau ochr

Cymhwysiad-arddull llywio

Gydag eiconau

Rhestr llywio enghreifftiol

Enghraifft gydag eiconau

Tablable nav Dod â thabiau'n fyw trwy javascript

Beth sydd wedi'i gynnwys

Enghraifft tabladwy

Ategyn jQuery personol

Marcio syml

Tabladwy i unrhyw gyfeiriad

Tabiau ar y gwaelod

Tabiau ar y chwith

Tabiau ar y dde

Navbar

Enghraifft bar llywio statig

Navbar sgaffaldiau

Navbar sefydlog

Enw cwmni

Ffurflen chwilio

Amrywiad ymatebol dewisol

Dolenni llywio

Aliniad cydran

Ychwanegu cwymplenni

Briwsion bara

Pam eu defnyddio

Enghreifftiau

Marcio

Tudalennu Dau opsiwn ar gyfer tudalennu trwy gynnwys

tudalen amlgyfun

Pryd i ddefnyddio

Dolenni tudalen nodedig

Aliniad hyblyg

Enghreifftiau

Marcio

Pager Am gysylltiadau cyflym blaenorol a nesaf

Ynglŷn â galwr

Enghraifft ddiofyn

Dolenni wedi'u halinio

Labeli mewnol Labelu ac anodi testun

Cydrannau teipograffig Pennawd tudalen ac uned arwr ar gyfer segmentu cynnwys

Uned arwr

Marcio

Helo Byd!

Pennawd tudalen

Mân -luniau Gridiau o ddelweddau, fideos, testun, a mwy

Mân-luniau rhagosodedig

Hynod customizable

Label bawd

Label bawd

Pam defnyddio mân-luniau

Marcio syml, hyblyg

Yn defnyddio meintiau colofnau grid