Komponentoj

Dekduoj da reuzeblaj komponantoj konstruitaj por provizi navigacion, atentigojn, popovers kaj pli.

Ekzemploj

Du bazaj opcioj, kune kun du pli specifaj variaĵoj.

Ununura butongrupo

Envolvu serion da butonoj per .btnen .btn-group.

  1. <div class = "btn-grupo" >
  2. <button class = "btn" > Maldekstre </button>
  3. <button class = "btn" > Mezo </button>
  4. <button class = "btn" > Dekstre </button>
  5. </div>

Multoblaj butongrupoj

Kombinu arojn <div class="btn-group">en a <div class="btn-toolbar">por pli kompleksaj komponantoj.

  1. <div class = "btn-ilbreto" >
  2. <div class = "btn-grupo" >
  3. ...
  4. </div>
  5. </div>

Vertikalaj butongrupoj

Faru aron da butonoj aperi vertikale stakitaj prefere ol horizontale.

  1. <div class = "btn-grupo btn-grupo-vertikala" >
  2. ...
  3. </div>

Markobutono kaj radio-gustoj

Butongrupoj ankaŭ povas funkcii kiel radioj, kie nur unu butono povas esti aktiva, aŭ markobutonoj, kie ajna nombro da butonoj povas esti aktivaj. Rigardu la JavaScript-dokumentojn por tio.

Dropdowns en butongrupoj

Atentu!Butonoj kun falmenuoj devas esti individue envolvitaj .btn-groupene de a .btn-toolbarpor taŭga bildigo.

Superrigardo kaj ekzemploj

Uzu ajnan butonon por ekigi falmenuon metante ĝin ene de a .btn-groupkaj disponigante la taŭgan menuan markadon.

  1. <div class = "btn-grupo" >
  2. <a class = "btn dropdown-toggle" data-toggle = "menumenumo" href = "#" >
  3. Ago
  4. <span class = "karto" ></span>
  5. </a>
  6. <ul class = "falmenuo" >
  7. <!-- ligiloj al falmenuo -->
  8. </ul>
  9. </div>

Funkcias kun ĉiuj grandecoj de butonoj

Butonfalumoj funkcias je ajna grandeco: .btn-large, .btn-small, aŭ .btn-mini.

Postulas JavaScript

Butonaj falmenuoj postulas la Bootstrap falmenuman kromprogramon por funkcii.

En iuj kazoj—kiel poŝtelefono—falmenuoj etendiĝos ekster la vidfenestro. Vi devas solvi la vicigon permane aŭ per kutima JavaScript.


Dividi butonajn menuojn

Konstruante sur la butongrupoj stiloj kaj markado, ni povas facile krei dividitan butonon. Dividitaj butonoj prezentas norman agon maldekstre kaj falmenuklavon dekstre kun kontekstaj ligiloj.

  1. <div class = "btn-grupo" >
  2. <button class = "btn" > Ago </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "menumenumo" >
  4. <span class = "karto" ></span>
  5. </butono>
  6. <ul class = "falmenuo" >
  7. <!-- ligiloj al falmenuo -->
  8. </ul>
  9. </div>

Grandecoj

Uzu la kromajn butonklasojn .btn-mini, .btn-small.btn-largepor grandeco.

  1. <div class = "btn-grupo" >
  2. <button class = "btn btn-mini" > Ago </button>
  3. <button class = "btn btn-mini dropdown-toggle" data-toggle = "menumenumo" >
  4. <span class = "karto" ></span>
  5. </butono>
  6. <ul class = "falmenuo" >
  7. <!-- ligiloj al falmenuo -->
  8. </ul>
  9. </div>

Elŝutaj menuoj

Falmenuoj ankaŭ povas esti ŝanĝitaj de malsupre supren aldonante ununuran klason al la tuja gepatro de .dropdown-menu. Ĝi renversos la direkton de la .caretkaj repoziciigos la menuon mem por movi de malsupre supren anstataŭ de supre malsupren.

  1. <div class = "btn-grupo forigo" >
  2. <button class = "btn" > Dropup </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "menumenumo" >
  4. <span class = "karto" ></span>
  5. </butono>
  6. <ul class = "falmenuo" >
  7. <!-- ligiloj al falmenuo -->
  8. </ul>
  9. </div>

Norma paĝigo

Simpla paĝigo inspirita de Rdio, bonega por programoj kaj serĉrezultoj. La granda bloko estas malfacile maltrafi, facile skalebla kaj provizas grandajn klakajn areojn.

  1. <div class = "paĝigo" >
  2. <ul>
  3. <li><a href = "#" > Antaŭa </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 = "#" > Poste </a></li>
  10. </ul>
  11. </div>

Opcioj

Malfunkciigitaj kaj aktivaj ŝtatoj

Ligiloj estas agordeblaj por malsamaj cirkonstancoj. Uzu .disabledpor neklakeblaj ligiloj kaj .activepor indiki la nunan paĝon.

  1. <div class = "paĝigo" >
  2. <ul>
  3. <li class = "malŝaltita" ><a href = "#" > « </a></li>
  4. <li class = "aktiva" ><a href = "#" > 1 </a></li>
  5. ...
  6. </ul>
  7. </div>

Vi povas laŭvole interŝanĝi aktivajn aŭ malebligitajn ankrojn por interspacoj por forigi klakfunkciecon konservante celitajn stilojn.

  1. <div class = "paĝigo" >
  2. <ul>
  3. <li class = "malfunkciigita" ><span> « </ span ></ li >
  4. <li class = "aktiva" ><span> 1 </span></li>
  5. ...
  6. </ul>
  7. </div>

Grandecoj

Ĉu vi volas pli grandan aŭ pli malgrandan paĝigon? Aldonu .pagination-large, .pagination-small, aŭ .pagination-minipor pliaj grandecoj.

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

Vicigo

Aldonu unu el du laŭvolaj klasoj por ŝanĝi la vicigon de paĝigaj ligiloj: .pagination-centeredkaj .pagination-right.

  1. <div class = "paĝigo paĝigo-centrita" >
  2. ...
  3. </div>
  1. <div class = "paĝigo paĝigo-dekstra" >
  2. ...
  3. </div>

Televokilo

Rapidaj antaŭaj kaj sekvaj ligiloj por simplaj paĝigaj efektivigoj kun malpeza markado kaj stiloj. Ĝi estas bonega por simplaj retejoj kiel blogoj aŭ revuoj.

Defaŭlta ekzemplo

Defaŭlte, la paginador centras ligilojn.

  1. <ul class = "pagilo" >
  2. <li><a href = "#" > Antaŭa </a></li>
  3. <li><a href = "#" > Poste </a></li>
  4. </ul>

Vicigitaj ligiloj

Alternative, vi povas vicigi ĉiun ligon al la flankoj:

  1. <ul class = "pagilo" >
  2. <li class = "antaŭa" >
  3. <a href = "#" > Pli malnova </a>
  4. </li>
  5. <li klaso = "sekva" >
  6. <a href = "#" > Pli nova → </a>
  7. </li>
  8. </ul>

Laŭvola malfunkciigita ŝtato

Pager-ligiloj ankaŭ uzas la ĝeneralan .disabledutilecan klason de la paĝigo.

  1. <ul class = "pagilo" >
  2. <li class = "antaŭa malfunkciigita" >
  3. <a href = "#" > Pli malnova </a>
  4. </li>
  5. ...
  6. </ul>

Etikedoj

Etikedoj Markado
Defaŭlte <span class="label">Default</span>
Sukceso <span class="label label-success">Success</span>
Averto <span class="label label-warning">Warning</span>
Grava <span class="label label-important">Important</span>
Info <span class="label label-info">Info</span>
Inversa <span class="label label-inverse">Inverse</span>

Insignoj

Nomo Ekzemplo Markado
Defaŭlte 1 <span class="badge">1</span>
Sukceso 2 <span class="badge badge-success">2</span>
Averto 4 <span class="badge badge-warning">4</span>
Grava 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>

Facile faldebla

Por facila efektivigo, etikedoj kaj insignoj simple kolapsos (per la :emptyelektilo de CSS) kiam neniu enhavo ekzistas ene.

Hero-unuo

Malpeza, fleksebla komponanto por montri ŝlosilan enhavon en via retejo. Ĝi funkcias bone en merkatado kaj enhavo-pezaj retejoj.

Saluton mondo!

Ĉi tio estas simpla herounuo, simpla jumbotron-stila komponento por nomi ekstran atenton al elstara enhavo aŭ informoj.

Lernu pli

  1. <div class = "hero-unuo" >
  2. <h1> Titolo </h1>
  3. <p> Skomo </p>
  4. <p>
  5. <a klaso = "btn btn-primara btn-granda" >
  6. Lernu pli
  7. </a>
  8. </p>
  9. </div>

Paĝa kaplinio

Simpla ŝelo por h1taŭge interspacigi kaj segmenti sekciojn de enhavo sur paĝo. Ĝi povas uzi la h1defaŭltan small, elementon ankaŭ la plej multajn aliajn komponantojn (kun pliaj stiloj).

  1. <div class = "paĝo-kapo" >
  2. <h1> Ekzempla paĝokapo <small> Subteksto por kaplinio </small></h1>
  3. </div>

Defaŭltaj bildetoj

Defaŭlte, la bildetoj de Bootstrap estas dizajnitaj por montri ligitajn bildojn kun minimuma postulata markado.

Tre agordebla

Kun iom da ekstra markado, eblas aldoni ajnan specon de HTML-enhavo kiel titoloj, alineoj aŭ butonoj en bildetojn.

  • 300x200

    Bildeto-etikedo

    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.

    Ago Ago

  • 300x200

    Bildeto-etikedo

    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.

    Ago Ago

  • 300x200

    Bildeto-etikedo

    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.

    Ago Ago

Kial uzi bildetojn

Bildetoj (antaŭe .media-gridĝis v1.4) estas bonegaj por kradoj de fotoj aŭ filmetoj, bildaj serĉrezultoj, podetalaj produktoj, biletujoj kaj multe pli. Ili povas esti ligiloj aŭ statika enhavo.

Simpla, fleksebla markado

Bildeto-markado estas simpla—a ulkun ajna nombro da lielementoj estas ĉio, kio necesas. Ĝi ankaŭ estas tre fleksebla, ebligante ajnan tipon de enhavo kun nur iom pli da markado por envolvi vian enhavon.

Uzas kradkolumngrandecojn

Laste, la bildetoj-komponento uzas ekzistantajn kradsistemajn klasojn - kiel .span2.span3 —por kontrolo de bildetoj-dimensioj.

Markado

Kiel menciite antaŭe, la bezonata markado por bildetoj estas malpeza kaj simpla. Jen rigardo al la defaŭlta agordo por ligitaj bildoj :

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

Por kutima HTML-enhavo en bildetoj, la markado iomete ŝanĝiĝas. Por permesi bloknivelan enhavon ie ajn, ni interŝanĝas la <a>por <div>tia:

  1. <ul class = "bildetoj" >
  2. <li class = "span4" >
  3. <div class = "bildeto" >
  4. <img data-src = "holder.js/300x200" alt = "" >
  5. <h3> Bildeto-etikedo </h3>
  6. <p> Bildetoteksto... </p>
  7. </div>
  8. </li>
  9. ...
  10. </ul>

Pli da ekzemploj

Esploru ĉiujn viajn eblojn kun la diversaj kradaj klasoj disponeblaj al vi. Vi ankaŭ povas miksi kaj kongrui malsamajn grandecojn.

Defaŭlta atentigo

Envolvu ajnan tekston kaj laŭvolan forĵetbutonon .alertpor baza averta avertmesaĝo.

Averto! Plej bone kontrolu vin mem, vi ne aspektas tro bona.
  1. <div class = "atentigo" >
  2. <button type = "button" class = "fermi" data-dismiss = "atenti" > × </butono>
  3. <strong> Averto! </strong> Plej bone kontrolu vin mem, vi ne aspektas tro bona.
  4. </div>

Forĵeti butonojn

Poŝtelefonaj Safari kaj Mobile Opera retumiloj, krom la data-dismiss="alert"atributo, postulas href="#"por la malakcepto de atentigoj kiam vi uzas <a>etikedon.

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

Alternative, vi povas uzi <button>elementon kun la datuma atributo, kion ni elektis fari por niaj dokumentoj. Kiam vi uzas <button>, vi devas inkluzivi type="button"aŭ viaj formoj eble ne sendis.

  1. <button type = "button" class = "fermi" data-dismiss = "atenti" > × </butono>

Forĵeti atentigojn per JavaScript

Uzu la atentigojn jQuery-kromaĵon por rapida kaj facila malakcepto de atentigoj.


Opcioj

Por pli longaj mesaĝoj, pliigu la kompletigo sur la supro kaj malsupro de la atentiga envolvaĵo aldonante .alert-block.

Averto!

Plej bone kontrolu vin mem, vi ne aspektas tro bona. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

  1. <div class = "alerto-atentigo-bloko" >
  2. <button type = "button" class = "fermi" data-dismiss = "atenti" > × </butono>
  3. <h4> Averto! </h4>
  4. Plej bone kontrolu vin mem, vi ne estas...
  5. </div>

Kuntekstaj alternativoj

Aldonu laŭvolajn klasojn por ŝanĝi la signifon de atentigo.

Eraro aŭ danĝero

Ho klaku! Ŝanĝu kelkajn aferojn kaj provu sendi denove.
  1. <div class = "alerto-eraro" >
  2. ...
  3. </div>

Sukceso

Bone farita! Vi sukcese legis ĉi tiun gravan atentan mesaĝon.
  1. <div class = "alerto-atentigo-sukceso" >
  2. ...
  3. </div>

Informoj

Atentu! Ĉi tiu atentigo bezonas vian atenton, sed ĝi ne estas tre grava.
  1. <div class = "alerto-alerto-informoj" >
  2. ...
  3. </div>

Ekzemploj kaj markado

Baza

Defaŭlta progresbreto kun vertikala gradiento.

  1. <div class = "progreso" >
  2. <div class = "bar" style = " larĝo : 60 %; " ></div>
  3. </div>

Striita

Uzas gradienton por krei strian efikon. Ne havebla en IE7-8.

  1. <div class = "progreso progres-striita" >
  2. <div class = "bar" style = " larĝo : 20 %; " ></div>
  3. </div>

Vigla

Aldonu .activeal .progress-stripedpor animi la striojn dekstren al maldekstre. Ne havebla en ĉiuj versioj de IE.

  1. <div class = "progreso progres-striita aktiva" >
  2. <div class = "bar" style = " larĝo : 40 %; " ></div>
  3. </div>

Stakitaj

Metu plurajn stangojn en la saman .progresspor staki ilin.

  1. <div class = "progreso" >
  2. <div class = "bar bar-success" style = " larĝo : 35 %; " ></div>
  3. <div class = "bar bar-warning" style = " larĝo : 20 %; " ></div>
  4. <div class = "drinkejo-danĝero" style = " larĝo : 10 %; " ></div>
  5. </div>

Opcioj

Pliaj koloroj

Progresbaroj uzas iujn el la samaj butonoj kaj atentaj klasoj por konsekvencaj stiloj.

  1. <div class = "progresprogreso-informoj" >
  2. <div class = "bar" style = " larĝo : 20 % " ></div>
  3. </div>
  4. <div class = "progreso progreso-sukceso" >
  5. <div class = "bar" style = " larĝo : 40 % " ></div>
  6. </div>
  7. <div class = "progreso progreso-averto" >
  8. <div class = "bar" style = " larĝo : 60 % " ></div>
  9. </div>
  10. <div class = "progreso progreso-danĝero" >
  11. <div class = "bar" style = " larĝo : 80 % " ></div>
  12. </div>

Striitaj stangoj

Simile al la solidaj koloroj, ni havas diversajn striitajn progresstangojn.

  1. <div class = "progreso progreso-informo progreso-striita" >
  2. <div class = "bar" style = " larĝo : 20 % " ></div>
  3. </div>
  4. <div class = "progreso progreso-sukceso progreso-striita" >
  5. <div class = "bar" style = " larĝo : 40 % " ></div>
  6. </div>
  7. <div class = "progreso progreso-averto progreso-striita" >
  8. <div class = "bar" style = " larĝo : 60 % " ></div>
  9. </div>
  10. <div class = "progreso progreso-danĝero progreso-striita" >
  11. <div class = "bar" style = " larĝo : 80 % " ></div>
  12. </div>

Subteno de retumilo

Progresstangoj uzas CSS3-gradientojn, transirojn kaj kuraĝigojn por atingi ĉiujn siajn efikojn. Ĉi tiuj funkcioj ne estas subtenataj en IE7-9 aŭ pli malnovaj versioj de Firefox.

Versioj antaŭaj ol Internet Explorer 10 kaj Opera 12 ne subtenas animaciojn.

Abstraktaj objektostiloj por konstrui diversajn specojn de komponantoj (kiel blogaj komentoj, Tweets, ktp) kiuj prezentas maldekstren aŭ dekstren vicigitan bildon kune kun teksta enhavo.

Defaŭlta ekzemplo

La defaŭlta amaskomunikilaro permesas flosi amaskomunikilaron objekton (bildoj, filmetoj, aŭdio) maldekstren aŭ dekstren de enhavbloko.

64x64

Media titolo

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

Media titolo

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

Media titolo

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 = "komunikiloj" >
  2. <a class = "pull-left" href = "#" >
  3. <img class = "media-object" data-src = "holder.js/64x64" >
  4. </a>
  5. <div class = "media-korpo" >
  6. <h4 class = "media-heading" > Media titolo </h4>
  7. ...
  8.  
  9. <!-- Nestita amaskomunikila objekto -->
  10. <div class = "komunikiloj" >
  11. ...
  12. </div>
  13. </div>
  14. </div>

Listo de amaskomunikiloj

Kun iom da ekstra markado, vi povas uzi amaskomunikilaron ene de listo (utila por komentfadenoj aŭ artikoloj-listoj).

  • 64x64

    Media titolo

    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

    Nestitaj amaskomunikiloj titolo

    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

    Nestitaj amaskomunikiloj titolo

    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

    Nestitaj amaskomunikiloj titolo

    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

    Media titolo

    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 = "muld-listo" >
  2. <li class = "komunikiloj" >
  3. <a class = "pull-left" href = "#" >
  4. <img class = "media-object" data-src = "holder.js/64x64" >
  5. </a>
  6. <div class = "media-korpo" >
  7. <h4 class = "media-heading" > Media titolo </h4>
  8. ...
  9.  
  10. <!-- Nestita amaskomunikila objekto -->
  11. <div class = "komunikiloj" >
  12. ...
  13. </div>
  14. </div>
  15. </li>
  16. </ul>

Wells

Uzu la puton kiel simplan efikon al elemento por doni al ĝi enmetitan efikon.

Rigardu, mi estas en puto!
  1. <div class = "nu" >
  2. ...
  3. </div>

Laŭvolaj klasoj

Kontrolu remburaĵon kaj rondigitajn angulojn kun du laŭvolaj modifklasoj.

Rigardu, mi estas en puto!
  1. <div class = "nu bone-granda" >
  2. ...
  3. </div>
Rigardu, mi estas en puto!
  1. <div class = "bone-malgranda" >
  2. ...
  3. </div>

Fermu ikonon

Uzu la ĝeneralan fermikonon por forĵeti enhavon kiel modalojn kaj atentigojn.

  1. <button class = "fermi" > × </butono>

iOS-aparatoj postulas href="#"eventojn por klako se vi preferus uzi ankron.

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

Helpklasoj

Simplaj, fokusitaj klasoj por malgrandaj ekranaj aŭ konduttajloj.

.tiri-maldekstren

Flosu elementon maldekstre

  1. klaso = "tiri-maldekstren"
  1. . tiri - maldekstren {
  2. flosi : maldekstre ;
  3. }

.tiri-dekstren

Flosu elementon dekstre

  1. klaso = "tiri dekstren"
  1. . tiri - dekstre {
  2. flosi : dekstra ;
  3. }

.mutigita

Ŝanĝu la koloron de elemento al#999

  1. klaso = "silentita"
  1. . silentigita {
  2. koloro : #999;
  3. }

.clearfix

Forigi la floatsur iu ajn elemento

  1. klaso = "malpurigi"
  1. . clearfix {
  2. * zomi : 1 ;
  3. &: antaŭ ,
  4. &: post {
  5. montri : tablo ;
  6. enhavo : "" ;
  7. }
  8. &: post {
  9. klara : ambaux ;
  10. }
  11. }