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:

<div class = "btn-group" > 
  <button class = "btn" > 1 </button> 
  <button class = "btn" > 2 </button> 
  <button class = "btn" > 3 </button> 
</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 »

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.

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>

Yn gweithio gyda phob maint botwm

Mae cwymplenni botwm yn gweithio ar unrhyw faint. maint eich botymau i .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 wedi'i deilwra.

Trosolwg ac enghreifftiau

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.

Meintiau

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

<div class = "btn-group" > 
  ...
  <ul class = "dropdown-menu pull-right" > 
    <!-- dolenni dewislen -->
  </ul>
</div>

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

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>

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:

• Cartref
• Proffil
• Negeseuon

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

• Cartref
• Proffil
• Negeseuon

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

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

• Cartref
• Proffil
• Negeseuon

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

Pils wedi'u pentyrru

• Cartref
• Proffil
• Negeseuon

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

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

• Cartref
• Help
• Gollwng i lawr
  • Gweithred
  • Gweithred arall
  • Rhywbeth arall yma
  • Dolen ar wahân

<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

• Cartref
• Help
• Gollwng i lawr
  • Gweithred
  • Gweithred arall
  • Rhywbeth arall yma
  • Dolen ar wahân

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

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.

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>

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>

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.

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 y dudalen javascript docs .

Cael y javascript →

Enghraifft tabladwy

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

Ar gyfer tabiau wedi'u halinio i'r dde neu'r chwith, lapiwch y .nav-tabsac i .tab-contentmewn .tabbable.

Marcio syml

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

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

Tabiau ar y gwaelod

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

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

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

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

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

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

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

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

Pan fyddwch yn gosod y bar llywio, cofiwch roi cyfrif am yr ardal gudd oddi tano. Ychwanegwch 40px neu fwy o badin i'r <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>

Ffurflenni yn navbar

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

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>

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>

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

Mae ychwanegu dropdowns a dropups 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 →

Testun yn y bar llywio

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

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 denau ac yn gryno i fod yn fwyaf effeithiol.

Enghreifftiau

Un enghraifft yn cael ei dangos gan y gallai gael ei harddangos ar draws sawl tudalen.

• Cartref

• Cartref /
• Llyfrgell

• Cartref /
• Llyfrgell /
• Data

Marcio

HTML yw eich rhestr safonol heb ei threfnu gyda dolenni.

<ul class = "briwsion bara" > 
  <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>

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>

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.

Cyflwr anabl dewisol

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

Enghraifft ddiofyn

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

• Blaenorol
• Nesaf

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

• ← Hŷn
• → mwy newydd

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

Ynghylch

Mae bathodynnau yn gydrannau bach, syml ar gyfer arddangos dangosydd neu gyfrif o ryw fath. Fe'u canfyddir yn gyffredin mewn cleientiaid e-bost fel Mail.app neu ar apiau symudol ar gyfer hysbysiadau gwthio.

Dosbarthiadau sydd ar gael

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>

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 </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 mewn, 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 mewn, 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.

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.

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

Pennau i fyny! Mae dyfeisiau iOS yn gofyn href="#"am ddiswyddo rhybuddion. Gwnewch yn siŵr ei gynnwys a'r priodoledd data ar gyfer eiconau angori agos. 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.

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.

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

Gwall neu berygl

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

Llwyddiant

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

Gwybodaeth

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

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 (dim IE).

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

Animeiddiedig

Yn cymryd yr enghraifft streipiog ac yn ei animeiddio (dim IE).

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

Lliwiau ychwanegol

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

Bariau streipiog

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

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-9 neu fersiynau hŷn o Firefox.

Nid yw Opera ac IE yn cefnogi animeiddiadau ar hyn o bryd.

ffynhonnau

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

<div class = "wel" > 
  ...
</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="#" ar gyfer digwyddiadau clicio os yw'n well gennych ddefnyddio angor.

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