Yli tusina uudelleenkäytettävää komponenttia, jotka on suunniteltu tarjoamaan ikonografiaa, avattavia valikoita, syöttöryhmiä, navigointia, hälytyksiä ja paljon muuta.
Glyfikonit
Käytettävissä olevat glyfit
Sisältää yli 250 glyfiä kirjasinmuodossa Glyphicon Halflings -sarjasta. Glyphicons Halflingit eivät yleensä ole saatavilla ilmaiseksi, mutta niiden luoja on antanut ne Bootstrapille ilmaiseksi. Kiitoksena pyydämme vain, että liität mukaan linkin takaisin Glyphiconsiin aina kun mahdollista.
glyphicon glyphicon-tähti
glyphicon glyphicon-plus
glyphicon glyphicon-euro
glyphicon glyphicon-eur
glyphicon glyphicon-miinus
glyphicon glyphicon-pilvi
glyphicon glyphicon-kirjekuori
glyphicon glyphicon-kynä
glyphicon glyphicon-lasi
glyphicon glyphicon-musiikki
glyphicon glyphicon-haku
glyphicon glyphicon-sydän
glyphicon glyphicon-tähti
glyphicon glyphicon-tähti-tyhjä
glyphicon glyphicon-käyttäjä
glyphicon glyphicon-film
glyphicon glyphicon-th-large
glyphicon glyphicon-th
glyphicon glyphicon-th-list
glyphicon glyphicon-ok
glyphicon glyphicon-remove
glyphicon glyphicon-zoom-in
glyphicon glyphicon-zoom-out
glyphicon glyphicon-off
glyphicon glyphicon-signal
glyphicon glyphicon-cog
glyphicon glyphicon-trash
glyphicon glyphicon-home
glyphicon glyphicon-tiedosto
glyphicon glyphicon-aika
glyphicon glyphicon-tie
glyphicon glyphicon-lataus-alt
glyphicon glyphicon-lataus
glyphicon glyphicon-lataus
glyphicon glyphicon-inbox
glyphicon glyphicon-play-circle
glyphicon glyphicon-toisto
glyphicon glyphicon-refresh
glyphicon glyphicon-list-alt
glyphicon glyphicon-lock
glyphicon glyphicon-lippu
glyphicon glyphicon-kuulokkeet
glyphicon glyphicon-volume-off
glyphicon glyphicon-volume-down
glyphicon glyphicon-volume-up
glyphicon glyphicon-qrcode
glyphicon glyphicon-viivakoodi
glyphicon glyphicon-tag
glyphicon glyphicon-tunnisteet
glyphicon glyphicon-kirja
glyphicon glyphicon-kirjanmerkki
glyphicon glyphicon-print
glyphicon glyphicon-kamera
glyphicon glyphicon-font
glyphicon glyphicon-bold
glyphicon glyphicon-kursivointi
glyphicon glyphicon-text-height
glyphicon glyphicon-text-width
glyphicon glyphicon-align-left
glyphicon glyphicon-align-center
glyphicon glyphicon-align-right
glyphicon glyphicon-align-justify
glyphicon glyphicon-list
glyphicon glyphicon-indent-left
glyphicon glyphicon-indent-right
glyphicon glyphicon-facetime-video
glyphicon glyphicon-kuva
glyphicon glyphicon-map-marker
glyphicon glyphicon-adjust
glyphicon glyphicon-tint
glyphicon glyphicon-edit
glyphicon glyphicon-osake
glyphicon glyphicon-check
glyphicon glyphicon-move
glyphicon glyphicon-askel taaksepäin
glyphicon glyphicon-nopeasti taaksepäin
glyphicon glyphicon-taaksepäin
glyphicon glyphicon-play
glyphicon glyphicon-tauko
glyphicon glyphicon-stop
glyphicon glyphicon-eteenpäin
glyphicon glyphicon-kelaus eteenpäin
glyphicon glyphicon-askel eteenpäin
glyphicon glyphicon-eject
glyphicon glyphicon-chevron-vasen
glyphicon glyphicon-chevron-right
glyphicon glyphicon-plus-merkki
glyphicon glyphicon-miinus-merkki
glyphicon glyphicon-poista-merkki
glyphicon glyphicon-ok-sign
glyphicon glyphicon-kysymys-merkki
glyphicon glyphicon-info-sign
glyphicon glyphicon-kuvakaappaus
glyphicon glyphicon-remove-circle
glyphicon glyphicon-ok-circle
glyphicon glyphicon-ban-circle
glyphicon glyphicon-nuoli-vasen
glyphicon glyphicon-nuoli oikealle
glyphicon glyphicon-nuoli ylös
glyphicon glyphicon-nuoli alas
glyphicon glyphicon-share-alt
glyphicon glyphicon-resize-full
glyphicon glyphicon-resize-small
glyphicon glyphicon-huutomerkki
glyphicon glyphicon-lahja
glyphicon glyphicon-lehti
glyphicon glyphicon-fire
glyphicon glyphicon-eye-open
glyphicon glyphicon-eye-close
glyphicon glyphicon-warning-sign
glyphicon glyphicon-taso
glyphicon glyphicon-kalenteri
glyphicon glyphicon-random
glyphicon glyphicon-kommentti
glyphicon glyphicon-magneetti
glyphicon glyphicon-chevron-up
glyphicon glyphicon-chevron-down
glyphicon glyphicon-retweet
glyphicon glyphicon-ostoskori
glyphicon glyphicon-folder-close
glyphicon glyphicon-kansio auki
glyphicon glyphicon-resize-vertical
glyphicon glyphicon-resize-horizontal
glyphicon glyphicon-hdd
glyphicon glyphicon-bullhorn
glyphicon glyphicon-bell
glyphicon glyphicon-sertifikaatti
glyphicon glyphicon-peukalo ylös
glyphicon glyphicon-thumbs-down
glyphicon glyphicon-hand-right
glyphicon glyphicon-hand-left
glyphicon glyphicon-käsi ylös
glyphicon glyphicon-hand-down
glyphicon glyphicon-ympyrä-nuoli oikealle
glyphicon glyphicon-ympyrä-nuoli-vasen
glyphicon glyphicon-ympyrä-nuoli ylös
glyphicon glyphicon-ympyrä-nuoli-alas
glyphicon glyphicon-globe
glyphicon glyphicon-jakoavain
glyphicon glyphicon-tehtävät
glyphicon glyphicon-suodatin
glyphicon glyphicon-salkku
glyphicon glyphicon-fullscreen
glyphicon glyphicon-dashboard
glyphicon glyphicon-paperiliitin
glyphicon glyphicon-heart-tyhjä
glyphicon glyphicon-link
glyphicon glyphicon-puhelin
glyphicon glyphicon-pushpin
glyphicon glyphicon-usd
glyphicon glyphicon-gbp
glyphicon glyphicon-sort
glyphicon glyphicon-sort-by-aakkoset
glyphicon glyphicon-sort-by-aakkosen-alt
glyphicon glyphicon-sort-by-order
glyphicon glyphicon-sort-by-order-alt
glyphicon glyphicon-sort-by-attribuutit
glyphicon glyphicon-sort-by-attributes-alt
glyphicon glyphicon-tarkistamaton
glyphicon glyphicon-expand
glyphicon glyphicon-collapse-down
glyphicon glyphicon-collapse-up
glyphicon glyphicon-log-in
glyphicon glyphicon-flash
glyphicon glyphicon-log-out
glyphicon glyphicon-uusi-ikkuna
glyphicon glyphicon-tietue
glyphicon glyphicon-save
glyphicon glyphicon-avoin
glyphicon glyphicon-tallennettu
glyphicon glyphicon-import
glyphicon glyphicon-export
glyphicon glyphicon-send
glyphicon glyphicon-floppy-disk
glyphicon glyphicon-floppy-tallennettu
glyphicon glyphicon-floppy-remove
glyphicon glyphicon-floppy-save
glyphicon glyphicon-floppy-open
glyphicon glyphicon-luottokortti
glyphicon glyphicon-siirto
glyphicon glyphicon-ruokailuvälineet
glyphicon glyphicon-header
glyphicon glyphicon-pakattu
glyphicon glyphicon-kuulokkeet
glyphicon glyphicon-phone-alt
glyphicon glyphicon-torni
glyphicon glyphicon-stats
glyphicon glyphicon-sd-video
glyphicon glyphicon-hd-video
glyphicon glyphicon-tekstitykset
glyphicon glyphicon-ääni-stereo
glyphicon glyphicon-sound-dolby
glyphicon glyphicon-sound-5-1
glyphicon glyphicon-sound-6-1
glyphicon glyphicon-sound-7-1
glyphicon glyphicon-copyright-mark
glyphicon glyphicon-rekisteröintimerkki
glyphicon glyphicon-pilvi-lataus
glyphicon glyphicon-pilvi-lataus
glyphicon glyphicon-puu-havupuu
glyphicon glyphicon-tree-lehtipuu
glyphicon glyphicon-cd
glyphicon glyphicon-save-file
glyphicon glyphicon-avaa-tiedosto
glyphicon glyphicon-tason nousu
glyphicon glyphicon-kopio
glyphicon glyphicon-pasta
glyphicon glyphicon-alert
glyphicon glyphicon-taajuuskorjain
glyphicon glyphicon-king
glyphicon glyphicon-kuningatar
glyphicon glyphicon-soturi
glyphicon glyphicon-piispa
glyphicon glyphicon-knight
glyphicon glyphicon-vauvan kaava
glyphicon glyphicon-teltta
glyphicon glyphicon-taulu
glyphicon glyphicon-sänky
glyphicon glyphicon-omena
glyphicon glyphicon-erase
glyphicon glyphicon-tiimalasi
glyphicon glyphicon-lamppu
glyphicon glyphicon-kaksoiskappale
glyphicon glyphicon-säästöpossu
glyphicon glyphicon-sakset
glyphicon glyphicon-bitcoin
glyphicon glyphicon-btc
glyphicon glyphicon-xbt
glyphicon glyphicon-yen
glyphicon glyphicon-jpy
glyphicon glyphicon-rupla
glyphicon glyphicon-rub
glyphicon glyphicon-asteikko
glyphicon glyphicon-ice-lolly
glyphicon glyphicon-ice-lolly-maistanut
glyphicon glyphicon-koulutus
glyphicon glyphicon-optio-horizontal
glyphicon glyphicon-optio-vertical
glyphicon glyphicon-menu-hampurilainen
glyphicon glyphicon-modal-window
glyphicon glyphicon-öljy
glyphicon glyphicon-grain
glyphicon glyphicon-aurinkolasit
glyphicon glyphicon-text-size
glyphicon glyphicon-text-color
glyphicon glyphicon-text-background
glyphicon glyphicon-object-align-top
glyphicon glyphicon-object-align-bottom
glyphicon glyphicon-object-align-horizontal
glyphicon glyphicon-object-align-left
glyphicon glyphicon-object-align-vertical
glyphicon glyphicon-object-align-right
glyphicon glyphicon-triangle-right
glyphicon glyphicon-triangle-vasen
glyphicon glyphicon-triangle-bottom
glyphicon glyphicon-triangle-top
glyphicon glyphicon-konsoli
glyphicon glyphicon-superscript
glyphicon glyphicon-alaindeksi
glyphicon glyphicon-menu-left
glyphicon glyphicon-menu-right
glyphicon glyphicon-menu-down
glyphicon glyphicon-menu-up
Kuinka käyttää
Suorituskykysyistä kaikki kuvakkeet vaativat perusluokan ja yksittäisen kuvakeluokan. Käytä seuraavaa koodia sijoittamalla melkein minne tahansa. Muista jättää välilyönti kuvakkeen ja tekstin väliin, jotta se täytetään.
Älä sekoita muiden komponenttien kanssa
Ikoniluokkia ei voi suoraan yhdistää muihin komponentteihin. Niitä ei tule käyttää yhdessä muiden saman elementin luokkien kanssa. Lisää sen sijaan sisäkkäinen <span>ja käytä kuvakeluokkia <span>.
Vain tyhjille elementeille
Ikoniluokkia tulee käyttää vain elementeissä, joissa ei ole tekstisisältöä eikä alaelementtejä.
Kuvakkeen fontin sijainnin muuttaminen
Bootstrap olettaa, että kuvakekirjasintiedostot sijaitsevat ../fonts/hakemistossa suhteessa käännettyihin CSS-tiedostoihin. Näiden kirjasintiedostojen siirtäminen tai uudelleennimeäminen tarkoittaa CSS:n päivittämistä jollakin kolmesta tavasta:
Muuta @icon-font-pathja/tai @icon-font-namemuuttujia lähdekoodissa Vähemmän tiedostoja.
Käytä mitä tahansa kehitysasetuksiisi parhaiten sopivaa vaihtoehtoa.
Helppokäyttöiset kuvakkeet
Aputekniikoiden nykyaikaiset versiot ilmoittavat CSS:n luomasta sisällöstä sekä tietyistä Unicode-merkeistä. Jotta vältetään tahattomat ja hämmentävät tulosteet näytönlukuohjelmissa (varsinkin kun kuvakkeita käytetään pelkästään koristeluun), piilotamme ne aria-hidden="true"attribuutilla.
Jos käytät kuvaketta merkityksen välittämiseen (eikä vain koriste-elementtinä), varmista, että tämä merkitys välitetään myös aputekniikoille – esimerkiksi sisällytä .sr-onlyluokkaan visuaalisesti piilotettua lisäsisältöä.
Jos luot säätimiä ilman muuta tekstiä (kuten <button>joka sisältää vain kuvakkeen), sinun tulee aina tarjota vaihtoehtoista sisältöä ohjausobjektin tarkoituksen tunnistamiseksi, jotta se on järkevä aputekniikoiden käyttäjille. Tässä tapauksessa voit lisätä aria-labelattribuutin itse ohjausobjektiin.
Esimerkkejä
Käytä niitä painikkeissa, painikeryhmissä työkalupalkissa, navigoinnissa tai lisättyjen lomakkeiden syötteissä.
Hälytyksessä käytetty kuvake ilmaisemaan, että kyseessä on virheilmoitus, ja .sr-onlylisäteksti, joka välittää tämän vihjeen avustavien tekniikoiden käyttäjille.
Kääri avattavan valikon liipaisin ja avattava valikko sisään .dropdowntai muuhun elementtiin, joka ilmoittaa position: relative;. Lisää sitten valikon HTML-koodi.
Oletusarvoisesti avattava valikko sijoitetaan automaattisesti 100 %:sti ylätasonsa yläpuolelle ja vasemmalle puolelle. Lisää .dropdown-menu-righta .dropdown-menu-kohtaan oikealle tasaa avattava valikko.
Saattaa vaatia lisäasemointia
Pudotusvalikot sijoitetaan automaattisesti CSS:n kautta asiakirjan normaaliin kulkuun. Tämä tarkoittaa, että vanhemmat voivat rajata avattavia valikoita, joilla on tiettyjä overflowominaisuuksia, tai ne voivat näkyä näkymän rajojen ulkopuolella. Käsittele nämä ongelmat itse, kun niitä ilmenee.
Vanhentunut .pull-righttasaus
Vuodesta 3.1.0 lähtien olemme poistaneet käytöstä .pull-rightavattavat valikot. Tasaa valikko oikealle käyttämällä .dropdown-menu-right. Navigointipalkin oikealle kohdistetut navigointikomponentit käyttävät tämän luokan mixin-versiota valikon automaattiseen tasaamiseen. Voit ohittaa sen käyttämällä .dropdown-menu-left.
Otsikot
Lisää otsikko minkä tahansa avattavan valikon toimintoosioille.
Ryhmittele sarja painikkeita yhdelle riville painikeryhmän kanssa. Lisää valinnainen JavaScript-radio ja valintaruututyylikäyttäytyminen painikelaajennuksellamme .
Painikeryhmien työkaluvihjeet ja ponnahdusikkunat vaativat erikoisasetuksia
Kun käytät työkaluvihjeitä tai ponnahdusikkunoita elementtien sisällä .btn-group, sinun on määritettävä vaihtoehto container: 'body'ei-toivottujen sivuvaikutusten välttämiseksi (kuten elementin leveneminen ja/tai pyöristetyn kulman menettäminen, kun työkaluvihje tai ponnahdusikkuna laukeaa).
Varmista, että se on oikein roleja anna tarra
Jotta aputekniikat – kuten näytönlukijat – osoittaisivat, että sarja painikkeita on ryhmitelty, on annettava asianmukainen roleattribuutti. Painikeryhmille tämä olisi role="group", kun taas työkaluriveissä pitäisi olla role="toolbar".
Yksi poikkeus ovat ryhmät, jotka sisältävät vain yhden ohjausobjektin (esimerkiksi tasatut painikeryhmät elementteineen <button>) tai avattavan valikon.
Lisäksi ryhmille ja työkaluriveille tulisi antaa selkeä tunniste, koska useimmat avustavat tekniikat eivät muutoin ilmoita niitä, vaikka oikea roleattribuutti on olemassa. Tässä esitetyissä esimerkeissä käytämme aria-label, mutta myös vaihtoehtoja, kuten aria-labelledbyvoidaan käyttää.
Perusesimerkki
Kääri useita painikkeita .btnsisään -merkillä .btn-group.
Sen sijaan, että käyttäisit painikkeiden kokoluokkia jokaiseen ryhmän painikkeeseen, lisää .btn-group-*vain jokaiseen .btn-group, myös silloin, kun sisäkkäiset ryhmät.
Pesivä
Aseta a .btn-grouptoisen sisään, .btn-groupkun haluat avata valikot, joissa on useita painikkeita.
Aseta painikkeiden ryhmä venymään yhtä suureksi niin, että se ulottuu ylätason koko leveydelle. Toimii myös painikeryhmän pudotusvalikoiden kanssa.
Reunojen käsittely
Painikkeiden tasaamiseen käytetyn erityisen HTML:n ja CSS:n vuoksi (nimittäin display: table-cell), niiden väliset rajat kaksinkertaistuvat. Tavallisissa painikeryhmissä margin-left: -1pxkäytetään reunusten pinoamiseen niiden poistamisen sijaan. Ei kuitenkaan margintoimi kanssa display: table-cell. Tämän seurauksena Bootstrap-muokkauksistasi riippuen saatat haluta poistaa reunat tai värittää ne uudelleen.
IE8 ja reunat
Internet Explorer 8 ei piirrä reunuksia tasatun painikeryhmän painikkeille, olivatpa ne päällä <a>tai <button>elementtejä. Voit kiertää sen käärimällä jokaisen painikkeen toiseen .btn-group.
Jos <a>elementtejä käytetään painikkeina – käynnistämään sivun sisäisiä toimintoja sen sijaan, että navigoisivat toiseen asiakirjaan tai osioon nykyisellä sivulla – niille tulee myös antaa asianmukainen role="button".
<button>Elementtien kanssa
Jos haluat käyttää tasattuja painikeryhmiä <button>elementtien kanssa, sinun on käärittävä jokainen painike painikeryhmään . Useimmat selaimet eivät käytä CSS:ää oikein <button>elementtien perusteluihin, mutta koska tuemme painikkeiden avattavia valikoita, voimme kiertää sen.
Painikkeiden pudotusvalikot
Käytä mitä tahansa painiketta avataksesi pudotusvalikon sijoittamalla sen a- .btn-groupkohtaan ja antamalla oikeat valikkomerkinnät.
Liitännäisriippuvuus
Painikkeiden avattavat valikot edellyttävät, että Bootstrap-versiossasi on avattava laajennus .
Yhden painikkeen pudotusvalikot
Muuta painike pudotusvalikon vaihtokytkimeksi muutamilla perusmerkintöillä.
Laajenna lomakehallintaa lisäämällä tekstiä tai painikkeita minkä tahansa tekstipohjaisen tiedoston eteen, jälkeen tai molemmille puolille <input>. Käytä merkin tai .input-groupkanssa lisätäksesi .input-group-addontai .input-group-btnliittääksesi elementtejä yksittäiseen .form-control.
<input>Vain tekstit
Vältä <select>elementtien käyttämistä tässä, koska niitä ei voida täysin muotoilla WebKit-selaimissa.
Vältä <textarea>elementtien käyttöä tässä, koska niiden rowsattribuutteja ei noudateta joissakin tapauksissa.
Työkaluvihjeet ja ponnahdusikkunat syöttöryhmissä vaativat erikoisasetuksen
Kun käytät työkaluvihjeitä tai ponnahdusikkunoita elementtien sisällä .input-group, sinun on määritettävä vaihtoehto container: 'body'ei-toivottujen sivuvaikutusten välttämiseksi (kuten elementin leveneminen ja/tai pyöristetyn kulman menettäminen, kun työkaluvihje tai ponnahdusikkuna laukeaa).
Älä sekoita muiden komponenttien kanssa
Älä sekoita lomakeryhmiä tai ruudukon sarakeluokkia suoraan syöttöryhmiin. Sisällytä sen sijaan syöttöryhmä lomakeryhmän tai ruudukkoon liittyvän elementin sisään.
Lisää aina tarrat
Näytönlukuohjelmilla on ongelmia lomakkeiden kanssa, jos et lisää tunnistetta jokaiselle syötteelle. Varmista näissä syöttöryhmissä, että kaikki lisämerkit tai toiminnot välitetään aputekniikoille.
Tarkka käytettävä tekniikka (näkyvät <label>elementit, luokan <label>avulla piilotetut elementit tai attribuutin , , , tai attribuutin käyttö) ja välitettävät lisätiedot vaihtelevat toteuttamasi käyttöliittymäwidgetin tarkan tyypin mukaan. Tämän osan esimerkit tarjoavat muutamia ehdotettuja tapauskohtaisia lähestymistapoja..sr-onlyaria-labelaria-labelledbyaria-describedbytitleplaceholder
Perusesimerkki
Aseta yksi lisäosa tai painike tulon kummallekin puolelle. Voit myös sijoittaa yhden tulon molemmille puolille.
Emme tue useita lisäosia ( .input-group-addontai .input-group-btn) yhdellä puolella.
Emme tue useita lomakeohjausobjekteja yhdessä syöttöryhmässä.
Mitoitus
Lisää suhteelliset lomakkeen kokoluokat .input-groupitseensä ja sisällä olevan sisällön koko muuttuu automaattisesti – ei tarvitse toistaa lomakkeen ohjauskokoluokkia jokaisessa elementissä.
Valintaruudut ja radiolisäosat
Aseta mikä tahansa valintaruutu tai radiovaihtoehto syöttöryhmän lisäosaan tekstin sijaan.
Painikkeiden lisäosat
Syöttöryhmien painikkeet ovat hieman erilaisia ja vaativat yhden ylimääräisen sisäkkäisen tason. Sen sijaan .input-group-addonsinun on käytettävä .input-group-btnpainikkeiden käärimiseen. Tämä on tarpeen oletusselaimen tyylien vuoksi, joita ei voi ohittaa.
Painikkeet pudotusvalikoilla
Segmentoidut painikkeet
Useita painikkeita
Vaikka sinulla voi olla vain yksi lisäosa kullekin puolelle, sinulla voi olla useita painikkeita yhdessä .input-group-btn.
Navit
Bootstrapissa saatavilla olevilla naveilla on jaettu merkintä perusluokasta alkaen .navsekä jaetut tilat. Vaihda muokkausluokkia vaihtaaksesi kunkin tyylin välillä.
Navs-osien käyttäminen välilehtipaneeleissa vaatii JavaScript-välilehdet-laajennuksen
Jos käytät navigointipalkin luomiseen navigointia, muista lisätä role="navigation"loogisimman ylätason säilöön <ul>tai kääri <nav>elementti koko navigoinnin ympärille. Älä lisää roolia <ul>itseensä, koska se estäisi sen ilmoittamisen todelliseksi luetteloksi aputekniikoiden avulla.
Välilehdet
Huomaa, että .nav-tabsluokka vaatii .navperusluokan.
Voit helposti tehdä välilehdistä tai pillereistä yhtä leveitä kuin ylätason näytöissä, jotka ovat leveämpiä kuin 768 kuvapistettä .nav-justified. Pienemmillä näytöillä navigointilinkit on pinottu.
Tasaisia navigointipalkin navigointilinkkejä ei tällä hetkellä tueta.
Safari ja reagoivat tasaiset navit
Vuodesta 9.1.2 alkaen Safarissa on virhe, jossa selaimen koon muuttaminen vaakasuunnassa aiheuttaa renderöintivirheitä perusteltuun navigointiin, jotka poistuvat päivityksen yhteydessä. Tämä virhe näkyy myös perustellussa navigointiesimerkissä .
Navigointipalkit ovat responsiivisia metakomponentteja, jotka toimivat sovelluksesi tai sivustosi navigointiotsikoina. Ne alkavat tiivistettyinä (ja ovat vaihdettavissa) mobiilinäkymissä ja muuttuvat vaakasuoriksi käytettävissä olevan näkymän leveyden kasvaessa.
Tasaisia navigointipalkin navigointilinkkejä ei tällä hetkellä tueta.
Ylimääräistä sisältöä
Koska Bootstrap ei tiedä, kuinka paljon tilaa navigointipalkin sisältö tarvitsee, saatat kohdata ongelmia sisällön rivittämisessä toiselle riville. Voit ratkaista tämän seuraavasti:
Pienennä navigointipalkin kohteiden määrää tai leveyttä.
Muuta pistettä, jossa navigointipalkki vaihtaa tiivistetyn ja vaakatilan välillä. Muokkaa @grid-float-breakpointmuuttujaa tai lisää oma mediakyselysi.
Vaatii JavaScript-laajennuksen
Jos JavaScript on poistettu käytöstä ja näkymä on tarpeeksi kapea, jotta navigointipalkki kutistuu, on mahdotonta laajentaa navigointipalkkia ja tarkastella sisältöä .navbar-collapse.
Responsiivinen navigointipalkki edellyttää, että Bootstrap-versiossasi on tiivistyslaajennus .
Navigointipalkki kutistuu pystysuuntaiseen mobiilinäkymäänsä, kun näkymä on kapeampi kuin @grid-float-breakpoint, ja laajenee vaakasuuntaiseen ei-mobiilinäkymään, kun näkymä on vähintään @grid-float-breakpointleveä. Säädä tätä muuttujaa Vähemmän lähteessä hallitaksesi, milloin navigointipalkki kutistuu/laajentuu. Oletusarvo on 768px(pienin "pieni" tai "tabletti"-näyttö).
Tee navigointipalkeista saavutettavia
Muista käyttää <nav>elementtiä tai, jos käytät yleisempää elementtiä, kuten <div>, lisää role="navigation"jokaiseen navigointipalkkiin, jotta se tunnistetaan selkeästi maamerkkialueeksi aputekniikoiden käyttäjille.
Brändikuva
Korvaa navigointipalkin tuotemerkki omalla kuvallasi vaihtamalla teksti merkillä <img>. Koska sillä .navbar-brandon oma pehmuste ja korkeus, saatat joutua ohittamaan joitakin CSS-tiedostoja kuvastasi riippuen.
Lomakkeet
Sijoita lomakkeen sisältö .navbar-formoikeaan pystysuoraan kohdistukseen ja tiivistämiseen kapeissa kuvaporteissa. Käytä kohdistusvaihtoehtoja päättääksesi, missä se sijaitsee navigointipalkin sisällössä.
Kuten heads up, .navbar-formjakaa suuren osan koodistaan .form-inlinekautta mixin. Jotkin lomakeohjaimet, kuten syöttöryhmät, saattavat vaatia kiinteitä leveyksiä, jotta ne näkyvät oikein navigointipalkissa.
Näytönlukuohjelmilla on ongelmia lomakkeiden kanssa, jos et lisää tunnistetta jokaiselle syötteelle. Voit piilottaa näiden sisäisten lomakkeiden tarrat .sr-onlyluokan avulla. On olemassa muita vaihtoehtoisia menetelmiä, joilla voidaan antaa nimike aputekniikoille, kuten aria-label, aria-labelledbytai titleattribuutti. Jos mitään näistä ei ole, näytönlukuohjelmat voivat turvautua placeholderattribuutin käyttöön, jos se on olemassa, mutta huomaa, että attribuutin käyttäminen placeholdermuiden merkintämenetelmien korvikkeena ei ole suositeltavaa.
Painikkeet
Keskitä ne pystysuoraan navigointipalkkiin lisäämällä luokka .navbar-btnelementteihin, <button>jotka eivät sijaitse a :ssa.<form>
Kontekstikohtainen käyttö
Kuten tavallisia painikeluokkia , .navbar-btnvoidaan käyttää <a>ja <input>elementeissä. Kumpaakaan .navbar-btntai tavallisia painikeluokkia ei kuitenkaan tule käyttää <a>elementeissä sisällä .navbar-nav.
Teksti
Kääri tekstijonot elementtiin merkillä .navbar-text, yleensä <p>tunnisteeseen oikean johdon ja värin takaamiseksi.
Ei-navigointilinkit
Ihmiset, jotka käyttävät vakiolinkkejä, jotka eivät ole tavallisen navigointipalkin navigointikomponentin sisällä, .navbar-linklisäävät luokan avulla oikeat värit oletus- ja käänteisille navigointipalkin asetuksille.
Komponenttien kohdistus
Tasaa navigointilinkit, lomakkeet, painikkeet tai teksti käyttämällä .navbar-lefttai .navbar-rightapuohjelmaluokkia. Molemmat luokat lisäävät CSS-kellukkeen määritettyyn suuntaan. Esimerkiksi, jos haluat kohdistaa navigointilinkit, laita ne erilleen <ul>käyttämällä vastaavaa hyödyllisyysluokkaa.
Nämä luokat ovat sekoitettuja versioita .pull-leftja .pull-right, mutta ne on rajattu mediakyselyihin navigointipalkin komponenttien käsittelyn helpottamiseksi eri laitekokojen välillä.
Useiden komponenttien oikea kohdistus
Navigointipalkkeja on tällä hetkellä rajoitettu useille .navbar-rightluokille. Käytämme viimeisessä .navbar-rightelementissä negatiivista marginaalia, jotta sisältö välitetään oikein. Kun kyseistä luokkaa käyttää useita elementtejä, nämä marginaalit eivät toimi tarkoitetulla tavalla.
Palaamme tähän, kun voimme kirjoittaa kyseisen komponentin uudelleen v4:ssä.
Kiinnitetty yläosaan
Lisää .navbar-fixed-topja sisällytä .containertai .container-fluidkeskittääksesi navigointipalkin sisällön.
Vartalon pehmuste vaaditaan
Kiinteä navigointipalkki peittää muun sisältösi, ellet lisää paddingsitä -sivun yläosaan <body>. Kokeile omia arvojasi tai käytä alla olevaa katkelmaamme. Vinkki: Navigointipalkki on oletusarvoisesti 50 kuvapistettä korkea.
Varmista, että sisällytät tämän Bootstrap CSS -ytimen jälkeen .
Kiinnitetty pohjaan
Lisää .navbar-fixed-bottomja sisällytä .containertai .container-fluidkeskittääksesi navigointipalkin sisällön.
Vartalon pehmuste vaaditaan
Kiinteä navigointipalkki peittää muun sisältösi, ellet lisää paddingsitä -sivun alaosaan <body>. Kokeile omia arvojasi tai käytä alla olevaa katkelmaamme. Vinkki: Navigointipalkki on oletusarvoisesti 50 kuvapistettä korkea.
Varmista, että sisällytät tämän Bootstrap CSS -ytimen jälkeen .
Staattinen toppi
Luo täysleveä navigointipalkki, joka vierii pois sivulta lisäämällä .navbar-static-topja sisällyttämällä .containertai .container-fluidkeskittämiseen ja navigointipalkin sisältöön.
Toisin kuin .navbar-fixed-*luokissa, sinun ei tarvitse vaihtaa täyttöä body.
Käänteinen navigointipalkki
Muokkaa navigointipalkin ulkoasua lisäämällä .navbar-inverse.
korppujauhoja
Ilmoita nykyisen sivun sijainti navigointihierarkiassa.
Erottimet lisätään automaattisesti CSS:ään kautta :beforeja content.
Tarjoa sivutuslinkkejä sivustollesi tai sovelluksellesi monisivuisella sivutuskomponentilla tai yksinkertaisemmalla hakukonevaihtoehdolla .
Oletussivutus
Yksinkertainen Rdion inspiroima sivutus, joka sopii erinomaisesti sovelluksiin ja hakutuloksiin. Suuri lohko on vaikea ohittaa, helposti skaalautuva ja tarjoaa suuria napsautusalueita.
Sivutuskomponentin merkitseminen
Sivutuskomponentti tulee kääriä <nav>elementtiin, joka tunnistaa sen näytönlukuohjelmien ja muiden aputekniikoiden navigointiosiona. Lisäksi, koska sivulla on todennäköisesti jo useampi kuin yksi tällainen navigointiosio (kuten ensisijainen navigointi otsikossa tai sivupalkin navigointi), on suositeltavaa antaa sivulle kuvaus aria-label, <nav>joka kuvastaa sen tarkoitusta. Jos esimerkiksi sivutuskomponenttia käytetään navigointiin hakutulosjoukon välillä, sopiva tunniste voisi olla aria-label="Search results pages".
Pois käytöstä ja aktiiviset tilat
Linkit ovat muokattavissa erilaisiin olosuhteisiin. Käytä .disabledlinkkeihin, joita ei voi napsauttaa, ja .activeosoittamaan nykyisen sivun.
Suosittelemme, että vaihdat aktiiviset tai käytöstä poistetut ankkurit tilalle <span>, tai jätät ankkurin pois edellisten/seuraavien nuolten tapauksessa napsautustoiminnon poistamiseksi samalla, kun aiotut tyylit säilyvät.
Mitoitus
Haluatko suuremman vai pienemmän sivun? Lisää .pagination-lgtai .pagination-smlisäkokoja varten.
Hakulaite
Nopeat edelliset ja seuraavat linkit yksinkertaisiin sivutustoteutuksiin kevyellä merkinnällä ja tyyleillä. Se sopii erinomaisesti yksinkertaisille sivustoille, kuten blogeille tai aikakauslehdille.
Oletusesimerkki
Oletusarvoisesti hakulaite keskittää linkit.
Tasaiset linkit
Vaihtoehtoisesti voit kohdistaa jokaisen linkin sivuille:
Valinnainen pois käytöstä tila
Hakulinkit käyttävät myös yleistä .disabledhyödyllisyysluokkaa sivutuksesta.
Tarrat
Esimerkki
Esimerkkiotsikko Uusi
Esimerkkiotsikko Uusi
Esimerkkiotsikko Uusi
Esimerkkiotsikko Uusi
Esimerkkiotsikko Uusi
Esimerkkiotsikko Uusi
Saatavilla muunnelmia
Lisää mikä tahansa alla mainituista muokkausluokista muuttaaksesi tarran ulkoasua.
Renderöintiongelmia voi ilmetä, kun kapeassa säiliössä on kymmeniä upotettuja tarroja, joista jokainen sisältää oman inline-blockelementin (kuten kuvakkeen). Tapa kiertää tämä on asetus display: inline-block;. Katso konteksti ja esimerkki kohdasta #13219 .
Tunnusmerkit
Korosta helposti uusia tai lukemattomia kohteita lisäämällä <span class="badge">linkkiin, Bootstrap-navigointiin ja muihin.
Kevyt, joustava komponentti, joka voi valinnaisesti laajentaa koko näkymää ja esitellä sivustosi avainsisältöä.
Hei maailma!
Tämä on yksinkertainen sankariyksikkö, yksinkertainen jumbotron-tyylinen komponentti, joka kiinnittää erityistä huomiota esillä olevaan sisältöön tai tietoon.
Jos haluat tehdä jumbotronista täysleveyden ja ilman pyöristettyjä kulmia, aseta se kaikkien .containers:n ulkopuolelle ja lisää sen sijaan .containersisäpuoli.
Sivun otsikko
Yksinkertainen komentotulkki h1sivun sisällön osioiden välittämistä ja segmentointia varten. Se voi käyttää oletuselementtiä h1sekä smalluseimpia muita komponentteja (lisätyyleillä).
Esimerkki sivun otsikosta Otsikon alateksti
Pikkukuvat
Laajenna Bootstrapin ruudukkojärjestelmää pikkukuvakomponentilla, jotta voit helposti näyttää ruudukot kuvista, videoista, tekstistä ja muusta.
Jos etsit Pinterestin kaltaisia pikkukuvia, joiden korkeus ja/tai leveys vaihtelee, sinun on käytettävä kolmannen osapuolen laajennusta, kuten Masonry , Isotope tai Salvattore .
Oletusesimerkki
Oletuksena Bootstrapin pikkukuvat on suunniteltu esittelemään linkitettyjä kuvia minimaalisella vaaditulla merkinnällä.
Mukautettu sisältö
Pienellä ylimääräisellä merkinnällä on mahdollista lisätä pikkukuviin kaikenlaista HTML-sisältöä, kuten otsikoita, kappaleita tai painikkeita.
Pikkukuvatarra
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.
Tarjoa asiayhteyteen liittyviä palauteviestejä tyypillisistä käyttäjän toimista kourallisen saatavilla olevien ja joustavien hälytysviestien avulla.
Esimerkkejä
Kääri mikä tahansa teksti ja valinnainen hylkäyspainike .alertjohonkin neljästä asiayhteyteen perustuvasta luokasta (esim. .alert-success) perusvaroitusviesteille.
Ei oletusluokkaa
Hälytyksillä ei ole oletusluokkia, vain perus- ja muokkausluokat. Harmaalla oletushälytyksellä ei ole liikaa järkeä, joten sinun on määritettävä tyyppi kontekstuaalisen luokan kautta. Valitse menestys, tieto, varoitus tai vaara.
Hyvin tehty! Luit onnistuneesti tämän tärkeän varoitusviestin.
Varoitus! Tämä hälytys vaatii huomiotasi, mutta se ei ole erityisen tärkeä.
Varoitus! Parempi tarkistaa itsesi, et näytä liian hyvältä.
Voi pahus! Muuta muutamia asioita ja yritä lähettää uudelleen.
Hylättävät hälytykset
Rakenna mitä tahansa ilmoitusta lisäämällä valinnainen .alert-dismissibleja sulje-painike.
Anna ajantasaista palautetta työnkulun tai toiminnon edistymisestä yksinkertaisten mutta joustavien edistymispalkkien avulla.
Selainten välinen yhteensopivuus
Edistymispalkit käyttävät CSS3-siirtymiä ja animaatioita joidenkin tehosteiden saavuttamiseksi. Näitä ominaisuuksia ei tueta Internet Explorer 9:ssä ja sitä vanhemmissa tai vanhemmissa Firefox-versioissa. Opera 12 ei tue animaatioita.
Sisällön suojauskäytännön (CSP) yhteensopivuus
Jos verkkosivustollasi on sisällön suojauskäytäntö (CSP) , joka ei salli style-src 'unsafe-inline', et voi käyttää upotettuja styleattribuutteja edistymispalkin leveyden asettamiseen alla olevissa esimerkeissämme esitetyllä tavalla. Vaihtoehtoisia tapoja asettaa leveydet, jotka ovat yhteensopivia tiukkojen CSP:iden kanssa, ovat pienen mukautetun JavaScriptin käyttäminen (joka asettaa element.style.width) tai mukautettuja CSS-luokkia.
Varmistaaksesi, että tarran teksti pysyy luettavana myös pienillä prosenttiosuuksilla, harkitse merkin lisäämistä min-widthedistymispalkkiin.
0 %
2 %
Kontekstuaaliset vaihtoehdot
Edistymispalkit käyttävät joitain samoja painike- ja hälytysluokkia yhtenäisten tyylien aikaansaamiseksi.
40 % valmis (onnistui)
20 % valmiina
60 % valmis (varoitus)
80 % valmis (vaara)
Raidallinen
Käyttää gradienttia luodakseen raidallisen tehosteen. Ei saatavilla IE9:ssä ja sitä vanhemmissa versioissa.
40 % valmis (onnistui)
20 % valmiina
60 % valmis (varoitus)
80 % valmis (vaara)
Animoitu
Lisää .active: .progress-bar-stripedanimoidaksesi raidat oikealta vasemmalle. Ei saatavilla IE9:ssä ja sitä vanhemmissa versioissa.
45 % valmis
Pinottu
Aseta useita tankoja samaan .progresspinoaksesi ne.
35 % valmis (onnistui)
20 % valmis (varoitus)
10 % valmis (vaara)
Mediaobjekti
Abstrakteja objektityylejä erityyppisten komponenttien (kuten blogikommenttien, twiittien jne.) rakentamiseen, joissa on vasemmalle tai oikealle tasattu kuva tekstisisällön ohella.
Oletusmedia
Oletusmedia näyttää mediaobjektin (kuvat, video, ääni) sisältölohkon vasemmalla tai oikealla puolella.
Media otsikko
Cras sit amet nibh libero, 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 otsikko
Cras sit amet nibh libero, 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.
Sisäkkäinen mediaotsikko
Cras sit amet nibh libero, 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 otsikko
Cras sit amet nibh libero, gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Media otsikko
Cras sit amet nibh libero, gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Luokat .pull-leftja .pull-rightovat myös olemassa ja niitä käytettiin aiemmin osana mediakomponenttia, mutta ne ovat vanhentuneet kyseiseen käyttöön versiosta 3.3.0 alkaen. Ne vastaavat suunnilleen .media-leftja .media-right, paitsi että .media-rightne tulisi sijoittaa .media-bodyHTML-koodin perään.
Median kohdistus
Kuvat tai muut materiaalit voidaan kohdistaa ylös, keskelle tai alas. Oletusarvo on ylätasattu.
Ylös tasattu materiaali
Cras sit amet nibh libero, 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.
Keskikohdennettu media
Cras sit amet nibh libero, 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.
Alas tasattu materiaali
Cras sit amet nibh libero, 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.
Media lista
Pienellä ylimääräisellä merkinnällä voit käyttää median sisäistä luetteloa (hyödyllinen kommenttiketjuissa tai artikkeliluetteloissa).
Media otsikko
Cras sit amet nibh libero, gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Sisäkkäinen mediaotsikko
Cras sit amet nibh libero, gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Sisäkkäinen mediaotsikko
Cras sit amet nibh libero, gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Sisäkkäinen mediaotsikko
Cras sit amet nibh libero, gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Listaa ryhmä
Luetteloryhmät ovat joustava ja tehokas komponentti yksinkertaisten elementtiluetteloiden näyttämiseen, mutta myös monimutkaisten elementtiluetteloiden näyttämiseen mukautetun sisällön kanssa.
Perusesimerkki
Kaikkein peruslistaryhmä on yksinkertaisesti järjestämätön lista, jossa on luettelokohteita ja oikeat luokat. Rakenna sitä seuraavilla vaihtoehdoilla tai tarvittaessa omalla CSS:lläsi.
Cras justo odio
Dapibus ac facilisis sisään
Morbi leo risus
Porta ac consectetur ac
Vestibulum ja eros
Tunnusmerkit
Lisää merkkikomponentti mihin tahansa luetteloryhmän kohteeseen ja se sijoitetaan automaattisesti oikealle.
14Cras justo odio
2Dapibus ac facilisis sisään
1Morbi leo risus
Linkitetyt kohteet
Linkitä luettelon kohteet käyttämällä ankkuritunnisteita luettelokohteiden sijasta (tämä tarkoittaa myös ylätasoa merkin <div>sijaan <ul>). Jokaisen elementin ympärille ei tarvita yksittäisiä vanhempia.
Luetteloryhmän kohteet voivat olla painikkeita luettelokohteiden sijaan (mikä tarkoittaa myös ylätasoa merkin <div>sijaan <ul>). Jokaisen elementin ympärille ei tarvita yksittäisiä vanhempia. Älä käytä vakioluokkia .btntäällä.
Käytöstä poistetut kohteet
Lisää .disableda .list-group-item-kohtaan harmaaksi näyttääksesi pois käytöstä.
Vaikka ei aina ole välttämätöntä, joskus sinun on laitettava DOM laatikkoon. Kokeile tällaisissa tilanteissa paneelikomponenttia.
Perusesimerkki
Oletusarvoisesti kaikki .paneltehtävät on käyttää perusreunaa ja -täyttöä sisällön sisällyttämiseksi.
Esimerkki paneelista
Paneeli otsikolla
Lisää otsikkosäilö helposti paneeliisi käyttämällä .panel-heading. Voit myös lisätä minkä tahansa <h1>- luokan <h6>kanssa .panel-titlelisätäksesi valmiiksi muotoillun otsikon. <h1>Kuitenkin - kirjasinkoot <h6>ohittavat .panel-heading.
Jotta linkkien väritys onnistuu, muista sijoittaa linkit otsikoihin .panel-title.
Paneelin otsikko ilman otsikkoa
Paneelin sisältö
Paneelin otsikko
Paneelin sisältö
Paneeli alatunnisteella
Kääri painikkeet tai toissijainen teksti muotoon .panel-footer. Huomaa, että paneelin alatunnisteet eivät peri värejä ja reunoja kontekstuaalisia muunnelmia käytettäessä, koska niiden ei ole tarkoitus olla etualalla.
Paneelin sisältö
Kontekstuaaliset vaihtoehdot
Kuten muutkin komponentit, voit helposti tehdä paneelista merkityksellisemmän tietylle kontekstille lisäämällä minkä tahansa kontekstuaalisen tilaluokan.
Paneelin otsikko
Paneelin sisältö
Paneelin otsikko
Paneelin sisältö
Paneelin otsikko
Paneelin sisältö
Paneelin otsikko
Paneelin sisältö
Paneelin otsikko
Paneelin sisältö
Pöydillä
Lisää paneeliin kaikki reunuksettomat kohdat .tablesaumattoman suunnittelun saamiseksi. Jos on .panel-body, lisäämme ylimääräisen reunuksen taulukon yläosaan erottamista varten.
Paneelin otsikko
Jotain oletuspaneelin sisältöä täällä. Nulla vitae elit libero, 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.
#
Etunimi
Sukunimi
Käyttäjätunnus
1
Mark
Otto
@mdo
2
Jacob
Thornton
@rasva
3
Larry
lintu
@viserrys
Jos paneelin runkoa ei ole, komponentti siirtyy paneelin otsikosta taulukkoon keskeytyksettä.
Paneelin otsikko
#
Etunimi
Sukunimi
Käyttäjätunnus
1
Mark
Otto
@mdo
2
Jacob
Thornton
@rasva
3
Larry
lintu
@viserrys
Listaryhmien kanssa
Sisällytä helposti täysleveät luetteloryhmät mihin tahansa paneeliin.
Paneelin otsikko
Jotain oletuspaneelin sisältöä täällä. Nulla vitae elit libero, 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 sisään
Morbi leo risus
Porta ac consectetur ac
Vestibulum ja eros
Responsiivinen upotus
Salli selaimien määrittää videon tai diaesityksen mitat niiden sisältävän lohkon leveyden perusteella luomalla luontainen suhde, joka skaalautuu oikein millä tahansa laitteella.
Sääntöjä sovelletaan suoraan <iframe>, <embed>, <video>, ja <object>elementteihin; valinnaisesti käytä eksplisiittistä jälkeläisluokkaa .embed-responsive-item, kun haluat sovittaa muiden attribuuttien tyylin.
Pro-Tip! Sinun ei tarvitse sisällyttää frameborder="0"tietojasi <iframe>, sillä ohitamme sen puolestasi.
Wells
Oletuksena hyvin
Käytä kaivoa yksinkertaisena tehosteena elementissä antaaksesi sille upotetun vaikutelman.
Katso, olen kaivossa!
Valinnaiset luokat
Ohjauspehmusteet ja pyöristetyt kulmat kahdella valinnaisella muokkausluokalla.