Komponentai

Dešimtys daugkartinio naudojimo komponentų yra integruoti į „Bootstrap“, kad būtų galima naršyti, įspėti, iššokti ir dar daugiau.

Mygtukų grupės

Naudokite mygtukų grupes, kad sujungtumėte kelis mygtukus kaip vieną sudėtinį komponentą. <a>Sukurkite juos naudodami keletą <button>elementų.

Geriausia praktika

Rekomenduojame laikytis šių mygtukų grupių ir įrankių juostų naudojimo gairių:

  • Visada naudokite tą patį elementą vienoje mygtukų grupėje <a>arba <button>.
  • Nemaišykite skirtingų spalvų mygtukų toje pačioje mygtukų grupėje.
  • Naudokite piktogramas be teksto arba vietoj jo, bet būtinai įtraukite alternatyvųjį ir pavadinimo tekstą, jei reikia.

Susijusios mygtukų grupės su išskleidžiamaisiais meniu (žr. toliau) turėtų būti iškviečiamos atskirai ir visada turi turėti išskleidžiamąjį sąrašą, nurodantį numatomą elgesį.

Numatytasis pavyzdys

Štai kaip HTML ieško standartinės mygtukų grupės, sukurtos naudojant inkaro žymų mygtukus:

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

Įrankių juostos pavyzdys

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>

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

Gaukite javascript »

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.

Mygtukų išskleidžiamieji meniu

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

Žymėjimo pavyzdys

Panašiai kaip mygtukų grupėje, mūsų žymėjimas naudoja įprastą mygtukų žymėjimą, tačiau su keliais papildymais patobulina stilių ir palaiko „Bootstrap“ išskleidžiamąjį „jQuery“ papildinį.

  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. mygtukų dydis yra .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

Apžvalga ir pavyzdžiai

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.

Dydžiai

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

  1. <div class = "btn-group" >
  2. ...
  3. <ul class = "išskleidžiamasis meniu ištraukiamas dešinėn" >
  4. <!-- išskleidžiamojo meniu nuorodos -->
  5. </ul>
  6. </div>

Žymėjimo pavyzdys

Išplečiame įprastų mygtukų išskleidžiamuosius meniu, kad pateiktume antrą mygtuko veiksmą, kuris veikia kaip atskiras išskleidžiamojo meniu aktyviklis.

  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>

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>

Daugelio puslapių puslapių numeravimas

Kada naudoti

Itin paprastas ir minimalaus stiliaus puslapių numeravimas, įkvėptas Rdio, puikiai tinka programoms ir paieškos rezultatams. Didelis blokas yra sunkiai nepastebimas, lengvai keičiamas ir suteikia dideles paspaudimų sritis.

Nurodytos puslapių nuorodos

Nuorodos yra pritaikomos ir veikia įvairiomis aplinkybėmis su tinkama klase. .disablednespaudžiamoms nuorodoms ir .activedabartiniam puslapiui.

Lankstus derinimas

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

Pavyzdžiai

Numatytasis puslapių spausdinimo komponentas yra lankstus ir veikia įvairiais variantais.

Žymėjimas

Suvyniotas į <div>, puslapių skaičius yra tik <ul>.

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

Gaviklis Greitoms ankstesnėms ir kitoms nuorodoms

Apie pagerį

Puslapio gaviklio komponentas yra nuorodų rinkinys, skirtas paprastam puslapių puslapių spausdinimui su lengvu žymėjimu ir dar lengvesniais stiliais. Tai puikiai tinka paprastoms svetainėms, pvz., tinklaraščiams ar žurnalams.

Neprivaloma išjungta būsena

Gaviklio nuorodose taip pat naudojama bendroji .disabledpuslapių rūšiavimo klasė.

Numatytasis pavyzdys

Pagal numatytuosius nustatymus gaviklis sutelkia nuorodas.

  1. <ul class = "gaviklis" >
  2. <li>
  3. <a href = "#" > Ankstesnis </a>
  4. </li>
  5. <li>
  6. <a href = "#" > Kitas </a>
  7. </li>
  8. </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>
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>

Apie

Ženkliukai yra maži, paprasti komponentai, skirti rodyti tam tikros rūšies indikatorių ar skaičių. Jie dažniausiai randami el. pašto programose, pvz., Mail.app, arba programose mobiliesiems, skirtose tiesioginiams pranešimams.

Galimos klasės

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>

Herojaus vienetas

„Bootstrap“ yra lengvas, lankstus komponentas, vadinamas „hero unit“, skirtas jūsų svetainės turiniui rodyti. Tai gerai veikia rinkodaros ir turinio svetainėse.

Žymėjimas

Apvyniokite savo turinį divtaip:

  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>

Labas pasauli!

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

Sužinokite daugiau

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

  • 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

  • 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 – viskas, ko reikia , ulsu bet kokiu elementų skaičiumi . liJis 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.

Paž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 = "span3" >
  3. <a href = "#" class = "miniatiūra" >
  4. <img src = "https://placehold.it/260x180" 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 = "span3" >
  3. <div class = "miniatiūra" >
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. <h5> Miniatiūros etiketė </h5>
  6. <p> Miniatiūros antraštė čia... </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.

Lengvo svorio numatytieji

Perrašyta bazinė klasė

Su Bootstrap 2 supaprastinome bazinę klasę: .alertvietoj .alert-message. Taip pat sumažinome minimalų reikalingą žymėjimą – <p>pagal numatytuosius nustatymus nereikalaujama, tik išorinis <div>.

Vienas įspėjimo pranešimas

Siekdami patvaresnio komponento su mažiau kodo, pašalinome skirtingą blokavimo įspėjimų, pranešimų, kuriuose yra daugiau užpildymo ir paprastai daugiau teksto, išvaizdą. Klasė taip pat pasikeitė į .alert-block.


Puikiai dera su javascript

„Bootstrap“ yra su puikiu „jQuery“ papildiniu, kuris palaiko įspėjimo pranešimus, todėl juos galima greitai ir paprastai atmesti.

Gaukite papildinį »

Įspėjimų pavyzdžiai

Įtraukite savo pranešimą ir pasirenkamą uždarymo piktogramą į „div“ naudodami paprastą kursą.

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

Galvas aukštyn! „iOS“ įrenginiuose reikia href="#"atmesti įspėjimus. Būtinai įtraukite jį ir duomenų atributą prierašo uždarymo piktogramoms. 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.

Lengvai išplėskite standartinį įspėjimo pranešimą dviem pasirenkamomis klasėmis: .alert-blockdaugiau užpildymo ir teksto valdiklių bei .alert-headingatitinkamos antraštės.

Į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. <a class = "uždaryti" data-dismiss = "alert" href = "#" > × </a>
  3. <h4 class = "alert-heading" > Įspėjimas! </h4>
  4. Geriausia pasitikrinti save, tu nesi...
  5. </div>

Kontekstinės alternatyvos Pridėkite pasirenkamas klases, 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 = "baras"
  3. style = " plotis : 60 %; " ></div>
  4. </div>

Dryžuotas

Naudoja gradientą, kad sukurtų dryžuotą efektą (be IE).

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

Animuoti

Paima dryžuotą pavyzdį ir jį animuoja (be IE).

  1. <div class = "pažanga, progresija dryžuota
  2. aktyvus" >
  3. <div class = "baras"
  4. style = " plotis : 40 %; " ></div>
  5. </div>

Parinktys ir naršyklės palaikymas

Papildomos spalvos

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

Dryžuotos juostos

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

Elgesys

Eigos juostose naudojami CSS3 perėjimai, taigi, jei dinamiškai koreguosite plotį naudodami „Javascript“, jo dydis bus sklandžiai pakeistas.

Jei naudojate .activeklasę, .progress-stripedeigos juostos animuos juosteles iš kairės į dešinę.

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.

„Opera“ ir „IE“ šiuo metu nepalaiko animacijų.

Š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>

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 paspaudimų įvykiams reikalingas „href="#", jei verčiau naudojate prieraišą.

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