Mae dwsinau o gydrannau y gellir eu hailddefnyddio wedi'u hymgorffori yn Bootstrap i ddarparu llywio, rhybuddion, popovers, a llawer mwy.
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.
Mae cysylltiadau yn addasadwy ac yn gweithio mewn nifer o amgylchiadau gyda'r dosbarth cywir. .disabled
ar gyfer dolenni na ellir eu clicio ac .active
ar gyfer y dudalen gyfredol.
Ychwanegwch y naill neu'r llall o ddau ddosbarth dewisol i newid aliniad y dolenni tudaleniad: .pagination-centered
a .pagination-right
.
Mae'r gydran tudaleniad rhagosodedig yn hyblyg ac yn gweithio mewn nifer o amrywiadau.
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>
Mae'r gydran galwr yn set o ddolenni ar gyfer gweithredu tudaleniad syml gyda marcio ysgafn a hyd yn oed arddulliau ysgafnach. Mae'n wych ar gyfer gwefannau syml fel blogiau neu gylchgronau.
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>
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> |
Newydd | <span class="label label-success">New</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> |
Yn ddiofyn, mae mân-luniau Bootstrap wedi'u cynllunio i arddangos delweddau cysylltiedig heb fawr o farcio gofynnol.
Gydag ychydig o farcio ychwanegol, mae'n bosibl ychwanegu unrhyw fath o gynnwys HTML fel penawdau, paragraffau, neu fotymau mewn mân-luniau.
Mae mân-luniau ( .media-grid
hyd 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.
Mae marcio bawd yn syml - a ul
gydag unrhyw nifer o li
elfennau 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 olaf, mae'r gydran mân-luniau yn defnyddio dosbarthiadau system grid presennol - fel .span2
neu .span3
- i reoli dimensiynau bawd.
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>
Gyda Bootstrap 2, rydym wedi symleiddio'r dosbarth sylfaen: .alert
yn lle .alert-message
. Rydym hefyd wedi lleihau'r isafswm marcio sy'n ofynnol - nid oes <p>
angen dim yn ddiofyn, dim ond yr allan <div>
.
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
.
Daw Bootstrap ag ategyn jQuery gwych sy'n cefnogi negeseuon effro, gan wneud eu diswyddo yn gyflym ac yn hawdd.
Lapiwch eich neges ac eicon cau dewisol mewn div gyda dosbarth syml.
- <div class = "rhybudd" >
- <a class="close"> × </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-block
ar gyfer mwy o reolaethau padin a thestun ac .alert-heading
ar gyfer pennawd cyfatebol.
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"> × </a> _ _ _
- <h4 class = "heading-alert" > Rhybudd! </h4>
- Mae'n well gwirio chi'ch hun, nid ydych chi'n ...
- </div>
- <div class = "alert alert-error" >
- ...
- </div>
- <div class = "alert alert-success" >
- ...
- </div>
- <div class = "alert alert-info" >
- ...
- </div>
Bar cynnydd diofyn gyda graddiant fertigol.
- <div class = "cynnydd" >
- < div class = "bar"
- style = " lled : 60 % ; " ></div>
- </div>
Yn defnyddio graddiant i greu effaith streipiog.
- < div class = " cynnydd progress-info
- cynnydd-streipiau" >
- < div class = "bar"
- style = " lled : 20 % ; " ></div>
- </div>
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>
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.
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 .active
dosbarth, bydd eich .progress-striped
bariau cynnydd yn animeiddio'r streipiau o'r chwith i'r dde.
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.
Defnyddiwch y ffynnon fel effaith syml ar elfen i roi effaith mewnosod iddo.
- <div class = "wel" >
- ...
- </div>
Defnyddiwch yr eicon cau generig ar gyfer diystyru cynnwys fel moddau a rhybuddion.
- <a class="close"> & times ; _ </a>