Saadaolevad glüüfid

Sisaldab üle 250 glüüfi fondivormingus komplektist Glyphicon Halflings. Glyphicons Halflings pole tavaliselt tasuta saadaval, kuid nende looja on teinud need Bootstrapi jaoks tasuta kättesaadavaks. Tänutäheks palume teil võimalusel lisada Glyphiconsi lingi .

glyphicon glyphicon-sterisk
glyphicon glyphicon-plus
glyphicon glyphicon-euro
glyphicon glyphicon-eur
glyphicon glyphicon-miinus
glyphicon glyphicon-pilv
glyphicon glyphicon-ümbrik
glyphicon glyphicon-pliiats
glyphicon glyphicon-glass
glyphicon glyphicon-muusika
glyphicon glyphicon-otsing
glyphicon glyphicon-süda
glyphicon glyphicon-star
glyphicon glyphicon-star-tühi
glyphicon glyphicon-kasutaja
glyphicon glyphicon-film
glyphicon glyphicon-th-large
glyphicon glyphicon-th
glyphicon glyphicon-th-list
glyphicon glyphicon-ok
glyphicon glyphicon-eemalda
glyphicon glyphicon-sissesuum
glyphicon glyphicon-väljasuum
glyphicon glyphicon-off
glyphicon glyphicon-signaal
glyphicon glyphicon-cog
glyphicon glyphicon-trash
glyphicon glyphicon-kodu
glyphicon glyphicon-fail
glyphicon glyphicon-time
glyphicon glyphicon-tee
glyphicon glyphicon-download-alt
glyphicon glyphicon-allalaadimine
glyphicon glyphicon-upload
glyphicon glyphicon-postkasti
glyphicon glyphicon-play-ring
glyphicon glyphicon-kordus
glyphicon glyphicon-refresh
glyphicon glyphicon-list-alt
glyphicon glyphicon-lock
glyphicon glyphicon-lipp
glyphicon glyphicon-kõrvaklapid
glyphicon glyphicon-volume-off
glyphicon glyphicon-volume-down
glyphicon glyphicon-mahu suurendamine
glyphicon glyphicon-qrcode
glyphicon glyphicon-ribcode
glyphicon glyphicon-tag
glyphicon glyphicon-sildid
glyphicon glyphicon-raamat
glyphicon glyphicon-järjehoidja
glyphicon glyphicon-print
glyphicon glyphicon-kaamera
glyphicon glyphicon-font
glyphicon glyphicon-paks
glyphicon glyphicon-kaldkiri
glyphicon glyphicon-text-height
glyphicon glyphicon-text-width
glyphicon glyphicon-align-left
glyphicon glyphicon-align-center
glyphicon glyphicon-align-right
glyphicon glyphicon-align-justify
glyphicon glyphicon-list
glyphicon glyphicon-indent-left
glyphicon glyphicon-indent-right
glyphicon glyphicon-facetime-video
glyphicon glyphicon-pilt
glyphicon glyphicon-map-marker
glyphicon glyphicon-reguleeri
glyphicon glyphicon-tint
glyphicon glyphicon-redigeeri
glyphicon glyphicon-osa
glyphicon glyphicon-check
glyphicon glyphicon-liikuma
glyphicon glyphicon-samm-tagasi
glyphicon glyphicon-kiire-tagasi
glyphicon glyphicon-tagurpidi
glyphicon glyphicon-play
glyphicon glyphicon-paus
glyphicon glyphicon-stopp
glyphicon glyphicon-edasi
glyphicon glyphicon-kerimine edasi
glyphicon glyphicon-samm-edasi
glyphicon glyphicon-eject
glyphicon glyphicon-chevron-left
glyphicon glyphicon-chevron-right
glyphicon glyphicon-pluss-märk
glyphicon glyphicon-miinus-märk
glyphicon glyphicon-eemalda-märk
glyphicon glyphicon-ok-sign
glyphicon glyphicon-küsimus-märk
glyphicon glyphicon-info-sign
glyphicon glyphicon-ekraanipilt
glyphicon glyphicon-eemalda-ring
glyphicon glyphicon-ok-ring
glyphicon glyphicon-ban-circle
glyphicon glyphicon-nool-vasak
glyphicon glyphicon-nool-paremale
glyphicon glyphicon-nool-üles
glyphicon glyphicon-nool-alla
glyphicon glyphicon-share-alt
glyphicon glyphicon-resize-full
glyphicon glyphicon-resize-small
glyphicon glyphicon-hüüumärk
glyphicon glyphicon-kingitus
glyphicon glyphicon-leht
glyphicon glyphicon-fire
glyphicon glyphicon-eye-avatud
glyphicon glyphicon-silma-sulge
glyphicon glyphicon-hoiatusmärk
glyphicon glyphicon-tasand
glyphicon glyphicon-kalender
glyphicon glyphicon-juhuslik
glyphicon glyphicon-kommentaar
glyphicon glyphicon-magnet
glyphicon glyphicon-chevron-up
glyphicon glyphicon-chevron-down
glyphicon glyphicon-retweet
glyphicon glyphicon-ostukäru
glyphicon glyphicon-kaust-sulge
glyphicon glyphicon-kaust-avatud
glyphicon glyphicon-resize-vertikaalne
glyphicon glyphicon-resize-horizontal
glyphicon glyphicon-hdd
glyphicon glyphicon-bullhorn
glyphicon glyphicon-bell
glyphicon glyphicon-sertifikaat
glyphicon glyphicon-thumbs-up
glyphicon glyphicon-thumbs-down
glyphicon glyphicon-käsi-parem
glyphicon glyphicon-käsi-vasak
glyphicon glyphicon-käsi üles
glyphicon glyphicon-käsi-alla
glyphicon glyphicon-ring-nool-paremale
glyphicon glyphicon-ring-nool-vasak
glyphicon glyphicon-ring-nool-üles
glyphicon glyphicon-ring-nool-alla
glyphicon glyphicon-globe
glyphicon glyphicon-mutrivõti
glyphicon glyphicon-ülesanded
glyphicon glyphicon-filter
glyphicon glyphicon-portfell
glyphicon glyphicon-täisekraan
glyphicon glyphicon-armatuurlaud
glyphicon glyphicon-kirjaklamber
glyphicon glyphicon-süda-tühi
glyphicon glyphicon-link
glyphicon glyphicon-phone
glyphicon glyphicon-pushpin
glyphicon glyphicon-usd
glyphicon glyphicon-gbp
glyphicon glyphicon-sort
glyphicon glyphicon-sort-by-fabet
glyphicon glyphicon-sort-by-phabet-alt
glyphicon glyphicon-sort-by-order
glyphicon glyphicon-sort-by-order-alt
glyphicon glyphicon-sort-by-atribuudid
glyphicon glyphicon-sort-by-attributes-alt
glyphicon glyphicon-märkimata
glyphicon glyphicon-laienda
glyphicon glyphicon-colapse-down
glyphicon glyphicon-kokkuvarisemine
glyphicon glyphicon-log-in
glyphicon glyphicon-flash
glyphicon glyphicon-log-out
glyphicon glyphicon-uus-aken
glyphicon glyphicon-rekord
glyphicon glyphicon-save
glyphicon glyphicon-avatud
glyphicon glyphicon-salvestatud
glyphicon glyphicon-import
glyphicon glyphicon-export
glyphicon glyphicon-saada
glyphicon glyphicon-floppy-disk
glyphicon glyphicon-floppy-salvestatud
glyphicon glyphicon-floppy-eemalda
glyphicon glyphicon-floppy-save
glyphicon glyphicon-floppy-avatud
glyphicon glyphicon-krediitkaart
glyphicon glyphicon-transfer
glyphicon glyphicon-söögiriistad
glyphicon glyphicon-header
glyphicon glyphicon-tihendatud
glyphicon glyphicon-kõrvaklapp
glyphicon glyphicon-phone-alt
glyphicon glyphicon-torn
glyphicon glyphicon-stats
glyphicon glyphicon-sd-video
glyphicon glyphicon-hd-video
glyphicon glyphicon-subtiitrid
glyphicon glyphicon-heli-stereo
glyphicon glyphicon-sound-dolby
glyphicon glyphicon-sound-5-1
glyphicon glyphicon-sound-6-1
glyphicon glyphicon-sound-7-1
glyphicon glyphicon-copyright-mark
glyphicon glyphicon-registration-mark
glyphicon glyphicon-pilve allalaadimine
glyphicon glyphicon-pilve üleslaadimine
glyphicon glyphicon-puu-okaspuu
glyphicon glyphicon-puu-lehtpuu
glyphicon glyphicon-cd
glyphicon glyphicon-save-file
glyphicon glyphicon-ava-fail
glyphicon glyphicon-level-up
glyphicon glyphicon-koopia
glyphicon glyphicon-pasta
glyphicon glyphicon-alert
glyphicon glyphicon-ekvalaiser
glyphicon glyphicon-kuningas
glyphicon glyphicon-kuninganna
glyphicon glyphicon-ettur
glyphicon glyphicon-piiskop
glyphicon glyphicon-rüütel
glyphicon glyphicon-beebi-valem
glyphicon glyphicon-telk
glyphicon glyphicon-tahvel
glyphicon glyphicon-voodi
glyphicon glyphicon-õun
glyphicon glyphicon-kustutus
glyphicon glyphicon-liivakell
glyphicon glyphicon-lamp
glyphicon glyphicon-dublikaat
glyphicon glyphicon-piggy-pank
glyphicon glyphicon-käärid
glyphicon glyphicon-bitcoin
glyphicon glyphicon-btc
glyphicon glyphicon-xbt
glyphicon glyphicon-jeen
glyphicon glyphicon-jpy
glyphicon glyphicon-rubla
glyphicon glyphicon-rub
glyphicon glyphicon-skaala
glyphicon glyphicon-ice-lolly
glyphicon glyphicon-ice-lolly-maitses
glyphicon glyphicon-haridus
glyphicon glyphicon-option-horizontal
glyphicon glyphicon-option-vertikaalne
glyphicon glyphicon-menu-hamburger
glyphicon glyphicon-modal-window
glyphicon glyphicon-õli
glyphicon glyphicon-grain
glyphicon glyphicon-päikeseprillid
glyphicon glyphicon-text-size
glyphicon glyphicon-text-color
glyphicon glyphicon-text-background
glyphicon glyphicon-object-align-top
glyphicon glyphicon-object-align-bottom
glyphicon glyphicon-object-align-horizontal
glyphicon glyphicon-object-align-left
glyphicon glyphicon-object-align-vertikaalne
glyphicon glyphicon-object-align-right
glyphicon glyphicon-kolmnurk-parem
glyphicon glyphicon-kolmnurk-vasak
glyphicon glyphicon-triangle-bottom
glyphicon glyphicon-kolmnurk-top
glyphicon glyphicon-konsool
glyphicon glyphicon-superscript
glyphicon glyphicon-alaindeks
glyphicon glyphicon-menu-left
glyphicon glyphicon-menu-right
glyphicon glyphicon-menu-down
glyphicon glyphicon-menüü-up

Kuidas kasutada

Toimivuse huvides nõuavad kõik ikoonid põhiklassi ja individuaalset ikooniklassi. Kasutamiseks asetage järgmine kood peaaegu kõikjale. Õige polsterduse jaoks jätke ikooni ja teksti vahele kindlasti tühik.

Ärge segage teiste komponentidega

Ikooniklasse ei saa otse teiste komponentidega kombineerida. Neid ei tohiks kasutada koos teiste sama elemendi klassidega. Selle asemel lisage pesastatud <span>ja rakendage ikooniklassid <span>.

Kasutamiseks ainult tühjadel elementidel

Ikooniklasse tuleks kasutada ainult elementide puhul, mis ei sisalda tekstisisu ja millel pole alamelemente.

Ikooni fondi asukoha muutmine

Bootstrap eeldab, et ikoonifondifailid asuvad ../fonts/kompileeritud CSS-failide suhtes kataloogis. Nende fondifailide teisaldamine või ümbernimetamine tähendab CSS-i värskendamist ühel kolmest viisist.

Muutke allika @icon-font-pathja/või @icon-font-namemuutujaid vähem faile.
Kasutage vähem kompilaatori pakutavat suhteliste URL-ide valikut .
Muutke url()kompileeritud CSS-i teid.

Kasutage mis tahes valikut, mis teie konkreetsele arendusseadistusele kõige paremini sobib.

Ligipääsetavad ikoonid

Abitehnoloogiate kaasaegsed versioonid teatavad CSS-i loodud sisust ja konkreetsetest Unicode'i tähemärkidest. Et vältida soovimatut ja segadust tekitavat väljundit ekraanilugejates (eriti kui ikoone kasutatakse ainult kaunistamiseks), peidame need aria-hidden="true"atribuudiga.

Kui kasutate ikooni tähenduse edastamiseks (mitte ainult dekoratiivse elemendina), veenduge, et see tähendus edastataks ka abitehnoloogiatele – näiteks lisage .sr-onlyklassiga visuaalselt peidetud lisasisu.

Kui loote juhtelemente ilma muu tekstita (nt <button>ainult ikooni sisaldav), peaksite juhtelemendi eesmärgi tuvastamiseks alati pakkuma alternatiivset sisu, et see oleks abitehnoloogiate kasutajatele mõttekas. Sel juhul saate lisada aria-labelatribuudi juhtelemendile endale.

<span class="glyphicon glyphicon-search" aria-hidden="true"></span>

Näited

Kasutage neid nuppudes, tööriistariba nupurühmades, navigeerimiseks või lisatud vormi sisenditeks.

<button type="button" class="btn btn-default" aria-label="Left Align">
  <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>

<button type="button" class="btn btn-default btn-lg">
  <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>

Hoiatuses kasutatav ikoon, mis annab märku , et tegemist on veateatega, koos .sr-onlylisatekstiga, mis edastab selle vihje abitehnoloogiate kasutajatele.

Sisestage kehtiv emaili aadress

<div class="alert alert-danger" role="alert">
  <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
  <span class="sr-only">Error:</span>
  Enter a valid email address
</div>

Lülitav kontekstimenüü linkide loendite kuvamiseks. Interaktiivseks tehtud rippmenüü JavaScripti pistikprogrammiga .

Näide

Pakkige rippmenüü päästik ja rippmenüü sisse .dropdownvõi muusse elemendisse, mis deklareerib position: relative;. Seejärel lisage menüü HTML.

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Rippmenüüd saab muuta nii, et need laieneksid ülespoole (mitte allapoole), lisades .dropupneed vanemale.

<div class="dropup">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropup
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Joondamine

Vaikimisi positsioneeritakse rippmenüü automaatselt 100% ülaosast ja vanema vasakust servast. Rippmenüü lisamine paremale joondamiseks .dropdown-menu-right..dropdown-menu

<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
  ...
</ul>

Päised

Lisage päis mis tahes rippmenüü tegevuste jaotistele.

<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
  ...
  <li class="dropdown-header">Dropdown header</li>
  ...
</ul>

Jagaja

Lisage rippmenüüs eraldaja linkide seeriate eraldamiseks.

<ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">
  ...
  <li role="separator" class="divider"></li>
  ...
</ul>

Keelatud menüüelemendid

Lingi keelamiseks lisage rippmenüüsse .disableda .<li>

<ul class="dropdown-menu" aria-labelledby="dropdownMenu4">
  <li><a href="#">Regular link</a></li>
  <li class="disabled"><a href="#">Disabled link</a></li>
  <li><a href="#">Another link</a></li>
</ul>

Grupeerige rida nuppe koos nupurühmaga ühele reale. Lisage valikuline JavaScripti raadio ja märkeruudu stiili käitumine meie nuppude pistikprogrammiga .

Nupurühmade tööriistavihjed ja hüpikaknad nõuavad spetsiaalset seadistust

Kui kasutate tööriistavihjeid või hüpikaknaid elemendi elementide puhul .btn-group, peate määrama valiku container: 'body', et vältida soovimatuid kõrvalmõjusid (nt elemendi laiemaks muutumist ja/või ümarate nurkade kaotamist kohtspikri või hüpikakna käivitamisel).

Veenduge `role`, et see on õige ja lisage silt

Selleks, et abitehnoloogiad (nt ekraanilugejad) näitaksid, et rida nuppe on rühmitatud, tuleb esitada sobiv roleatribuut. Nupurühmade puhul oleks see role="group", samas kui tööriistaribadel peaks olema role="toolbar".

Üks erand on rühmad , mis sisaldavad ainult ühte juhtelementi (nt elementidega joondatud<button> nupurühmad) või rippmenüüd.

Lisaks tuleks rühmadele ja tööriistaribadele anda selge silt, kuna enamik abitehnoloogiaid ei teata neid muidu, hoolimata õige roleatribuudi olemasolust. Siin toodud näidetes kasutame , kuid kasutada võib ka aria-labelselliseid alternatiive nagu .aria-labelledby

Põhiline näide

Pakkige rida nuppe .btnsisse .btn-group.

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>

Keerulisemate komponentide jaoks ühendage komplektid <div class="btn-group">a-ks .<div class="btn-toolbar">

<div class="btn-toolbar" role="toolbar" aria-label="...">
  <div class="btn-group" role="group" aria-label="...">...</div>
  <div class="btn-group" role="group" aria-label="...">...</div>
  <div class="btn-group" role="group" aria-label="...">...</div>
</div>

Suuruse määramine

Selle asemel, et rakendada nuppude suuruse klasse rühma igale nupule, lisage lihtsalt igale nupule .btn-group-*, .btn-groupsealhulgas mitme rühma pesastamisel.

<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-xs" role="group" aria-label="...">...</div>

Pesitsemine

Asetage .btn-groupteise sisse, .btn-groupkui soovite rippmenüüd segada mitmete nuppudega.

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">1</button>
  <button type="button" class="btn btn-default">2</button>

  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">Dropdown link</a></li>
      <li><a href="#">Dropdown link</a></li>
    </ul>
  </div>
</div>

Vertikaalne variatsioon

Muutke nuppude komplekt vertikaalselt virnastatud, mitte horisontaalselt. Jagamisnupu rippmenüüd siin ei toetata.

<div class="btn-group-vertical" role="group" aria-label="...">
  ...
</div>

Põhjendatud nupurühmad

Laske nuppude rühm võrdse suurusega venitada, et see kataks kogu vanema laiuse. Töötab ka nupurühmas olevate nuppude rippmenüüdega.

Piiride käsitlemine

Nuppude õigustamiseks kasutatava spetsiifilise HTML-i ja CSS-i tõttu (nimelt display: table-cell), on nendevahelised piirid kahekordistunud. Tavalistes margin-left: -1pxnupurühmades kasutatakse ääriste virnastamiseks, mitte eemaldamiseks. Siiski marginei tööta koos display: table-cell. Selle tulemusena, sõltuvalt teie Bootstrapi kohandustest, võite soovida äärised eemaldada või uuesti värvida.

IE8 ja piirid

Internet Explorer 8 ei renderda joondatud nupurühma nuppude ääriseid, olenemata sellest, kas see on sisse lülitatud <a>või <button>elemendid. Sellest mööda saamiseks mähkige iga nupp teise .btn-group.

Lisateabe saamiseks vaadake #12476 .

Koos `<a>`elementidega

Lihtsalt mähkige rida .btns-i .btn-group.btn-group-justified.

Vasakule Keskmine Õige

Vasakule Keskmine

<div class="btn-group btn-group-justified" role="group" aria-label="...">
  ...
</div>

Nuppudena toimivad lingid

Kui <a>elemente kasutatakse nuppudena toimimiseks – käivitavad lehesisesed funktsioonid, mitte ei liigu praegusel lehel teisele dokumendile või jaotisele –, tuleks neile anda ka sobiv role="button".

Koos `<button>`elementidega

Elementidega joondatud nupurühmade kasutamiseks <button>peate mähkima iga nupu nupurühma . Enamik brausereid ei rakenda meie CSS-i õigesti <button>elementide põhjendamiseks, kuid kuna toetame nuppude rippmenüüd, saame sellest mööda minna.

<div class="btn-group btn-group-justified" role="group" aria-label="...">
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Left</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Middle</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Right</button>
  </div>
</div>

Kasutage mis tahes nuppu rippmenüü käivitamiseks, asetades selle a -sse .btn-groupja esitades õige menüümärgistuse.

Plugina sõltuvus

Nuppude rippmenüüde jaoks on vaja, et teie Bootstrapi versioonile oleks kaasatud rippmenüü pistikprogramm .

Ühe nupu rippmenüüd

Muutke nupp mõne põhilise märgistuse muudatusega rippmenüü lülitiks.

<!-- Single button -->
<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Jagamisnupu rippmenüüd

Samamoodi looge jagatud nuppude rippmenüüd samade märgistusmuudatustega, ainult eraldi nupuga.

<!-- Split button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Suuruse määramine

Nuppude rippmenüüd töötavad igas suuruses nuppudega.

<!-- Large button group -->
<div class="btn-group">
  <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Large button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

<!-- Small button group -->
<div class="btn-group">
  <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Small button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

<!-- Extra small button group -->
<div class="btn-group">
  <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Extra small button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

Dropup variatsioon

Käivitage rippmenüüd elementide kohal, lisades .dropupneed vanemale.

<div class="btn-group dropup">
  <button type="button" class="btn btn-default">Dropup</button>
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

Laiendage vormi juhtelemente, lisades teksti või nupud mis tahes tekstipõhise elemendi ette, järele või mõlemale küljele <input>. Kasutage .input-groupkoos .input-group-addonvõi .input-group-btnelementide ette- või lisamiseks ühele .form-control.

Ainult tekstiline `<input>`s

Vältige <select>siin elementide kasutamist, kuna neid ei saa WebKiti brauserites täielikult kujundada.

Vältige <textarea>siin elementide kasutamist, kuna nende rowsatribuuti ei peeta mõnel juhul arvesse.

Sisestusrühmade tööriistavihjed ja hüpikaknad nõuavad spetsiaalset seadistust

Kui kasutate tööriistavihjeid või hüpikaknaid elemendi elementide puhul .input-group, peate määrama valiku container: 'body', et vältida soovimatuid kõrvalmõjusid (nt elemendi laiemaks muutumist ja/või ümarate nurkade kaotamist, kui tööriistaspikker või hüpikakna käivitatakse).

Ärge segage teiste komponentidega

Ärge segage vormirühmi ega ruudustiku veergude klasse otse sisendrühmadega. Selle asemel pesastage sisendrühm vormirühma või ruudustikuga seotud elemendi sisse.

Lisage alati sildid

Ekraanilugejatel on teie vormidega probleeme, kui te ei lisa igale sisendile silti. Nende sisendrühmade puhul veenduge, et kõik täiendavad sildid või funktsioonid edastatakse abitehnoloogiatele.

Täpne kasutatav tehnika (nähtavad <label>elemendid, klassi <label>abil peidetud elemendid või atribuudi , , , või atribuudi kasutamine) ja see, millist lisateavet tuleb edastada, sõltub sellest, millist liidese vidinat te rakendate. Selle jaotise näited pakuvad mõningaid soovitatud juhtumipõhiseid lähenemisviise..sr-onlyaria-labelaria-labelledbyaria-describedbytitleplaceholder

Põhiline näide

Asetage üks lisandmoodul või nupp sisendi mõlemale küljele. Võite selle asetada ka sisendi mõlemale küljele.

Me ei toeta mitut lisandmoodulit ( .input-group-addonvõi .input-group-btn) ühel küljel.

Me ei toeta ühes sisendrühmas mitut vormijuhtelementi.

<div class="input-group">
  <span class="input-group-addon" id="basic-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>

<div class="input-group">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
  <span class="input-group-addon" id="basic-addon2">@example.com</span>
</div>

<div class="input-group">
  <span class="input-group-addon">$</span>
  <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
  <span class="input-group-addon">.00</span>
</div>

<label for="basic-url">Your vanity URL</label>
<div class="input-group">
  <span class="input-group-addon" id="basic-addon3">https://example.com/users/</span>
  <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>

Suuruse määramine

Lisage suhtelised vormi suuruse klassid .input-groupiseendale ja sisu suurust muudetakse automaatselt – pole vaja korrata iga elemendi vormi juhtelementide suurusklasse.

<div class="input-group input-group-lg">
  <span class="input-group-addon" id="sizing-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon1">
</div>

<div class="input-group">
  <span class="input-group-addon" id="sizing-addon2">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon2">
</div>

<div class="input-group input-group-sm">
  <span class="input-group-addon" id="sizing-addon3">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon3">
</div>

Märkeruudud ja raadio lisad

Asetage teksti asemel sisestusrühma lisandmoodulisse mis tahes märkeruut või raadiovalik.

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="checkbox" aria-label="...">
      </span>
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="radio" aria-label="...">
      </span>
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

Nuppude lisad

Sisestusrühmade nupud on veidi erinevad ja nõuavad ühte lisataset pesastamist. Selle asemel .input-group-addonpeate .input-group-btnnuppude mähkimiseks kasutama . See on vajalik brauseri vaikestiilide tõttu, mida ei saa alistada.

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
      <input type="text" class="form-control" placeholder="Search for...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Search for...">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

Rippmenüüdega nupud

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-group -->
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" aria-label="...">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
        <ul class="dropdown-menu dropdown-menu-right">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-group -->
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

Segmenteeritud nupud

<div class="input-group">
  <div class="input-group-btn">
    <!-- Button and dropdown menu -->
  </div>
  <input type="text" class="form-control" aria-label="...">
</div>

<div class="input-group">
  <input type="text" class="form-control" aria-label="...">
  <div class="input-group-btn">
    <!-- Button and dropdown menu -->
  </div>
</div>

Mitu nuppu

Kuigi igal küljel saab olla ainult üks lisandmoodul, võib ühel küljel olla mitu nuppu .input-group-btn.

<div class="input-group">
  <div class="input-group-btn">
    <!-- Buttons -->
  </div>
  <input type="text" class="form-control" aria-label="...">
</div>

<div class="input-group">
  <input type="text" class="form-control" aria-label="...">
  <div class="input-group-btn">
    <!-- Buttons -->
  </div>
</div>

Bootstrapis saadaolevatel navigeerimisseadmetel on jagatud märgistus, alustades baasklassist .nav, ja jagatud olekud. Iga stiili vahel vahetamiseks vahetage modifikaatoriklasse.

Vahekaartide paneelide navigeerimisfunktsioonide kasutamiseks on vaja JavaScripti vahekaartide pistikprogrammi

Vahekaartide aladega vahekaartide puhul peate kasutama vahekaartide JavaScripti pistikprogrammi . Märgistus nõuab ka täiendavaid roleja ARIA atribuute – lisateabe saamiseks vaadake pistikprogrammi märgistuse näidet .

Muutke navigeerimiseks kasutatavad navid juurdepääsetavaks

Kui kasutate navigeerimisriba pakkumiseks navigeerimisseadmeid, lisage kindlasti role="navigation"kõige loogilisemasse emakonteinerisse <ul>või mähkige <nav>element kogu navigeerimisriba ümber. Ärge lisage rolli <ul>iseendale, kuna see takistab abitehnoloogiate poolt selle tegeliku loendina kuulutamist.

Vahekaardid

Pange tähele, et .nav-tabsklass nõuab .navbaasklassi.

<ul class="nav nav-tabs">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

Tabletid

Võtke sama HTML, kuid kasutage .nav-pillsselle asemel:

<ul class="nav nav-pills">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

Pillid on ka vertikaalselt virnastatavad. Lihtsalt lisage .nav-stacked.

<ul class="nav nav-pills nav-stacked">
  ...
</ul>

Põhjendatud

Saate hõlpsasti muuta vahelehed või pillid sama laiusteks kui 768 pikslit laiematel ekraanidel, kasutades .nav-justified. Väiksematel ekraanidel on navigeerimislingid virnastatud.

Joondatud navigeerimisriba navigeerimislinke praegu ei toetata.

Safari ja reageerivad õigustatud navid

Alates versioonist 9.1.2 ilmneb Safaris viga, mille korral brauseri horisontaalne suuruse muutmine põhjustab õigustatud navigeerimisel renderdusvigu, mis värskendamisel kustutatakse. Seda viga näidatakse ka õigustatud navigeerimisnäites .

<ul class="nav nav-tabs nav-justified">
  ...
</ul>
<ul class="nav nav-pills nav-justified">
  ...
</ul>

Keelatud lingid

Mis tahes navigeerimiskomponendi (vahekaardid või pillid) jaoks lisage .disabledhallide linkide ja hõljutusefektideta .

Lingi funktsionaalsust ei mõjutata

See klass muudab ainult <a>välimust, mitte selle funktsionaalsust. Kasutage siin linkide keelamiseks kohandatud JavaScripti.

<ul class="nav nav-pills">
  ...
  <li role="presentation" class="disabled"><a href="#">Disabled link</a></li>
  ...
</ul>

Rippmenüüde kasutamine

Lisage rippmenüüd väikese täiendava HTML-i ja JavaScripti pistikprogrammiga .

Rippmenüüdega vahelehed

<ul class="nav nav-tabs">
  ...
  <li role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
  ...
</ul>

Rippmenüüdega pillid

<ul class="nav nav-pills">
  ...
  <li role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
  ...
</ul>

Navigeerimisribad on reageerivad metakomponendid, mis toimivad teie rakenduse või saidi navigeerimispäistena. Mobiilivaadetes hakkavad need ahendama (ja neid saab ümber lülitada) ja muutuvad horisontaalseks, kui saadaoleva vaateava laius suureneb.

Joondatud navigeerimisriba navigeerimislinke praegu ei toetata.

Ülevoolav sisu

Kuna Bootstrap ei tea, kui palju ruumi teie navigeerimisriba sisu vajab, võib teil tekkida probleeme sisu teisele reale mähkimisel. Selle lahendamiseks saate teha järgmist.

Vähendage navigeerimisriba üksuste hulka või laiust.
Peida teatud navigeerimisriba üksused teatud ekraanisuurustel tundlike utiliidiklasside abil .
Muutke punkti, kus navigeerimisriba lülitub ahendatud ja horisontaalrežiimi vahel. Kohandage @grid-float-breakpointmuutujat või lisage oma meediumipäring.

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

Asendage navigeerimisriba bränd oma pildiga, vahetades teksti <img>. Kuna sellel .navbar-brandon oma polsterdus ja kõrgus, peate võib-olla mõne CSS-i alistama, sõltuvalt teie pildist.

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <img alt="Brand" src="...">
      </a>
    </div>
  </div>
</nav>

Asetage vormi sisu .navbar-formõigeks vertikaalseks joondamiseks ja ahendatud käitumiseks kitsastes vaateavades. Kasutage joondusvalikuid, et otsustada, kus see navigeerimisriba sisus asub.

.navbar-formTeadmiseks jagab suurt osa oma koodist mixini .form-inlinekaudu. Mõned vormi juhtelemendid, nagu sisestusrühmad, võivad vajada fikseeritud laiusi, et neid navigeerimisribal õigesti kuvada.

<form class="navbar-form navbar-left" role="search">
  <div class="form-group">
    <input type="text" class="form-control" placeholder="Search">
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

Lisage alati sildid

Ekraanilugejatel on teie vormidega probleeme, kui te ei lisa igale sisendile silti. Nende tekstisiseste vormide puhul saate .sr-onlyklassi abil sildid peita. Abitehnoloogiate märgistamiseks on veel alternatiivseid meetodeid, näiteks atribuut aria-label, aria-labelledbyvõi titleatribuut. Kui ükski neist puudub, võivad ekraanilugejad kasutada placeholderatribuuti, kui see on olemas, kuid pidage meeles, et selle kasutamine placeholdermuude märgistamismeetodite asendajana ei ole soovitatav.

Lisage .navbar-btnklass <button>elementidele, mis ei asu a -s <form>, et need navigeerimisribal vertikaalselt tsentreerida.

<button type="button" class="btn btn-default navbar-btn">Sign in</button>

Mähkige tekstistringid elemendiga .navbar-text, tavaliselt <p>sildil, et õige algus ja värv oleks õige.

<p class="navbar-text">Signed in as Mark Otto</p>

Inimestele, kes kasutavad standardseid linke, mis ei ole tavalises navigeerimisriba komponendis, kasutage .navbar-linkklassi, et lisada vaike- ja pöördnavigeerimisriba valikute jaoks õiged värvid.

<p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>

Joondage navigeerimislingid, vormid, nupud või tekst, kasutades utiliidiklasse .navbar-leftvõi . .navbar-rightMõlemad klassid lisavad CSS-i ujuki määratud suunas. Näiteks navigeerimislinkide joondamiseks pange need eraldi <ul>koos vastava utiliidiklassiga.

Need klassid on klasside ja kombineeritud versioonid .pull-left, .pull-rightkuid need on suunatud meediumipäringutele, et hõlbustada navigeerimisriba komponentide käsitlemist erinevate seadmete suuruses.

Lisage .navbar-fixed-topja kaasake .containervõi .container-fluidkeskpunkti ja padja navigeerimisriba sisu.

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    ...
  </div>
</nav>

Vajalik kere polsterdus

Fikseeritud navigeerimisriba katab teie muu sisu, kui te ei lisa paddingseda ülaossa <body>. Proovige oma väärtusi või kasutage meie allpool olevat väljavõtet. Nõuanne. Vaikimisi on navigeerimisriba 50 pikslit kõrge.

body { padding-top: 70px; }

Lisage see kindlasti pärast põhilist Bootstrap CSS-i.

Lisage .navbar-fixed-bottomja kaasake .containervõi .container-fluidkeskpunkti ja padja navigeerimisriba sisu.

<nav class="navbar navbar-default navbar-fixed-bottom">
  <div class="container">
    ...
  </div>
</nav>

Vajalik kere polsterdus

paddingFikseeritud navigeerimisriba katab teie muu sisu, välja arvatud juhul, kui lisate <body>. Proovige oma väärtusi või kasutage meie allpool olevat väljavõtet. Nõuanne. Vaikimisi on navigeerimisriba 50 pikslit kõrge.

body { padding-bottom: 70px; }

Lisage see kindlasti pärast põhilist Bootstrap CSS-i.

Looge täislaiuses navigeerimisriba, mis kerib koos lehega eemale, lisades .navbar-static-topja kaasates navigeerimisriba sisu keskele .containervõi .container-fluidpolsterdamiseks.

Erinevalt .navbar-fixed-*klassidest ei pea te tähistust muutma body.

<nav class="navbar navbar-default navbar-static-top">
  <div class="container">
    ...
  </div>
</nav>

Muutke navigeerimisriba välimust, lisades .navbar-inverse.

<nav class="navbar navbar-inverse">
  ...
</nav>

Riivsai

Märkige praeguse lehe asukoht navigeerimishierarhias.

Eraldajad lisatakse CSS-i automaatselt läbi :beforeja content.

<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Library</a></li>
  <li class="active">Data</li>
</ol>

Leheküljed

Pakkuge oma saidile või rakendusele lehekülgede lehekülgede lingid koos mitme lehe lehekülgede komponendiga või lihtsama piipari alternatiiviga .

Vaikelehekülgede järjekord

Rdiost inspireeritud lihtne lehekülgede lehekülg, mis sobib suurepäraselt rakenduste ja otsingutulemuste jaoks. Suurt plokki on raske mööda vaadata, see on kergesti skaleeritav ja pakub suuri klõpsamisalasid.

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li>
      <a href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

Lehekülje komponendi märgistamine

Lehekülgede muutmise komponent tuleks ümbritseda <nav>elemendiga, mis tuvastab selle ekraanilugejate ja muude abitehnoloogiate navigeerimisjaotisena. Lisaks, kuna lehel on tõenäoliselt juba rohkem kui üks selline navigeerimisjaotis (nt päises olev esmane navigeerimine või külgriba navigeerimine), on soovitatav esitada kirjeldus aria-label, <nav>mis kajastab selle eesmärki. Näiteks kui lehekülgede jagamise komponenti kasutatakse otsingutulemuste komplekti vahel navigeerimiseks, võib sobiv silt olla aria-label="Search results pages".

Keelatud ja aktiivsed olekud

Lingid on kohandatavad erinevate olukordade jaoks. Kasutage .disabledklõpsamatute linkide jaoks ja .activepraeguse lehe näitamiseks.

<nav aria-label="...">
  <ul class="pagination">
    <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
    <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
    ...
  </ul>
</nav>

Soovitame aktiivsed või keelatud ankrud välja vahetada või <span>eelmise/järgmise noolte puhul ankrud välja jätta, et eemaldada klõpsamisfunktsioon, säilitades samas kavandatud stiilid.

<nav aria-label="...">
  <ul class="pagination">
    <li class="disabled">
      <span>
        <span aria-hidden="true">&laquo;</span>
      </span>
    </li>
    <li class="active">
      <span>1 <span class="sr-only">(current)</span></span>
    </li>
    ...
  </ul>
</nav>

Suuruse määramine

Kas soovite suuremat või väiksemat lehekülge? Lisa .pagination-lgvõi .pagination-smlisasuuruste jaoks.

<nav aria-label="..."><ul class="pagination pagination-lg">...</ul></nav>
<nav aria-label="..."><ul class="pagination">...</ul></nav>
<nav aria-label="..."><ul class="pagination pagination-sm">...</ul></nav>

Peiler

Kiired eelmised ja järgmised lingid lihtsate lehekülgede rakendamiseks kerge märgistuse ja stiilidega. See on suurepärane lihtsate saitide jaoks, nagu ajaveebid või ajakirjad.

Vaikimisi näide

Vaikimisi tsentreerib piipar lingid.

<nav aria-label="...">
  <ul class="pager">
    <li><a href="#">Previous</a></li>
    <li><a href="#">Next</a></li>
  </ul>
</nav>

Joondatud lingid

Teise võimalusena saate iga lingi külgedele joondada:

<nav aria-label="...">
  <ul class="pager">
    <li class="previous"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

Valikuline keelatud olek

Peileri lingid kasutavad ka üldist .disabledkasuliku klassi lehekülgedelt.

<nav aria-label="...">
  <ul class="pager">
    <li class="previous disabled"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

Näide

Näidispealkiri Uus

<h3>Example heading <span class="label label-default">New</span></h3>

Saadaval variatsioonid

Sildi välimuse muutmiseks lisage mõni allpool nimetatud modifikaatoriklassidest.

Vaikimisi esmane eduteave hoiatus Oht _

<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>

Kas teil on tonni silte?

Renderdamisprobleemid võivad tekkida, kui kitsas konteineris on kümneid tekstisiseseid silte, millest igaüks sisaldab oma inline-blockelementi (nt ikooni). Sellest mööda saab seada display: inline-block;. Konteksti ja näite saamiseks vaadake #13219 .

Tõstke hõlpsalt esile uued või lugemata üksused, lisades <span class="badge">linkidele, Bootstrapi navigeerimistele ja muule.

Postkast42

<a href="#">Inbox <span class="badge">42</span></a>

<button class="btn btn-primary" type="button">
  Messages <span class="badge">4</span>
</button>

Iseseisev kokkuvarisemine

Kui uusi või lugemata üksusi pole, kukuvad märgid lihtsalt kokku (CSS-i :emptyvalija kaudu), kui sees pole sisu.

Brauseriülene ühilduvus

Märgid ei kuku ise Internet Explorer 8-s kokku, kuna sellel puudub :emptyvalija tugi.

Kohandub aktiivsete navigeerimisolekutega

Sisseehitatud stiilid on lisatud märkide aktiivsesse olekusse paigutamiseks pillide navigeerimisel.

<ul class="nav nav-pills" role="tablist">
  <li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li>
</ul>

Kerge ja paindlik komponent, mis võib soovi korral laiendada kogu vaateava, et näidata teie saidi põhisisu.

Tere, Maailm!

See on lihtne kangelasüksus, lihtne jumbotron-stiilis komponent, mis tõmbab esiletoodud sisule või teabele lisatähelepanu.

Lisateavet

<div class="jumbotron">
  <h1>Hello, world!</h1>
  <p>...</p>
  <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>

Jumbotroni täislaiuseks muutmiseks ilma ümarate nurkadeta asetage see kõigist .containers-dest väljapoole ja lisage selle asemel sisemine .container.

<div class="jumbotron">
  <div class="container">
    ...
  </div>
</div>

Lihtne kest h1lehe sisuosade sobivaks eraldamiseks ja segmenteerimiseks. See võib kasutada nii h1vaikeelementi smallkui ka enamikku muid komponente (koos täiendavate stiilidega).

<div class="page-header">
  <h1>Example page header <small>Subtext for header</small></h1>
</div>

Laiendage Bootstrapi ruudustikusüsteemi pisipiltide komponendiga, et kuvada hõlpsalt piltide, videote, teksti ja muu ruudustik.

Kui otsite erineva kõrguse ja/või laiusega pisipiltide Pinteresti-laadset esitlust, peate kasutama kolmanda osapoole pistikprogrammi, nagu Masonry , Isotope või Salvattore .

Vaikimisi näide

Vaikimisi on Bootstrapi pisipildid loodud lingitud piltide esitlemiseks minimaalse nõutava märgistusega.

<div class="row">
  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img src="..." alt="...">
    </a>
  </div>
  ...
</div>

Kohandatud sisu

Veidi lisamärgistusega on võimalik pisipiltidesse lisada igasugust HTML-sisu, näiteks pealkirju, lõike või nuppe.

Pisipildi silt

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida ja eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Nupp Nupp

Pisipildi silt

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida ja eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Nupp Nupp

Pisipildi silt

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida ja eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Nupp Nupp

<div class="row">
  <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <img src="..." alt="...">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>...</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
  </div>
</div>

Pakkuge tavapäraste kasutajatoimingute jaoks kontekstipõhiseid tagasisidesõnumeid käputäie saadaolevate ja paindlike hoiatusteadetega.

Näited

Mähkige mis tahes tekst ja valikuline loobumisnupp põhiliste hoiatusteadete jaoks .alertühte neljast kontekstiklassist (nt )..alert-success

Vaikeklassi pole

Märguannetel ei ole vaikeklasse, on ainult baas- ja modifikaatoriklassid. Vaikehallil hoiatusel pole liiga palju mõtet, seega peate määrama tüübi kontekstiklassi kaudu. Valige edu, teabe, hoiatuse või ohu hulgast.

Hästi tehtud! Lugesite selle olulise hoiatussõnumi edukalt läbi.

Pea püsti! See hoiatus vajab teie tähelepanu, kuid see pole eriti oluline.

Hoiatus! Parem kontrolli ennast, sa ei näe liiga hea välja.

Oh näpust! Muutke mõnda asja ja proovige uuesti esitada.

<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>

Loobutavad hoiatused

Looge mis tahes märguandele, lisades valikulise .alert-dismissibleja sulgemisnupu.

Nõuab JavaScripti hoiatuspluginat

Täielikult töötavate, loobutavate hoiatuste jaoks peate kasutama märguannete JavaScripti pistikprogrammi .

Hoiatus! Parem kontrolli ennast, sa ei näe liiga hea välja.

<div class="alert alert-warning alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>

Tagada õige käitumine kõigis seadmetes

Kasutage kindlasti andmeatribuudiga <button>elementi .data-dismiss="alert"

Lingid hoiatustes

Kasutage .alert-linkutiliitklassi, et kiiresti pakkuda sobivaid värvilisi linke mis tahes hoiatuses.

Hästi tehtud! Lugesite selle olulise hoiatussõnumi edukalt läbi .

Pea püsti! See hoiatus vajab teie tähelepanu , kuid see pole eriti oluline.

Hoiatus! Parem kontrolli ennast, sa ei näe liiga hea välja .

Oh näpust! Muutke mõnda asja ja proovige uuesti esitada.

<div class="alert alert-success" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-info" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-warning" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-danger" role="alert">
  <a href="#" class="alert-link">...</a>
</div>

Andke töövoo või toimingu edenemise kohta ajakohast tagasisidet lihtsate, kuid paindlike edenemisribade abil.

Brauseriülene ühilduvus

Edenemisribad kasutavad teatud efektide saavutamiseks CSS3 üleminekuid ja animatsioone. Neid funktsioone ei toetata Internet Explorer 9 ja vanemad versioonid või Firefoxi vanemad versioonid. Opera 12 ei toeta animatsioone.

Sisu turbepoliitika (CSP) ühilduvus

Kui teie veebisaidil on sisuturbepoliitika (CSP) , mis ei luba style-src 'unsafe-inline', siis ei saa te kasutada styleedenemisriba laiuste määramiseks tekstisiseseid atribuute, nagu on näidatud meie allolevates näidetes. Alternatiivsed meetodid rangete CSP-dega ühilduvate laiuste määramiseks hõlmavad väikese kohandatud JavaScripti (mis määrab element.style.width) või kohandatud CSS-i klasside kasutamist.

Põhiline näide

Vaikimisi edenemisriba.

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    <span class="sr-only">60% Complete</span>
  </div>
</div>

Koos sildiga

Nähtava protsendi kuvamiseks eemaldage edenemisribalt klass <span>with ..sr-only

60%

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    60%
  </div>
</div>

Tagamaks, et sildi tekst jääb loetavaks ka madalate protsentide korral, kaaluge min-widthedenemisribale a lisamist.

0%

2%

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">
    0%
  </div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 2%;">
    2%
  </div>
</div>

Kontekstuaalsed alternatiivid

Edenemisribad kasutavad ühtsete stiilide jaoks samu nuppe ja hoiatusklasse.

<div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <span class="sr-only">20% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
    <span class="sr-only">60% Complete (warning)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="sr-only">80% Complete (danger)</span>
  </div>
</div>

Triibuline

Kasutab triibulise efekti loomiseks gradienti. Pole saadaval IE9 ja vanemates versioonides.

<div class="progress">
  <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <span class="sr-only">20% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
    <span class="sr-only">60% Complete (warning)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="sr-only">80% Complete (danger)</span>
  </div>
</div>

Animeeritud

Lisage triipude animeerimiseks .activeparemalt .progress-bar-stripedvasakule. Pole saadaval IE9 ja vanemates versioonides.

<div class="progress">
  <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
    <span class="sr-only">45% Complete</span>
  </div>
</div>

Laotud

Asetage mitu riba ühte, .progresset need virnastada.

<div class="progress">
  <div class="progress-bar progress-bar-success" style="width: 35%">
    <span class="sr-only">35% Complete (success)</span>
  </div>
  <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
    <span class="sr-only">20% Complete (warning)</span>
  </div>
  <div class="progress-bar progress-bar-danger" style="width: 10%">
    <span class="sr-only">10% Complete (danger)</span>
  </div>
</div>

Abstraktsed objektistiilid erinevat tüüpi komponentide (nt ajaveebi kommentaarid, säutsud jne) koostamiseks, millel on tekstilise sisu kõrval vasakule või paremale joondatud pilt.

Vaikimisi meedium

Vaikimisi meedium kuvab sisuplokist vasakul või paremal meediumiobjekti (pildid, video, heli).

Meedia pealkiri

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.

Meedia pealkiri

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.

Pesastatud meediumipealkiri

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.

Meedia pealkiri

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.

Meedia pealkiri

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.

<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    ...
  </div>
</div>

Klassid .pull-leftja .pull-righton samuti olemas ja neid kasutati varem meediumikomponendi osana, kuid need on alates versioonist 3.3.0 selle kasutuse jaoks aegunud. Need on ligikaudu samaväärsed .media-leftja .media-right, välja arvatud see, et .media-rightneed tuleks .media-bodyhtml-is paigutada pärast .

Meediumi joondamine

Pilte või muud kandjat saab joondada ülevalt, keskelt või alla. Vaikimisi on joondatud ülevalt.

Ülevalt joondatud kandja

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.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Keskmiselt joondatud kandja

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.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Alt joondatud kandja

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.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

<div class="media">
  <div class="media-left media-middle">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Middle aligned media</h4>
    ...
  </div>
</div>

Meedia nimekiri

Veidi lisamärgistusega saate kasutada loendis olevaid meediume (kasulik kommentaarilõimede või artiklite loendite jaoks).

Meedia pealkiri

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.

Pesastatud meediumipealkiri
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.

Pesastatud meediumipealkiri
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.

Pesastatud meediumipealkiri
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.

<ul class="media-list">
  <li class="media">
    <div class="media-left">
      <a href="#">
        <img class="media-object" src="..." alt="...">
      </a>
    </div>
    <div class="media-body">
      <h4 class="media-heading">Media heading</h4>
      ...
    </div>
  </li>
</ul>

Loendirühmad on paindlik ja võimas komponent mitte ainult lihtsate elementide loendite kuvamiseks, vaid ka kohandatud sisuga keerukate loendite kuvamiseks.

Põhiline näide

Kõige elementaarsem loendirühm on lihtsalt järjestamata loend loendiüksuste ja õigete klassidega. Kasutage seda järgmiste valikute või vajaduse korral oma CSS-i abil.

Cras justo odio
Dapibus ac facilisis sisse
Morbi leo risus
Porta ac consectetur ac
Vestibulum ja eros

<ul class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

Märgid

Lisage märgide komponent mis tahes loendirühma üksusele ja see paigutatakse automaatselt paremale.

14Cras justo odio
2Dapibus ac facilisis sisse
1Morbi leo risus

<ul class="list-group">
  <li class="list-group-item">
    <span class="badge">14</span>
    Cras justo odio
  </li>
</ul>

Lingitud üksused

Linkige loendiüksused, kasutades loendiüksuste asemel ankursilte (see tähendab ka vanemat elemendi <div>asemel <ul>). Iga elemendi ümber pole vaja üksikuid vanemaid.

Cras justo odio Dapibus ac facilisis sisse Morbi leo risus Porta ac consectetur ac Vestibulum ja eros

<div class="list-group">
  <a href="#" class="list-group-item active">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item">Morbi leo risus</a>
  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>

Nupuelemendid

Loendirühma elemendid võivad loendiüksuste asemel olla nupud (see tähendab ka vanemat <div>, mitte <ul>). Iga elemendi ümber pole vaja üksikuid vanemaid. Ärge kasutage .btnsiin standardklasse.

<div class="list-group">
  <button type="button" class="list-group-item">Cras justo odio</button>
  <button type="button" class="list-group-item">Dapibus ac facilisis in</button>
  <button type="button" class="list-group-item">Morbi leo risus</button>
  <button type="button" class="list-group-item">Porta ac consectetur ac</button>
  <button type="button" class="list-group-item">Vestibulum at eros</button>
</div>

Keelatud üksused

Lisage .disableda .list-group-item-le, et see halliks muuta, et kuvada keelatud.

Cras justo odio Dapibus ac facilisis sisse Morbi leo risus Porta ac consectetur ac Vestibulum ja eros

<div class="list-group">
  <a href="#" class="list-group-item disabled">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item">Morbi leo risus</a>
  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>

Kontekstuaalsed klassid

Kasutage kontekstuaalseid klasse loendiüksuste, vaikimisi või lingitud, stiilimiseks. Sisaldab ka .activeolekut.

Dapibus ac facilisis sisse
Cras sit amet nibh libero
Porta ac consectetur ac
Vestibulum ja eros

Dapibus ac facilisis sisse Cras sit amet nibh libero Porta ac consectetur ac Vestibulum ja eros

<ul class="list-group">
  <li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
  <li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
  <li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
  <li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
</ul>
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
  <a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a>
</div>

Kohandatud sisu

Lisage peaaegu kõik HTML-id, isegi allolevate lingitud loendirühmade jaoks.

Loendi rühma üksuse pealkiri

Donec id elit non mi porta gravida ja eget metus. Maecenas sed diam eget risus varius blandit.

Loendi rühma üksuse pealkiri

Donec id elit non mi porta gravida ja eget metus. Maecenas sed diam eget risus varius blandit.

Loendi rühma üksuse pealkiri

Donec id elit non mi porta gravida ja eget metus. Maecenas sed diam eget risus varius blandit.

<div class="list-group">
  <a href="#" class="list-group-item active">
    <h4 class="list-group-item-heading">List group item heading</h4>
    <p class="list-group-item-text">...</p>
  </a>
</div>

Kuigi see pole alati vajalik, peate mõnikord oma DOM-i kasti panema. Sellistes olukordades proovige paneeli komponenti.

Põhiline näide

Vaikimisi .panelrakendatakse sisu sisaldamiseks põhiääriseid ja polsterdusi.

Põhipaneeli näide

<div class="panel panel-default">
  <div class="panel-body">
    Basic panel example
  </div>
</div>

Paneel pealkirjaga

Lisage oma paneelile hõlpsalt pealkirjakonteiner, kasutades .panel-heading. Eelnevalt kujundatud pealkirja lisamiseks võite lisada ka mis tahes <h1>– <h6>klassiga . .panel-titleKuid fondi suurused alistab <h1>.<h6>.panel-heading

Lingi õigeks värvimiseks asetage lingid kindlasti jaotise päistesse .panel-title.

Paneeli pealkiri ilma pealkirjata

Paneeli sisu

Paneeli pealkiri

Paneeli sisu

<div class="panel panel-default">
  <div class="panel-heading">Panel heading without title</div>
  <div class="panel-body">
    Panel content
  </div>
</div>

<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Panel title</h3>
  </div>
  <div class="panel-body">
    Panel content
  </div>
</div>

Jalusega paneel

Murdke nupud või teisene tekst sisse .panel-footer. Pange tähele, et paneeli jalused ei päri kontekstuaalsete variatsioonide kasutamisel värve ja ääriseid, kuna need ei ole mõeldud esiplaanile.

Paneeli sisu

Paneeli jalus

<div class="panel panel-default">
  <div class="panel-body">
    Panel content
  </div>
  <div class="panel-footer">Panel footer</div>
</div>

Kontekstuaalsed alternatiivid

Sarnaselt teistele komponentidele saate hõlpsalt muuta paneeli konkreetse konteksti jaoks tähendusrikkamaks, lisades mis tahes kontekstipõhise olekuklassi.

Paneeli pealkiri

Paneeli sisu

Paneeli pealkiri

Paneeli sisu

Paneeli pealkiri

Paneeli sisu

Paneeli pealkiri

Paneeli sisu

Paneeli pealkiri

Paneeli sisu

<div class="panel panel-primary">...</div>
<div class="panel panel-success">...</div>
<div class="panel panel-info">...</div>
<div class="panel panel-warning">...</div>
<div class="panel panel-danger">...</div>

Koos laudadega

.tableSujuva kujunduse saamiseks lisage paneelile kõik ääristamata. Kui on .panel-body, lisame tabeli ülaossa eraldamiseks täiendava äärise.

Paneeli pealkiri

Siin on paneeli vaikesisu. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

#	Eesnimi	Perekonnanimi	Kasutajanimi
1	Mark	Otto	@mdo
2	Jacob	Thornton	@paks
3	Larry	lind	@twitter

<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>...</p>
  </div>

  <!-- Table -->
  <table class="table">
    ...
  </table>
</div>

Kui paneeli korpust pole, liigub komponent paneeli päisest tabelisse ilma katkestusteta.

Paneeli pealkiri

#	Eesnimi	Perekonnanimi	Kasutajanimi
1	Mark	Otto	@mdo
2	Jacob	Thornton	@paks
3	Larry	lind	@twitter

<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>

  <!-- Table -->
  <table class="table">
    ...
  </table>
</div>

Nimekirjarühmadega

Lisage hõlpsalt mis tahes paneelile täislaiusega loendirühmi .

Paneeli pealkiri

Siin on paneeli vaikesisu. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

Cras justo odio
Dapibus ac facilisis sisse
Morbi leo risus
Porta ac consectetur ac
Vestibulum ja eros

<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>...</p>
  </div>

  <!-- List group -->
  <ul class="list-group">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

Lubage brauseritel määrata video või slaidiseansi mõõtmed neid sisaldava ploki laiuse põhjal, luues sisemise suhte, mis skaleerub õigesti igas seadmes.

Reegleid rakendatakse otse <iframe>, <embed>, <video>ja <object>elementidele; valikuliselt kasutage selgesõnalist järglaste klassi .embed-responsive-item, kui soovite sobitada teiste atribuutide stiili.

Pro-Tip! Te ei pea frameborder="0"oma <iframe>s-i lisama, kuna me alistame selle teie eest.

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

Vaikimisi hästi

Kasutage kaevu lihtsa efektina elemendil, et anda sellele sisendefekt.

Vaata, ma olen kaevus!

<div class="well">...</div>

Vabatahtlikud klassid

Juhtpolster ja ümarad nurgad kahe valikulise modifikaatoriklassiga.

Vaata, ma olen suures kaevus!

<div class="well well-lg">...</div>

Vaata, ma olen väikeses kaevus!

<div class="well well-sm">...</div>

Komponendid

Glyphicons

Saadaolevad glüüfid

Kuidas kasutada

Ärge segage teiste komponentidega

Kasutamiseks ainult tühjadel elementidel

Ikooni fondi asukoha muutmine

Ligipääsetavad ikoonid

Näited

Rippmenüüd

Näide

Joondamine

Võib vajada täiendavat positsioneerimist

Aegunud .pull-rightjoondus

Päised

Jagaja

Keelatud menüüelemendid

Nupurühmad

Nupurühmade tööriistavihjed ja hüpikaknad nõuavad spetsiaalset seadistust

Veenduge role, et see on õige ja lisage silt

Põhiline näide

Nuppude tööriistariba

Suuruse määramine

Pesitsemine

Vertikaalne variatsioon

Põhjendatud nupurühmad

Piiride käsitlemine

IE8 ja piirid

Koos <a>elementidega

Nuppudena toimivad lingid

Koos <button>elementidega

Nuppude rippmenüüd

Plugina sõltuvus

Ühe nupu rippmenüüd

Jagamisnupu rippmenüüd

Suuruse määramine

Dropup variatsioon

Sisestusrühmad

Ainult tekstiline <input>s

Sisestusrühmade tööriistavihjed ja hüpikaknad nõuavad spetsiaalset seadistust

Ärge segage teiste komponentidega

Lisage alati sildid

Põhiline näide

Suuruse määramine

Märkeruudud ja raadio lisad

Nuppude lisad

Rippmenüüdega nupud

Segmenteeritud nupud

Mitu nuppu

Navid

Vahekaartide paneelide navigeerimisfunktsioonide kasutamiseks on vaja JavaScripti vahekaartide pistikprogrammi

Muutke navigeerimiseks kasutatavad navid juurdepääsetavaks

Vahekaardid

Tabletid

Põhjendatud

Safari ja reageerivad õigustatud navid

Keelatud lingid

Lingi funktsionaalsust ei mõjutata

Rippmenüüde kasutamine

Rippmenüüdega vahelehed

Rippmenüüdega pillid

Navibar

Vaikimisi navigeerimisriba

Ülevoolav sisu

Nõuab JavaScripti pistikprogrammi

Mobiilse navigeerimisriba ahendatud katkestuspunkti muutmine

Tee navigeerimisribad juurdepääsetavaks

Brändi pilt

Vormid

Mobiilseadmete hoiatused

Lisage alati sildid

Nupud

Kontekstispetsiifiline kasutus

Tekst

Mittenavigatsioonilingid

Komponentide joondamine

Mitme komponendi õige joondamine

Üleval fikseeritud

Vajalik kere polsterdus

Altpoolt fikseeritud

Aegunud `.pull-right`joondus

Veenduge `role`, et see on õige ja lisage silt

Koos `<a>`elementidega

Koos `<button>`elementidega

Ainult tekstiline `<input>`s