Komponentit

Kymmeniä uudelleenkäytettäviä komponentteja, jotka on suunniteltu tarjoamaan navigointia, hälytyksiä, ponnahdusikkunoita ja paljon muuta.

Esimerkkejä

Kaksi perusvaihtoehtoa sekä kaksi tarkempaa muunnelmaa.

Yksi painikeryhmä

Kääri useita painikkeita .btnsisään -merkillä .btn-group.

  1. <div class = "btn-ryhmä" >
  2. <button class = "btn" > Vasen </button>
  3. <button class = "btn" > Keskimmäinen </button>
  4. <button class = "btn" > Oikea </button>
  5. </div>

Useita painikeryhmiä

Yhdistä sarjat <div class="btn-group">osaksi <div class="btn-toolbar">monimutkaisempia komponentteja.

  1. <div class = "btn-työkalupalkki" >
  2. <div class = "btn-ryhmä" >
  3. ...
  4. </div>
  5. </div>

Pystysuuntaiset painikeryhmät

Saa painikkeet näyttämään pystysuorassa pinossa vaakasuoran sijaan.

  1. <div class = "btn-group btn-group-vertical" >
  2. ...
  3. </div>

Valintaruutu ja radio makuja

Painikeryhmät voivat toimia myös radioina, joissa vain yksi painike voi olla aktiivinen, tai valintaruutuina, joissa voi olla aktiivinen mikä tahansa määrä painikkeita. Katso JavaScript-dokumentit sitä varten.

Avattavat valikot painikeryhmissä

Varoitus!Pudotusvalikoilla varustetut painikkeet on käärittävä yksitellen omiin osiinsa .btn-group, .btn-toolbarjotta ne hahmontuvat oikein.

Yleiskatsaus ja esimerkkejä

Käytä mitä tahansa painiketta avataksesi pudotusvalikon sijoittamalla sen a- .btn-groupkohtaan ja antamalla oikeat valikkomerkinnät.

  1. <div class = "btn-ryhmä" >
  2. <a class = "btn dropdown-toggle" data-toggle = "pudotusvalikko" href = "#" >
  3. Toiminta
  4. <span class = "caret" ></span>
  5. </a>
  6. <ul class = "pudotusvalikko" >
  7. <!-- pudotusvalikon linkit -->
  8. </ul>
  9. </div>

Toimii kaikkien painikkeiden kokojen kanssa

Painikkeiden avattavat valikot toimivat missä tahansa koossa: .btn-large, .btn-small, tai .btn-mini.

Edellyttää JavaScriptiä

Painikkeiden avattavat valikot edellyttävät Bootstrap-pudotusvalikon toimiakseen.

Joissakin tapauksissa, kuten mobiililaitteissa, avattavat valikot ulottuvat näkymän ulkopuolelle. Sinun on ratkaistava kohdistus manuaalisesti tai mukautetulla JavaScriptillä.


Jakopainikkeen pudotusvalikot

Painikeryhmien tyylien ja merkintöjen pohjalta voimme helposti luoda jaetun painikkeen. Split-painikkeissa on vakiotoiminto vasemmalla ja pudotusvalikon vaihtokytkin oikealla kontekstuaalisilla linkeillä.

  1. <div class = "btn-ryhmä" >
  2. <button class = "btn" > Toiminto </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "pudotusvalikko" >
  4. <span class = "caret" ></span>
  5. </button>
  6. <ul class = "pudotusvalikko" >
  7. <!-- pudotusvalikon linkit -->
  8. </ul>
  9. </div>

Koot

Käytä ylimääräisiä painikeluokkia .btn-mini, .btn-smalltai .btn-largekoon mitoittamiseen.

  1. <div class = "btn-ryhmä" >
  2. <button class = "btn btn-mini" > Toiminto </button>
  3. <button class = "btn btn-mini dropdown-toggle" data-toggle = "pudotusvalikko" >
  4. <span class = "caret" ></span>
  5. </button>
  6. <ul class = "pudotusvalikko" >
  7. <!-- pudotusvalikon linkit -->
  8. </ul>
  9. </div>

Pudotusvalikot

Avattavat valikot voidaan myös vaihtaa alhaalta ylöspäin lisäämällä yksi luokka :n välittömään yläpäähän .dropdown-menu. Se kääntää suunnan .caretja siirtää itse valikon siirtymään alhaalta ylös ylhäältä alaspäin.

  1. <div class = "btn-group dropup" >
  2. <button class = "btn" > Pudota </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "pudotusvalikko" >
  4. <span class = "caret" ></span>
  5. </button>
  6. <ul class = "pudotusvalikko" >
  7. <!-- pudotusvalikon linkit -->
  8. </ul>
  9. </div>

Normaali sivutus

Yksinkertainen Rdion inspiroima sivutus, joka sopii erinomaisesti sovelluksiin ja hakutuloksiin. Suuri lohko on vaikea ohittaa, helposti skaalautuva ja tarjoaa suuria napsautusalueita.

  1. <div class = "sivutus" >
  2. <ul>
  3. <li><a href = "#" > Edellinen </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 = "#" > Seuraava </a></li>
  10. </ul>
  11. </div>

Vaihtoehdot

Pois käytöstä ja aktiiviset tilat

Linkit ovat muokattavissa erilaisiin olosuhteisiin. Käytä .disabledlinkkeihin, joita ei voi napsauttaa, ja .activeosoittamaan nykyisen sivun.

  1. <div class = "sivutus" >
  2. <ul>
  3. <li class = "pois käytöstä" ><a href = "#" > « </a></li>
  4. <li class = "aktiivinen" ><a href = "#" > 1 </a></li>
  5. ...
  6. </ul>
  7. </div>

Voit halutessasi vaihtaa aktiiviset tai käytöstä poistetut ankkurit jänneväliin poistaaksesi napsautustoiminnot säilyttäen samalla aiotut tyylit.

  1. <div class = "sivutus" >
  2. <ul>
  3. <li class = "pois käytöstä" ><span> « </span></li>
  4. <li class = "aktiivinen" ><span> 1 </span></li>
  5. ...
  6. </ul>
  7. </div>

Koot

Haluatko suuremman vai pienemmän sivun? Lisää .pagination-large, .pagination-small, tai .pagination-minilisäkokoja varten.

  1. <div class = "sivutus sivutus-suuri" >
  2. <ul>
  3. ...
  4. </ul>
  5. </div>
  6. <div class = "sivutus" >
  7. <ul>
  8. ...
  9. </ul>
  10. </div>
  11. <div class = "sivujen sivutus-pieni" >
  12. <ul>
  13. ...
  14. </ul>
  15. </div>
  16. <div class = "sivutus sivutus-mini" >
  17. <ul>
  18. ...
  19. </ul>
  20. </div>

Tasaus

Lisää toinen kahdesta valinnaisesta luokasta muuttaaksesi sivutuslinkkien kohdistusta: .pagination-centeredja .pagination-right.

  1. <div class = "sivutus sivutuskeskeinen" >
  2. ...
  3. </div>
  1. <div class = "sivutus oikealla" >
  2. ...
  3. </div>

Hakulaite

Nopeat edelliset ja seuraavat linkit yksinkertaisiin sivutustoteutuksiin kevyellä merkinnällä ja tyyleillä. Se sopii erinomaisesti yksinkertaisille sivustoille, kuten blogeille tai aikakauslehdille.

Oletusesimerkki

Oletusarvoisesti hakulaite keskittää linkit.

  1. <ul class = "hakulaite" >
  2. <li><a href = "#" > Edellinen </a></li>
  3. <li><a href = "#" > Seuraava </a></li>
  4. </ul>

Tasaiset linkit

Vaihtoehtoisesti voit kohdistaa jokaisen linkin sivuille:

  1. <ul class = "hakulaite" >
  2. <li class = "edellinen" >
  3. <a href = "#" > Vanhempi </a>
  4. </li>
  5. <li class = "seuraava" >
  6. <a href = "#" > Uudempi → </a>
  7. </li>
  8. </ul>

Valinnainen pois käytöstä tila

Hakulinkit käyttävät myös yleistä .disabledhyödyllisyysluokkaa sivutuksesta.

  1. <ul class = "hakulaite" >
  2. <li class = "edellinen poistettu käytöstä" >
  3. <a href = "#" > Vanhempi </a>
  4. </li>
  5. ...
  6. </ul>

Tarrat

Tarrat Merkintä
Oletus <span class="label">Default</span>
Menestys <span class="label label-success">Success</span>
Varoitus <span class="label label-warning">Warning</span>
Tärkeä <span class="label label-important">Important</span>
Tiedot <span class="label label-info">Info</span>
Käänteinen <span class="label label-inverse">Inverse</span>

Tunnusmerkit

Nimi Esimerkki Merkintä
Oletus 1 <span class="badge">1</span>
Menestys 2 <span class="badge badge-success">2</span>
Varoitus 4 <span class="badge badge-warning">4</span>
Tärkeä 6 <span class="badge badge-important">6</span>
Tiedot 8 <span class="badge badge-info">8</span>
Käänteinen 10 <span class="badge badge-inverse">10</span>

Helposti kokoontaitettava

Käyttöönoton helpottamiseksi tarrat ja merkit yksinkertaisesti kutistuvat (CSS:n :emptyvalitsimen kautta), kun sisällä ei ole sisältöä.

Sankariyksikkö

Kevyt, joustava komponentti sivustosi keskeisen sisällön esittelyyn. Se toimii hyvin markkinoinnissa ja paljon sisältöä sisältävillä sivustoilla.

Hei maailma!

Tämä on yksinkertainen sankariyksikkö, yksinkertainen jumbotron-tyylinen komponentti, joka kiinnittää erityistä huomiota esillä olevaan sisältöön tai tietoon.

Lue lisää

  1. <div class = "sankariyksikkö" >
  2. <h1> Otsikko </h1>
  3. <p> Tunnuslause </p>
  4. <p>
  5. <a class = "btn btn-primary btn-large" >
  6. Lue lisää
  7. </a>
  8. </p>
  9. </div>

Sivun otsikko

Yksinkertainen komentotulkki h1sivun sisällön osioiden välittämistä ja segmentointia varten. Se voi käyttää h1oletuselementtiä smallsekä useimpia muita komponentteja (lisätyyleillä).

  1. <div class = "sivun otsikko" >
  2. <h1> Esimerkkisivun otsikko <small> Otsikon alateksti </small></h1>
  3. </div>

Oletuspikkukuvat

Oletuksena Bootstrapin pikkukuvat on suunniteltu esittelemään linkitettyjä kuvia minimaalisella vaaditulla merkinnällä.

Erittäin muokattavissa

Pienellä ylimääräisellä merkinnällä on mahdollista lisätä pikkukuviin kaikenlaista HTML-sisältöä, kuten otsikoita, kappaleita tai painikkeita.

  • 300x200

    Pikkukuvatarra

    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

    Toiminta Toiminta

  • 300x200

    Pikkukuvatarra

    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

    Toiminta Toiminta

  • 300x200

    Pikkukuvatarra

    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

    Toiminta Toiminta

Miksi käyttää pikkukuvia

Pikkukuvat (aiemmin .media-gridversioon 1.4 asti) sopivat erinomaisesti valokuvien tai videoiden ruudukoille, kuvahakutuloksille, vähittäismyyntituotteille, portfolioille ja monelle muulle. Ne voivat olla linkkejä tai staattista sisältöä.

Yksinkertainen, joustava merkintä

Pikkukuvien merkintä on yksinkertaista – ulkaikki tarvittava määrä lielementtejä on a. Se on myös erittäin joustava, ja se mahdollistaa kaiken tyyppisen sisällön ja vain hieman enemmän merkintöjä sisällön käärimiseen.

Käyttää ruudukon sarakkeiden kokoja

Lopuksi pikkukuvakomponentti käyttää olemassa olevia ruudukon järjestelmäluokkia, kuten .span2tai .span3- pikkukuvien mittojen ohjaamiseen.

Merkintä

Kuten aiemmin mainittiin, pikkukuvien vaadittava merkintä on kevyt ja yksinkertainen. Tässä on katsaus linkitettyjen kuvien oletusasetuksiin :

  1. <ul class = "pikkukuvat" >
  2. <li class = "span4" >
  3. <a href = "#" class = "pikkukuva" >
  4. <img data-src = "holder.js/300x200" alt = "" >
  5. </a>
  6. </li>
  7. ...
  8. </ul>

Pikkukuvien mukautetun HTML-sisällön merkintä muuttuu hieman. Jotta estotason sisältö voidaan sallia missä tahansa, vaihdamme <a>sen <div>vastaavaan:

  1. <ul class = "pikkukuvat" >
  2. <li class = "span4" >
  3. <div class = "pikkukuva" >
  4. <img data-src = "holder.js/300x200" alt = "" >
  5. <h3> Pikkukuvan tunniste </h3>
  6. <p> Pikkukuvan kuvateksti... </p>
  7. </div>
  8. </li>
  9. ...
  10. </ul>

Lisää esimerkkejä

Tutustu kaikkiin vaihtoehtoihin käytettävissäsi olevien erilaisten ruudukkoluokkien avulla. Voit myös yhdistellä eri kokoja.

Oletushälytys

Kääri teksti ja valinnainen hylkäyspainike .alertsaadaksesi perusvaroitusviestin.

Varoitus! Parasta tarkistaa itsesi, et näytä liian hyvältä.
  1. <div class = "hälytys" >
  2. <button type = "button" class = "sulje" data-dismiss = "hälytys" > × </button>
  3. <strong> Varoitus! </strong> Tarkista itsesi, et näytä liian hyvältä.
  4. </div>

Hylkää painikkeet

Mobiili Safari ja Mobile Opera -selaimet data-dismiss="alert"vaativat määritteen href="#"lisäksi hälytyksiä käytettäessä <a>tunnistetta.

  1. <a href = "#" class = "sulje" data-dismiss = "hälytys" > × </a>

Vaihtoehtoisesti voit käyttää <button>elementtiä data-attribuutilla, jonka olemme valinneet asiakirjoissamme. Kun käytät <button>, sinun on sisällytettävä type="button"lomakkeitasi tai niitä ei saa lähettää.

  1. <button type = "button" class = "sulje" data-dismiss = "hälytys" > × </button>

Hylkää hälytykset JavaScriptin kautta

Käytä hälytyksiä jQuery-laajennusta hälytysten poistamiseen nopeasti ja helposti.


Vaihtoehdot

Pidempiä viestejä varten lisää täyttöä hälytyskääreen ylä- ja alaosassa lisäämällä .alert-block.

Varoitus!

Parasta tarkistaa itsesi, et näytä liian hyvältä. Nulla vitae elit libero, pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

  1. <div class = "alert alert-block" >
  2. <button type = "button" class = "sulje" data-dismiss = "hälytys" > × </button>
  3. <h4> Varoitus! </h4>
  4. Parasta tarkistaa itsesi, et ole...
  5. </div>

Kontekstuaaliset vaihtoehdot

Lisää valinnaisia ​​luokkia muuttaaksesi hälytyksen konnotaatiota.

Virhe tai vaara

Voi pahus! Muuta muutamia asioita ja yritä lähettää uudelleen.
  1. <div class = "alert alert-error" >
  2. ...
  3. </div>

Menestys

Hyvin tehty! Luit onnistuneesti tämän tärkeän varoitusviestin.
  1. <div class = "alert alert-success" >
  2. ...
  3. </div>

Tiedot

Varoitus! Tämä hälytys vaatii huomiotasi, mutta se ei ole erityisen tärkeä.
  1. <div class = "alert alert-info" >
  2. ...
  3. </div>

Esimerkit ja merkinnät

Perus

Oletus etenemispalkki, jossa on pystysuora kaltevuus.

  1. <div class = "edistyminen" >
  2. <div class = "bar" style = " leveys : 60 %; " ></div>
  3. </div>

Raidallinen

Käyttää gradienttia luodakseen raidallisen tehosteen. Ei saatavilla IE7-8:ssa.

  1. <div class = "edistyminen edistynyt raidallinen" >
  2. <div class = "bar" style = " leveys : 20 %; " ></div>
  3. </div>

Animoitu

Lisää .active: .progress-stripedanimoidaksesi raidat oikealta vasemmalle. Ei saatavilla kaikissa IE:n versioissa.

  1. <div class = "edistyminen edistynyt raidallinen aktiivinen" >
  2. <div class = "bar" style = " leveys : 40 %; " ></div>
  3. </div>

Pinottu

Aseta useita tankoja samaan .progresspinoaksesi ne.

  1. <div class = "edistyminen" >
  2. <div class = "bar bar-success" style = " leveys : 35 %; " ></div>
  3. <div class = "bar bar-warning" style = " leveys : 20 %; " ></div>
  4. <div class = "bar bar-danger" style = " leveys : 10 %; " ></div>
  5. </div>

Vaihtoehdot

Lisävärit

Edistymispalkit käyttävät joitain samoja painike- ja hälytysluokkia yhtenäisten tyylien aikaansaamiseksi.

  1. <div class = "edistymistiedot" >
  2. <div class = "bar" style = " leveys : 20 % " ></div>
  3. </div>
  4. <div class = "edistyminen edistys-menestys" >
  5. <div class = "bar" style = " leveys : 40 % " ></div>
  6. </div>
  7. <div class = "edistymisen edistymisvaroitus" >
  8. <div class = "bar" style = " leveys : 60 % " ></div>
  9. </div>
  10. <div class = "edistymisen vaara" >
  11. <div class = "bar" style = " leveys : 80 % " ></div>
  12. </div>

Raidalliset tangot

Kuten yhtenäiset värit, meillä on erilaisia ​​raidallisia edistymispalkkeja.

  1. <div class = "progress progress-info progress-striped" >
  2. <div class = "bar" style = " leveys : 20 % " ></div>
  3. </div>
  4. <div class = "edistyminen edistys-menestys edistys-raidallinen" >
  5. <div class = "bar" style = " leveys : 40 % " ></div>
  6. </div>
  7. <div class = "edistymisvaroitus edistymisraidallinen" >
  8. <div class = "bar" style = " leveys : 60 % " ></div>
  9. </div>
  10. <div class = "edistyminen edistyminen-vaara edistyminen-raidallinen" >
  11. <div class = "bar" style = " leveys : 80 % " ></div>
  12. </div>

Selaimen tuki

Edistymispalkit käyttävät CSS3-gradientteja, siirtymiä ja animaatioita saavuttaakseen kaikki tehonsa. Näitä ominaisuuksia ei tueta Firefoxin IE7-9:ssä tai vanhemmissa versioissa.

Internet Explorer 10:tä ja Opera 12:ta aiemmat versiot eivät tue animaatioita.

Abstrakteja objektityylejä erityyppisten komponenttien (kuten blogikommenttien, twiittien jne.) rakentamiseen, joissa on vasemmalle tai oikealle tasattu kuva tekstisisällön ohella.

Oletusesimerkki

Oletusmedia sallii mediaobjektin (kuvien, videon, äänen) kellumisen sisältölohkon vasemmalle tai oikealle puolelle.

64x64

Media otsikko

Cras sit amet nibh libero, gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
64x64

Media otsikko

Cras sit amet nibh libero, gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
64x64

Media otsikko

Cras sit amet nibh libero, gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
  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" > Mediaotsikko </h4>
  7. ...
  8.  
  9. <!-- Sisäkkäinen mediaobjekti -->
  10. <div class = "media" >
  11. ...
  12. </div>
  13. </div>
  14. </div>

Media lista

Pienellä ylimääräisellä merkinnällä voit käyttää median sisäistä luetteloa (hyödyllinen kommenttiketjuissa tai artikkeliluetteloissa).

  • 64x64

    Media otsikko

    Cras sit amet nibh libero, gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

    64x64

    Sisäkkäinen mediaotsikko

    Cras sit amet nibh libero, gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
    64x64

    Sisäkkäinen mediaotsikko

    Cras sit amet nibh libero, gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
    64x64

    Sisäkkäinen mediaotsikko

    Cras sit amet nibh libero, gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
  • 64x64

    Media otsikko

    Cras sit amet nibh libero, gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
  1. <ul class = "medialuettelo" >
  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" > Mediaotsikko </h4>
  8. ...
  9.  
  10. <!-- Sisäkkäinen mediaobjekti -->
  11. <div class = "media" >
  12. ...
  13. </div>
  14. </div>
  15. </li>
  16. </ul>

Wells

Käytä kaivoa yksinkertaisena tehosteena elementissä antaaksesi sille upotetun vaikutelman.

Katso, olen kaivossa!
  1. <div class = "hyvin" >
  2. ...
  3. </div>

Valinnaiset luokat

Ohjauspehmusteet ja pyöristetyt kulmat kahdella valinnaisella muokkausluokalla.

Katso, olen kaivossa!
  1. <div class = "hyvin hyvin suuri" >
  2. ...
  3. </div>
Katso, olen kaivossa!
  1. <div class = "hyvin hyvin pieni" >
  2. ...
  3. </div>

Sulje kuvake

Käytä yleistä sulkemiskuvaketta sulkeaksesi sisällön, kuten modaalit ja hälytykset.

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

iOS-laitteet vaativat href="#"klikkaustapahtuman, jos haluat mieluummin käyttää ankkuria.

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

Apukurssit

Yksinkertaisia, kohdennettuja kursseja pienille näyttö- tai käyttäytymismuokkauksille.

.vedä vasemmalle

Kelluuta elementtiä vasemmalle

  1. luokka = "vedä vasemmalle"
  1. . vedä - vasen {
  2. kellua : vasen ;
  3. }

.vedä oikealle

Kelluuta elementtiä oikealle

  1. luokka = "vedä oikealle"
  1. . vedä oikealle { _
  2. kellua : oikea ;
  3. }

.mykistetty

Muuta elementin väriksi#999

  1. luokka = "mykistetty"
  1. . mykistetty {
  2. väri : #999;
  3. }

.clearfix

Tyhjennä mistä floattahansa elementistä

  1. luokka = "selvitys"
  1. . clearfix {
  2. * zoom : 1 ;
  3. &: ennen ,
  4. &: jälkeen {
  5. näyttö : pöytä ;
  6. sisältö : "" ;
  7. }
  8. &: jälkeen {
  9. selkeä : molemmat ;
  10. }
  11. }