Cydrannau

Dwsinau o gydrannau y gellir eu hailddefnyddio wedi'u hadeiladu i ddarparu llywio, rhybuddion, popovers, a mwy.

Enghreifftiau

Dau opsiwn sylfaenol, ynghyd â dau amrywiad mwy penodol.

Grŵp botwm sengl

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

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

Grwpiau botwm lluosog

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>

Grwpiau botymau fertigol

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

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

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

  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>

Meintiau

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

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

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.

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

  1. <div class = "tudalen" >
  2. <ul>
  3. <li class = "disabled" < a href = "#" > & laquo ; </a></li>
  4. <li class = "active" <a href = " #" > 1 </a></li>
  5. ...
  6. </ul>
  7. </div>

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

  1. <div class = "tudalen" >
  2. <ul>
  3. <li class = "disabled" ><span> « </span></li>
  4. <li class = "active" ><span> 1 </li>
  5. ...
  6. </ul>
  7. </div>

Meintiau

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

  1. <div class = "pagination page-large" >
  2. <ul>
  3. ...
  4. </ul>
  5. </div>
  6. <div class = "tudalen" >
  7. <ul>
  8. ...
  9. </ul>
  10. </div>
  11. <div class = "pagination page-small" >
  12. <ul>
  13. ...
  14. </ul>
  15. </div>
  16. <div class = "pagination-mini" >
  17. <ul>
  18. ...
  19. </ul>
  20. </div>

Aliniad

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

  1. <div class = "pagination-centered tudalen" >
  2. ...
  3. </div>
  1. <div class = "tudalen tudalen-dde" >
  2. ...
  3. </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.

  1. <ul class = "pager" >
  2. <li><a href="#"> Cynt </a> < / li>
  3. <li><a href="#"> Nesaf </a> < / li>
  4. </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>

Cyflwr anabl dewisol

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

  1. <ul class = "pager" >
  2. <li class = "analluog yn flaenorol" >
  3. <a href = "#"> & larr ; Hynach </a>
  4. </li>
  5. ...
  6. </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

  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>

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 <small> Is-destun ar gyfer pennyn </small></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.

  • 300x200

    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

  • 300x200

    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

  • 300x200

    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 :

  1. <ul class = "bawdluniau" >
  2. <li class = "span4" >
  3. <a href="#" class="bawdlun"> _ _ _ _ _
  4. <img data-src = "holder.js/300x200" 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 = "span4" >
  3. <div class = "bawdlun" >
  4. <img data-src = "holder.js/300x200" alt = "" >
  5. <h3> Label bawd </h3>
  6. <p> Pennawd bawd... </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.

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.
  1. <div class = "rhybudd" >
  2. <button type = "button" class = "close" data-dismiss = "alert" > × </button>
  3. <strong> Rhybudd! </strong> Gorau gwirio yo hunan, nid ydych yn edrych yn rhy dda.
  4. </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.

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

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

  1. <div class = "bloc rhybuddio" >
  2. <button type = "button" class = "close" data-dismiss = "alert" > × </button>
  3. <h4> 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" style = " lled : 60 %; " ></div>
  3. </div>

Stripiog

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

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

Animeiddiedig

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

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

Wedi'i bentyrru

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

  1. <div class = "cynnydd" >
  2. <div class = " bar-llwyddiant bar" style = " lled : 35 %; " ></div>
  3. <div class = "bar-warning" style = " lled : 20 %; " ></div>
  4. <div class = "bar-berygl bar" style = " lled : 10 %; " ></div>
  5. </div>

Opsiynau

Lliwiau ychwanegol

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

  1. <div class = "gwybodaeth cynnydd cynnydd" >
  2. <div class = " bar" style = " lled : 20 % " ></div>
  3. </div>
  4. <div class = "cynnydd cynnydd-llwyddiant" >
  5. <div class = " bar" style = " lled : 40 % " ></div>
  6. </div>
  7. <div class = "rhybudd cynnydd" >
  8. <div class = "bar" style = " lled : 60 % " ></div>
  9. </div>
  10. <div class = "cynnydd cynnydd-perygl" >
  11. <div class = " bar" style = " lled : 80 % " ></div>
  12. </div>

Bariau streipiog

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

  1. <div class = "progress progress-info progress-striped" >
  2. <div class = " bar" style = " lled : 20 % " ></div>
  3. </div>
  4. <div class = "cynnydd progress-success progress-striped" >
  5. <div class = " bar" style = " lled : 40 % " ></div>
  6. </div>
  7. <div class = "cynnydd cynnydd-rhybudd cynnydd-streipiog" >
  8. <div class = "bar" style = " lled : 60 % " ></div>
  9. </div>
  10. <div class = "cynnydd cynnydd-perygl cynnydd-streipiog" >
  11. <div class = " bar" style = " lled : 80 % " ></div>
  12. </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.

64x64

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

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

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.
  1. <div class = "media" >
  2. <a class="pull-left" href="#"> _ _ _ _ _
  3. <img class = "media-object" data-src = "holder.js/64x64" >
  4. </a>
  5. <div class = "media-body" >
  6. <h4 class = "media-heading" >Pennawd cyfryngau </h4>
  7. ...
  8.  
  9. <!-- Gwrthrych cyfrwng nythu -->
  10. <div class = "media" >
  11. ...
  12. </div>
  13. </div>
  14. </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).

  • 64x64

    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.

    64x64

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

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

    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.
  • 64x64

    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.
  1. <ul class = "list-media" >
  2. <li class = "media" >
  3. <a class="pull-left" href="#"> _ _ _ _ _
  4. <img class = "media-object" data-src = "holder.js/64x64" >
  5. </a>
  6. <div class = "media-body" >
  7. <h4 class = "media-heading" >Pennawd cyfryngau </h4>
  8. ...
  9.  
  10. <!-- Gwrthrych cyfrwng nythu -->
  11. <div class = "media" >
  12. ...
  13. </div>
  14. </div>
  15. </li>
  16. </ul>

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>

Dosbarthiadau dewisol

Padin rheoli a chorneli crwn gyda dau ddosbarth addasydd dewisol.

Edrychwch, rydw i mewn ffynnon!
  1. <div class = "wel well-large" >
  2. ...
  3. </div>
Edrychwch, rydw i mewn ffynnon!
  1. <div class = "wel well-small" >
  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="#"digwyddiadau clicio os byddai'n well gennych ddefnyddio angor.

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

Dosbarthiadau cynorthwywyr

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

.tynnu-chwith

Arnofio elfen ar ôl

  1. class = "tynnu i'r chwith"
  1. . tynnu - chwith {
  2. arnofio : chwith ;
  3. }

.tynnu-dde

Arnofio elfen i'r dde

  1. class = "tynnu i'r dde"
  1. . tynnu - dde {
  2. arnofio : iawn ;
  3. }

.medd

Newid lliw elfen i#999

  1. class = "tawel"
  1. . tawel {
  2. lliw : #999;
  3. }

.clearfix

Clirio'r floatar unrhyw elfen

  1. class = "clearfix"
  1. . clirio {
  2. * chwyddo : 1 ;
  3. &: cyn ,
  4. &: ar ôl {
  5. arddangos : bwrdd ;
  6. cynnwys : "" ;
  7. }
  8. &: ar ôl {
  9. eglur : y ddau ;
  10. }
  11. }