Komponenti

Għexieren ta 'komponenti li jistgħu jerġgħu jintużaw mibnija biex jipprovdu navigazzjoni, twissijiet, popovers, u aktar.

Eżempji

Żewġ għażliet bażiċi, flimkien ma 'żewġ varjazzjonijiet aktar speċifiċi.

Grupp ta' buttuna waħda

Kebbeb sensiela ta’ buttuni .btnb’in .btn-group.

  1. <div class = "btn-group" >
  2. <button class = "btn" > Xellug </button>
  3. <button class = "btn" > Nofsani </button>
  4. <button class = "btn" > Dritt </button>
  5. </div>

Gruppi ta' buttuna multipli

Għaqqad settijiet ta ' <div class="btn-group">fi <div class="btn-toolbar">għal komponenti aktar kumplessi.

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

Gruppi ta 'buttuni vertikali

Agħmel sett ta 'buttuni jidhru f'munzelli vertikalment aktar milli orizzontalment.

  1. <div class = "btn-grupp btn-grupp-vertikali" >
  2. ...
  3. </div>

Checkbox u togħmiet tar-radju

Gruppi ta' buttuni jistgħu jaħdmu wkoll bħala radjijiet, fejn buttuna waħda biss tista' tkun attiva, jew kaxxi ta' kontroll, fejn kwalunkwe numru ta' buttuni jista' jkun attiv. Ara d-dokumenti JavaScript għal dan.

Dropdowns fi gruppi ta 'buttuni

Irjus up!Buttuni bi dropdowns għandhom ikunu mgeżwra individwalment fihom stess .btn-groupfi ħdan a .btn-toolbargħal rendering xieraq.

Ħarsa ġenerali u eżempji

Uża kwalunkwe buttuna biex tiskatta menu dropdown billi tpoġġiha fi ħdan .btn-groupu tipprovdi l-markup xieraq tal-menu.

  1. <div class = "btn-group" >
  2. <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >
  3. Azzjoni
  4. <span class = "caret" ></span>
  5. </a>
  6. <ul class = "menu dropdown" >
  7. <!-- dropdown menu links -->
  8. </ul>
  9. </div>

Jaħdem mad-daqsijiet kollha tal-buttuni

Button dropdowns jaħdmu fi kwalunkwe daqs: .btn-large, .btn-small, jew .btn-mini.

Jeħtieġ JavaScript

Id-dropdowns tal-buttuni jeħtieġu l- plugin dropdown Bootstrap biex jiffunzjona.

F'xi każijiet—bħall-mowbajl—menus dropdown se jestendu barra l-viewport. Għandek bżonn issolvi l-allinjament manwalment jew b'JavaScript personalizzat.


Dropdowns tal-buttuna maqsuma

Nibnu fuq l-istili tal-grupp tal-buttuni u l-markup, nistgħu faċilment noħolqu buttuna maqsuma. Buttuni maqsuma għandhom azzjoni standard fuq ix-xellug u dropdown toggle fuq il-lemin b'links kuntestwali.

  1. <div class = "btn-group" >
  2. <button class = "btn" > Azzjoni </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. <span class = "caret" ></span>
  5. </button>
  6. <ul class = "menu dropdown" >
  7. <!-- dropdown menu links -->
  8. </ul>
  9. </div>

Daqsijiet

Uża l-klassijiet tal-buttuni żejda .btn-mini, .btn-small, jew .btn-largegħad-daqs.

  1. <div class = "btn-group" >
  2. <button class = "btn btn-mini" > Azzjoni </button>
  3. <button class = "btn btn-mini dropdown-toggle" data-toggle = "dropdown" >
  4. <span class = "caret" ></span>
  5. </button>
  6. <ul class = "menu dropdown" >
  7. <!-- dropdown menu links -->
  8. </ul>
  9. </div>

Dropup menus

Il-menus dropdown jistgħu wkoll jinqalbu minn isfel għal fuq billi żżid klassi waħda mal-ġenitur immedjat ta' .dropdown-menu. Hija se taqleb id-direzzjoni tal- .caretu poġġi mill-ġdid il-menu innifsu biex jimxi minn isfel għal fuq minflok minn fuq għal isfel.

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

Paġinazzjoni standard

Paġinazzjoni sempliċi ispirata minn Rdio, kbira għall-apps u r-riżultati tat-tiftix. Il-blokka l-kbira hija diffiċli biex titlifha, tista 'tiġi skalata faċilment, u tipprovdi żoni ta' klikkjar kbar.

  1. <div class = "paġinazzjoni" >
  2. <ul>
  3. <li><a href = "#" > Prev </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 = "#" > Li jmiss </a></li>
  10. </ul>
  11. </div>

Għażliet

Stati b'diżabilità u attivi

Il-links huma customizable għal ċirkostanzi differenti. Uża .disabledgħal links li ma tistax tikklikkja u .activebiex tindika l-paġna attwali.

  1. <div class = "paġinazzjoni" >
  2. <ul>
  3. <li class = "disabled" ><a href = "#" > « </a></li>
  4. <li class = "attiv" ><a href = "#" > 1 </a></li>
  5. ...
  6. </ul>
  7. </div>

Tista' b'għażla tbiddel l-ankri attivi jew b'diżabilità għal spans biex tneħħi l-funzjonalità tal-ikklikkja filwaqt li żżomm l-istili maħsuba.

  1. <div class = "paġinazzjoni" >
  2. <ul>
  3. <li class = "disabled" ><span> « </span></li>
  4. <li class = "attiv" ><span> 1 </span></li>
  5. ...
  6. </ul>
  7. </div>

Daqsijiet

Fancy paginazzjoni akbar jew iżgħar? Żid .pagination-large, .pagination-small, jew .pagination-minigħal daqsijiet addizzjonali.

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

Allinjament

Żid waħda minn żewġ klassijiet fakultattivi biex tbiddel l-allinjament tar-rabtiet tal-paġnar: .pagination-centeredu .pagination-right.

  1. <div class = "pagination pagination-centred" >
  2. ...
  3. </div>
  1. <div class = "pagination pagination-right" >
  2. ...
  3. </div>

Pager

Links ta 'qabel u li jmiss ta' malajr għal implimentazzjonijiet ta 'paginazzjoni sempliċi b'markup u stili ħfief. Huwa tajjeb ħafna għal siti sempliċi bħal blogs jew rivisti.

Eżempju default

B'mod awtomatiku, il-pager jiffoka links.

  1. <ul class = "pager" >
  2. <li><a href = "#" > Preċedenti </a></li>
  3. <li><a href = "#" > Li jmiss </a></li>
  4. </ul>

Links allinjati

Inkella, tista' tallinja kull link mal-ġnub:

  1. <ul class = "pager" >
  2. <li class = "preċedenti" >
  3. <a href = "#" > Anzjani </a>
  4. </li>
  5. <li class = "li jmiss" >
  6. <a href = "#" > Aktar ġodda → </a>
  7. </li>
  8. </ul>

Stat diżabbli mhux obbligatorju

Ir-rabtiet tal-pager jużaw ukoll il- .disabledklassi ta 'utilità ġenerali mill-paġnar.

  1. <ul class = "pager" >
  2. <li class = "qabel b'diżabilità" >
  3. <a href = "#" > Anzjani </a>
  4. </li>
  5. ...
  6. </ul>

Tikketti

Tikketti Markup
Default <span class="label">Default</span>
Suċċess <span class="label label-success">Success</span>
Twissija <span class="label label-warning">Warning</span>
Importanti <span class="label label-important">Important</span>
Info <span class="label label-info">Info</span>
Inversa <span class="label label-inverse">Inverse</span>

Badges

Isem Eżempju Markup
Default 1 <span class="badge">1</span>
Suċċess 2 <span class="badge badge-success">2</span>
Twissija 4 <span class="badge badge-warning">4</span>
Importanti 6 <span class="badge badge-important">6</span>
Info 8 <span class="badge badge-info">8</span>
Inversa 10 <span class="badge badge-inverse">10</span>

Jiġġarrab faċilment

Għal implimentazzjoni faċli, it-tikketti u l-badges sempliċiment jikkollassaw (permezz tas- :emptyselettur tas-CSS) meta ma jkun hemm ebda kontenut ġewwa.

Unità eroj

Komponent ħafif u flessibbli biex juri kontenut ewlieni fuq is-sit tiegħek. Taħdem tajjeb fuq siti ta' kummerċjalizzazzjoni u kontenut tqal.

Hello dinja!

Din hija unità ta 'eroj sempliċi, komponent sempliċi ta' stil jumbotron biex tissejjaħ attenzjoni żejda għal kontenut jew informazzjoni dehru.

Itagħllem iżjed

  1. <div class = "eroj-unità" >
  2. <h1> Intestatura </h1>
  3. <p> Tagline </p>
  4. <p>
  5. <a class = "btn btn-primary btn-kbar" >
  6. Itagħllem iżjed
  7. </a>
  8. </p>
  9. </div>

Header tal-paġna

Qoxra sempliċi biex tispazja b'mod h1xieraq u tissegmenta sezzjonijiet tal-kontenut fuq paġna. Jista 'jutilizza l- element h1default small, kif ukoll il-biċċa l-kbira tal-komponenti l-oħra (bi stili addizzjonali).

  1. <div class = "paġna-header" >
  2. <h1> Eżempju ta' intestatura tal-paġna <small> Subtest għall-intestatura </small></h1>
  3. </div>

Miniatures default

B'mod awtomatiku, il-minjaturi ta' Bootstrap huma ddisinjati biex juru immaġini konnessi b'markup minimu meħtieġ.

Personalizzabbli ħafna

B'daqsxejn ta 'markup żejjed, huwa possibbli li żżid kwalunkwe tip ta' kontenut HTML bħal intestaturi, paragrafi, jew buttuni fil-minijaturi.

  • 300x200

    Tikketta miniatura

    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.

    Azzjoni Azzjoni

  • 300x200

    Tikketta miniatura

    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.

    Azzjoni Azzjoni

  • 300x200

    Tikketta miniatura

    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.

    Azzjoni Azzjoni

Għaliex tuża thumbnails

Thumbnails (qabel .media-gridsa v1.4) huma tajbin għal grilji ta 'ritratti jew vidjows, riżultati ta' tfittxija ta 'immaġni, prodotti bl-imnut, portafolli, u ħafna aktar. Jistgħu jkunu links jew kontenut statiku.

Markup sempliċi u flessibbli

Il-markup tal-minjatura huwa sempliċi—a ulbi kwalunkwe numru ta'li elementi huwa dak kollu li hu meħtieġ. Huwa wkoll super flessibbli, li jippermetti għal kull tip ta 'kontenut bi ftit aktar markup biex ikebbeb il-kontenut tiegħek.

Juża daqsijiet tal-kolonna tal-grilja

Fl-aħħar nett, il-komponent thumbnails juża klassijiet eżistenti tas-sistema tal-grilja—bħal .span2jew .span3—għall-kontroll tad-dimensjonijiet thumbnail.

Markup

Kif issemma qabel, il-markup meħtieġ għal thumbnails huwa ħafif u sempliċi. Hawn ħarsa lejn is-setup default għal immaġini konnessi :

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

Għal kontenut HTML personalizzat fil-minjaturi, il-markup jinbidel ftit. Biex nippermettu l-kontenut tal-livell tal-blokki kullimkien, niskambjaw <a>għal <div>bħal hekk:

  1. <ul class = "minjieri" >
  2. <li class = "span4" >
  3. <div class = "minjatura" >
  4. <img data-src = "holder.js/300x200" alt = "" >
  5. <h3> Tikketta miniatura </h3>
  6. <p> Caption miniatura... </p>
  7. </div>
  8. </li>
  9. ...
  10. </ul>

Aktar eżempji

Esplora l-għażliet kollha tiegħek bid-diversi klassijiet tal-grilja disponibbli għalik. Tista 'wkoll tħallat u tqabbel daqsijiet differenti.

Twissija default

Kebbeb kwalunkwe test u buttuna ta' tkeċċi fakultattiva .alertgħal messaġġ bażiku ta' twissija ta' twissija.

Twissija! L-aħjar iċċekkja lilek innifsek, m'intix qed tfittex wisq tajjeb.
  1. <div class = "twissija" >
  2. <button type = "button" class = "close" data-dismiss = "twissija" > × </button>
  3. <strong> Twissija! </strong> L-aħjar iċċekkja lilek innifsek, m'intix qed tfittex wisq tajjeb.
  4. </div>

Iċħad il-buttuni

Il-browsers Mobile Safari u Mobile Opera, minbarra l- data-dismiss="alert"attribut, jeħtieġu href="#"għat-tkeċċija ta 'twissijiet meta tuża <a>tikketta.

  1. <a href = "#" class = "close" data-dismiss = "twissija" > × </a>

Inkella, tista' tuża <button>element bl-attribut tad-dejta, li għażilna li nagħmlu għad-dokumenti tagħna. Meta tuża <button>, trid tinkludi type="button"jew il-formoli tiegħek ma jistgħux jissottomettu.

  1. <button type = "button" class = "close" data-dismiss = "twissija" > × </button>

Tiċħad it-twissijiet permezz ta' JavaScript

Uża l- plugin jQuery ta’ twissijiet għat-tkeċċija ta’ twissijiet malajr u faċli.


Għażliet

Għal messaġġi itwal, żid l-ikkuttunar fuq in-naħa ta 'fuq u t'isfel tat-tgeżwir tat-twissija billi żżid .alert-block.

Twissija!

L-aħjar iċċekkja lilek innifsek, m'intix qed tfittex wisq tajjeb. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

  1. <div class = "blokk ta' twissija" >
  2. <button type = "button" class = "close" data-dismiss = "twissija" > × </button>
  3. <h4> Twissija! </h4>
  4. L-aħjar iċċekkja lilek innifsek, m'intix...
  5. </div>

Alternattivi kuntestwali

Żid klassijiet fakultattivi biex tibdel il-konnotazzjoni ta' twissija.

Żball jew periklu

Oh snap! Ibdel ftit affarijiet u erġa' pprova ssottometti.
  1. <div class = "twissija twissija-żball" >
  2. ...
  3. </div>

Suċċess

Proset! Inti taqra b'suċċess dan il-messaġġ ta 'twissija importanti.
  1. <div class = "twissija-suċċess" >
  2. ...
  3. </div>

Informazzjoni

Irjus up!Din it-twissija teħtieġ l-attenzjoni tiegħek, iżda mhix super importanti.
  1. <div class = "twissija twissija-info" >
  2. ...
  3. </div>

Eżempji u markup

Bażiku

Barra tal-progress default bi gradjent vertikali.

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

Strixxat

Juża gradjent biex joħloq effett strixxat. Mhux disponibbli f'IE7-8.

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

Animati

Żid .activema .progress-stripedbiex janima l-istrixxi mil-lemin għax-xellug. Mhux disponibbli fil-verżjonijiet kollha ta' IE.

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

Stacked

Poġġi vireg multipli fl-istess .progressbiex munzellhom.

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

Għażliet

Kuluri addizzjonali

Il-vireg tal-progress jużaw xi wħud mill-istess buttuna u klassijiet ta 'twissija għal stili konsistenti.

  1. <div class = "progress progress-info" >
  2. <div class = "bar" style = " wisa : 20 % " ></div>
  3. </div>
  4. <div class = "progress progress-suċċess" >
  5. <div class = "bar" style = " wisa : 40 % " ></div>
  6. </div>
  7. <div class = "progress progress-twissija" >
  8. <div class = "bar" style = " wisa : 60 % " ></div>
  9. </div>
  10. <div class = "progress progress-perikolu" >
  11. <div class = "bar" style = " wisa : 80 % " ></div>
  12. </div>

Bars strixxati

Simili għall-kuluri solidi, għandna varjati strixxi progress bars.

  1. <div class = "progress progress-info progress-striped" >
  2. <div class = "bar" style = " wisa : 20 % " ></div>
  3. </div>
  4. <div class = "progress progress-suċċess progress-striped" >
  5. <div class = "bar" style = " wisa : 40 % " ></div>
  6. </div>
  7. <div class = "progress progress-twissija progress-striped" >
  8. <div class = "bar" style = " wisa : 60 % " ></div>
  9. </div>
  10. <div class = "progress progress-danger progress-striped" >
  11. <div class = "bar" style = " wisa : 80 % " ></div>
  12. </div>

Appoġġ għall-browser

Il-vireg tal-progress jużaw gradjenti, tranżizzjonijiet u animazzjonijiet CSS3 biex jiksbu l-effetti kollha tagħhom. Dawn il-karatteristiċi mhumiex appoġġjati f'IE7-9 jew verżjonijiet anzjani ta' Firefox.

Verżjonijiet preċedenti minn Internet Explorer 10 u Opera 12 ma jappoġġjawx animazzjonijiet.

Stili ta' oġġetti astratti għall-bini ta' diversi tipi ta' komponenti (bħal kummenti tal-blog, Tweets, eċċ) li fihom immaġni allinjata max-xellug jew mal-lemin flimkien ma' kontenut testwali.

Eżempju default

Il-midja awtomatika tippermetti li float oġġett tal-midja (immaġini, vidjow, awdjo) lejn ix-xellug jew il-lemin ta 'blokk tal-kontenut.

64x64

Intestatura tal-midja

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

Intestatura tal-midja

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

Intestatura tal-midja

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 = "midja" >
  2. <a class = "pull-left" href = "#" >
  3. <img class = "media-object" data-src = "holder.js/64x64" >
  4. </a>
  5. <div class = "korp tal-midja" >
  6. <h4 class = "media-heading" > Intestatura tal-midja </h4>
  7. ...
  8.  
  9. <!-- Oġġett tal-midja nested -->
  10. <div class = "midja" >
  11. ...
  12. </div>
  13. </div>
  14. </div>

Lista tal-midja

Bi ftit ta 'markup żejjed, tista' tuża l-midja ġewwa l-lista (utli għal ħjut ta 'kummenti jew listi ta' artikoli).

  • 64x64

    Intestatura tal-midja

    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

    Intestatura tal-midja nested

    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

    Intestatura tal-midja nested

    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

    Intestatura tal-midja nested

    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

    Intestatura tal-midja

    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 = "lista tal-midja" >
  2. <li class = "midja" >
  3. <a class = "pull-left" href = "#" >
  4. <img class = "media-object" data-src = "holder.js/64x64" >
  5. </a>
  6. <div class = "korp tal-midja" >
  7. <h4 class = "media-heading" > Intestatura tal-midja </h4>
  8. ...
  9.  
  10. <!-- Oġġett tal-midja nested -->
  11. <div class = "midja" >
  12. ...
  13. </div>
  14. </div>
  15. </li>
  16. </ul>

Bjar

Uża l-bir bħala effett sempliċi fuq element biex tagħtih effett inset.

Ara, jien fil-bir!
  1. <div class = "tajjeb" >
  2. ...
  3. </div>

Klassijiet fakultattivi

Ikkuttunar ta 'kontroll u kantunieri ttundjati b'żewġ klassijiet ta' modifikaturi fakultattivi.

Ara, jien fil-bir!
  1. <div class = "tajjeb sew kbir" >
  2. ...
  3. </div>
Ara, jien fil-bir!
  1. <div class = "tajjeb-żgħir" >
  2. ...
  3. </div>

Agħlaq l-ikona

Uża l-ikona ġenerika tal-qrib biex tiċħad kontenut bħal modals u twissijiet.

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

It-tagħmir tal-iOS jeħtieġu avvenimenti href="#"għall-ikklikkja jekk tippreferi tuża ankra.

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

Klassijiet tal-helper

Klassijiet sempliċi u ffukati għal wiri żgħar jew tweaks tal-imġieba.

.ġibda-xellug

Float element xellug

  1. klassi = "ġbid-xellug"
  1. . iġbed - xellug {
  2. float : xellug ;
  3. }

.pull-lemin

Float element dritt

  1. klassi = "pull-lemin"
  1. . iġbed - dritt {
  2. float : dritt ;
  3. }

.sikket

Ibdel il-kulur ta 'element għal#999

  1. klassi = "sikket"
  1. . siekta {
  2. kulur : #999;
  3. }

.clearfix

Ċara l floatfuq kwalunkwe element

  1. klassi = "clearfix"
  1. . clearfix {
  2. * zoom : 1 ;
  3. &: qabel ,
  4. &: wara {
  5. wiri : tabella ;
  6. kontenut : "" ;
  7. }
  8. &: wara {
  9. ċari : it-tnejn ;
  10. }
  11. }