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:

  1. <div class = "btn-group" >
  2. <button class = "btn" > 1 </button>
  3. <button class = "btn" > 2 </button>
  4. <button class = "btn" > 3 </button>
  5. </div>

Enghraifft Bar Offer

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

  1. <div class = "btn-bar offer" >
  2. <div class = "btn-group" >
  3. ...
  4. </div>
  5. </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.

Cwympiadau botwm

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.

  1. <div class = "btn-group" >
  2. <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"> _ _ _ _ _ _
  3. Gweithred
  4. <span class = "caret" ></span>
  5. </a>
  6. <ul class = "dropdown-menu" >
  7. <!-- dolenni dewislen -->
  8. </ul>
  9. </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.


Hollti botymau botwm

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.

  1. <div class = "btn-group" >
  2. ...
  3. <ul class = "dropdown-menu pull-right" >
  4. <!-- dolenni dewislen -->
  5. </ul>
  6. </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.

  1. <div class = "btn-group" >
  2. <button class = "btn" > Gweithredu </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. <span class = "caret" ></span>
  5. </button>
  6. <ul class = "dropdown-menu" >
  7. <!-- dolenni dewislen -->
  8. </ul>
  9. </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.

  1. <div class = "dropup btn-group" >
  2. <button class = "btn" > Gollwng </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. <span class = "caret" ></span>
  5. </button>
  6. <ul class = "dropdown-menu" >
  7. <!-- dolenni dewislen -->
  8. </ul>
  9. </div>

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

  1. <div class = "tudalen" >
  2. <ul>
  3. <li><a href="#"> Cyn </a> < / li>
  4. <li class = "active" >
  5. <a href="#"> 1 </a> _ _ _
  6. </li>
  7. <li><a href="#"> 2 </a> < / li>
  8. <li><a href="#"> 3 </a> < / li>
  9. <li><a href="#"> 4 </a> < / li>
  10. <li><a href="#"> Nesaf </a> < / li>
  11. </ul>
  12. </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.

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.

  1. <ul class = "pager" >
  2. <li>
  3. <a href="#"> Cynt </a> _ _ _
  4. </li>
  5. <li>
  6. <a href="#"> Nesaf </a> _ _ _
  7. </li>
  8. </ul>

Dolenni wedi'u halinio

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

  1. <ul class = "pager" >
  2. <li class = "previous" >
  3. <a href = "#"> & larr ; Hynach </a>
  4. </li>
  5. <li class = "nesaf" >
  6. <a href = "#"> Newyddach </a>
  7. </li>
  8. </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>
gwrthdro <span class="label label-inverse">Inverse</span>

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

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>

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:

  1. <div class = "uned arwr" >
  2. <h1> Pennawd </h1>
  3. <p> Tagline </p>
  4. <p>
  5. <a class="btn btn-primary btn-large"> _
  6. Dysgu mwy
  7. </a>
  8. </p>
  9. </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 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).

  1. <div class = "page-header" >
  2. <h1> Pennawd tudalen enghreifftiol </h1>
  3. </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 :

  1. <ul class = "bawdluniau" >
  2. <li class = "span3" >
  3. <a href="#" class="bawdlun"> _ _ _ _ _
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. </a>
  6. </li>
  7. ...
  8. </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:

  1. <ul class = "bawdluniau" >
  2. <li class = "span3" >
  3. <div class = "bawdlun" >
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. <h5> Label bawd </h5>
  6. <p> Pennawd y mân-lun yma... </p>
  7. </div>
  8. </li>
  9. ...
  10. </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.
  1. <div class = "rhybudd" >
  2. <button class = "close" data-dismiss = "alert" > × </button>
  3. <strong> Rhybudd! </strong> Gorau gwirio yo hunan, nid ydych yn edrych yn rhy dda.
  4. </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.

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.

  1. <div class = "bloc rhybuddio" >
  2. <a class="close" data-dismiss="alert" href="#"> × </a> _ _ _ _ _ _ _
  3. <h4 class = "heading-alert" > Rhybudd! </h4>
  4. Mae'n well gwirio chi'ch hun, nid ydych chi'n ...
  5. </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.
  1. <div class = "alert alert-error" >
  2. ...
  3. </div>

Llwyddiant

Da iawn! Rydych chi wedi darllen y neges rhybuddio bwysig hon yn llwyddiannus.
  1. <div class = "alert alert-success" >
  2. ...
  3. </div>

Gwybodaeth

Pennau i fyny! Mae angen eich sylw ar y rhybudd hwn, ond nid yw'n hynod bwysig.
  1. <div class = "alert alert-info" >
  2. ...
  3. </div>

Enghreifftiau a marcio

Syml

Bar cynnydd diofyn gyda graddiant fertigol.

  1. <div class = "cynnydd" >
  2. < div class = "bar"
  3. style = " lled : 60 % ; " ></div>
  4. </div>

Stripiog

Yn defnyddio graddiant i greu effaith streipiog (dim IE).

  1. <div class = "progress progress-striped" >
  2. < div class = "bar"
  3. style = " lled : 20 % ; " ></div>
  4. </div>

Animeiddiedig

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

  1. < div class = " cynnydd progress-striped
  2. gweithredol" >
  3. < div class = "bar"
  4. style = " lled : 40 % ; " ></div>
  5. </div>

Opsiynau a chefnogaeth porwr

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.

Edrychwch, rydw i mewn ffynnon!
  1. <div class = "wel" >
  2. ...
  3. </div>

Eicon cau

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

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

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

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