Pli ol dekduo reuzeblaj komponantoj konstruitaj por provizi ikonografion, menuojn, enigajn grupojn, navigadon, atentigojn kaj multe pli.
Glifikonoj
Disponeblaj glifoj
Inkluzivas pli ol 250 glifojn en tiparo de la aro Glyphicon Halflings. Glyphicons Halflings kutime ne haveblas senpage, sed ilia kreinto disponigis ilin por Bootstrap senkoste. Kiel dankon, ni nur petas, ke vi enmetu ligon reen al Glyphicons kiam ajn eblas.
glifiko glifiko-asterisko
glyphicon glyphicon-plus
glyphicon glyphicon-euro
glyphicon glyphicon-eur
glyphicon glyphicon-minus
glifiko glifiko-nubo
glifiko glifiko-koverto
glifiko glifiko-krajono
glifiko glifiko-vitro
glifiko glifiko-muziko
glifiko glifiko-serĉo
glifiko glifiko-koro
glyphicon glyphicon-stelo
glifiko glifiko-stelo-malplena
glifiko glifiko-uzanto
glifiko glifiko-filmo
glyphicon glyphicon-th-large
glyphicon glyphicon-th
glifikon glifikon-th-listo
glyphicon glyphicon-ok
glifikon glifikon-forigi
glyphicon glyphicon-zoom-en
glyphicon glyphicon-zoom-malgrandigi
glyphicon glyphicon-off
glifiko glifiko-signalo
glifiko glifiko-kog
glyphicon glyphicon-rubo
glifiko glifiko-hejmo
glifiko glifiko-dosiero
glifiko glifiko-tempo
glifiko glifiko-vojo
glyphicon glyphicon-download-alt
glyphicon glyphicon-elŝuto
glyphicon glyphicon-alŝuto
glifikono glifikono-enirkesto
glifiko glifiko-ludo-rondo
glifiko glifiko-ripeto
glyphicon glyphicon-refresh
glifikon glifikon-list-alt
glifiko glifiko-ŝlosilo
glifiko glifiko-flago
glyphicon glyphicon-aŭdiloj
glyphicon glyphicon-volume-off
glyphicon glyphicon-volume-malsupren
glyphicon glyphicon-volumen-supren
glyphicon glyphicon-qrcode
glifiko glifiko-strekokodo
glifiko glifiko-etikedo
glifikon glifikon-etikedoj
glifiko glifiko-libro
glifiko glifiko-legosigno
glyphicon glyphicon-print
glifiko glifiko-fotilo
glifiko glifiko-tiparo
glyphicon glyphicon-bold
glifiko glifiko-kursiva
glifiko glifiko-teksto-alteco
glifiko glifiko-teksto-larĝo
glyphicon glyphicon-align-left
glyphicon glyphicon-align-center
glyphicon glyphicon-align-right
glyphicon glyphicon-align-justify
glifiko glifiko-listo
glifiko glifiko-indent-maldekstre
glifiko glifiko-indent-dekstra
glyphicon glyphicon-facetime-video
glifiko glifiko-bildo
glifiko glifiko-mapo-markilo
glifiko glifiko-ĝustigi
glifiko glifiko-tint
glyphicon glyphicon-redakti
glyphicon glyphicon-share
glifiko glifiko-kontrolo
glifiko glifiko-movo
glifiko glifiko-paŝo-malantaŭen
glifiko glifiko-rapide-malantaŭen
glifiko glifiko-malantaŭen
glyphicon glyphicon-ludo
glifiko glifiko-paŭzo
glyphicon glyphicon-stop
glyphicon glyphicon-antaŭen
glifiko glifiko-rapide antaŭen
glifiko glifiko-paŝo-antaŭen
glifiko glifiko-elĵeti
glifiko glifiko-ĉevron-maldekstre
glifiko glifiko-ĉevron-dekstra
glifiko glifiko-plus-signo
glifiko glifiko-minus-signo
glifiko glifiko-forigi-signo
glifiko glifiko-ok-signo
glifiko glifiko-demando-signo
glifiko glifiko-info-signo
glifiko glifiko-ekrankopio
glifiko glifiko-forigi-cirklo
glyphicon glyphicon-ok-cirklo
glyphicon glyphicon-malpermeso-cirklo
glifiko glifiko-sago-maldekstre
glifiko glifiko-sago-dekstra
glifiko glifiko-sago-supren
glifiko glifiko-sago-malsupren
glyphicon glyphicon-share-alt
glifiko glifiko-regrandigi-plena
glifiko glifiko-regrandigi-malgranda
glifiko glifiko-ekkrio-signo
glifiko glifiko-donaco
glifiko glifiko-folio
glyphicon glyphicon-fajro
glifiko glifiko-oku-malfermita
glifiko glifiko-okulo-fermi
glifiko glifiko-averta signo
glifiko glifiko-aviadilo
glifiko glifiko-kalendaro
glyphicon glyphicon-hazarda
glifikono glifikono-komento
glifiko glifiko-magneto
glifiko glifiko-ĉevron-supren
glyphicon glyphicon-chevron-down
glyphicon glyphicon-retweet
glyphicon glyphicon-butikĉaro
glifiko glifiko-dosierujo-fermi
glifiko glifiko-dosierujo-malfermu
glifiko glifiko-regrandigi-vertikala
glifiko glifiko-regrandigi-horizontal
glyphicon glyphicon-hdd
glyphicon glyphicon-bullhorn
glifiko glifiko-sonorilo
glyphicon glifikon-atestilo
glifikon glifikon-dikfingroj-supren
glyphicon glyphicon-thums-down
glifiko glifiko-mano-dekstra
glifiko glifiko-mano-maldekstre
glifiko glifiko-mano-supren
glifiko glifiko-mano-malsupren
glifiko glifiko-cirklo-sago-dekstra
glifiko glifiko-cirklo-sago-maldekstre
glifiko glifiko-cirklo-sago-supren
glyphicon glyphicon-cirklo-sago-malsupren
glifiko glifiko-globo
glyphicon glyphicon-ŝlosilo
glyphicon glyphicon-taskoj
glifiko glifiko-filtrilo
glyphicon glyphicon-tetujo
glifiko glifiko-plena ekrano
glifiko glifiko-panelo
glifiko glifiko-klipo
glifiko glifiko-koro-malplena
glifiko glifiko-ligilo
glifiko glifiko-telefono
glyphicon glifiko-prempinglo
glyphicon glyphicon-usd
glifiko glyphicon-gbp
glyphicon glyphicon-sort
glyphicon glyphicon-ordigo-laŭ-alfabeto
glyphicon glyphicon-ordigi-laŭ-alfabeto-alt
glyphicon glyphicon-ordigi-laŭ-ordo
glyphicon glyphicon-ordigo-laŭ-ordo-alt
glyphicon glyphicon-ordigi-laŭ-atributoj
glyphicon glyphicon-ordigi-laŭ-atributoj-alt
glifiko glifiko-nemarkita
glyphicon glyphicon-expand
glyphicon glyphicon-kolapso-malsupren
glifiko glifiko-kolapso-supren
glyphicon glyphicon-ensaluti
glifiko glifiko-fulmo
glyphicon glyphicon-elsaluti
glyphicon glyphicon-nova-fenestro
glifiko glifiko-registro
glyphicon glyphicon-save
glyphicon glyphicon-malfermita
glifiko glifiko-konservita
glyphicon glyphicon-import
glyphicon glyphicon-export
glyphicon glyphicon-sendi
glyphicon glyphicon-disketo
glyphicon glyphicon-floppy-saved
glyphicon glyphicon-floppy-remove
glyphicon glyphicon-floppy-save
glyphicon glyphicon-disketo-malfermita
glyphicon glyphicon-kreditkarto
glyphicon glyphicon-translokigo
glyphicon glyphicon-kutlery
glifiko glifiko-kapo
glifiko glifiko-kunpremita
glyphicon glyphicon-earphone
glifiko glifiko-telefono-alt
glifiko glifiko-turo
glifiko glifiko-statistikoj
glyphicon glyphicon-sd-video
glyphicon glyphicon-hd-video
glyphicon glyphicon-subtitoloj
glifiko glifiko-sono-stereo
glyphicon glyphicon-sound-dolby
glifiko glifiko-sono-5-1
glifiko glifiko-sono-6-1
glifiko glifiko-sono-7-1
glyphicon glyphicon-kopyright-marko
glifiko glifiko-registriĝo-marko
glyphicon glyphicon-nubo-elŝuto
glyphicon glyphicon-nubo-alŝuto
glifiko glifiko-arbo-konifero
glifiko glifiko-arbo-decidua
glyphicon glyphicon-cd
glyphicon glyphicon-konservi dosieron
glyphicon glyphicon-malfermi-dosiero
glifiko glifiko-nivelo-supren
glifiko glifiko-kopio
glyphicon glyphicon-paste
glyphicon glyphicon-alerto
glifiko glifiko-egaligilo
glifiko glifiko-reĝo
glifiko glifiko-reĝino
glifiko glifiko-peono
glyphicon glyphicon-bishop
glyphicon glyphicon-knight
glifiko glifiko-bebo-formulo
glyphicon glyphicon-tendo
glifiko glifiko-nigrotabulo
glifiko glifiko-lito
glifiko glifiko-pomo
glyphicon glyphicon-erase
glyphicon glyphicon-sablohorloĝo
glifiko glifiko-lampo
glifiko glifiko-duplika
glyphicon glyphicon-piggy-bank
glifikono glifikono-tondilo
glifiko glifiko-bitcoin
glyphicon glyphicon-btc
glyphicon glyphicon-xbt
glyphicon glyphicon-eno
glyphicon glyphicon-jpy
glifiko glifiko-rublo
glyphicon glyphicon-froti
glifiko glifiko-skalo
glyphicon glyphicon-glacia-leksumo
glyphicon glifiko-glaci-leksumo-gustita
glyphicon glyphicon-edukado
glyphicon glyphicon-opcio-horizontala
glifiko glifiko-opcio-vertikala
glyphicon glyphicon-menuo-hamburgero
glifiko glifiko-modala-fenestro
glifiko glifiko-oleo
glyphicon glyphicon-grain
glyphicon glyphicon-sunokulvitroj
glifikono glifikono-teksto-grandeco
glifiko glifiko-teksto-koloro
glifiko glifiko-teksto-fono
glifiko glifiko-objekto-align-supro
glifiko glifiko-objekto-vicigi-fundo
glifiko glifiko-objekto-vicigi-horizontala
glifiko glifiko-objekto-vicigi-maldekstre
glifiko glifiko-objekto-vicigi-vertikala
glifiko glifiko-objekto-vicigi-dekstre
glifiko glifiko-triangulo-dekstra
glifiko glifiko-triangulo-maldekstre
glifiko glifiko-triangula-fundo
glifiko glifiko-triangula-supro
glyphicon glyphicon-konzolo
glifiko glifiko-superskribo
glifiko glifiko-subskribo
glifiko glifiko-menuo-maldekstre
glifiko glifiko-menuo-dekstra
glyphicon glyphicon-menu-malsupren
glifiko glifiko-menuo-supren
Kiel uzi
Pro agado-kialoj, ĉiuj ikonoj postulas bazan klason kaj individuan ikonklason. Por uzi, metu la sekvan kodon preskaŭ ie ajn. Nepre lasu spacon inter la ikono kaj teksto por taŭga kompletigo.
Ne miksu kun aliaj komponantoj
Ikonoklasoj ne povas esti rekte kombinitaj kun aliaj komponantoj. Ili ne estu uzataj kune kun aliaj klasoj sur la sama elemento. Anstataŭe, aldonu nestitan <span>kaj apliku la ikonklasojn al la <span>.
Nur por uzo sur malplenaj elementoj
Ikonoklasoj devus esti uzataj nur sur elementoj kiuj enhavas neniun tekstan enhavon kaj havas neniujn filajn elementojn.
Ŝanĝante la ikonan tiparolokon
Bootstrap supozas ke ikonotiparaj dosieroj troviĝos en la ../fonts/dosierujo, rilate al la kompilitaj CSS-dosieroj. Movi aŭ renomi tiujn tipardosierojn signifas ĝisdatigi la CSS en unu el tri manieroj:
Ŝanĝu la @icon-font-pathkaj/aŭ @icon-font-namevariablojn en la fonto Malpli dosieroj.
Uzu kian ajn elekton plej taŭgas por via specifa disvolva agordo.
Alireblaj ikonoj
Modernaj versioj de helpaj teknologioj anoncos CSS generitan enhavon, same kiel specifajn Unikodajn signojn. Por eviti neintencitan kaj konfuzan eliron en ekranlegiloj (precipe kiam ikonoj estas uzataj nur por ornamado), ni kaŝas ilin per la aria-hidden="true"atributo.
Se vi uzas ikonon por transdoni signifon (anstataŭ nur kiel ornama elemento), certigu, ke ĉi tiu signifo ankaŭ estas transdonita al helpaj teknologioj - ekzemple, inkludu plian enhavon, videble kaŝitan kun la .sr-onlyklaso.
Se vi kreas kontrolojn kun neniu alia teksto (kiel ekzemple <button>kiu enhavas nur ikonon), vi ĉiam devus provizi alternativan enhavon por identigi la celon de la kontrolo, por ke ĝi havu sencon por uzantoj de helpaj teknologioj. En ĉi tiu kazo, vi povus aldoni aria-labelatributon al la kontrolo mem.
Ekzemploj
Uzu ilin en butonoj, butongrupoj por ilobreto, navigado aŭ antaŭmetitaj formularenigaĵoj.
Ikono uzata en atentigo por sciigi, ke ĝi estas erarmesaĝo, kun plia .sr-onlyteksto por transdoni ĉi tiun sugeston al uzantoj de helpaj teknologioj.
Eraro:Enigu validan retadreson
Dropdowns
Ŝaltigebla, kunteksta menuo por montri listojn de ligiloj. Farita interaga kun la falmenuo JavaScript-kromaĵo .
Ekzemplo
Envolvu la ellasilon de la falmenuo kaj la falmenuon ene de .dropdown, aŭ alia elemento kiu deklaras position: relative;. Poste aldonu la HTML de la menuo.
Defaŭlte, falmenuo estas aŭtomate poziciigita 100% de la supro kaj laŭ la maldekstra flanko de sia gepatro. Aldonu .dropdown-menu-rightal .dropdown-menudekstre vicigi la falmenuon.
Povas postuli plian pozicion
Dropdowns estas aŭtomate poziciigitaj per CSS ene de la normala fluo de la dokumento. Ĉi tio signifas, ke gemenuoj povas esti tranĉitaj de gepatroj kun certaj overflowtrajtoj aŭ aperi ekster limoj de la vidfenestro. Pritraktu ĉi tiujn problemojn memstare kiam ili aperas.
Malrekomendita .pull-rightvicigo
Ekde v3.1.0, ni malrekomendis .pull-rightla falmenuojn. Por dekstre vicigi menuon, uzu .dropdown-menu-right. Dekstre vicigitaj navkomponentoj en la navigadbreto uzas miksan version de ĉi tiu klaso por aŭtomate vicigi la menuon. Por anstataŭi ĝin, uzu .dropdown-menu-left.
Kapoj
Aldonu kaplinion por etikedi sekciojn de agoj en iu ajn falmenuo.
Grupigu serion da butonoj kune sur unu linio kun la butongrupo. Aldonu laŭvolan JavaScript-radion kaj markobuton-stilan konduton per nia butonaldonaĵo .
Konsiletoj kaj popovers en butongrupoj postulas specialan agordon
Kiam vi uzas konsiletojn aŭ popovers sur elementoj ene de .btn-group, vi devos specifi la opcion container: 'body'por eviti nedeziratajn kromefikojn (kiel la elemento plilarĝiĝanta kaj/aŭ perdi siajn rondigitajn angulojn kiam la ilotip aŭ popover estas ekigita).
Certigu korekta rolekaj provizi etikedon
Por ke helpaj teknologioj - kiel ekranlegiloj - peri ke serio de butonoj estas grupigitaj, taŭga roleatributo devas esti provizita. Por butongrupoj, ĉi tio estus role="group", dum ilobretoj devus havi role="toolbar".
Unu escepto estas grupoj kiuj enhavas nur ununuran kontrolon (ekzemple la pravigitaj butongrupoj kun <button>elementoj) aŭ falmenuon.
Krome, grupoj kaj ilobretoj devus ricevi eksplicitan etikedon, ĉar la plej multaj helpaj teknologioj alie ne anoncos ilin, malgraŭ la ĉeesto de la ĝusta roleatributo. En la ekzemploj provizitaj ĉi tie, ni uzas aria-label, sed alternativoj kiel ekzemple aria-labelledbyankaŭ povas esti uzataj.
Baza ekzemplo
Envolvu serion da butonoj per .btnen .btn-group.
Butona ilobreto
Kombinu arojn <div class="btn-group">en a <div class="btn-toolbar">por pli kompleksaj komponantoj.
Dimensio
Anstataŭ apliki butonajn grandecoklasojn al ĉiu butono en grupo, simple aldonu .btn-group-*al ĉiu .btn-group, inkluzive kiam nestumas plurajn grupojn.
Nesto
Metu a .btn-groupen alian .btn-groupkiam vi volas falmenuojn miksitajn kun serio de butonoj.
Faru grupon de butonoj etendiĝi je egalaj grandecoj por etendi la tutan larĝon de sia gepatro. Ankaŭ funkcias kun butonfalumoj ene de la butongrupo.
Pritrakti landlimojn
Pro la specifaj HTML kaj CSS uzataj por pravigi butonojn (nome display: table-cell), la limoj inter ili estas duobligitaj. En regulaj butongrupoj, margin-left: -1pxestas uzata por stakigi la randojn anstataŭ forigi ilin. Tamen, marginne funkcias kun display: table-cell. Rezulte, depende de viaj personigoj al Bootstrap, vi eble volas forigi aŭ rekolorigi la randojn.
IE8 kaj limoj
Interreto Explorer 8 ne bildigas randojn sur butonoj en pravigita butongrupo, ĉu ĝi estas ŝaltita <a>aŭ <button>elementoj. Por ĉirkaŭiri tion, envolvu ĉiun butonon en alian .btn-group.
Se la <a>elementoj estas uzataj por funkcii kiel butonoj - ekigante enpaĝan funkcion, anstataŭ navigi al alia dokumento aŭ sekcio ene de la nuna paĝo - ili ankaŭ devus ricevi taŭgan role="button".
Kun <button>elementoj
Por uzi pravigitajn butongrupojn kun <button>elementoj, vi devas envolvi ĉiun butonon en butongrupon . Plej multaj retumiloj ne taŭge aplikas nian CSS por pravigo al <button>elementoj, sed ĉar ni subtenas butonfalumojn, ni povas ĉirkaŭlabori tion.
Butonfalumoj
Uzu ajnan butonon por ekigi falmenuon metante ĝin ene de a .btn-groupkaj disponigante la taŭgan menuan markadon.
Dependeco de kromprogramoj
Butonaj falmenuoj postulas, ke la falmenuo-kromaĵo estu inkluzivita en via versio de Bootstrap.
Ununura butono falmenuoj
Transformu butonon en falmenuman baskulon kun iuj bazaj markadaj ŝanĝoj.
Plilongigu formularajn kontrolojn aldonante tekston aŭ butonojn antaŭ, post aŭ ambaŭflanke de iu tekst-bazita <input>. Uzu .input-groupkun .input-group-addonaŭ .input-group-btnpor antaŭmeti aŭ almeti elementojn al unuopa .form-control.
Nur tekstaj <input>s
Evitu uzi <select>elementojn ĉi tie ĉar ili ne povas esti plene stilitaj en WebKit-retumiloj.
Evitu uzi <textarea>elementojn ĉi tie ĉar ilia rowsatributo ne estos respektata en iuj kazoj.
Konsiletoj kaj popovers en eniggrupoj postulas specialan agordon
Kiam vi uzas konsiletojn aŭ popovers sur elementoj ene de .input-group, vi devos specifi la opcion container: 'body'por eviti nedeziratajn kromefikojn (kiel la elemento plilarĝiĝanta kaj/aŭ perdi siajn rondigitajn angulojn kiam la ilotip aŭ popover estas ekigita).
Ne miksu kun aliaj komponantoj
Ne miksu formgrupojn aŭ kradkolumnklasojn rekte kun eniggrupoj. Anstataŭe, nestu la eniggrupon interne de la formogrupo aŭ krad-rilata elemento.
Ĉiam aldonu etikedojn
Ekranlegiloj havos problemojn kun viaj formoj se vi ne inkluzivas etikedon por ĉiu enigo. Por ĉi tiuj eniggrupoj, certigu, ke ajna aldona etikedo aŭ funkcieco estas transdonita al helpaj teknologioj.
La preciza tekniko uzota (videblaj <label>elementoj, <label>elementoj kaŝitaj uzante la .sr-onlyklason, aŭ uzo de la aria-label, aria-labelledby, aria-describedby, titleaŭ placeholderatributo) kaj kiaj aldonaj informoj devos esti transdonitaj varias depende de la preciza speco de interfaca fenestraĵo, kiun vi efektivigas. La ekzemploj en ĉi tiu sekcio disponigas kelkajn proponitajn, kaz-specifajn alirojn.
Baza ekzemplo
Metu unu aldonaĵon aŭ butonon ambaŭflanke de enigo. Vi ankaŭ povas meti unu ambaŭflanke de enigo.
Ni ne subtenas plurajn aldonaĵojn ( .input-group-addonaŭ .input-group-btn) unuflanke.
Ni ne subtenas plurajn formularajn kontrolojn en ununura eniga grupo.
Dimensio
Aldonu la relativajn formo-grandecklasojn al la .input-groupmem kaj enhavo ene aŭtomate regrandiĝos—ne necesas ripeti la formo-kontrolgrandecklasojn sur ĉiu elemento.
Markobutonoj kaj radioaldonaĵoj
Metu ajnan markobutonon aŭ radio-opcion en la aldonaĵon de eniga grupo anstataŭ tekston.
Butonaj aldonaĵoj
Butonoj en eniggrupoj estas iom malsamaj kaj postulas unu ekstran nivelon de nestado. Anstataŭ .input-group-addon, vi devos uzi .input-group-btnpor envolvi la butonojn. Ĉi tio estas postulata pro defaŭltaj retumstiloj, kiuj ne povas esti anstataŭitaj.
Butonoj kun falmenuoj
Segmentitaj butonoj
Multoblaj butonoj
Dum vi povas nur havi unu aldonaĵon per flanko, vi povas havi plurajn butonojn ene de unu .input-group-btn.
Navs
Navs disponeblaj en Bootstrap havas komunan markadon, komencante de la baza .navklaso, same kiel komunaj ŝtatoj. Interŝanĝu modifklasojn por ŝanĝi inter ĉiu stilo.
Uzado de navs por langetaj paneloj postulas JavaScript-langetojn-kromaĵon
Por langetoj kun tabulaj areoj, vi devas uzi la langetojn JavaScript-kromaĵon . La markado ankaŭ postulos kromajn rolekaj ARIA-atributojn - vidu la ekzemplan markadon de la kromaĵo por pliaj detaloj.
Faru navigaciojn uzatajn kiel navigado alirebla
Se vi uzas navs por provizi navigadbreton, nepre aldonu role="navigation"al la plej logika gepatra ujo de la <ul>, aŭ envolvu <nav>elementon ĉirkaŭ la tuta navigado. Ne aldonu la rolon al la <ul>mem, ĉar tio malhelpus ĝin esti anoncita kiel reala listo de helpaj teknologioj.
Langetoj
Notu, ke la .nav-tabsklaso postulas la .navbazan klason.
Facile faru langetojn aŭ pilolojn egalajn larĝojn de sia gepatro ĉe ekranoj pli larĝaj ol 768px kun .nav-justified. Sur pli malgrandaj ekranoj, la nav-ligiloj estas stakigitaj.
Pravigitaj navbar nav-ligiloj nuntempe ne estas subtenataj.
Safaro kaj respondemaj pravigitaj navigacioj
Ekde v9.1.2, Safaro montras cimon en kiu regrandigi vian retumilon horizontale kaŭzas bildigajn erarojn en la pravigita navigado, kiuj estas forigitaj post refreŝiĝo. Ĉi tiu cimo ankaŭ estas montrita en la pravigita nav-ekzemplo .
Navbaroj estas respondemaj metakomponentoj, kiuj funkcias kiel navigaj kaplinioj por via aplikaĵo aŭ retejo. Ili komencas kolapsitaj (kaj estas ŝanĝeblaj) en moveblaj vidoj kaj iĝas horizontalaj kiam la disponebla vidfenestro-larĝo pliiĝas.
Pravigitaj navbar nav-ligiloj nuntempe ne estas subtenataj.
Superflua enhavo
Ĉar Bootstrap ne scias kiom da spaco bezonas la enhavo en via navdrinkejo, vi eble renkontos problemojn kun enhavo envolvita en duan vicon. Por solvi ĉi tion, vi povas:
Ŝanĝu la punkton, ĉe kiu via navbar ŝanĝas inter kolapsita kaj horizontala reĝimo. Agordu la @grid-float-breakpointvariablon aŭ aldonu vian propran amaskomunikilan demandon.
Postulas JavaScript-kromaĵon
Se JavaScript estas malŝaltita kaj la vidfenestro estas sufiĉe mallarĝa por ke la navigadbreto kolapsas, estos neeble vastigi la navigadbreton kaj vidi la enhavon ene de la .navbar-collapse.
La respondema navbar postulas ke la kolapsa kromaĵo estu inkluzivita en via versio de Bootstrap.
Ŝanĝante la kolapsitan poŝtelefonan navbar-romppunkton
La navbar kolapsas en sian vertikalan moveblan vidon kiam la vidfenestro estas pli mallarĝa ol @grid-float-breakpoint, kaj disetendiĝas en sian horizontalan ne-poŝtelefonan vidon kiam la vidfenestro estas almenaŭ @grid-float-breakpointen larĝo. Alĝustigu ĉi tiun variablon en la Malpli fonto por kontroli kiam la navbar kolapsas/vastiĝas. La defaŭlta valoro estas 768px(la plej malgranda "malgranda" aŭ "tablojdo") ekrano).
Faru navbarojn alireblaj
Nepre uzu <nav>elementon aŭ, se vi uzas pli senmarkan elementon kiel ekzemple <div>, aldonu a role="navigation"al ĉiu navbar por eksplicite identigi ĝin kiel grava regiono por uzantoj de helpaj teknologioj.
Marka bildo
Anstataŭigu la navbarmarkon per via propra bildo interŝanĝante la tekston por <img>. Ĉar la .navbar-brandhavas sian propran remburaĵon kaj altecon, eble vi devos anstataŭi iujn CSS depende de via bildo.
Formoj
Metu formenhavon interne .navbar-formpor taŭga vertikala vicigo kaj kolapsitan konduton en mallarĝaj vidfenestroj. Uzu la alineajn opciojn por decidi kie ĝi loĝas ene de la navbar enhavo.
Kiel atentigo, .navbar-formdividas grandan parton de sia kodo .form-inlineper mixin. Iuj formularaj kontroloj, kiel eniggrupoj, povas postuli fiksajn larĝojn aperigi ĝuste ene de navigadbreto.
Avertoj pri poŝtelefonoj
Estas kelkaj avertoj pri uzado de formularaj kontroloj ene de fiksaj elementoj en porteblaj aparatoj. Vidu nian retumilon subtendokumentojn por detaloj.
Ĉiam aldonu etikedojn
Ekranlegiloj havos problemojn kun viaj formoj se vi ne inkluzivas etikedon por ĉiu enigo. Por ĉi tiuj enliniaj formoj, vi povas kaŝi la etikedojn uzante la .sr-onlyklason. Ekzistas pliaj alternativaj metodoj provizi etikedon por helpaj teknologioj, kiel ekzemple la aria-label, aria-labelledbyaŭ titleatributo. Se neniu el ĉi tiuj ĉeestas, ekranlegantoj povas uzi la placeholderatributon, se ĉeestas, sed notu ke uzo de placeholderkiel anstataŭaĵo por aliaj etikedmetodoj ne estas konsilita.
Butonoj
Aldonu la .navbar-btnklason al <button>elementoj ne loĝantaj en a <form>por vertikale centri ilin en la navbar.
Kuntekst-specifa uzado
Kiel la normaj butonklasoj , .navbar-btnpovas esti uzata sur <a>kaj <input>elementoj. Tamen, .navbar-btnnek la normaj butonklasoj devus esti uzataj sur <a>elementoj ene de .navbar-nav.
Teksto
Envolvu ŝnurojn de teksto en elemento kun .navbar-text, kutime sur <p>etikedo por ĝusta gvidado kaj koloro.
Ne-nav-ligiloj
Por homoj uzantaj normajn ligilojn, kiuj ne estas ene de la regula navigad-naviga komponento, uzu la .navbar-linkklason por aldoni la taŭgajn kolorojn por la defaŭltaj kaj inversaj navbar-opcioj.
Komponento vicigo
Vicigu nav-ligilojn, formojn, butonojn aŭ tekston, uzante la .navbar-leftaŭ .navbar-rightutilajn klasojn. Ambaŭ klasoj aldonos CSS-flosilon en la specifita direkto. Ekzemple, por vicigi nav-ligilojn, metu ilin en apartan <ul>kun la respektiva utila klaso aplikita.
Ĉi tiuj klasoj estas miksitaj versioj de .pull-leftkaj .pull-right, sed ili estas ampleksitaj al amaskomunikilaj demandoj por pli facila uzado de navbar-komponentoj trans aparataj grandecoj.
Dekstre vicigante plurajn komponantojn
Navbars nuntempe havas limigon kun pluraj .navbar-rightklasoj. Por ĝuste spacigi enhavon, ni uzas negativan marĝenon sur la lasta .navbar-rightelemento. Kiam ekzistas pluraj elementoj uzantaj tiun klason, ĉi tiuj marĝenoj ne funkcias kiel celite.
Ni revizitos ĉi tion kiam ni povos reverki tiun komponanton en v4.
Riparita supre
Aldonu .navbar-fixed-topkaj inkluzivu .containeraŭ .container-fluidal centro kaj kuseneto navbar enhavo.
Korpa remburaĵo necesas
La fiksita navbaro supermetos vian alian enhavon, krom se vi aldonos paddingal la supro de la <body>. Provu viajn proprajn valorojn aŭ uzu nian fragmenton sube. Konsilo: Defaŭlte, la navigadbreto estas 50px alta.
Certiĝu inkluzivi ĉi tion post la kerno Bootstrap CSS.
Fiksita malsupre
Aldonu .navbar-fixed-bottomkaj inkluzivu .containeraŭ .container-fluidal centro kaj kuseneto navbar enhavo.
Korpa remburaĵo necesas
La fiksita navbreto supermetos vian alian enhavon, krom se vi aldonos paddingal la malsupro de la <body>. Provu viajn proprajn valorojn aŭ uzu nian fragmenton sube. Konsilo: Defaŭlte, la navigadbreto estas 50px alta.
Certiĝu inkluzivi ĉi tion post la kerno Bootstrap CSS.
Statika supro
Kreu plenlarĝan navbaron, kiu rulumas for kun la paĝo aldonante .navbar-static-topkaj inkluzivi .containeraŭ .container-fluidal centra kaj kuseneto navbar enhavo.
Male al la .navbar-fixed-*klasoj, vi ne bezonas ŝanĝi ajnan kompletigo sur la body.
Inversa navbaro
Modifi la aspekton de la navbar aldonante .navbar-inverse.
Panpecetoj
Indiku la lokon de la aktuala paĝo ene de navigacia hierarkio.
Apartigiloj estas aŭtomate aldonitaj en CSS per :beforekaj content.
Provizu paĝigajn ligilojn por via retejo aŭ aplikaĵo per la plurpaĝa paĝiga komponanto, aŭ la pli simpla paĝiga alternativo .
Defaŭlta paĝigo
Simpla paĝigo inspirita de Rdio, bonega por programoj kaj serĉrezultoj. La granda bloko estas malfacile maltrafi, facile skalebla kaj provizas grandajn klakajn areojn.
Etikedado de la paĝiga komponanto
La paĝiga komponanto devas esti envolvita en <nav>elemento por identigi ĝin kiel navigada sekcio por ekranlegantoj kaj aliaj helpaj teknologioj. Krome, ĉar paĝo verŝajne jam havas pli ol unu tian navigadan sekcion (kiel la ĉefa navigado en la kaplinio aŭ flanka navigado), estas konsilinde provizi priskriban aria-labelpor la <nav>kiu reflektas ĝian celon. Ekzemple, se la paĝiga komponanto estas uzata por navigi inter aro de serĉrezultoj, taŭga etikedo povus esti aria-label="Search results pages".
Malfunkciigitaj kaj aktivaj ŝtatoj
Ligiloj estas agordeblaj por malsamaj cirkonstancoj. Uzu .disabledpor neklakeblaj ligiloj kaj .activepor indiki la nunan paĝon.
Ni rekomendas ke vi interŝanĝu aktivajn aŭ malebligitajn ankrojn por <span>, aŭ preterlasu la ankron en la kazo de la antaŭaj/sekvaj sagoj, por forigi klakfunkciecon konservante celitajn stilojn.
Dimensio
Ĉu vi volas pli grandan aŭ pli malgrandan paĝigon? Aldonu .pagination-lgaŭ .pagination-smpor pliaj grandecoj.
Televokilo
Rapidaj antaŭaj kaj sekvaj ligiloj por simplaj paĝigaj efektivigoj kun malpeza markado kaj stiloj. Ĝi estas bonega por simplaj retejoj kiel blogoj aŭ revuoj.
Defaŭlta ekzemplo
Defaŭlte, la paginador centras ligilojn.
Vicigitaj ligiloj
Alternative, vi povas vicigi ĉiun ligilon al la flankoj:
Laŭvola malfunkciigita ŝtato
Pager-ligiloj ankaŭ uzas la ĝeneralan .disabledutilecan klason de la paĝigo.
Etikedoj
Ekzemplo
Ekzempla titolo Nova
Ekzempla titolo Nova
Ekzempla titolo Nova
Ekzempla titolo Nova
Ekzempla titolo Nova
Ekzempla titolo Nova
Disponeblaj variadoj
Aldonu iun el la sube menciitaj modifklasoj por ŝanĝi la aspekton de etikedo.
Defaŭlta Primara Sukcesa Informo Averto Danĝero
Ĉu vi havas tunojn da etikedoj?
Problemoj de bildado povas aperi kiam vi havas dekojn da enliniaj etikedoj ene de mallarĝa ujo, ĉiu enhavante sian propran inline-blockelementon (kiel ikono). La vojo ĉirkaŭ ĉi tio fiksiĝas display: inline-block;. Por kunteksto kaj ekzemplo, vidu #13219 .
Insignoj
Facile reliefigu novajn aŭ nelegitajn erojn aldonante <span class="badge">al ligiloj, Bootstrap-nav-ojn kaj pli.
Por fari la jumbotron plenan larĝon, kaj sen rondigitaj anguloj, metu ĝin ekster ĉiuj .containers kaj anstataŭe aldonu .containerene.
Paĝa kaplinio
Simpla ŝelo por h1taŭge interspacigi kaj segmenti sekciojn de enhavo sur paĝo. Ĝi povas utiligi la h1defaŭltan smallelementon, same kiel plej multajn aliajn komponantojn (kun pliaj stiloj).
Ekzempla paĝokapo Subteksto por kaplinio
Bildetojn
Etendi la kradsistemon de Bootstrap kun la bildeto-komponento por facile montri kradojn de bildoj, filmetoj, tekstoj kaj pli.
Se vi serĉas Pinterest-similan prezenton de bildetoj de diversaj altecoj kaj/aŭ larĝoj, vi devos uzi aldonaĵon de triaj kiel ekzemple Masonry , Isotope , aŭ Salvattore .
Defaŭlta ekzemplo
Defaŭlte, la bildetoj de Bootstrap estas dizajnitaj por montri ligitajn bildojn kun minimuma postulata markado.
Propra enhavo
Kun iom da ekstra markado, eblas aldoni ajnan specon de HTML-enhavo kiel titoloj, alineoj aŭ butonoj en bildetojn.
Bildeto-etikedo
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
Provizu kontekstajn sugestajn mesaĝojn por tipaj uzant-agoj per la manpleno da disponeblaj kaj flekseblaj atentaj mesaĝoj.
Ekzemploj
Envolvu ajnan tekston kaj laŭvolan forĵetbutonon en .alertkaj unu el la kvar kuntekstaj klasoj (ekz. .alert-success) por bazaj atentaj mesaĝoj.
Neniu defaŭlta klaso
Atentigoj ne havas defaŭltajn klasojn, nur bazajn kaj modifklasojn. Defaŭlta griza alarmo ne havas tro da senco, do vi devas specifi tipon per kunteksta klaso. Elektu el sukceso, informoj, averto aŭ danĝero.
Bone farita! Vi sukcese legis ĉi tiun gravan atentan mesaĝon.
Atentu! Ĉi tiu atentigo bezonas vian atenton, sed ĝi ne estas tre grava.
Averto! Pli bone kontrolu vin, vi ne aspektas tro bona.
Ho klaku! Ŝanĝu kelkajn aferojn kaj provu sendi denove.
Malakcepteblaj atentigoj
Konstruu sur iu ajn atentigo aldonante laŭvolan .alert-dismissiblekaj fermbutonon.
Provizu ĝisdatigitajn komentojn pri la progreso de laborfluo aŭ ago per simplaj sed flekseblaj progresbrikoj.
Inter-retumila kongruo
Progresdrinkejoj uzas CSS3-transirojn kaj kuraĝigojn por atingi kelkajn el siaj efikoj. Ĉi tiuj funkcioj ne estas subtenataj en Internet Explorer 9 kaj sub aŭ pli malnovaj versioj de Firefox. Opera 12 ne subtenas kuraĝigojn.
Kongruo pri Enhava Sekurecpolitiko (CSP).
Se via retejo havas Enhavan Sekurecpolitikon (CSP) kiu ne permesas style-src 'unsafe-inline', tiam vi ne povos uzi enliniajn styleatributojn por agordi larĝojn de progresbreto kiel montrite en niaj ekzemploj sube. Alternativaj metodoj por agordi la larĝojn, kiuj estas kongruaj kun striktaj CSP-oj, inkluzivas uzi iom laŭmendan JavaScript (tio starigas element.style.width) aŭ uzi kutimajn CSS-klasojn.
Baza ekzemplo
Defaŭlta progresbreto.
60% Kompleta
Kun etikedo
Forigu la <span>kun .sr-onlyklason el la progresbreto por montri videblan procenton.
60%
Por certigi, ke la etikedo teksto restas legebla eĉ por malaltaj procentoj, konsideru aldoni a min-widthal la progresbreto.
0%
2%
Kuntekstaj alternativoj
Progresbrikoj uzas iujn el la samaj butonoj kaj atentaj klasoj por konsekvencaj stiloj.
40% Kompleta (sukceso)
20% Kompleta
60% Kompleta (averto)
80% Kompleta (danĝero)
Striita
Uzas gradienton por krei strian efikon. Ne havebla en IE9 kaj sube.
40% Kompleta (sukceso)
20% Kompleta
60% Kompleta (averto)
80% Kompleta (danĝero)
Vigla
Aldonu .activeal .progress-bar-stripedpor animi la striojn dekstren al maldekstre. Ne havebla en IE9 kaj sube.
45% Kompleta
Stakitaj
Metu plurajn stangojn en la saman .progresspor staki ilin.
35% Kompleta (sukceso)
20% Kompleta (averto)
10% Kompleta (danĝero)
Media objekto
Abstraktaj objektostiloj por konstrui diversajn specojn de komponantoj (kiel blogaj komentoj, Tweets, ktp) kiuj prezentas maldekstren aŭ dekstren vicigitan bildon kune kun teksta enhavo.
Defaŭlta amaskomunikilaro
La defaŭlta amaskomunikilaro montras amaskomunikilaron (bildojn, vidbendon, aŭdion) maldekstre aŭ dekstre de enhavbloko.
Media titolo
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Media titolo
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Nestitaj amaskomunikiloj titolo
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Media titolo
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Media titolo
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
La klasoj .pull-leftkaj .pull-rightankaŭ ekzistas kaj antaŭe estis uzataj kiel parto de la amaskomunikilaro, sed estas malrekomenditaj por tiu uzo ekde v3.3.0. Ili estas proksimume ekvivalentaj al .media-leftkaj .media-right, krom tio .media-rightdevus esti metitaj post la .media-bodyen la html.
Media vicigo
La bildoj aŭ aliaj rimedoj povas esti vicigitaj supre, meze aŭ malsupre. La defaŭlto estas supre vicigita.
Supraj vicigitaj amaskomunikiloj
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.
Meza vicigita amaskomunikilaro
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.
Malsupre vicigita amaskomunikilaro
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.
Listo de amaskomunikiloj
Kun iom da ekstra markado, vi povas uzi amaskomunikilaron ene de listo (utila por komentfadenoj aŭ artikoloj-listoj).
Media titolo
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Nestitaj amaskomunikiloj titolo
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Nestitaj amaskomunikiloj titolo
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Nestitaj amaskomunikiloj titolo
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Listo grupo
Listogrupoj estas fleksebla kaj potenca komponanto por montri ne nur simplajn listojn de elementoj, sed kompleksajn kun kutima enhavo.
Baza ekzemplo
La plej baza listogrupo estas simple neordigita listo kun listeroj, kaj la taŭgaj klasoj. Konstruu sur ĝi per la ebloj kiuj sekvas, aŭ via propra CSS laŭbezone.
Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulo ĉe eros
Insignoj
Aldonu la komponenton de insignoj al iu ajn listgrupo kaj ĝi estos aŭtomate poziciigita dekstre.
14Cras justo odio
2Dapibus ac facilisis in
1Morbi leo risus
Ligitaj eroj
Ligi listgrupajn erojn uzante ankrajn etikedojn anstataŭ listaĵojn (tio ankaŭ signifas gepatron <div>anstataŭ <ul>). Ne necesas individuaj gepatroj ĉirkaŭ ĉiu elemento.
Listo-grupo-eroj povas esti butonoj anstataŭ list-eroj (tio ankaŭ signifas gepatron <div>anstataŭ <ul>). Ne necesas individuaj gepatroj ĉirkaŭ ĉiu elemento. Ne uzu la normajn .btnklasojn ĉi tie.
Malebligitaj eroj
Aldonu .disabledal .list-group-itempor grizi ĝin por aperi malŝaltita.
Kvankam ne ĉiam necesas, foje vi devas meti vian DOM en skatolon. Por tiuj situacioj, provu la panelan komponanton.
Baza ekzemplo
Defaŭlte, ĉiuj .panelfaroj estas apliki iun bazan randon kaj remburaĵon por enhavi iom da enhavo.
Baza panela ekzemplo
Panelo kun titolo
Facile aldonu titolon al via panelo per .panel-heading. Vi ankaŭ povas inkluzivi ajnan <h1>- <h6>kun .panel-titleklaso por aldoni antaŭstilan titolon. Tamen, la tiparograndoj de <h1>- <h6>estas anstataŭitaj de .panel-heading.
Por taŭga ligokolorigo, nepre metu ligilojn en rubrikojn ene de .panel-title.
Panela titolo sen titolo
Enhavo de panelo
Paneltitolo
Enhavo de panelo
Panelo kun piedlinio
Envolvi butonojn aŭ malĉefajn tekstojn en .panel-footer. Notu, ke panelpiedoj ne heredas kolorojn kaj randojn kiam oni uzas kontekstajn variojn, ĉar ili ne estas intencitaj esti en la malfono.
Enhavo de panelo
Kuntekstaj alternativoj
Kiel aliaj komponantoj, facile faru panelon pli signifa al aparta kunteksto aldonante iun ajn el la kuntekstaj ŝtatklasoj.
Paneltitolo
Enhavo de panelo
Paneltitolo
Enhavo de panelo
Paneltitolo
Enhavo de panelo
Paneltitolo
Enhavo de panelo
Paneltitolo
Enhavo de panelo
Kun tabloj
Aldonu ajnan neborditan .tableene de panelo por senjunta dezajno. Se estas .panel-body, ni aldonas kroman randon al la supro de la tablo por apartigo.
Panela titolo
Iu defaŭlta panelenhavo ĉi tie. 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.
#
Antaŭnomo
Familia nomo
Uzantnomo
1
Mark
Otto
@mdo
2
Jakobo
Thornton
@graso
3
Larry
la birdo
@twitter
Se ne ekzistas panela korpo, la komponanto moviĝas de panela kaplinio al tablo sen interrompo.
Panela titolo
#
Antaŭnomo
Familia nomo
Uzantnomo
1
Mark
Otto
@mdo
2
Jakobo
Thornton
@graso
3
Larry
la birdo
@twitter
Kun listgrupoj
Facile inkluzivi plenlarĝajn listgrupojn ene de ajna panelo.
Panela titolo
Iu defaŭlta panelenhavo ĉi tie. 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 in
Morbi leo risus
Porta ac consectetur ac
Vestibulo ĉe eros
Respondema embed
Permesu al retumiloj determini dimensiojn de video aŭ lumbildoj laŭ la larĝo de sia entena bloko kreante internan rilatumon, kiu taŭge skalos en iu ajn aparato.
Reguloj estas rekte aplikataj al <iframe>, <embed>, <video>, kaj <object>elementoj; laŭvole uzu eksplicitan posteulklason .embed-responsive-itemkiam vi volas kongrui kun la stilo por aliaj atributoj.
Por-Konsileto! Vi ne bezonas inkluzivi frameborder="0"en viaj <iframe>s ĉar ni superregas tion por vi.
Wells
Defaŭlte bone
Uzu la puton kiel simplan efikon al elemento por doni al ĝi enmetitan efikon.
Rigardu, mi estas en puto!
Laŭvolaj klasoj
Kontrolu remburaĵon kaj rondigitajn angulojn kun du laŭvolaj modifklasoj.