Komponentai
Daugiau nei tuzinas daugkartinio naudojimo komponentų, sukurtų teikti ikonografiją, išskleidžiamuosius meniu, įvesties grupes, naršymą, įspėjimus ir daug daugiau.
Daugiau nei tuzinas daugkartinio naudojimo komponentų, sukurtų teikti ikonografiją, išskleidžiamuosius meniu, įvesties grupes, naršymą, įspėjimus ir daug daugiau.
Apima daugiau nei 250 glifų šrifto formatu iš Glyphicon Halflings rinkinio. „Glyphicons Halflings“ paprastai nėra prieinama nemokamai, tačiau jų kūrėjas padarė juos nemokamai prieinamus „Bootstrap“. Atsidėkodami tik prašome, kai tik įmanoma, įtraukti nuorodą į Glyphicons .
Dėl našumo visoms piktogramoms reikalinga pagrindinė klasė ir atskira piktogramų klasė. Norėdami naudoti, įdėkite šį kodą beveik bet kur. Būtinai palikite tarpą tarp piktogramos ir teksto, kad būtų galima tinkamai užpildyti.
Piktogramų klasės negali būti tiesiogiai derinamos su kitais komponentais. Jie neturėtų būti naudojami kartu su kitomis to paties elemento klasėmis. Vietoj to pridėkite įdėtą <span>
ir pritaikykite piktogramų klases <span>
.
Piktogramų klasės turėtų būti naudojamos tik elementams, kuriuose nėra teksto turinio ir antrinių elementų.
Bootstrap daro prielaidą, kad piktogramų šriftų failai bus ../fonts/
kataloge, palyginti su sudarytais CSS failais. Šių šriftų failų perkėlimas arba pervadinimas reiškia CSS atnaujinimą vienu iš trijų būdų:
@icon-font-path
ir (arba) @icon-font-name
kintamuosius šaltinyje Less files.url()
kelius sukompiliuotame CSS.Naudokite bet kurią parinktį, kuri geriausiai atitinka jūsų konkrečią kūrimo sąranką.
Šiuolaikinės pagalbinių technologijų versijos skelbs apie CSS sukurtą turinį, taip pat konkrečius Unikodo simbolius. Kad išvengtume netyčinės ir klaidinančios išvesties ekrano skaitytuvuose (ypač kai piktogramos naudojamos tik dekoravimui), jas paslepiame naudodami aria-hidden="true"
atributą.
Jei naudojate piktogramą reikšmei perteikti (o ne tik kaip dekoratyvinį elementą), pasirūpinkite, kad ši reikšmė būtų perduota ir pagalbinėms technologijoms – pavyzdžiui, įtraukite papildomo turinio, vizualiai paslėpto .sr-only
klasėje.
Jei kuriate valdiklius be jokio kito teksto (pvz., <button>
kuriame yra tik piktograma), visada turėtumėte pateikti alternatyvų turinį, kad nustatytumėte valdiklio tikslą, kad jis būtų prasmingas pagalbinių technologijų naudotojams. Tokiu atveju galite pridėti aria-label
atributą pačiame valdiklyje.
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
Naudokite juos mygtukuose, mygtukų grupėse įrankių juostai, naršymui arba pridėtoms formoms.
<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>
Piktograma, naudojama įspėjime , nurodanti , kad tai klaidos pranešimas, su papildomu .sr-only
tekstu, perteikiančiu šią užuominą pagalbinių technologijų naudotojams.
<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>
Perjungiamas kontekstinis meniu nuorodų sąrašams rodyti. Interaktyvus naudojant išskleidžiamąjį JavaScript papildinį .
Apvyniokite išskleidžiamojo meniu aktyviklį ir išskleidžiamąjį meniu į .dropdown
arba kitą elementą, kuris deklaruoja position: relative;
. Tada pridėkite meniu 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>
Išskleidžiamuosius meniu galima keisti, kad jie būtų išplėsti aukštyn (o ne žemyn), įtraukiant .dropup
juos į pirminį.
<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>
Pagal numatytuosius nustatymus išskleidžiamasis meniu automatiškai pateikiamas 100 % iš viršaus ir išilgai kairiosios pirminio puslapio pusės. Pridėti .dropdown-menu-right
prie a .dropdown-menu
į dešinę lygiuoti išskleidžiamąjį meniu.
Išskleidžiamieji meniu automatiškai išdėstomi naudojant CSS įprastoje dokumento eigoje. Tai reiškia, kad išskleidžiamuosius meniu gali apkarpyti tėvai, turintys tam tikrų overflow
savybių, arba jie gali būti rodomi už peržiūros srities ribų. Išspręskite šias problemas, kai jos iškyla.
.pull-right
lygiavimasNuo 3.1.0 versijos .pull-right
išskleidžiamieji meniu nebenaudojami. Norėdami sulygiuoti meniu dešinėje, naudokite .dropdown-menu-right
. Dešinėje naršymo juostoje esantys navigacijos komponentai naudoja šios klasės mišriąją versiją, kad automatiškai sulygiuotų meniu. Norėdami jo nepaisyti, naudokite .dropdown-menu-left
.
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
...
</ul>
Pridėkite antraštę prie veiksmų sekcijų žymėjimo bet kuriame išskleidžiamajame meniu.
<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
...
<li class="dropdown-header">Dropdown header</li>
...
</ul>
Pridėkite skirstytuvą, kad atskirtumėte nuorodų serijas išskleidžiamajame meniu.
<ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">
...
<li role="separator" class="divider"></li>
...
</ul>
Pridėkite .disabled
prie a <li>
išskleidžiamajame meniu, kad išjungtumėte nuorodą.
<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>
Sugrupuokite mygtukų serijas vienoje eilutėje su mygtukų grupe. Pridėkite pasirenkamą „JavaScript“ radiją ir žymimąjį laukelį naudodami mūsų mygtukų papildinį .
Naudodami patarimus ar iššokančius elementus elementuose .btn-group
, turėsite nurodyti parinktį container: 'body'
, kad išvengtumėte nepageidaujamų šalutinių poveikių (pvz., elementas padidėtų ir (arba) prarastų užapvalintus kampus, kai suaktyvinamas patarimas arba iššokantis rodinys).
role
, ir pateikite etiketęKad pagalbinės technologijos, pvz., ekrano skaitytuvai, parodytų, kad mygtukų serija yra sugrupuota, reikia pateikti atitinkamą role
atributą. Mygtukų grupėms tai būtų role="group"
, o įrankių juostose turėtų būti role="toolbar"
.
Viena išimtis yra grupės, kuriose yra tik vienas valdiklis (pvz., išlygintos mygtukų grupės su <button>
elementais) arba išskleidžiamasis meniu.
Be to, grupėms ir įrankių juostoms turėtų būti suteikta aiški etiketė, nes kitu atveju dauguma pagalbinių technologijų jų nepaskelbs, nepaisant tinkamo role
atributo buvimo. Čia pateiktuose pavyzdžiuose naudojame aria-label
, bet taip pat aria-labelledby
gali būti naudojamos tokios alternatyvos kaip.
Apvyniokite mygtukų seriją su .btn
..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>
Sujunkite rinkinius <div class="btn-group">
į a <div class="btn-toolbar">
, kad gautumėte sudėtingesnius komponentus.
<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>
Užuot taikę mygtukų dydžio klases kiekvienam grupės mygtukui, tiesiog pridėkite .btn-group-*
prie kiekvieno .btn-group
, taip pat kai įdėta kelias grupes.
<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>
Įdėkite į .btn-group
kitą .btn-group
, kai norite, kad išskleidžiamieji meniu būtų sumaišyti su mygtukų serija.
<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>
Padarykite, kad mygtukų rinkinys būtų išdėstytas vertikaliai, o ne horizontaliai. Padalijimo mygtukų išskleidžiamieji meniu čia nepalaikomi.
<div class="btn-group-vertical" role="group" aria-label="...">
...
</div>
Padarykite mygtukų grupę vienodo dydžio, kad apimtų visą pirminio mygtuko plotį. Taip pat veikia su mygtukų grupės išskleidžiamaisiais meniu.
Dėl specifinio HTML ir CSS, naudojamo mygtukų pagrindimui (būtent display: table-cell
), ribos tarp jų padvigubėja. Įprastose mygtukų grupėse margin-left: -1px
naudojamas kraštinėms sukrauti, o ne jas pašalinti. Tačiau margin
neveikia su display: table-cell
. Todėl, atsižvelgiant į „Bootstrap“ tinkinimus, galbūt norėsite pašalinti arba iš naujo nuspalvinti kraštines.
„Internet Explorer 8“ nepateikia mygtukų kraštinių pagrįstoje mygtukų grupėje, nesvarbu, ar ji įjungta, <a>
ar <button>
elementai. Norėdami tai padaryti, kiekvieną mygtuką apvyniokite kitu .btn-group
.
Daugiau informacijos rasite #12476 .
<a>
elementaisTiesiog suvyniokite eilę .btn
s .btn-group.btn-group-justified
.
<div class="btn-group btn-group-justified" role="group" aria-label="...">
...
</div>
Jei <a>
elementai naudojami kaip mygtukai – suaktyvina puslapio funkcijas, o ne pereina į kitą dokumentą ar skiltį dabartiniame puslapyje – jiems taip pat turėtų būti suteiktas atitinkamas role="button"
.
<button>
elementaisJei norite naudoti pagrįstas mygtukų grupes su <button>
elementais, kiekvieną mygtuką turite apvynioti mygtukų grupe . Daugelis naršyklių netinkamai taiko mūsų CSS <button>
elementams pateisinti, bet kadangi palaikome mygtukų išskleidžiamuosius meniu, galime tai apeiti.
<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>
Naudokite bet kurį mygtuką, kad suaktyvintumėte išskleidžiamąjį meniu, įtraukdami jį į a .btn-group
ir nurodydami tinkamą meniu žymėjimą.
Išskleidžiamajame mygtukų meniu reikia, kad išskleidžiamojo meniu papildinys būtų įtrauktas į jūsų „Bootstrap“ versiją.
Paverskite mygtuką išskleidžiamuoju jungikliu atlikdami keletą pagrindinių žymėjimo pakeitimų.
<!-- 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>
Panašiai sukurkite padalinto mygtuko išskleidžiamuosius meniu su tais pačiais žymėjimo pakeitimais, tik naudodami atskirą mygtuką.
<!-- 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>
Mygtukų išskleidžiamieji meniu veikia su visų dydžių mygtukais.
<!-- 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>
Suaktyvinkite išskleidžiamuosius meniu virš elementų pridėdami .dropup
prie pirminio elemento.
<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>
Išplėskite formos valdiklius pridėdami teksto arba mygtukų prieš, po arba abiejose teksto pusėse <input>
. Naudokite .input-group
su .input-group-addon
arba .input-group-btn
, jei norite pridėti arba pridėti elementus prie vieno .form-control
.
<input>
sČia nenaudokite <select>
elementų, nes WebKit naršyklėse jų negalima visiškai sukurti.
Venkite <textarea>
čia naudoti elementų, nes rows
kai kuriais atvejais jų atributas nebus laikomasi.
Naudodami patarimus ar iššokančius elementus elementuose .input-group
, turėsite nurodyti parinktį container: 'body'
, kad išvengtumėte nepageidaujamų šalutinių poveikių (pvz., elementas padidėtų ir (arba) prarastų užapvalintus kampus, kai suaktyvinamas patarimas arba iššokantis rodinys).
Nemaišykite formų grupių arba tinklelio stulpelių klasių tiesiogiai su įvesties grupėmis. Vietoj to, įdėkite įvesties grupę formos grupės arba su tinkleliu susijusio elemento viduje.
Ekrano skaitytuvai turės problemų su formomis, jei neįtrauksite kiekvienos įvesties etiketės. Šioms įvesties grupėms užtikrinkite, kad bet kokia papildoma etiketė ar funkcijos būtų perduotos pagalbinėms technologijoms.
Tiksli naudotina technika (matomi <label>
elementai, <label>
elementai, paslėpti naudojant .sr-only
klasę arba aria-label
, aria-labelledby
, aria-describedby
, title
arba placeholder
atributo naudojimas) ir kokią papildomą informaciją reikės perduoti, priklausys nuo tikslaus įdiegto sąsajos valdiklio tipo. Šiame skyriuje pateiktuose pavyzdžiuose pateikiami keli siūlomi konkrečiam atvejui taikomi metodai.
Įdėkite vieną priedą arba mygtuką abiejose įvesties pusėse. Taip pat galite įdėti vieną iš abiejų įvesties pusių.
Mes nepalaikome kelių priedų ( .input-group-addon
arba .input-group-btn
) vienoje pusėje.
Mes nepalaikome kelių formų valdiklių vienoje įvesties grupėje.
<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>
Pridėkite santykines formos dydžio klases, .input-group
o turinio dydis bus automatiškai pakeistas – nereikės kartoti kiekvieno elemento formos valdiklio dydžio klasių.
<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>
Vietoj teksto įdėkite bet kurį žymimąjį laukelį arba radijo parinktį į įvesties grupės priedą.
<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 -->
Įvesties grupių mygtukai šiek tiek skiriasi ir reikalauja vieno papildomo įdėjimo lygio. Vietoj .input-group-addon
, turėsite naudoti .input-group-btn
mygtukams apvynioti. Tai būtina dėl numatytųjų naršyklės stilių, kurių negalima nepaisyti.
<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 -->
<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 -->
<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>
Nors galite turėti tik vieną priedą kiekvienoje pusėje, galite turėti kelis mygtukus viename .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>
„Bootstrap“ pasiekiamos navigacijos sistemos turi bendrą žymėjimą, pradedant bazine .nav
klase, ir bendromis būsenomis. Sukeiskite modifikatorių klases, kad perjungtumėte kiekvieną stilių.
Atminkite, kad .nav-tabs
klasei reikalinga .nav
pagrindinė klasė.
<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>
Paimkite tą patį HTML, bet .nav-pills
vietoj jo naudokite:
<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>
Tabletes taip pat galima sukrauti vertikaliai. Tiesiog pridėkite .nav-stacked
.
<ul class="nav nav-pills nav-stacked">
...
</ul>
Lengvai padarykite skirtukus arba tabletes vienodo pločio pirminiams ekranams, didesniems nei 768 piks. naudodami .nav-justified
. Mažesniuose ekranuose navigacijos nuorodos yra sukrautos.
Pagrįstos naršymo juostos naršymo nuorodos šiuo metu nepalaikomos.
<ul class="nav nav-tabs nav-justified">
...
</ul>
<ul class="nav nav-pills nav-justified">
...
</ul>
Prie bet kurio navigacijos komponento (skirtukų ar tablečių) pridėkite .disabled
, kad būtų pilkos nuorodos ir nebūtų užvedimo efektų .
<ul class="nav nav-pills">
...
<li role="presentation" class="disabled"><a href="#">Disabled link</a></li>
...
</ul>
Pridėkite išskleidžiamųjų meniu naudodami šiek tiek papildomo HTML ir išskleidžiamąjį JavaScript papildinį .
<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>
<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>
Naršymo juostos yra reaguojantys meta komponentai, kurie naudojami kaip jūsų programos ar svetainės naršymo antraštės. Jie pradedami sutraukti (ir juos galima perjungti) mobiliuosiuose rodiniuose ir tampa horizontalūs, kai galimos peržiūros srities plotis didėja.
Pagrįstos naršymo juostos naršymo nuorodos šiuo metu nepalaikomos.
<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>
Pakeiskite naršymo juostos prekės ženklą savo vaizdu, pakeisdami tekstą į <img>
. Kadangi jis .navbar-brand
turi savo užpildą ir aukštį, gali tekti nepaisyti kai kurių CSS, atsižvelgiant į jūsų vaizdą.
<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>
Įdėkite formos turinį, .navbar-form
kad siaurose peržiūros srityse būtų tinkamai išlygiuota vertikaliai ir sutraukta. Naudokite lygiavimo parinktis, kad nuspręstumėte, kur jis yra naršymo juostos turinyje.
Kaip įspėti, .navbar-form
didžiąją dalį savo kodo dalijasi su .form-inline
per mixin. Kai kuriems formų valdikliams, pvz., įvesties grupėms, gali reikėti fiksuoto pločio, kad naršymo juostoje būtų tinkamai rodoma.
<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>
Pridėkite .navbar-btn
klasę prie <button>
elementų, kurių nėra a <form>
, kad vertikaliai centruotų juos naršymo juostoje.
<button type="button" class="btn btn-default navbar-btn">Sign in</button>
Apvyniokite teksto eilutes į elementą su .navbar-text
, paprastai ant <p>
žymos, kad būtų tinkama pradžia ir spalva.
<p class="navbar-text">Signed in as Mark Otto</p>
Žmonėms, naudojantiems standartines nuorodas, kurių nėra įprastame naršymo juostos komponente, naudokite .navbar-link
klasę, kad pridėtumėte tinkamas spalvas numatytosioms ir atvirkštinėms naršymo juostos parinktims.
<p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>
Sulygiuokite naršymo nuorodas, formas, mygtukus ar tekstą naudodami .navbar-left
arba .navbar-right
naudingumo klases. Abi klasės pridės CSS plūdę nurodyta kryptimi. Pavyzdžiui, norėdami suderinti navigacines nuorodas, sudėkite jas į atskirą <ul>
atitinkamą naudingumo klasę.
Šios klasės yra mišrios ir versijos .pull-left
, .pull-right
tačiau jos taikomos medijos užklausoms, kad būtų lengviau tvarkyti naršymo juostos komponentus įvairių dydžių įrenginiuose.
Pridėti .navbar-fixed-top
ir įtraukti .container
arba .container-fluid
į centrą ir klaviatūros naršymo juostos turinį.
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
...
</div>
</nav>
Pridėti .navbar-fixed-bottom
ir įtraukti .container
arba .container-fluid
į centrą ir klaviatūros naršymo juostos turinį.
<nav class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
...
</div>
</nav>
Sukurkite viso pločio naršymo juostą, kuri slinktų kartu su puslapiu, pridėdami .navbar-static-top
ir įtraukdami .container
arba .container-fluid
į centrą ir klaviatūros naršymo juostos turinį.
Skirtingai nei .navbar-fixed-*
klasėse, jums nereikia keisti jokių užpildų ant body
.
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
...
</div>
</nav>
Keiskite naršymo juostos išvaizdą pridėdami .navbar-inverse
.
<nav class="navbar navbar-inverse">
...
</nav>
Nurodykite dabartinio puslapio vietą naršymo hierarchijoje.
Atskyrikliai automatiškai pridedami CSS naudojant :before
ir content
.
<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Library</a></li>
<li class="active">Data</li>
</ol>
Pateikite svetainės ar programos puslapių rūšiavimo nuorodas naudodami kelių puslapių puslapių rūšiavimo komponentą arba paprastesnę puslapių gaviklio alternatyvą .
Paprastas puslapių rūšiavimas, įkvėptas Rdio, puikiai tinka programoms ir paieškos rezultatams. Didelis blokas yra sunkiai nepastebimas, lengvai keičiamas ir suteikia dideles paspaudimų sritis.
<nav aria-label="Page navigation">
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</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">»</span>
</a>
</li>
</ul>
</nav>
Puslapių kūrimo komponentas turėtų būti įvyniotas į <nav>
elementą, kad būtų galima jį identifikuoti kaip ekrano skaitytuvų ir kitų pagalbinių technologijų naršymo skyrių. Be to, kadangi tikėtina, kad puslapyje jau yra daugiau nei viena tokia naršymo skiltis (pvz., pagrindinė naršymas antraštėje arba šoninės juostos naršymas), patartina pateikti aprašą aria-label
, <nav>
atspindintį jo paskirtį. Pavyzdžiui, jei puslapių rūšiavimo komponentas naudojamas naršyti tarp paieškos rezultatų rinkinio, tinkama etiketė gali būti aria-label="Search results pages"
.
Nuorodos pritaikomos įvairioms aplinkybėms. Naudokite .disabled
nespaudžiamoms nuorodoms ir .active
dabartiniam puslapiui nurodyti.
<nav aria-label="...">
<ul class="pagination">
<li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
<li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
...
</ul>
</nav>
Rekomenduojame pakeisti aktyvius arba išjungtus prierašus į <span>
, arba praleisti inkarą, jei rodomos ankstesnės / kitos rodyklės, kad pašalintumėte spustelėjimo funkciją išlaikant numatytus stilius.
<nav aria-label="...">
<ul class="pagination">
<li class="disabled">
<span>
<span aria-hidden="true">«</span>
</span>
</li>
<li class="active">
<span>1 <span class="sr-only">(current)</span></span>
</li>
...
</ul>
</nav>
Norite didesnio ar mažesnio puslapių skaičiaus? Pridėti .pagination-lg
arba .pagination-sm
papildomų dydžių.
<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>
Greitos ankstesnės ir kitos nuorodos, skirtos paprastam puslapių rūšiavimui su lengvu žymėjimu ir stiliais. Tai puikiai tinka paprastoms svetainėms, pvz., tinklaraščiams ar žurnalams.
Pagal numatytuosius nustatymus gaviklis sutelkia nuorodas.
<nav aria-label="...">
<ul class="pager">
<li><a href="#">Previous</a></li>
<li><a href="#">Next</a></li>
</ul>
</nav>
Arba galite lygiuoti kiekvieną nuorodą į šonus:
<nav aria-label="...">
<ul class="pager">
<li class="previous"><a href="#"><span aria-hidden="true">←</span> Older</a></li>
<li class="next"><a href="#">Newer <span aria-hidden="true">→</span></a></li>
</ul>
</nav>
Gaviklio nuorodose taip pat naudojama bendroji .disabled
naudingumo klasė iš puslapių.
<nav aria-label="...">
<ul class="pager">
<li class="previous disabled"><a href="#"><span aria-hidden="true">←</span> Older</a></li>
<li class="next"><a href="#">Newer <span aria-hidden="true">→</span></a></li>
</ul>
</nav>
<h3>Example heading <span class="label label-default">New</span></h3>
Pridėkite bet kurią iš toliau nurodytų modifikatorių klasių, kad pakeistumėte etiketės išvaizdą.
<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>
Pateikimo problemų gali kilti, kai siaurame konteineryje yra daugybė įterptųjų etikečių, kurių kiekvienoje yra atskiras inline-block
elementas (pvz., piktograma). Tai yra nustatymas display: inline-block;
. Konteksto ir pavyzdžio ieškokite #13219 .
Lengvai paryškinkite naujus ar neskaitytus elementus pridėdami <span class="badge">
prie nuorodų, įkrovos navigacijos ir kt.
<a href="#">Inbox <span class="badge">42</span></a>
<button class="btn btn-primary" type="button">
Messages <span class="badge">4</span>
</button>
Jei nėra naujų ar neskaitytų elementų, ženkleliai tiesiog sutraukiami (naudojant CSS :empty
parinkiklį), jei nėra turinio.
„Internet Explorer 8“ ženkleliai savaime nesugrius, nes joje nepalaikomas :empty
parinkiklis.
Įtraukti įtaisytieji stiliai, skirti ženkleliams įjungti į aktyvias būsenas tablečių naršymo priemonėse.
<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>
Lengvas, lankstus komponentas, galintis pasirinktinai išplėsti visą peržiūros sritį, kad būtų parodytas pagrindinis jūsų svetainės turinys.
Tai paprastas herojus, paprastas jumbotrono stiliaus komponentas, skirtas atkreipti ypatingą dėmesį į rodomą turinį ar informaciją.
<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>
Jei norite, kad jumbotronas būtų viso pločio ir be užapvalintų kampų, padėkite jį už visų .container
s ribų ir pridėkite vidų .container
.
<div class="jumbotron">
<div class="container">
...
</div>
</div>
Paprastas apvalkalas, skirtas h1
tinkamai atskirti ir segmentuoti turinio dalis puslapyje. Jis gali naudoti h1
numatytąjį small
elementą, taip pat daugumą kitų komponentų (su papildomais stiliais).
<div class="page-header">
<h1>Example page header <small>Subtext for header</small></h1>
</div>
Išplėskite „Bootstrap“ tinklelio sistemą naudodami miniatiūrų komponentą, kad galėtumėte lengvai rodyti vaizdų, vaizdo įrašų, teksto ir kt. tinklelius.
Jei ieškote į Pinterest panašaus įvairaus aukščio ir (arba) pločio miniatiūrų pateikimo, turėsite naudoti trečiosios šalies įskiepį, pvz., Masonry , Isotope arba Salvattore .
Pagal numatytuosius nustatymus „Bootstrap“ miniatiūros yra skirtos rodyti susietus vaizdus su minimaliu reikalingu žymėjimu.
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="..." alt="...">
</a>
</div>
...
</div>
Naudojant šiek tiek papildomo žymėjimo, į miniatiūras galima pridėti bet kokio HTML turinio, pvz., antraščių, pastraipų ar mygtukų.
<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>
Pateikite kontekstinius grįžtamojo ryšio pranešimus apie tipiškus vartotojo veiksmus naudodami keletą galimų ir lanksčių įspėjimų pranešimų.
Apvyniokite bet kokį tekstą ir pasirenkamą atsisakymo mygtuką .alert
ir vieną iš keturių kontekstinių klasių (pvz., .alert-success
) pagrindiniams įspėjimo pranešimams.
Įspėjimai neturi numatytųjų klasių, tik bazines ir modifikavimo klases. Numatytasis pilkas įspėjimas nėra per daug prasmingas, todėl turite nurodyti tipą kontekstinėje klasėje. Pasirinkite iš sėkmės, informacijos, įspėjimo ar pavojaus.
<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>
Remkitės bet kokiu įspėjimu pridėdami pasirenkamą .alert-dismissible
ir uždarymo mygtuką.
Norėdami visiškai veikti, atmesti įspėjimus, turite naudoti įspėjimų JavaScript papildinį .
<div class="alert alert-warning alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
<strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>
Būtinai naudokite <button>
elementą su data-dismiss="alert"
duomenų atributu.
Naudokite .alert-link
naudingumo klasę, kad greitai pateiktumėte atitinkamas spalvotas nuorodas bet kuriame įspėjime.
<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>
Pateikite naujausius atsiliepimus apie darbo eigos ar veiksmo eigą naudodami paprastas, bet lanksčias eigos juostas.
Pažangos juostose naudojami CSS3 perėjimai ir animacijos, kad pasiektų kai kuriuos jų efektus. Šios funkcijos nepalaikomos „Internet Explorer 9“ ir senesnėse arba senesnėse „Firefox“ versijose. „Opera 12“ nepalaiko animacijų.
Jei jūsų svetainėje taikoma turinio saugos politika (CSP) , kuri neleidžia style-src 'unsafe-inline'
, negalėsite naudoti įterptųjų style
atributų eigos juostos pločiui nustatyti, kaip parodyta toliau pateiktuose pavyzdžiuose. Alternatyvūs pločių, suderinamų su griežtais CSP, nustatymo metodai apima šiek tiek tinkinto JavaScript (kuris nustato element.style.width
) arba tinkintų CSS klasių naudojimą.
Numatytoji eigos juosta.
<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>
Pašalinkite <span>
su .sr-only
klasę iš eigos juostos, kad būtų rodomas matomas procentas.
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
60%
</div>
</div>
Norėdami užtikrinti, kad etiketės tekstas būtų įskaitomas net ir esant mažam procentui, apsvarstykite galimybę pridėti min-width
prie eigos juostos.
<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>
Pažangos juostose naudojami tie patys mygtukai ir įspėjimų klasės, kad būtų nuoseklūs stiliai.
<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>
Naudoja gradientą, kad sukurtų dryžuotą efektą. Nepasiekiamas IE9 ir senesnėse versijose.
<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>
Pridėti .active
prie .progress-bar-striped
, kad animuotų juosteles iš dešinės į kairę. Nepasiekiamas IE9 ir senesnėse versijose.
<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>
Įdėkite kelis strypus į tą patį .progress
, kad juos sukrautumėte.
<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>
Abstrakčių objektų stiliai, skirti kurti įvairių tipų komponentus (pvz., tinklaraščio komentarus, tviterius ir kt.), kuriuose kartu su tekstiniu turiniu yra kairėje arba dešinėje išlygiuotas vaizdas.
Numatytoji laikmena rodo medijos objektą (vaizdus, vaizdo įrašą, garsą) turinio bloko kairėje arba dešinėje.
<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>
Klasės .pull-left
ir .pull-right
taip pat egzistuoja ir anksčiau buvo naudojamos kaip medijos komponento dalis, tačiau nuo 3.3.0 yra nebenaudojamos šiam naudojimui. Jie yra maždaug lygiaverčiai .media-left
ir .media-right
, išskyrus tai, kad .media-right
jie turėtų būti dedami po .media-body
html.
Vaizdus ar kitą laikmeną galima lygiuoti viršuje, viduryje arba apačioje. Numatytoji vertė yra išlygiuota viršuje.
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.
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.
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>
Naudodami šiek tiek papildomo žymėjimo, galite naudoti laikmeną sąraše (naudinga komentarų temoms ar straipsnių sąrašams).
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>
Sąrašų grupės yra lankstus ir galingas komponentas, skirtas rodyti ne tik paprastus elementų sąrašus, bet ir sudėtingus su pasirinktiniu turiniu.
Paprasčiausia sąrašų grupė yra tiesiog nesutvarkytas sąrašas su sąrašo elementais ir tinkamomis klasėmis. Remkitės juo naudodami toliau pateiktas parinktis arba, jei reikia, savo CSS.
<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>
Pridėkite ženklelių komponentą prie bet kurio sąrašo grupės elemento ir jis automatiškai bus dešinėje.
<ul class="list-group">
<li class="list-group-item">
<span class="badge">14</span>
Cras justo odio
</li>
</ul>
Susieti sąrašo grupės elementus naudodami prieraišo žymas, o ne sąrašo elementus (tai taip pat reiškia pirminį <div>
, o ne <ul>
). Nereikia atskirų tėvų aplink kiekvieną elementą.
<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>
Sąrašo grupės elementai gali būti mygtukai, o ne sąrašo elementai (tai taip pat reiškia pirminį <div>
, o ne <ul>
). Nereikia atskirų tėvų aplink kiekvieną elementą. Čia nenaudokite standartinių .btn
klasių.
<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>
Pridėkite .disabled
prie a .list-group-item
, kad jis būtų pilkas, kad būtų rodomas išjungtas.
<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>
Naudokite kontekstines klases, kad sukurtumėte numatytųjų arba susietų sąrašo elementų stilių. Taip pat apima .active
valst.
<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>
Pridėkite beveik bet kokį HTML, net ir susietose sąrašų grupėse, pvz., toliau.
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta gravida at 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>
While not always necessary, sometimes you need to put your DOM in a box. For those situations, try the panel component.
By default, all the .panel
does is apply some basic border and padding to contain some content.
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
Easily add a heading container to your panel with .panel-heading
. You may also include any <h1>
-<h6>
with a .panel-title
class to add a pre-styled heading. However, the font sizes of <h1>
-<h6>
are overridden by .panel-heading
.
For proper link coloring, be sure to place links in headings within .panel-title
.
<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>
Wrap buttons or secondary text in .panel-footer
. Note that panel footers do not inherit colors and borders when using contextual variations as they are not meant to be in the foreground.
<div class="panel panel-default">
<div class="panel-body">
Panel content
</div>
<div class="panel-footer">Panel footer</div>
</div>
Like other components, easily make a panel more meaningful to a particular context by adding any of the contextual state classes.
<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>
Add any non-bordered .table
within a panel for a seamless design. If there is a .panel-body
, we add an extra border to the top of the table for separation.
Some default panel content here. 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.
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
<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>
If there is no panel body, the component moves from panel header to table without interruption.
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<!-- Table -->
<table class="table">
...
</table>
</div>
Easily include full-width list groups within any panel.
Some default panel content here. 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.
<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>
Allow browsers to determine video or slideshow dimensions based on the width of their containing block by creating an intrinsic ratio that will properly scale on any device.
Taisyklės tiesiogiai taikomos <iframe>
, <embed>
, <video>
ir <object>
elementams; pasirinktinai naudokite aiškią palikuonių klasę .embed-responsive-item
, kai norite suderinti kitų atributų stilių.
Pro-Patarimas! Nereikia įtraukti frameborder="0"
į savo <iframe>
s, nes mes tai nepaisome už jus.
<!-- 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>
Naudokite šulinį kaip paprastą elemento efektą, kad suteiktumėte jam įterptinį efektą.
<div class="well">...</div>
Valdykite paminkštinimus ir suapvalintus kampus su dviem pasirenkamomis modifikavimo klasėmis.
<div class="well well-lg">...</div>
<div class="well well-sm">...</div>