Sastāvdaļas

Desmitiem atkārtoti lietojamu komponentu, kas izstrādāti, lai nodrošinātu navigāciju, brīdinājumus, uznirstošos logus un daudz ko citu.

Piemēri

Divas pamata iespējas, kā arī vēl divas specifiskas variācijas.

Viena pogu grupa

Aptiniet vairākas pogas .btnar .btn-group.

  1. <div class = "btn-group" >
  2. <button class = "btn" > Pa kreisi </button>
  3. <button class = "btn" > Vidējā </button>
  4. <button class = "btn" > Pa labi </button>
  5. </div>

Vairākas pogu grupas

Apvienojiet komplektus <div class="btn-group">a <div class="btn-toolbar">, lai iegūtu sarežģītākus komponentus.

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

Vertikālās pogu grupas

Padariet pogu komplektu vertikāli, nevis horizontāli.

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

Izvēles rūtiņas un radio garšas

Pogu grupas var darboties arī kā radio, kur var būt aktīva tikai viena poga, vai izvēles rūtiņas, kurās var būt aktīvs jebkurš pogu skaits. Šim nolūkam skatiet JavaScript dokumentus .

Nolaižamās izvēlnes pogu grupās

Uzmanību!Pogām ar nolaižamajām izvēlnēm ir jābūt atsevišķi iesaiņotām, lai tās .btn-grouptiktu .btn-toolbarpareizi atveidotas.

Pārskats un piemēri

Izmantojiet jebkuru pogu, lai aktivizētu nolaižamo izvēlni, ievietojot to a .btn-groupun nodrošinot atbilstošu izvēlnes atzīmi.

  1. <div class = "btn-group" >
  2. <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >
  3. Darbība
  4. <span class = "caret" ></span>
  5. </a>
  6. <ul class = "nolaižamā izvēlne" >
  7. <!-- nolaižamās izvēlnes saites -->
  8. </ul>
  9. </div>

Darbojas ar visiem pogas izmēriem

Pogu nolaižamās izvēlnes darbojas jebkurā izmērā: .btn-large, .btn-small, vai .btn-mini.

Nepieciešams JavaScript

Pogu nolaižamajām izvēlnēm ir nepieciešams Bootstrap nolaižamā spraudnis , lai darbotos.

Dažos gadījumos, piemēram, mobilajās ierīcēs, nolaižamās izvēlnes būs ārpus skata loga. Jums ir jāatrisina līdzinājums manuāli vai ar pielāgotu JavaScript.


Sadalīšanas pogas nolaižamās izvēlnes

Balstoties uz pogu grupu stiliem un iezīmēšanu, mēs varam viegli izveidot sadalītu pogu. Sadalītajām pogām ir standarta darbība kreisajā pusē un nolaižamā izvēlne labajā pusē ar konteksta saitēm.

  1. <div class = "btn-group" >
  2. <button class = "btn" > Darbība </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "nolaižamā izvēlne" >
  4. <span class = "caret" ></span>
  5. </button>
  6. <ul class = "nolaižamā izvēlne" >
  7. <!-- nolaižamās izvēlnes saites -->
  8. </ul>
  9. </div>

Izmēri

Izmantojiet papildu pogu klases .btn-mini, .btn-smallvai .btn-largeizmēra noteikšanai.

  1. <div class = "btn-group" >
  2. <button class = "btn btn-mini" > Darbība </button>
  3. <button class = "btn btn-mini dropdown-toggle" data-toggle = "nolaižamā izvēlne" >
  4. <span class = "caret" ></span>
  5. </button>
  6. <ul class = "nolaižamā izvēlne" >
  7. <!-- nolaižamās izvēlnes saites -->
  8. </ul>
  9. </div>

Nolaižamās izvēlnes

Nolaižamās izvēlnes var arī pārslēgt no apakšas uz augšu, pievienojot vienu klasi tiešajam vecākam .dropdown-menu. Tas apvērsīs virzienu un mainīs .caretpašas izvēlnes pozīciju, lai pārvietotos no apakšas uz augšu, nevis no augšas uz leju.

  1. <div class = "btn-group dropup" >
  2. <button class = "btn" > Nolaižams </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "nolaižamā izvēlne" >
  4. <span class = "caret" ></span>
  5. </button>
  6. <ul class = "nolaižamā izvēlne" >
  7. <!-- nolaižamās izvēlnes saites -->
  8. </ul>
  9. </div>

Standarta lappušu šķirošana

Vienkārša lapošana, ko iedvesmojis Rdio, lieliski piemērota lietotnēm un meklēšanas rezultātiem. Lielo bloku ir grūti nepamanīt, tas ir viegli mērogojams un nodrošina lielus klikšķu apgabalus.

  1. <div class = "lapu šķirošana" >
  2. <ul>
  3. <li><a href = "#" > Iepriekšējā </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 = "#" > Nākamais </a></li>
  10. </ul>
  11. </div>

Iespējas

Atspējoti un aktīvi stāvokļi

Saites var pielāgot dažādiem apstākļiem. Izmantojiet .disabledneklikšķināmām saitēm un .activepašreizējās lapas norādīšanai.

  1. <div class = "lapu šķirošana" >
  2. <ul>
  3. <li class = "atspējots" ><a href = "#" > « </a></li>
  4. <li class = "aktīvs" ><a href = "#" > 1 </a></li>
  5. ...
  6. </ul>
  7. </div>

Varat pēc izvēles nomainīt aktīvos vai atspējotos enkurus pret laidumiem, lai noņemtu klikšķu funkcionalitāti, vienlaikus saglabājot paredzētos stilus.

  1. <div class = "lapu šķirošana" >
  2. <ul>
  3. <li class = "atspējots" ><span> « </span></li>
  4. <li class = "aktīvs" ><span> 1 </span></li>
  5. ...
  6. </ul>
  7. </div>

Izmēri

Vai vēlaties lielāku vai mazāku lappušu skaitu? Pievienojiet .pagination-large, .pagination-small, vai .pagination-minipapildu izmēriem.

  1. <div class = "lappušu skaits-liels" >
  2. <ul>
  3. ...
  4. </ul>
  5. </div>
  6. <div class = "lapu šķirošana" >
  7. <ul>
  8. ...
  9. </ul>
  10. </div>
  11. <div class = "pagination pagenation-small" >
  12. <ul>
  13. ...
  14. </ul>
  15. </div>
  16. <div class = "pagination pagenation-mini" >
  17. <ul>
  18. ...
  19. </ul>
  20. </div>

Izlīdzināšana

Pievienojiet vienu no divām izvēles klasēm, lai mainītu lappušu saišu izlīdzināšanu: .pagination-centeredun .pagination-right.

  1. <div class = "lappušu izvietošanas centrs" >
  2. ...
  3. </div>
  1. <div class = "pagination pagenation-right" >
  2. ...
  3. </div>

Peidžeris

Ātras iepriekšējās un nākamās saites vienkāršai lappušu ievietošanai ar vieglu marķējumu un stiliem. Tas ir lieliski piemērots vienkāršām vietnēm, piemēram, emuāriem vai žurnāliem.

Noklusējuma piemērs

Pēc noklusējuma peidžeris centrē saites.

  1. <ul class = "peidžeris" >
  2. <li><a href = "#" > Iepriekšējais </a></li>
  3. <li><a href = "#" > Nākamais </a></li>
  4. </ul>

Izlīdzinātas saites

Varat arī izlīdzināt katru saiti sānos:

  1. <ul class = "peidžeris" >
  2. <li class = "iepriekšējais" >
  3. <a href = "#" > Vecāks </a>
  4. </li>
  5. <li class = "nākamais" >
  6. <a href = "#" > Jaunāka → </a>
  7. </li>
  8. </ul>

Izvēles atspējošanas stāvoklis

Peidžera saitēs tiek izmantota arī vispārējā .disabledlietderības klase no lappušu klāšanas.

  1. <ul class = "peidžeris" >
  2. <li class = "iepriekšējais atspējots" >
  3. <a href = "#" > Vecāks </a>
  4. </li>
  5. ...
  6. </ul>

Etiķetes

Etiķetes Atzīmes
Noklusējums <span class="label">Default</span>
Panākumi <span class="label label-success">Success</span>
Brīdinājums <span class="label label-warning">Warning</span>
Svarīgs <span class="label label-important">Important</span>
Informācija <span class="label label-info">Info</span>
Apgriezti <span class="label label-inverse">Inverse</span>

Nozīmītes

Vārds Piemērs Atzīmes
Noklusējums 1 <span class="badge">1</span>
Panākumi 2 <span class="badge badge-success">2</span>
Brīdinājums 4 <span class="badge badge-warning">4</span>
Svarīgs 6 <span class="badge badge-important">6</span>
Informācija 8 <span class="badge badge-info">8</span>
Apgriezti 10 <span class="badge badge-inverse">10</span>

Viegli saliekams

Lai atvieglotu ieviešanu, etiķetes un emblēmas vienkārši sakļaujas (izmantojot CSS :emptyatlasītāju), ja tajā nav satura.

Varoņu vienība

Viegls, elastīgs komponents jūsu vietnes galvenā satura demonstrēšanai. Tas labi darbojas mārketinga un satura vietnēs.

Sveika pasaule!

Šī ir vienkārša varoņa vienība, vienkārša jumbotron stila sastāvdaļa, lai pievērstu papildu uzmanību piedāvātajam saturam vai informācijai.

Uzzināt vairāk

  1. <div class = "varoņa vienība" >
  2. <h1> Virsraksts </h1>
  3. <p> Ieraksts </p>
  4. <p>
  5. <a class = "btn btn-primary btn-large" >
  6. Uzzināt vairāk
  7. </a>
  8. </p>
  9. </div>

Lapas galvene

Vienkāršs apvalks, h1lai lapas satura sadaļas atbilstoši atdalītu un segmentētu. Tas var izmantot h1noklusējuma smallelementu, kā arī lielāko daļu citu komponentu (ar papildu stiliem).

  1. <div class = "lapas galvene" >
  2. <h1> Lapas galvenes piemērs <small> Galvenes apakšteksts </small></h1>
  3. </div>

Noklusējuma sīktēli

Pēc noklusējuma Bootstrap sīktēli ir paredzēti, lai parādītu saistītos attēlus ar minimālu nepieciešamo marķējumu.

Ļoti pielāgojama

Izmantojot nelielu papildu marķējumu, ir iespējams sīktēliem pievienot jebkāda veida HTML saturu, piemēram, virsrakstus, rindkopas vai pogas.

  • 300x200

    Sīktēla etiķete

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

    Darbība Darbība

  • 300x200

    Sīktēla etiķete

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

    Darbība Darbība

  • 300x200

    Sīktēla etiķete

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

    Darbība Darbība

Kāpēc izmantot sīktēlus

Sīktēli (iepriekš .media-gridlīdz versijai 1.4) ir lieliski piemēroti fotoattēlu vai videoklipu režģiem, attēlu meklēšanas rezultātiem, mazumtirdzniecības produktiem, portfeļiem un daudz kam citam. Tās var būt saites vai statisks saturs.

Vienkāršs, elastīgs marķējums

Sīktēlu iezīmēšana ir vienkārša — viss, kas nepieciešams, ular jebkuru lielementu skaitu. Tas ir arī īpaši elastīgs, ļaujot izmantot jebkura veida saturu, tikai nedaudz vairāk iezīmējot saturu.

Izmanto režģa kolonnu izmērus

Visbeidzot sīktēlu komponents izmanto esošās režģa sistēmas klases, piemēram, .span2vai , lai .span3kontrolētu sīktēlu izmērus.

Atzīmes

Kā minēts iepriekš, sīktēliem nepieciešamais marķējums ir viegls un vienkāršs. Tālāk ir norādīts saistīto attēlu noklusējuma iestatījums .

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

Pielāgotam HTML saturam sīktēlos marķējums nedaudz mainās. Lai atļautu bloķēšanas līmeņa saturu jebkurā vietā, mēs nomainām to <a>pret <div>līdzīgu:

  1. <ul class = "sīktēli" >
  2. <li class = "span4" >
  3. <div class = "sīktēls" >
  4. <img data-src = "holder.js/300x200" alt = "" >
  5. <h3> Sīktēla etiķete </h3>
  6. <p> Sīktēla paraksts... </p>
  7. </div>
  8. </li>
  9. ...
  10. </ul>

Vairāk piemēru

Izpētiet visas savas iespējas, izmantojot dažādas jums pieejamās režģa klases. Varat arī sajaukt un saskaņot dažādus izmērus.

Noklusējuma brīdinājums

Aptiniet jebkuru tekstu un izvēles atcelšanas pogu, .alertlai saņemtu pamata brīdinājuma brīdinājuma ziņojumu.

Brīdinājums! Labāk pārbaudiet sevi, jūs neizskatāties pārāk labi.
  1. <div class = "brīdinājums" >
  2. <button type = "button" class = "aizvērt" data-dismiss = "brīdinājums" > × </button>
  3. <strong> Brīdinājums! </strong> Labāk pārbaudiet sevi, jūs neizskatāties pārāk labi.
  4. </div>

Noraidīt pogas

Mobilajām pārlūkprogrammām Safari un Mobile Opera papildus data-dismiss="alert"atribūtam ir nepieciešama href="#"brīdinājumu noraidīšana, lietojot <a>tagu.

  1. <a href = "#" class = "aizvērt" data-dismiss = "brīdinājums" > × </a>

Varat arī izmantot <button>elementu ar datu atribūtu, ko esam izvēlējušies darīt saviem dokumentiem. Izmantojot <button>, jums ir jāiekļauj, type="button"pretējā gadījumā jūsu veidlapas nedrīkst iesniegt.

  1. <button type = "button" class = "aizvērt" data-dismiss = "brīdinājums" > × </button>

Noraidīt brīdinājumus, izmantojot JavaScript

Izmantojiet brīdinājumu spraudni jQuery , lai ātri un viegli noņemtu brīdinājumus.


Iespējas

Garākiem ziņojumiem palieliniet polsterējumu brīdinājuma aptinuma augšdaļā un apakšā, pievienojot .alert-block.

Brīdinājums!

Labāk pārbaudiet sevi, jūs neizskatāties pārāk labi. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

  1. <div class = "alert alert-block" >
  2. <button type = "button" class = "aizvērt" data-dismiss = "brīdinājums" > × </button>
  3. <h4> Brīdinājums! </h4>
  4. Labāk pārbaudiet sevi, jūs neesat...
  5. </div>

Kontekstuālās alternatīvas

Pievienojiet izvēles klases, lai mainītu brīdinājuma konotāciju.

Kļūda vai briesmas

Ak! Mainiet dažas lietas un mēģiniet iesniegt vēlreiz.
  1. <div class = "alert alert-error" >
  2. ...
  3. </div>

Panākumi

Labi padarīts! Jūs veiksmīgi izlasījāt šo svarīgo brīdinājuma ziņojumu.
  1. <div class = "alert alert-success" >
  2. ...
  3. </div>

Informācija

Uzmanību! Šim brīdinājumam ir jāpievērš uzmanība, taču tas nav īpaši svarīgi.
  1. <div class = "alert alert-info" >
  2. ...
  3. </div>

Piemēri un marķējums

Pamata

Noklusējuma progresa josla ar vertikālu gradientu.

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

Svītrains

Izmanto gradientu, lai radītu svītrainu efektu. Nav pieejams IE7-8.

  1. <div class = "progress progress-svītrains" >
  2. <div class = "bar" style = " platums : 20 %; " ></div>
  3. </div>

Animēts

Pievienot .active, .progress-stripedlai animētu svītras no labās uz kreiso pusi. Nav pieejams visās IE versijās.

  1. <div class = "progress progress-svītrains aktīvs" >
  2. <div class = "bar" style = " platums : 40 %; " ></div>
  3. </div>

Sakrauts

Novietojiet vairākus stieņus vienā .progress, lai tos sakrautu.

  1. <div class = "progress" >
  2. <div class = "joslas josla-veiksme" style = " platums : 35 %; " ></div>
  3. <div class = "bar joslas brīdinājums" style = " platums : 20 %; " ></div>
  4. <div class = "bīstamības josla" style = " platums : 10 %; " ></div>
  5. </div>

Iespējas

Papildu krāsas

Progresa joslās tiek izmantotas dažas no tām pašām pogu un brīdinājumu klasēm, lai nodrošinātu konsekventus stilus.

  1. <div class = "progresa progresa informācija" >
  2. <div class = "bar" style = " platums : 20 % " ></div>
  3. </div>
  4. <div class = "progress progress-success" >
  5. <div class = "bar" style = " platums : 40 % " ></div>
  6. </div>
  7. <div class = "progresa progresa brīdinājums" >
  8. <div class = "bar" style = " platums : 60 % " ></div>
  9. </div>
  10. <div class = "progresa progresa briesmas" >
  11. <div class = "bar" style = " platums : 80 % " ></div>
  12. </div>

Svītraini stieņi

Līdzīgi vienkrāsainajām krāsām, mums ir dažādas svītrainas progresa joslas.

  1. <div class = "progress progress-info progress-svītrains" >
  2. <div class = "bar" style = " platums : 20 % " ></div>
  3. </div>
  4. <div class = "progress progress-success progress-svītrains" >
  5. <div class = "bar" style = " platums : 40 % " ></div>
  6. </div>
  7. <div class = "progress progress-warning progress-striped" >
  8. <div class = "bar" style = " platums : 60 % " ></div>
  9. </div>
  10. <div class = "progresa progress-bīstams progress-svītrains" >
  11. <div class = "bar" style = " platums : 80 % " ></div>
  12. </div>

Pārlūka atbalsts

Progresa joslas izmanto CSS3 gradientus, pārejas un animācijas, lai sasniegtu visus to efektus. Šīs funkcijas netiek atbalstītas Firefox IE7-9 vai vecākās versijās.

Versijas, kas vecākas par Internet Explorer 10 un Opera 12, neatbalsta animācijas.

Abstraktie objektu stili dažāda veida komponentu veidošanai (piemēram, emuāra komentāri, tvīti utt.), kuros līdzās teksta saturam ir līdzināts attēls pa kreisi vai pa labi.

Noklusējuma piemērs

Noklusējuma multivide ļauj peldēt multivides objektu (attēlus, video, audio) pa kreisi vai pa labi no satura bloka.

64x64

Multivides virsraksts

Cras sit amet nibh libero, in 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

Multivides virsraksts

Cras sit amet nibh libero, in 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

Multivides virsraksts

Cras sit amet nibh libero, in 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" > Multivides virsraksts </h4>
  7. ...
  8.  
  9. <!-- Ligzdotas multivides objekts -->
  10. <div class = "media" >
  11. ...
  12. </div>
  13. </div>
  14. </div>

Mediju saraksts

Izmantojot nedaudz papildu marķējumu, varat izmantot multividi sarakstā (noderīgi komentāru pavedieniem vai rakstu sarakstiem).

  • 64x64

    Multivides virsraksts

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

    64x64

    Ligzdotas multivides virsraksts

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

    Ligzdotas multivides virsraksts

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

    Ligzdotas multivides virsraksts

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

    Multivides virsraksts

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

Wells

Izmantojiet aku kā vienkāršu elementa efektu, lai piešķirtu tam ieliktu efektu.

Paskaties, es esmu akā!
  1. <div class = "labi" >
  2. ...
  3. </div>

Izvēles nodarbības

Kontrolējiet polsterējumu un noapaļotus stūrus ar divām izvēles modifikatoru klasēm.

Paskaties, es esmu akā!
  1. <div class = "labi-labi liels" >
  2. ...
  3. </div>
Paskaties, es esmu akā!
  1. <div class = "labi labi-mazs" >
  2. ...
  3. </div>

Aizvērt ikonu

Izmantojiet vispārīgo aizvēršanas ikonu, lai noraidītu saturu, piemēram, modālus un brīdinājumus.

  1. <button class = "aizvērt" > × </button>

href="#"Ja vēlaties izmantot enkuru, iOS ierīcēm ir nepieciešami notikumi par klikšķi.

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

Palīgu nodarbības

Vienkāršas, koncentrētas nodarbības maziem displeja vai uzvedības uzlabojumiem.

.velk-pa kreisi

Pludiniet elementu pa kreisi

  1. klase = "velk pa kreisi"
  1. . pull - pa kreisi {
  2. pludiņš : pa kreisi ;
  3. }

.velciet pa labi

Peldiet elementu pa labi

  1. klase = "velk pa labi"
  1. . vilkt - pa labi {
  2. pludiņš : pa labi ;
  3. }

.izslēgts

Mainiet elementa krāsu uz#999

  1. klase = "izslēgts"
  1. . izslēgts {
  2. krāsa : #999;
  3. }

.noskaidrot

Notīriet floatjebkuru elementu

  1. klase = "noskaidrot"
  1. . clearfix {
  2. * tālummaiņa : 1 ;
  3. &: pirms ,
  4. &: pēc {
  5. displejs : galds ;
  6. saturs : "" ;
  7. }
  8. &: pēc {
  9. skaidrs : abi ;
  10. }
  11. }