Komponentoj

Dekoj da reuzeblaj komponantoj estas enkonstruitaj en Bootstrap por provizi navigacion, atentigojn, popovers kaj multe pli.

Butongrupoj

Uzu butongrupojn por kunigi plurajn butonojn kune kiel unu kunmetitan komponanton. Konstruu ilin per serio de <a><button>elementoj.

Plej bonaj praktikoj

Ni rekomendas la jenajn gvidliniojn por uzi butongrupojn kaj ilobretojn:

  • Ĉiam uzu la saman elementon en ununura butongrupo, <a><button>.
  • Ne miksu butonojn de malsamaj koloroj en la sama butongrupo.
  • Uzu ikonojn krom aŭ anstataŭ teksto, sed nepre inkluzivu alt- kaj titoltekston kie konvene.

Rilataj Butongrupoj kun falmenuoj (vidu malsupre) devus esti nomitaj aparte kaj ĉiam inkluzivu falmenuzon por indiki celitan konduton.

Defaŭlta ekzemplo

Jen kiel la HTML serĉas norman butongrupon konstruitan per ankraj etikedbutonoj:

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

Ilobreto ekzemplo

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>

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.

Akiru la Javaskripton »

Dropdowns en butongrupoj

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

Butonfalumoj

Ekzempla markado

Simile al butongrupo, nia markado uzas regulan butonmarkadon, sed kun manpleno da aldonoj por rafini la stilon kaj subteni la dropdown jQuery kromprogramon de Bootstrap.

  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. viaj butongrandoj al .btn-large, .btn-small, aŭ .btn-mini.

Postulas javaskripton

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 javaskripto.


Dividi butonajn menuojn

Superrigardo kaj ekzemploj

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.

Grandecoj

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

  1. <div class = "btn-grupo" >
  2. ...
  3. <ul class = "menuo-menuo tira-dekstra" >
  4. <!-- ligiloj al falmenuo -->
  5. </ul>
  6. </div>

Ekzempla markado

Ni plivastigas la normalajn butonajn falmenuojn por provizi duan butonan agon, kiu funkcias kiel aparta elŝutilo.

  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>

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>

Multicon-paĝa paĝigo

Kiam uzi

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

Ŝtataj paĝaj ligiloj

Ligiloj estas agordeblaj kaj funkcias en kelkaj cirkonstancoj kun la ĝusta klaso. .disabledpor neklakeblaj ligiloj kaj .activepor aktuala paĝo.

Fleksebla vicigo

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

Ekzemploj

La defaŭlta paĝiga komponanto estas fleksebla kaj funkcias en kelkaj varioj.

Markado

Envolvita en <div>, paĝigo estas nur <ul>.

  1. <div class = "paĝigo" >
  2. <ul>
  3. <li><a href = "#" > Antaŭa </a></li>
  4. <li class = "aktiva" >
  5. <a href = "#" > 1 </a>
  6. </li>
  7. <li><a href = "#" > 2 </a></li>
  8. <li><a href = "#" > 3 </a></li>
  9. <li><a href = "#" > 4 ​​</a></li>
  10. <li><a href = "#" > Poste </a></li>
  11. </ul>
  12. </div>

Pager Por rapidaj antaŭaj kaj sekvaj ligiloj

Pri paĝilo

La pagerkomponento estas aro de ligiloj por simplaj paĝigaj efektivigoj kun malpeza markado kaj eĉ pli malpezaj stiloj. Ĝi estas bonega por simplaj retejoj kiel blogoj aŭ revuoj.

Laŭvola malfunkciigita ŝtato

Paĝligoj ankaŭ uzas la ĝeneralan .disabledklason de la paĝigo.

Defaŭlta ekzemplo

Defaŭlte, la paginador centras ligilojn.

  1. <ul class = "pagilo" >
  2. <li>
  3. <a href = "#" > Antaŭa </a>
  4. </li>
  5. <li>
  6. <a href = "#" > Sekva </a>
  7. </li>
  8. </ul>

Vicigitaj ligiloj

Alternative, vi povas vicigi ĉiun ligilon 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>
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>

Pri

Insignoj estas malgrandaj, simplaj komponentoj por montri indikilon aŭ kalkulon de ia speco. Ili estas ofte trovitaj en retpoŝtaj klientoj kiel Mail.app aŭ en poŝtelefonaj programoj por puŝaj sciigoj.

Disponeblaj klasoj

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>

Hero-unuo

Bootstrap provizas malpezan, flekseblan komponanton nomatan heroa unuo por montri enhavon en via retejo. Ĝi funkcias bone en merkatado kaj enhavo-pezaj retejoj.

Markado

Envolvu vian enhavon divtiel:

  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>

Saluton mondo!

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

Lernu pli

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 </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.

  • 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

  • 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

Finfine, la komponanto de bildetoj uzas ekzistantajn krad-sistemklasojn—kiel .span2.span3—por kontrolo de bildetoj-dimensioj.

La 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 = "span3" >
  3. <a href = "#" class = "bildeto" >
  4. <img src = "https://placehold.it/260x180" 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 = "span3" >
  3. <div class = "bildeto" >
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. <h5> Bildeto-etikedo </h5>
  6. <p> Bildetoteksto ĝuste ĉi tie... </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.

Malpezaj defaŭltoj

Reskribita baza klaso

Kun Bootstrap 2, ni simpligis la bazan klason: .alertanstataŭ .alert-message. Ni ankaŭ reduktis la minimuman bezonatan markadon—ne <p>necesas defaŭlte, nur la ekstera <div>.

Ununura atentiga mesaĝo

Por pli daŭrema komponanto kun malpli da kodo, ni forigis la diferencigan aspekton de blokatentigoj, mesaĝojn kiuj venas kun pli da kompletigo kaj tipe pli da teksto. La klaso ankaŭ ŝanĝiĝis al .alert-block.


Bonas kun javaskripto

Bootstrap venas kun bonega jQuery-kromaĵo, kiu subtenas atentajn mesaĝojn, igante ilin forĵeti rapidan kaj facilan.

Akiru la kromprogramon »

Ekzemplaj atentigoj

Envolvu vian mesaĝon kaj laŭvolan fermikonon en div kun simpla klaso.

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

Atentu! iOS-aparatoj postulas href="#"por la malakcepto de atentigoj. Nepre inkluzivu ĝin kaj la datuman atributon por ankraj proksimaj ikonoj. 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.

Facile etendi la norman atentigmesaĝon kun du laŭvolaj klasoj: .alert-blockpor pli da kompletigo kaj tekstaj kontroloj kaj .alert-headingpor kongrua titolo.

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. <a class = "close" data-dismiss = "alerto" href = "#" > × </a>
  3. <h4 class = "alert-heading" > 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 alarmo

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 = "drinkejo"
  3. stilo = " larĝo : 60 %; " ></div>
  4. </div>

Striita

Uzas gradienton por krei strian efikon (ne IE).

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

Vigla

Prenas la striitan ekzemplon kaj animas ĝin (ne IE).

  1. <div class = "progreso progres-striita
  2. aktiva" >
  3. <div class = "drinkejo"
  4. stilo = " larĝo : 40 %; " ></div>
  5. </div>

Opcioj kaj retumila subteno

Pliaj koloroj

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

Striitaj stangoj

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

Konduto

Progresaj stangoj uzas CSS3-transirojn, do se vi dinamike ĝustigas la larĝon per Javaskripto, ĝi glate regrandigos.

Se vi uzas la .activeklason, viaj .progress-stripedprogreso-stangoj vigligos la striojn de maldekstre al dekstre.

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.

Opera kaj IE ne subtenas animaciojn nuntempe.

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>

Fermu ikonon

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

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

iOS-aparatoj postulas href="#" por klakaj eventoj se vi prefere uzas ankron.

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