Komponentai

Dešimtys daugkartinio naudojimo komponentų, sukurtų teikti navigaciją, įspėjimus, iššokančius langus ir kt.

Pavyzdžiai

Dvi pagrindinės parinktys ir du konkretesni variantai.

Vieno mygtuko grupė

Apvyniokite mygtukų seriją su .btn..btn-group

  1. <div class = "btn-group" >
  2. <button class = "btn" > Kairėn </button>
  3. <button class = "btn" > Vidurinis </button>
  4. <button class = "btn" > Dešinėn </button>
  5. </div>

Kelios mygtukų grupės

Sujunkite rinkinius <div class="btn-group">į a <div class="btn-toolbar">, kad gautumėte sudėtingesnius komponentus.

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

Vertikalios mygtukų grupės

Padarykite, kad mygtukų rinkinys būtų išdėstytas vertikaliai, o ne horizontaliai.

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

Žymės langelis ir radijo skoniai

Mygtukų grupės taip pat gali veikti kaip radijo imtuvai, kuriuose gali būti aktyvus tik vienas mygtukas, arba žymės langeliai, kuriuose gali būti aktyvus bet koks mygtukų skaičius. Peržiūrėkite „JavaScript“ dokumentus .

Išskleidžiamieji meniu mygtukų grupėse

Galvas aukštyn!Mygtukai su išskleidžiamaisiais meniu turi būti atskirai suvynioti į juos .btn-group, kad .btn-toolbarbūtų tinkamai atvaizduojami.

Apžvalga ir pavyzdžiai

Naudokite bet kurį mygtuką, kad suaktyvintumėte išskleidžiamąjį meniu, įtraukdami jį į a .btn-groupir nurodydami tinkamą meniu žymėjimą.

  1. <div class = "btn-group" >
  2. <a class = "btn dropdown-toggle" data-toggle = "išskleidžiamasis sąrašas" href = "#" >
  3. Veiksmas
  4. <span class = "caret" ></span>
  5. </a>
  6. <ul class = "išskleidžiamasis meniu" >
  7. <!-- išskleidžiamojo meniu nuorodos -->
  8. </ul>
  9. </div>

Veikia su visų dydžių mygtukais

Išskleidžiamieji mygtukų meniu veikia bet kokio dydžio: .btn-large, .btn-small, arba .btn-mini.

Reikalingas JavaScript

Kad veiktų išskleidžiamieji mygtukų meniu, reikalingas Bootstrap išskleidžiamasis papildinys .

Kai kuriais atvejais, pvz., mobiliesiems, išskleidžiamieji meniu bus išplėsti už peržiūros srities. Lygiavimą turite išspręsti rankiniu būdu arba naudodami tinkintą „JavaScript“.


Split mygtuko išskleidžiamieji meniu

Remdamiesi mygtukų grupių stiliais ir žymėjimu, galime lengvai sukurti padalijimo mygtuką. Split mygtukai turi standartinį veiksmą kairėje ir išskleidžiamąjį perjungiklį dešinėje su kontekstinėmis nuorodomis.

  1. <div class = "btn-group" >
  2. <button class = "btn" > Veiksmas </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "išskleidžiamasis sąrašas" >
  4. <span class = "caret" ></span>
  5. </button>
  6. <ul class = "išskleidžiamasis meniu" >
  7. <!-- išskleidžiamojo meniu nuorodos -->
  8. </ul>
  9. </div>

Dydžiai

Norėdami nustatyti dydį, naudokite papildomas mygtukų klases .btn-mini, .btn-smallarba .btn-large.

  1. <div class = "btn-group" >
  2. <button class = "btn btn-mini" > Veiksmas </button>
  3. <button class = "btn btn-mini dropdown-toggle" data-toggle = "išskleidžiamasis sąrašas" >
  4. <span class = "caret" ></span>
  5. </button>
  6. <ul class = "išskleidžiamasis meniu" >
  7. <!-- išskleidžiamojo meniu nuorodos -->
  8. </ul>
  9. </div>

Išskleidžiamieji meniu

Išskleidžiamuosius meniu taip pat galima perjungti iš apačios į viršų, pridedant vieną klasę prie tiesioginio pirminio .dropdown-menu. Jis pasuks kryptį ir pakeis .caretpaties meniu padėtį, kad judėtų iš apačios į viršų, o ne iš viršaus žemyn.

  1. <div class = "btn-group dropup" >
  2. <button class = "btn" > Išmesti </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "išskleidžiamasis sąrašas" >
  4. <span class = "caret" ></span>
  5. </button>
  6. <ul class = "išskleidžiamasis meniu" >
  7. <!-- išskleidžiamojo meniu nuorodos -->
  8. </ul>
  9. </div>

Standartinis puslapių skyrimas

Paprastas puslapių rūšiavimas, įkvėptas Rdio, puikiai tinka programoms ir paieškos rezultatams. Didelis blokas yra sunkiai nepastebimas, lengvai keičiamas ir suteikia dideles paspaudimų sritis.

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

Galimybės

Išjungtos ir aktyvios būsenos

Nuorodos pritaikomos įvairioms aplinkybėms. Naudokite .disablednespaudžiamoms nuorodoms ir .activedabartiniam puslapiui nurodyti.

  1. <div class = "pagination" >
  2. <ul>
  3. <li class = "išjungta" ><a href = "#" > « </a></li>
  4. <li class = "aktyvus" ><a href = "#" > 1 </a></li>
  5. ...
  6. </ul>
  7. </div>

Galite pasirinktinai pakeisti aktyvius arba išjungtus inkarus į tarpatramius, kad pašalintumėte paspaudimo funkciją išlaikant numatytus stilius.

  1. <div class = "pagination" >
  2. <ul>
  3. <li class = "išjungta" ><span> « </span></li>
  4. <li class = "aktyvus" ><span> 1 </span></li>
  5. ...
  6. </ul>
  7. </div>

Dydžiai

Norite didesnio ar mažesnio puslapių skaičiaus? Pridėkite .pagination-large, .pagination-small, arba .pagination-minipapildomų dydžių.

  1. <div class = "puslapių skaičius-didelis" >
  2. <ul>
  3. ...
  4. </ul>
  5. </div>
  6. <div class = "pagination" >
  7. <ul>
  8. ...
  9. </ul>
  10. </div>
  11. <div class = "puslapių skaičius-mažas" >
  12. <ul>
  13. ...
  14. </ul>
  15. </div>
  16. <div class = "puslapių numeracija-mini" >
  17. <ul>
  18. ...
  19. </ul>
  20. </div>

Lygiavimas

Norėdami pakeisti puslapių nuorodų lygiavimą, pridėkite vieną iš dviejų pasirenkamų klasių: .pagination-centeredir .pagination-right.

  1. <div class = "centruotas puslapių numeravimas" >
  2. ...
  3. </div>
  1. <div class = "pagination pagenation-right" >
  2. ...
  3. </div>

Gaviklis

Greitos ankstesnės ir kitos nuorodos, skirtos paprastam puslapių rūšiavimui su lengvu žymėjimu ir stiliais. Tai puikiai tinka paprastoms svetainėms, pvz., tinklaraščiams ar žurnalams.

Numatytasis pavyzdys

Pagal numatytuosius nustatymus gaviklis sutelkia nuorodas.

  1. <ul class = "gaviklis" >
  2. <li><a href = "#" > Ankstesnis </a></li>
  3. <li><a href = "#" > Kitas </a></li>
  4. </ul>

Sulygiuotos nuorodos

Arba galite lygiuoti kiekvieną nuorodą į šonus:

  1. <ul class = "gaviklis" >
  2. <li class = "ankstesnis" >
  3. <a href = "#" > Senesnis </a>
  4. </li>
  5. <li class = "kitas" >
  6. <a href = "#" > Naujesnis → </a>
  7. </li>
  8. </ul>

Neprivaloma išjungta būsena

Gaviklio nuorodose taip pat naudojama bendroji .disablednaudingumo klasė iš puslapių.

  1. <ul class = "gaviklis" >
  2. <li class = "ankstesnis išjungtas" >
  3. <a href = "#" > Senesnis </a>
  4. </li>
  5. ...
  6. </ul>

Etiketės

Etiketės Žymėjimas
Numatytas <span class="label">Default</span>
Sėkmė <span class="label label-success">Success</span>
Įspėjimas <span class="label label-warning">Warning</span>
Svarbu <span class="label label-important">Important</span>
Informacija <span class="label label-info">Info</span>
Atvirkščiai <span class="label label-inverse">Inverse</span>

Ženkliukai

vardas Pavyzdys Žymėjimas
Numatytas 1 <span class="badge">1</span>
Sėkmė 2 <span class="badge badge-success">2</span>
Įspėjimas 4 <span class="badge badge-warning">4</span>
Svarbu 6 <span class="badge badge-important">6</span>
Informacija 8 <span class="badge badge-info">8</span>
Atvirkščiai 10 <span class="badge badge-inverse">10</span>

Lengvai sulankstomas

Kad būtų lengviau įdiegti, etiketės ir ženkleliai tiesiog sutrauks (naudojant CSS :emptyparinkiklį), kai nėra turinio.

Herojaus vienetas

Lengvas, lankstus komponentas, skirtas pagrindiniam jūsų svetainės turiniui parodyti. Tai gerai veikia rinkodaros ir turinio svetainėse.

Labas pasauli!

Tai paprastas herojus, paprastas jumbotrono stiliaus komponentas, skirtas atkreipti ypatingą dėmesį į rodomą turinį ar informaciją.

Sužinokite daugiau

  1. <div class = "didvyrio vienetas" >
  2. <h1> Antraštė </h1>
  3. <p> Žymės eilutė </p>
  4. <p>
  5. <a class = "btn btn-primary btn-large" >
  6. Sužinokite daugiau
  7. </a>
  8. </p>
  9. </div>

Puslapio antraštė

Paprastas apvalkalas, skirtas h1tinkamai atskirti ir segmentuoti turinio dalis puslapyje. Jis gali naudoti h1numatytąjį smallelementą ir daugumą kitų komponentų (su papildomais stiliais).

  1. <div class = "puslapio antraštė" >
  2. <h1> Puslapio antraštės pavyzdys <small> Antraštės potekstė </small></h1>
  3. </div>

Numatytosios miniatiūros

Pagal numatytuosius nustatymus „Bootstrap“ miniatiūros yra skirtos rodyti susietus vaizdus su minimaliu reikalingu žymėjimu.

Labai pritaikoma

Naudojant šiek tiek papildomo žymėjimo, į miniatiūras galima pridėti bet kokio HTML turinio, pvz., antraščių, pastraipų ar mygtukų.

  • 300x200

    Miniatiūros etiketė

    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.

    Veiksmas Veiksmas

  • 300x200

    Miniatiūros etiketė

    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.

    Veiksmas Veiksmas

  • 300x200

    Miniatiūros etiketė

    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.

    Veiksmas Veiksmas

Kodėl verta naudoti miniatiūras

Miniatiūros (anksčiau .media-gridiki 1.4 versijos) puikiai tinka nuotraukų ar vaizdo įrašų tinkleliams, vaizdų paieškos rezultatams, mažmeninės prekybos produktams, portfeliams ir dar daugiau. Tai gali būti nuorodos arba statinis turinys.

Paprastas, lankstus žymėjimas

Miniatiūrų žymėjimas yra paprastas – a ulsu bet kokiu skaičiumili – viskas, ko reikiaJis taip pat itin lankstus, leidžiantis bet kokio tipo turiniui, naudojant tik šiek tiek daugiau žymėjimo turinio apvyniojimui.

Naudojami tinklelio stulpelių dydžiai

Galiausiai, miniatiūrų komponentas naudoja esamas tinklelio sistemos klases, pvz., .span2arba.span3 – miniatiūrų matmenims valdyti.

Žymėjimas

Kaip minėta anksčiau, reikalingas miniatiūrų žymėjimas yra lengvas ir paprastas. Štai numatytosios susietų vaizdų sąrankos peržiūra :

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

Priskirto HTML turinio miniatiūrose žymėjimas šiek tiek pasikeičia. Norėdami leisti bloko lygio turinį bet kur, pakeičiame <a>į <div>tokį:

  1. <ul class = "miniatiūros" >
  2. <li class = "span4" >
  3. <div class = "miniatiūra" >
  4. <img data-src = "holder.js/300x200" alt = "" >
  5. <h3> Miniatiūros etiketė </h3>
  6. <p> Miniatiūros antraštė... </p>
  7. </div>
  8. </li>
  9. ...
  10. </ul>

Daugiau pavyzdžių

Ištirkite visas savo galimybes naudodamiesi įvairiomis jums prieinamomis tinklelio klasėmis. Taip pat galite maišyti ir derinti skirtingus dydžius.

Numatytasis įspėjimas

Įtraukite bet kokį tekstą ir pasirenkamą atsisakymo mygtuką, .alertkad gautumėte pagrindinį įspėjimo pranešimą.

Įspėjimas! Geriausiai patikrink save, tu neatrodai per gerai.
  1. <div class = "alert" >
  2. <button type = "button" class = "uždaryti" data-dismiss = "perspėjimas" > × </button>
  3. <strong> Įspėjimas! </strong> Geriausia pasitikrinti, ar neatrodote per gerai.
  4. </div>

Atmesti mygtukus

Mobiliosiose „Safari“ ir „Mobile Opera“ naršyklėse, be data-dismiss="alert"atributo, reikalaujama href="#"atmesti įspėjimus naudojant <a>žymą.

  1. <a href = "#" class = "uždaryti" data-dismiss = "perspėjimas" > × </a>

Arba galite naudoti <button>elementą su duomenų atributu, kurį pasirinkome savo dokumentams. Kai naudojate <button>, turite įtraukti type="button"arba jūsų formos negali būti pateiktos.

  1. <button type = "button" class = "uždaryti" data-dismiss = "perspėjimas" > × </button>

Atsisakyti įspėjimų naudojant „JavaScript“.

Norėdami greitai ir lengvai atmesti įspėjimus, naudokite įspėjimų jQuery papildinį .


Galimybės

Jei norite gauti ilgesnius pranešimus, padidinkite užpildymą įspėjimų apvalkalo viršuje ir apačioje pridėdami .alert-block.

Įspėjimas!

Geriausiai patikrink save, tu neatrodai per gerai. 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 = "uždaryti" data-dismiss = "perspėjimas" > × </button>
  3. <h4> Įspėjimas! </h4>
  4. Geriausia pasitikrinti save, tu nesi...
  5. </div>

Kontekstinės alternatyvos

Pridėkite pasirenkamų klasių, kad pakeistumėte įspėjimo konotaciją.

Klaida arba pavojus

Oi! Pakeiskite kelis dalykus ir bandykite pateikti dar kartą.
  1. <div class = "alert alert-error" >
  2. ...
  3. </div>

Sėkmė

Šauniai padirbėta! Sėkmingai perskaitėte šį svarbų įspėjimo pranešimą.
  1. <div class = "alert alert-success" >
  2. ...
  3. </div>

Informacija

Galvas aukštyn! Šis įspėjimas reikalauja jūsų dėmesio, bet jis nėra labai svarbus.
  1. <div class = "alert alert-info" >
  2. ...
  3. </div>

Pavyzdžiai ir žymėjimas

Pagrindinis

Numatytoji eigos juosta su vertikaliu gradientu.

  1. <div class = "pažanga" >
  2. <div class = "bar" style = " plotis : 60 %; " ></div>
  3. </div>

Dryžuotas

Naudoja gradientą, kad sukurtų dryžuotą efektą. Nėra IE7-8.

  1. <div class = "progreso progreso juostelės" >
  2. <div class = "bar" style = " plotis : 20 %; " ></div>
  3. </div>

Animuoti

Pridėti .activeprie .progress-striped, kad animuotų juosteles iš dešinės į kairę. Ne visose IE versijose.

  1. <div class = "progreso progreso juostelės aktyvus" >
  2. <div class = "bar" style = " plotis : 40 %; " ></div>
  3. </div>

Sukrauti

Įdėkite kelis strypus į tą patį .progress, kad juos sukrautumėte.

  1. <div class = "pažanga" >
  2. <div class = "juosta juosta-sėkmė" style = " plotis : 35 %; " ></div>
  3. <div class = "bar bar-warning" style = " plotis : 20 %; " ></div>
  4. <div class = "baras-pavojus" style = " plotis : 10 %; " ></div>
  5. </div>

Galimybės

Papildomos spalvos

Pažangos juostose naudojami tie patys mygtukai ir įspėjimų klasės, kad būtų nuoseklūs stiliai.

  1. <div class = "progress progress-info" >
  2. <div class = "bar" style = " plotis : 20 % " ></div>
  3. </div>
  4. <div class = "progreso pažanga-sėkmė" >
  5. <div class = "bar" style = " plotis : 40 % " ></div>
  6. </div>
  7. <div class = "progress progress-warning" >
  8. <div class = "bar" style = " plotis : 60 % " ></div>
  9. </div>
  10. <div class = "progreso progresas-pavojus" >
  11. <div class = "bar" style = " plotis : 80 % " ></div>
  12. </div>

Dryžuotos juostos

Panašiai kaip ir vienspalvių spalvų, turime įvairių dryžuotų eigos juostų.

  1. <div class = "progress progress-info progress-striped" >
  2. <div class = "bar" style = " plotis : 20 % " ></div>
  3. </div>
  4. <div class = "progreso pažanga-sėkmės pažanga-dryžuota" >
  5. <div class = "bar" style = " plotis : 40 % " ></div>
  6. </div>
  7. <div class = "pažangos įspėjimas apie pažangą - dryžuotas" >
  8. <div class = "bar" style = " plotis : 60 % " ></div>
  9. </div>
  10. <div class = "progreso progresas-pavojus progresas-dryžuotas" >
  11. <div class = "bar" style = " plotis : 80 % " ></div>
  12. </div>

Naršyklės palaikymas

Pažangos juostose naudojami CSS3 gradientai, perėjimai ir animacijos, kad būtų pasiekti visi jų efektai. Šios funkcijos nepalaikomos IE7-9 ar senesnėse „Firefox“ versijose.

Ankstesnės nei Internet Explorer 10 ir Opera 12 versijos nepalaiko animacijos.

Abstrakčių objektų stiliai, skirti kurti įvairių tipų komponentus (pvz., tinklaraščio komentarus, tviterius ir kt.), kuriuose kartu su tekstiniu turiniu yra kairėje arba dešinėje išlygiuotas vaizdas.

Numatytasis pavyzdys

Numatytoji laikmena leidžia perkelti medijos objektą (vaizdus, ​​vaizdo įrašą, garsą) turinio bloko kairėje arba dešinėje.

64x64

Žiniasklaidos antraštė

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

Žiniasklaidos antraštė

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

Žiniasklaidos antraštė

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" > Medijos antraštė </h4>
  7. ...
  8.  
  9. <!-- Įdėtas medijos objektas -->
  10. <div class = "media" >
  11. ...
  12. </div>
  13. </div>
  14. </div>

Žiniasklaidos sąrašas

Naudodami šiek tiek papildomo žymėjimo, galite naudoti laikmeną sąraše (naudinga komentarų temoms ar straipsnių sąrašams).

  • 64x64

    Žiniasklaidos antraštė

    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

    Įdėtos medijos antraštė

    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

    Įdėtos medijos antraštė

    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

    Įdėtos medijos antraštė

    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

    Žiniasklaidos antraštė

    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 = "medijos sąrašas" >
  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" > Medijos antraštė </h4>
  8. ...
  9.  
  10. <!-- Įdėtas medijos objektas -->
  11. <div class = "media" >
  12. ...
  13. </div>
  14. </div>
  15. </li>
  16. </ul>

Šuliniai

Naudokite šulinį kaip paprastą elemento efektą, kad suteiktumėte jam įterptinį efektą.

Žiūrėk, aš šulinyje!
  1. <div klasė = "gerai" >
  2. ...
  3. </div>

Neprivalomi užsiėmimai

Valdykite paminkštinimus ir suapvalintus kampus su dviem pasirenkamomis modifikavimo klasėmis.

Žiūrėk, aš šulinyje!
  1. <div class = "gerai gerai-didelis" >
  2. ...
  3. </div>
Žiūrėk, aš šulinyje!
  1. <div class = "gerai gerai-mažas" >
  2. ...
  3. </div>

Uždaryti piktogramą

Jei norite atsisakyti turinio, pvz., modalų ir įspėjimų, naudokite bendrąją uždarymo piktogramą.

  1. <button class = "uždaryti" > × </button>

„iOS“ įrenginiuose reikalingas href="#"paspaudimo įvykis, jei norėtumėte naudoti prieraišą.

  1. <a class = "uždaryti" href = "#" > × </a>

Pagalbinės klasės

Paprastos, tikslingos pamokos, skirtos nedideliems ekrano ar elgesio patobulinimams.

.traukite į kairę

Nuplaukite elementą į kairę

  1. klasė = "traukite į kairę"
  1. . traukti - kairėn {
  2. plūdė : kairė ;
  3. }

.traukite dešinėn

Paslinkite elementą į dešinę

  1. klasė = "traukite į dešinę"
  1. . traukti - dešinėn {
  2. plūdė : dešinė ;
  3. }

.nutildyta

Pakeiskite elemento spalvą į#999

  1. klasė = "nutildyta"
  1. . nutildytas {
  2. spalva : #999;
  3. }

.Paaiškink

Išvalykite floatbet kurį elementą

  1. klasė = "išvalyti"
  1. . clearfix {
  2. * priartinimas : 1 ;
  3. &: prieš ,
  4. &: po {
  5. ekranas : stalas ;
  6. turinys : "" ;
  7. }
  8. &: po {
  9. aišku : abu ;
  10. }
  11. }