Vairāk nekā ducis atkārtoti lietojamu komponentu, kas izveidoti, lai nodrošinātu ikonogrāfiju, nolaižamās izvēlnes, ievades grupas, navigāciju, brīdinājumus un daudz ko citu.
Glifikoni
Pieejamie glifi
Ietver vairāk nekā 250 glifus fontu formātā no Glyphicon Halflings komplekta. Glyphicons Halflings parasti nav pieejami bez maksas, taču to veidotājs ir padarījis tos pieejamus Bootstrap bez maksas. Kā pateicību mēs tikai lūdzam jūs iekļaut saiti atpakaļ uz Glyphicons , kad vien iespējams.
Glyphicon Glyphicon-zvaigznīte
glyphicon glyphicon-plus
glyphicon glyphicon-euro
glyphicon glyphicon-eur
glyphicon glyphicon-minus
glyphicon glyphicon-mākonis
glyphicon glyphicon-aploksne
glyphicon glyphicon-zīmulis
glifikons glifikons-stikls
glyphicon glyphicon-mūzika
glyphicon glyphicon-search
glifikons glifikons-sirds
glyphicon glyphicon-star
glyphicon glyphicon-star-tukša
glyphicon glyphicon-lietotājs
glyphicon glyphicon-film
glyphicon glyphicon-th-large
glyphicon glyphicon-th
glyphicon glyphicon-th-list
glyphicon glyphicon-ok
glyphicon glyphicon-noņemt
glyphicon glyphicon-tuvināt
glyphicon glyphicon-zoom-out
glyphicon glyphicon-off
glyphicon glyphicon-signal
glyphicon glyphicon-cog
glyphicon glyphicon-trash
glyphicon glyphicon-home
glyphicon glyphicon-file
glyphicon glyphicon-time
glyphicon glyphicon-ceļš
glyphicon glyphicon-download-alt
glyphicon glyphicon-lejupielādēt
glyphicon glyphicon-upload
glyphicon glyphicon-iesūtne
glyphicon glyphicon-play-circle
glyphicon glyphicon-atkārtot
glyphicon glyphicon-refresh
glyphicon glyphicon-list-alt
glyphicon glyphicon-lock
glyphicon glyphicon-flag
glyphicon glyphicon-austiņas
glyphicon glyphicon-volume-off
glyphicon glyphicon-volume-down
glyphicon glyphicon-volume-up
glyphicon glyphicon-qrcode
glyphicon glyphicon-svītrkods
glyphicon glyphicon-tag
glyphicon glyphicon-tags
glyphicon glyphicon-book
glyphicon glyphicon-grāmatzīme
glyphicon glyphicon-print
glyphicon glyphicon-kamera
glyphicon glyphicon-font
glyphicon glyphicon-bold
glyphicon glyphicon-italic
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-attēls
glyphicon glyphicon-map-marker
glyphicon glyphicon-adjust
glyphicon glyphicon-tont
glyphicon glyphicon-rediģēt
glyphicon glyphicon-share
glyphicon glyphicon-check
glyphicon glyphicon-pārvietoties
glyphicon glyphicon-solis-atpakaļ
glyphicon glyphicon-ātri atpakaļ
glyphicon glyphicon-atpakaļ
glyphicon glyphicon-play
glyphicon glyphicon-pause
glyphicon glyphicon-stop
glyphicon glyphicon-forward
glyphicon glyphicon-fast-forward
glyphicon glyphicon-solis uz priekšu
glyphicon glyphicon-eject
glyphicon glyphicon-chevron-left
glyphicon glyphicon-chevron-right
glyphicon glyphicon-plus-sign
glyphicon glyphicon-minus-sign
glyphicon glyphicon-noņemt-zīmi
glyphicon glyphicon-ok-sign
glyphicon glyphicon-jautājums-zīme
glyphicon glyphicon-info-sign
glyphicon glyphicon-screenshot
glyphicon glyphicon-remove-circle
glyphicon glyphicon-ok-circle
glyphicon glyphicon-ban-circle
glyphicon glyphicon-bultiņa-pa kreisi
glyphicon glyphicon-bultiņa-pa labi
glyphicon glyphicon-bultiņa-up
glyphicon glyphicon-bultiņa uz leju
glyphicon glyphicon-share-alt
glyphicon glyphicon-resize-full
glyphicon glyphicon-resize-small
glyphicon glyphicon-izsaukuma-zīme
glyphicon glyphicon-dāvana
glifikons glyphicon-lapa
glyphicon glyphicon-uguns
glyphicon glyphicon-eye-open
glyphicon glyphicon-eye-close
glyphicon glyphicon-warning-sign
glifikons glyphicon-plakne
glyphicon glyphicon-kalendārs
glyphicon glyphicon-random
glyphicon glyphicon-comment
glifikons glifikons-magnēts
glyphicon glyphicon-chevron-up
glyphicon glyphicon-chevron-down
glyphicon glyphicon-retweet
glyphicon glyphicon-iepirkšanās grozs
glyphicon glyphicon-folder-close
glyphicon glyphicon-folder-open
glyphicon glyphicon-resize-vertikāls
glyphicon glyphicon-resize-horizontal
glyphicon glyphicon-hdd
glifikons glyphicon-bullhorn
glifikons glyphicon-bell
glyphicon glyphicon sertifikāts
glyphicon glyphicon-thumbs-up
glyphicon glyphicon-thumbs-down
glyphicon glyphicon-rokas labā
glyphicon glyphicon-roka-kreisā
glyphicon glyphicon-rokas augšup
glyphicon glyphicon-roku uz leju
glyphicon glyphicon-circle-bultiņa-pa labi
glyphicon glyphicon-circle-bultiņa-pa kreisi
glyphicon glyphicon-circle-arrow-up
glyphicon glyphicon-circle-bultiņa-lejup
glyphicon glyphicon-globe
glyphicon glyphicon-uzgriežņu atslēga
glyphicon glyphicon-uzdevumi
glyphicon glyphicon-filtrs
glyphicon glyphicon-portfelis
glyphicon glyphicon-fullscreen
glyphicon glyphicon-dashboard
glyphicon glyphicon saspraudi
glyphicon glyphicon-heart-tukša
glyphicon glyphicon-link
glyphicon glyphicon-phone
glyphicon glyphicon-pushpin
glyphicon glyphicon-usd
glyphicon glyphicon-gbp
glyphicon glyphicon-sort
glyphicon glyphicon-sort-by-alfabēts
glyphicon glyphicon-sort-by-alphabet-alt
glyphicon glyphicon-sort-by-order
glyphicon glyphicon-sort-by-order-alt
glyphicon glyphicon-sort-by-atribūtus
glyphicon glyphicon-sort-by-attributes-alt
glyphicon glyphicon-neatzīmēts
glyphicon glyphicon-expand
glyphicon glyphicon-collapse-down
glyphicon glyphicon-collapse-up
glyphicon glyphicon-log-in
glyphicon glyphicon-flash
glyphicon glyphicon-log-out
glyphicon glyphicon-new-window
glyphicon glyphicon-rekords
glyphicon glyphicon-save
glyphicon glyphicon-open
glyphicon glyphicon saglabāts
glyphicon glyphicon-import
glyphicon glyphicon-export
glyphicon glyphicon-sūtīt
glyphicon glyphicon-floppy-disk
glyphicon glyphicon-floppy-saglabāts
glyphicon glyphicon-floppy-remove
glyphicon glyphicon-floppy-save
glyphicon glyphicon-floppy-open
glyphicon glyphicon-kredītkarte
glyphicon glyphicon-transfer
glyphicon glyphicon-galda piederumi
glyphicon glyphicon-header
glyphicon glyphicon-saspiests
glyphicon glyphicon-austiņas
glyphicon glyphicon-phone-alt
glyphicon glyphicon-tornis
glyphicon glyphicon-stats
glyphicon glyphicon-sd-video
glyphicon glyphicon-hd-video
glyphicon glyphicon-subtitri
glyphicon glyphicon-sound-stereo
glyphicon glyphicon-sound-dolby
glyphicon glyphicon-sound-5-1
glyphicon glyphicon-sound-6-1
glyphicon glyphicon-sound-7-1
glyphicon glyphicon-copyright-mark
glyphicon glyphicon-registration-mark
glyphicon glyphicon-cloud-download
glyphicon glyphicon-cloud-upload
glyphicon glyphicon-tree-skujkoks
glyphicon glyphicon-tree-lapu koks
glyphicon glyphicon-cd
glyphicon glyphicon-save-file
glyphicon glyphicon-open-file
glyphicon glyphicon-level-up
glyphicon glyphicon-kopija
glyphicon glyphicon-pasta
glyphicon glyphicon-alert
glyphicon glyphicon-ekvalaizers
glyphicon glyphicon-king
glyphicon glyphicon-karaliene
glifikons glifikons-baninieks
glyphicon glyphicon-bīskaps
glifikons glifikons-bruņinieks
glyphicon glyphicon-baby-formula
glyphicon glifikona telts
glyphicon glyphicon-tāfele
glyphicon glyphicon-gulta
glifikons glifikons-ābols
glyphicon glyphicon-dzēst
glyphicon glyphicon-smilšu pulkstenis
glyphicon glyphicon-lampa
glyphicon glyphicon-dublikāts
glyphicon glyphicon-cūciņa banka
glyphicon glyphicon-šķēres
glyphicon glyphicon-bitcoin
glyphicon glyphicon-btc
glyphicon glyphicon-xbt
glyphicon glyphicon-jena
glyphicon glyphicon-jpy
glifikons glifikons-rublis
glyphicon glyphicon-rub
glyphicon glyphicon-scale
glyphicon glyphicon-ice-lolly
glyphicon glyphicon-ledus-lolly-garšoja
glyphicon glyphicon-izglītība
glyphicon glyphicon-option-horizontal
glyphicon glyphicon-option-vertical
glyphicon glyphicon-menu-hamburgers
glyphicon glyphicon-modal-window
glyphicon glifikona eļļa
glifikons glyphicon-grain
glyphicon glyphicon-saulesbrilles
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-trijstūris-labais
glyphicon glyphicon-trijstūris-pa kreisi
glyphicon glyphicon-trijstūris-apakšā
glyphicon glyphicon-trijstūris-top
glyphicon glyphicon-console
glyphicon glyphicon-superscript
glyphicon glyphicon-apakšraksts
glyphicon glyphicon-menu-left
glyphicon glyphicon-menu-right
glyphicon glyphicon-menu-down
glyphicon glyphicon-menu-up
Kā izmantot
Veiktspējas apsvērumu dēļ visām ikonām ir nepieciešama pamata klase un atsevišķa ikonu klase. Lai izmantotu, ievietojiet tālāk norādīto kodu gandrīz jebkurā vietā. Noteikti atstājiet atstarpi starp ikonu un tekstu, lai nodrošinātu pareizu polsterējumu.
Nejaukt ar citiem komponentiem
Ikonu klases nevar tieši apvienot ar citiem komponentiem. Tos nedrīkst izmantot kopā ar citām klasēm tajā pašā elementā. Tā vietā pievienojiet ligzdotu <span>un lietojiet ikonu klases <span>.
Izmantošanai tikai uz tukšiem elementiem
Ikonu klases drīkst izmantot tikai elementiem, kas nesatur teksta saturu un kuriem nav pakārtotu elementu.
Ikonas fonta atrašanās vietas maiņa
Bootstrap pieņem, ka ikonu fontu faili atradīsies ../fonts/direktorijā attiecībā pret apkopotajiem CSS failiem. Šo fontu failu pārvietošana vai pārdēvēšana nozīmē CSS atjaunināšanu vienā no trim veidiem:
Mainiet @icon-font-pathun/vai @icon-font-namemainīgos avotā Mazāk failu.
Izmantojiet jebkuru opciju, kas vislabāk atbilst jūsu konkrētajam izstrādes iestatījumam.
Pieejamas ikonas
Mūsdienu palīgtehnoloģiju versijas paziņos par CSS ģenerētu saturu, kā arī konkrētām Unicode rakstzīmēm. Lai izvairītos no netīšas un mulsinošas izvades ekrāna lasītājos (jo īpaši, ja ikonas tiek izmantotas tikai dekorēšanai), mēs tās paslēpjam ar aria-hidden="true"atribūtu.
Ja izmantojat ikonu nozīmes izteikšanai (nevis tikai kā dekoratīvu elementu), pārliecinieties, ka šī nozīme tiek nodota arī palīgtehnoloģijām, piemēram, iekļaujiet papildu saturu, kas vizuāli ir paslēpts kopā ar .sr-onlyklasi.
Ja veidojat vadīklas bez cita teksta (piemēram, kurā ir <button>tikai ikona), vienmēr ir jānodrošina alternatīvs saturs, lai identificētu vadīklas mērķi, lai tas būtu saprotams palīgtehnoloģiju lietotājiem. Šajā gadījumā jūs varētu pievienot aria-labelatribūtu pašā vadīklā.
Piemēri
Izmantojiet tos pogās, pogu grupās rīkjoslai, navigācijai vai pievienotās veidlapas ievadei.
Ikona, ko izmanto brīdinājumā , lai norādītu, ka tas ir kļūdas ziņojums, ar papildu .sr-onlytekstu, lai sniegtu šo mājienu palīgtehnoloģiju lietotājiem.
Aptiniet nolaižamās izvēlnes aktivizētāju un nolaižamo izvēlni .dropdown, vai citā elementā, kas deklarē position: relative;. Pēc tam pievienojiet izvēlnes HTML.
Pēc noklusējuma nolaižamā izvēlne tiek automātiski novietota 100% no augšdaļas un tās vecākvārda kreisajā pusē. Pievienot nolaižamajā izvēlnē .dropdown-menu-rightlīdzi pa labi..dropdown-menu
Var būt nepieciešama papildu pozicionēšana
Nolaižamās izvēlnes tiek automātiski novietotas, izmantojot CSS, parastajā dokumenta plūsmā. Tas nozīmē, ka vecāki var apgriezt nolaižamās izvēlnes ar noteiktiem overflowrekvizītiem vai parādīties ārpus skata loga robežām. Risiniet šīs problēmas patstāvīgi, kad tās rodas.
Novecojis .pull-rightlīdzinājums
Sākot ar v3.1.0, .pull-rightnolaižamo izvēlņu darbība ir pārtraukta. Lai izvēlni līdzinātu pa labi, izmantojiet .dropdown-menu-right. Pa labi līdzinātie navigācijas komponenti navigācijas joslā izmanto šīs klases kombinēto versiju, lai automātiski līdzinātu izvēlni. Lai to ignorētu, izmantojiet .dropdown-menu-left.
Virsraksti
Pievienojiet galveni, lai apzīmētu darbību sadaļas jebkurā nolaižamajā izvēlnē.
Grupējiet vairākas pogas vienā rindā ar pogu grupu. Pievienojiet izvēles JavaScript radio un izvēles rūtiņas stila darbību, izmantojot mūsu pogu spraudni .
Rīka padomiem un uznirstošajiem logiem pogu grupās ir nepieciešams īpašs iestatījums
Izmantojot rīka padomus vai uznirstošo logu elementiem .btn-group, jums ir jānorāda opcija container: 'body', lai izvairītos no nevēlamām blakusparādībām (piemēram, elementa paplašināšanās un/vai noapaļoto stūru zaudēšana, kad tiek aktivizēts rīka padoms vai uznirstošais logs).
Pārliecinieties, ka tas ir pareizi role, un norādiet etiķeti
Lai palīgtehnoloģijas, piemēram, ekrāna lasītāji, norādītu, ka vairākas pogas ir grupētas, ir jānodrošina atbilstošs roleatribūts. Pogu grupām tas būtu role="group", savukārt rīkjoslās jābūt role="toolbar".
Viens izņēmums ir grupas, kurās ir tikai viena vadīkla (piemēram, attaisnotās pogu grupas ar <button>elementiem) vai nolaižamā izvēlne.
Turklāt grupām un rīkjoslām ir jāpiešķir precīzs apzīmējums, jo pretējā gadījumā vairums palīgtehnoloģiju tās nepaziņos, neskatoties uz pareiza roleatribūta klātbūtni. Šeit sniegtajos piemēros mēs izmantojam , taču var izmantot arī aria-labeltādas alternatīvas kā .aria-labelledby
Pamatpiemērs
Aptiniet vairākas pogas .btnar .btn-group.
Pogu rīkjosla
Apvienojiet komplektus <div class="btn-group">a <div class="btn-toolbar">, lai iegūtu sarežģītākus komponentus.
Izmēru noteikšana
Tā vietā, lai katrai grupas pogai lietotu pogu izmēra klases, vienkārši pievienojiet katrai pogai .btn-group-*, .btn-grouptostarp tad, ja tiek ligzdotas vairākas grupas.
Ligzdošana
Ja vēlaties, lai nolaižamās izvēlnes būtu apvienotas ar virkni pogu, ievietojiet .btn-groupsimbolu citā ..btn-group
Padariet pogu grupu izstieptas vienādos izmēros, lai aptvertu visu tās galvenās pogas platumu. Darbojas arī ar pogu nolaižamajām izvēlnēm pogu grupā.
Robežu apstrāde
Sakarā ar īpašo HTML un CSS, ko izmanto pogu attaisnošanai (proti display: table-cell, ), robežas starp tām tiek dubultotas. Parastās pogu grupās margin-left: -1pxtiek izmantots, lai saliktu apmales, nevis tās noņemtu. Tomēr marginnedarbojas ar display: table-cell. Tā rezultātā atkarībā no jūsu Bootstrap pielāgojumiem, iespējams, vēlēsities noņemt vai nomainīt apmales.
IE8 un robežas
Internet Explorer 8 nerenderē apmales pogām attaisnotu pogu grupā neatkarīgi no tā, vai tā ir ieslēgta <a>vai <button>elementi. Lai to apietu, aptiniet katru pogu citā .btn-group.
Ja <a>elementi tiek izmantoti, lai darbotos kā pogas, aktivizējot lapas funkcionalitāti, nevis pārejot uz citu dokumentu vai sadaļu pašreizējā lapā, tiem arī jāpiešķir atbilstošs role="button".
Ar <button>elementiem
Lai izmantotu attaisnotas pogu grupas ar <button>elementiem, katra poga ir jāiekļauj pogu grupā . Lielākā daļa pārlūkprogrammu nepareizi izmanto mūsu CSS <button>elementu pamatojumam, taču, tā kā mēs atbalstām pogu nolaižamās izvēlnes, mēs varam to apiet.
Pogu nolaižamās izvēlnes
Izmantojiet jebkuru pogu, lai aktivizētu nolaižamo izvēlni, ievietojot to a .btn-groupun nodrošinot atbilstošu izvēlnes atzīmi.
Atkarība no spraudņa
Lai izmantotu pogu nolaižamo izvēlni , jūsu Bootstrap versijā ir jāiekļauj nolaižamā spraudnis .
Nolaižamās izvēlnes ar vienu pogu
Pārvērtiet pogu par nolaižamo izvēlni, veicot dažas pamata iezīmēšanas izmaiņas.
Paplašiniet veidlapas vadīklas, pievienojot tekstu vai pogas pirms, pēc vai abās pusēs jebkuram tekstam <input>. Izmantojiet .input-groupkopā ar .input-group-addonvai .input-group-btn, lai pievienotu vai pievienotu elementus vienam .form-control.
Tikai teksta <input>s
Šeit nelietojiet <select>elementus, jo WebKit pārlūkprogrammās tos nevar pilnībā noformēt.
Šeit nelietojiet <textarea>elementus, rowsjo dažos gadījumos to atribūts netiks ievērots.
Rīka padomiem un uznirstošajiem logiem ievades grupās ir nepieciešams īpašs iestatījums
Izmantojot rīka padomus vai uznirstošos logus elementos .input-group, jums ir jānorāda opcija container: 'body', lai izvairītos no nevēlamām blakusparādībām (piemēram, elementa paplašināšanās un/vai noapaļoto stūru zaudēšana, kad tiek aktivizēts rīka padoms vai uznirstošais logs).
Nejaukt ar citiem komponentiem
Nejauciet veidlapu grupas vai režģa kolonnu klases tieši ar ievades grupām. Tā vietā ievietojiet ievades grupu veidlapu grupā vai ar režģi saistītā elementā.
Vienmēr pievienojiet etiķetes
Ekrāna lasītājiem būs problēmas ar jūsu veidlapām, ja katrai ievadei neiekļausiet etiķeti. Nodrošiniet, lai šīm ievades grupām visas papildu etiķetes vai funkcionalitāte tiktu nodota palīgtehnoloģijām.
Precīzs izmantojamais paņēmiens (redzamie <label>elementi, <label>elementi, kas paslēpti, izmantojot .sr-onlyklasi vai atribūta aria-label, aria-labelledby, aria-describedby, titlevai placeholderatribūta izmantošana) un kāda papildu informācija būs jānodod, atšķirsies atkarībā no precīza ieviešamā interfeisa logrīka veida. Šīs sadaļas piemēros ir sniegtas dažas ieteiktas, katram gadījumam specifiskas pieejas.
Pamatpiemērs
Ievietojiet vienu papildinājumu vai pogu abās ievades pusēs. Varat arī novietot vienu abās ievades pusēs.
Mēs neatbalstām vairākus papildinājumus ( .input-group-addonvai .input-group-btn) vienā pusē.
Mēs neatbalstām vairākas formas vadīklas vienā ievades grupā.
Izmēru noteikšana
Pievienojiet relatīvās veidlapas izmēru klases .input-grouppašam, un tajā esošā satura lielums tiks automātiski mainīts — nav nepieciešams atkārtot veidlapas vadīklas izmēru klases katram elementam.
Izvēles rūtiņas un radio papildinājumi
Teksta vietā ievades grupas papildinājumā ievietojiet jebkuru izvēles rūtiņu vai radio opciju.
Pogu papildinājumi
Ievades grupu pogas ir nedaudz atšķirīgas, un tām ir nepieciešams viens papildu ligzdošanas līmenis. Tā vietā , lai apvilktu pogas .input-group-addon, būs jāizmanto . .input-group-btnTas ir nepieciešams noklusējuma pārlūkprogrammas stilu dēļ, kurus nevar ignorēt.
Pogas ar nolaižamām izvēlnēm
Segmentētas pogas
Vairākas pogas
Lai gan katrā pusē var būt tikai viens papildinājums, vienā iekšpusē var būt vairākas pogas .input-group-btn.
Navs
Pakalpojumā Bootstrap pieejamajām navigācijas ierīcēm ir kopīgs marķējums, sākot ar bāzes .navklasi, kā arī koplietotie stāvokļi. Mainiet modifikatoru klases, lai pārslēgtos starp katru stilu.
Lai izmantotu navigācijas elementus ciļņu paneļos, ir nepieciešams JavaScript ciļņu spraudnis
Cilnēm ar tabulēšanas apgabaliem ir jāizmanto ciļņu JavaScript spraudnis . Marķējumam būs nepieciešami arī papildu roleatribūti un ARIA — sīkāku informāciju skatiet spraudņa marķējuma piemērā .
Padariet pieejamus navigācijas sistēmas, kas tiek izmantotas kā navigācija
Ja izmantojat navigācijas joslu, lai nodrošinātu navigācijas joslu, noteikti pievienojiet role="navigation"loģiskākajam vecākkonteineram <ul>vai aptiniet <nav>elementu visā navigācijas joslā. Nepievienojiet lomu <ul>pašam, jo tas neļaus to paziņot kā īstu sarakstu, izmantojot palīgtehnoloģijas.
Cilnes
Ņemiet vērā, ka .nav-tabsklasei ir nepieciešama .navbāzes klase.
Ērti izveidojiet cilnes vai tabletes, kas vienādas ar to vecāku platumiem, ja ekrānos ir platāks par 768 pikseļiem, izmantojot .nav-justified. Mazākos ekrānos navigācijas saites ir sakrautas.
Attaisnotās navigācijas joslas navigācijas saites pašlaik netiek atbalstītas.
Safari un atsaucīgas pamatotas navigācijas sistēmas
Sākot ar versiju 9.1.2, pārlūkprogrammā Safari ir kļūda, kurā, mainot pārlūkprogrammas izmērus horizontāli, attaisnotajā navigācijā rodas renderēšanas kļūdas, kas tiek notīrītas pēc atsvaidzināšanas. Šī kļūda ir parādīta arī attaisnotās navigācijas piemērā .
Navigācijas joslas ir adaptīvi meta komponenti, kas kalpo kā jūsu lietojumprogrammas vai vietnes navigācijas galvenes. Mobilajos skatos tie sākas sakļauti (un ir pārslēdzami) un kļūst horizontāli, palielinoties pieejamajam skatvietas platumam.
Attaisnotās navigācijas joslas navigācijas saites pašlaik netiek atbalstītas.
Pārpildīts saturs
Tā kā Bootstrap nezina, cik daudz vietas ir nepieciešams saturam navigācijas joslā, var rasties problēmas ar satura ietīšanu otrajā rindā. Lai to atrisinātu, varat:
Samaziniet navigācijas joslas vienumu skaitu vai platumu.
Slēpt noteiktus navigācijas joslas vienumus noteiktos ekrāna izmēros, izmantojot adaptīvās utilītas klases .
Mainiet punktu, kurā navigācijas josla pārslēdzas starp sakļauto un horizontālo režīmu. Pielāgojiet @grid-float-breakpointmainīgo vai pievienojiet savu multivides vaicājumu.
Nepieciešams JavaScript spraudnis
Ja JavaScript ir atspējots un skata logs ir pietiekami šaurs, lai navigācijas josla sakļautos, nav iespējams izvērst navigācijas joslu un skatīt saturu.navbar-collapse .
Adaptīvajai navigācijas joslai ir nepieciešams, lai jūsu Bootstrap versijā būtu iekļauts sakukšanas spraudnis .
Sakļautā mobilās navigācijas joslas pārtraukuma punkta maiņa
Navigācijas josla tiek sakļauta vertikālajā mobilajā skatā, ja skata logs ir šaurāks par @grid-float-breakpoint, un izvēršas horizontālā skatā, kas nav mobilais skats, ja skata logs ir vismaz @grid-float-breakpointplatumā. Pielāgojiet šo mainīgo avotā Mazāk, lai kontrolētu, kad navigācijas josla tiek sakļauta/izvērsta. Noklusējuma vērtība ir 768px(mazākais "mazais" vai "planšetdatora" ekrāns).
Padariet navigācijas joslas pieejamas
Noteikti izmantojiet <nav>elementu vai, ja izmantojat vispārīgāku elementu, piemēram, <div>, pievienojiet role="navigation"katrai navigācijas joslai, lai to skaidri identificētu kā orientieri palīgtehnoloģiju lietotājiem.
Zīmola tēls
Aizstājiet navigācijas joslas zīmolu ar savu attēlu, nomainot tekstu pret <img>. Tā kā tam .navbar-brandir savs polsterējums un augstums, iespējams, vajadzēs ignorēt dažus CSS atkarībā no attēla.
Veidlapas
Ievietojiet veidlapas saturu, .navbar-formlai nodrošinātu pareizu vertikālo līdzinājumu un sakļautu darbību šauros skatu laukos. Izmantojiet līdzinājuma opcijas, lai izlemtu, kur tas atrodas navigācijas joslas saturā.
Uzmanību , .navbar-formlielu daļu sava koda koplieto ar .form-inline, izmantojot mixin. Dažām veidlapu vadīklām, piemēram, ievades grupām, var būt nepieciešams fiksēts platums, lai tās pareizi tiktu rādītas navigācijas joslā.
Ekrāna lasītājiem būs problēmas ar jūsu veidlapām, ja katrai ievadei neiekļausiet etiķeti. Šo iekļauto veidlapu etiķetes varat paslēpt, izmantojot .sr-onlyklasi. Ir arī citas alternatīvas metodes, kā nodrošināt marķējumu palīgtehnoloģijām, piemēram, aria-label, aria-labelledbyvai titleatribūts. Ja neviena no tām nav, ekrāna lasītāji var izmantot placeholderatribūtu, ja tāds ir, taču ņemiet vērā, ka placeholdernav ieteicams izmantot atribūtu kā citu marķēšanas metožu aizstājēju.
Pogas
Pievienojiet .navbar-btnklasi <button>elementiem, kas neatrodas a <form>, lai tos vertikāli centrētu navigācijas joslā.
Kontekstam atbilstošs lietojums
Tāpat kā standarta pogu klases , .navbar-btnvar izmantot uz <a>un <input>elementiem. Tomēr elementiem iekšā .navbar-btnnedrīkst izmantot ne standarta pogu klases , ne standarta pogas .<a>.navbar-nav
Teksts
Aptiniet teksta virknes elementā ar .navbar-text, parasti uz <p>taga, lai nodrošinātu pareizu ievadu un krāsu.
Saites, kas nav saistītas ar navigāciju
Personām, kuras izmanto standarta saites, kas neietilpst parastajā navigācijas joslas komponentā, izmantojiet .navbar-linkklasi, lai pievienotu atbilstošās krāsas noklusējuma un apgrieztās navigācijas joslas opcijām.
Komponentu izlīdzināšana
Izlīdziniet navigācijas saites, veidlapas, pogas vai tekstu, izmantojot .navbar-leftvai .navbar-rightutilītu klases. Abas klases pievienos CSS pludiņu norādītajā virzienā. Piemēram, lai izlīdzinātu navigācijas saites, ievietojiet tās atsevišķi <ul>, izmantojot attiecīgo lietderības klasi.
Šīs klases ir jauktas versijas .pull-leftun .pull-right, taču tās ir piemērotas multivides vaicājumiem, lai vieglāk apstrādātu navigācijas joslas komponentus dažādos ierīču izmēros.
Vairāku komponentu pareiza līdzināšana
Navigācijas joslām pašlaik ir ierobežojumi vairākām .navbar-rightklasēm. .navbar-rightLai pareizi izvietotu saturu, pēdējā elementā mēs izmantojam negatīvu piemale . Ja šo klasi izmanto vairāki elementi, šīs piemales nedarbojas, kā paredzēts.
Mēs to pārskatīsim, kad varēsim pārrakstīt šo komponentu versijā 4.
Fiksēts augšpusē
Pievienojiet .navbar-fixed-topun iekļaujiet .containervai .container-fluidcentrēšanai un spilventiņu navigācijas joslas saturu.
Nepieciešams ķermeņa polsterējums
Fiksētā navigācijas josla pārklāj jūsu citu saturu, ja vien to nepievienosit paddinglapas augšpusē <body>. Izmēģiniet savas vērtības vai izmantojiet tālāk esošo fragmentu. Padoms. Pēc noklusējuma navigācijas josla ir 50 pikseļus augsta.
Noteikti iekļaujiet to aiz Bootstrap CSS pamata.
Fiksēts apakšā
Pievienojiet .navbar-fixed-bottomun iekļaujiet .containervai .container-fluidcentrēšanai un spilventiņu navigācijas joslas saturu.
Nepieciešams ķermeņa polsterējums
Fiksētā navigācijas josla pārklāj jūsu citu saturu, ja vien jūs to paddingnepievienosit <body>. Izmēģiniet savas vērtības vai izmantojiet tālāk esošo fragmentu. Padoms. Pēc noklusējuma navigācijas josla ir 50 pikseļus augsta.
Noteikti iekļaujiet to aiz Bootstrap CSS pamata.
Statiska augšdaļa
Izveidojiet pilna platuma navigācijas joslu, kas ritinās līdz ar lapu, pievienojot .navbar-static-topun iekļaujot .containervai .container-fluidcentrēšanai un spilventiņu navigācijas joslas saturu.
Atšķirībā no .navbar-fixed-*klasēm, jums nav jāmaina polsterējums body.
Apgriezta navigācijas josla
Mainiet navigācijas joslas izskatu, pievienojot .navbar-inverse.
Maizes drupačas
Norādiet pašreizējās lapas atrašanās vietu navigācijas hierarhijā.
Atdalītāji tiek automātiski pievienoti CSS, izmantojot :beforeun content.
Nodrošiniet lappušu saites savai vietnei vai lietotnei, izmantojot vairāku lapu lappušu komponentu vai vienkāršāku peidžera alternatīvu .
Noklusējuma lappuse
Vienkārša lapošana, ko iedvesmojis Rdio, lieliski piemērota lietotnēm un meklēšanas rezultātiem. Lielo bloku ir grūti nepamanīt, tas ir viegli mērogojams un nodrošina lielus klikšķu apgabalus.
Lapu dalīšanas komponenta marķēšana
Lapu dalīšanas komponents ir jāiesaiņo <nav>elementā, lai to identificētu kā ekrāna lasītāju un citu palīgtehnoloģiju navigācijas sadaļu. Turklāt, tā kā lapā, visticamāk, jau ir vairāk nekā viena šāda navigācijas sadaļa (piemēram, galvenā navigācija galvenē vai sānjoslas navigācija), ir ieteicams sniegt aprakstu aria-label, <nav>kas atspoguļo tās mērķi. Piemēram, ja lappušu veidošanas komponents tiek izmantots, lai pārvietotos starp meklēšanas rezultātu kopu, piemērota etiķete varētu būt aria-label="Search results pages".
Atspējoti un aktīvi stāvokļi
Saites var pielāgot dažādiem apstākļiem. Izmantojiet .disabledneklikšķināmām saitēm un .activepašreizējās lapas norādīšanai.
Mēs iesakām nomainīt aktīvos vai atspējotos enkurus pret <span>vai izlaist enkuru iepriekšējās/nākamās bultiņas gadījumā, lai noņemtu klikšķu funkcionalitāti, vienlaikus saglabājot paredzētos stilus.
Izmēru noteikšana
Vai vēlaties lielāku vai mazāku lappušu skaitu? Pievienojiet .pagination-lgvai .pagination-smpapildu izmēriem.
Peidžeris
Ātras iepriekšējās un nākamās saites vienkāršai lappušu ievietošanai ar vieglu marķējumu un stiliem. Tas ir lieliski piemērots vienkāršām vietnēm, piemēram, emuāriem vai žurnāliem.
Noklusējuma piemērs
Pēc noklusējuma peidžeris centrē saites.
Izlīdzinātas saites
Varat arī izlīdzināt katru saiti sānos:
Izvēles atspējošanas stāvoklis
Peidžera saitēs tiek izmantota arī vispārējā .disabledlietderības klase no lappušu klāšanas.
Etiķetes
Piemērs
Virsraksta piemērs Jauns
Virsraksta piemērs Jauns
Virsraksta piemērs Jauns
Virsraksta piemērs Jauns
Virsraksta piemērs Jauns
Virsraksta piemērs Jauns
Pieejamās variācijas
Pievienojiet jebkuru no tālāk minētajām modifikatoru klasēm, lai mainītu etiķetes izskatu.
Noklusējuma primārās veiksmes informācijas brīdinājums Bīstams
Vai jums ir daudz etiķešu?
Renderēšanas problēmas var rasties, ja šaurā konteinerā ir desmitiem iekļautu uzlīmju, un katrā ir savs inline-blockelements (piemēram, ikona). Veids, kā to novērst, ir iestatīšana display: inline-block;. Kontekstu un piemēru skatiet #13219 .
Nozīmītes
Viegli iezīmējiet jaunus vai nelasītus vienumus, pievienojot <span class="badge">saitēm, Bootstrap navigācijas elementiem un citiem.
Lai padarītu jumbotronu pilnā platumā un bez noapaļotiem stūriem, novietojiet to ārpus visiem .containers un tā vietā pievienojiet iekšpusi .container.
Lapas galvene
Vienkāršs apvalks, h1lai lapas satura sadaļas atbilstoši atdalītu un segmentētu. Tas var izmantot h1noklusējuma smallelementu, kā arī lielāko daļu citu komponentu (ar papildu stiliem).
Lapas galvenes piemērs Galvenes apakšteksts
Sīktēli
Paplašiniet Bootstrap režģa sistēmu ar sīktēlu komponentu, lai ērti parādītu attēlu, videoklipu, teksta un cita veida režģus.
Ja meklējat Pinterest līdzīgu dažāda augstuma un/vai platuma sīktēlu prezentāciju, jums būs jāizmanto trešās puses spraudnis, piemēram, Masonry , Isotope vai Salvattore .
Noklusējuma piemērs
Pēc noklusējuma Bootstrap sīktēli ir paredzēti, lai parādītu saistītos attēlus ar minimālu nepieciešamo marķējumu.
Pielāgots saturs
Izmantojot nelielu papildu marķējumu, ir iespējams sīktēliem pievienot jebkāda veida HTML saturu, piemēram, virsrakstus, rindkopas vai pogas.
Sīktēla etiķete
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida un 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 un 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 un eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
Nodrošiniet kontekstuālus atgriezeniskās saites ziņojumus tipiskām lietotāja darbībām, izmantojot nedaudzus pieejamus un elastīgus brīdinājuma ziņojumus.
Piemēri
Aplauziet jebkuru tekstu un neobligāto noraidīšanas pogu .alertvienā no četrām kontekstuālajām klasēm (piemēram, .alert-success) pamata brīdinājuma ziņojumiem.
Nav noklusējuma klases
Brīdinājumiem nav noklusējuma klases, ir tikai bāzes un modifikatoru klases. Noklusējuma pelēkajam brīdinājumam nav pārāk lielas jēgas, tāpēc jums ir jānorāda veids, izmantojot kontekstuālo klasi. Izvēlieties panākumus, informāciju, brīdinājumus vai briesmas.
Labi padarīts! Jūs veiksmīgi izlasījāt šo svarīgo brīdinājuma ziņojumu.
Uzmanību! Šim brīdinājumam ir jāpievērš uzmanība, taču tas nav īpaši svarīgi.
Brīdinājums! Labāk pārbaudi sevi, tu neizskaties pārāk labi.
Ak! Mainiet dažas lietas un mēģiniet iesniegt vēlreiz.
Noraidāmie brīdinājumi
Izveidojiet jebkuru brīdinājumu, pievienojot izvēles .alert-dismissibleun aizvēršanas pogu.
Sniedziet jaunākās atsauksmes par darbplūsmas vai darbības gaitu, izmantojot vienkāršas, taču elastīgas progresa joslas.
Saderība starp pārlūkprogrammām
Progresa joslas izmanto CSS3 pārejas un animācijas, lai sasniegtu dažus to efektus. Šīs funkcijas netiek atbalstītas pārlūkprogrammā Internet Explorer 9 un jaunākās versijās vai vecākajās Firefox versijās. Opera 12 neatbalsta animācijas.
Satura drošības politikas (CSP) saderība
Ja jūsu vietnei ir satura drošības politika (CSP) , kas neatļauj style-src 'unsafe-inline', jūs nevarēsit izmantot iekļautos styleatribūtus, lai iestatītu norises joslas platumu, kā parādīts mūsu piemēros tālāk. Alternatīvas metodes platumu iestatīšanai, kas ir saderīgi ar stingriem CSP, ietver neliela pielāgota JavaScript (kas nosaka element.style.width) vai pielāgotu CSS klašu izmantošanu.
Pamatpiemērs
Noklusējuma progresa josla.
60% pabeigti
Ar etiķeti
Noņemiet <span>ar .sr-onlyklasi no norises joslas, lai parādītu redzamu procentuālo daļu.
60%
Lai nodrošinātu, ka etiķetes teksts paliek salasāms pat maziem procentiem, apsveriet iespēju pievienot min-widthprogresa joslai.
0%
2%
Kontekstuālās alternatīvas
Progresa joslās tiek izmantotas dažas no tām pašām pogu un brīdinājumu klasēm, lai nodrošinātu konsekventus stilus.
40% pabeigti (veiksmīgi)
20% pabeigti
60% pabeigti (brīdinājums)
80% pabeigti (bīstami)
Svītrains
Izmanto gradientu, lai radītu svītrainu efektu. Nav pieejams IE9 un jaunākās versijās.
40% pabeigti (veiksmīgi)
20% pabeigti
60% pabeigti (brīdinājums)
80% pabeigti (bīstami)
Animēts
Pievienot .active, .progress-bar-stripedlai animētu svītras no labās uz kreiso pusi. Nav pieejams IE9 un jaunākās versijās.
45% pabeigti
Sakrauts
Novietojiet vairākus stieņus vienā .progress, lai tos sakrautu.
35% pabeigti (veiksmīgi)
20% pabeigti (brīdinājums)
10% pabeigti (bīstami)
Mediju objekts
Abstraktie objektu stili dažāda veida komponentu veidošanai (piemēram, emuāra komentāri, tvīti u.c.), kuros līdzās teksta saturam ir līdzināts attēls pa kreisi vai pa labi.
Noklusējuma multivide
Noklusējuma multivide parāda multivides objektu (attēlus, video, audio) satura bloka kreisajā vai labajā pusē.
Multivides virsraksts
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.
Multivides virsraksts
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.
Ligzdotas multivides virsraksts
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.
Multivides virsraksts
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.
Multivides virsraksts
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.
Klases .pull-leftun .pull-rightarī pastāv un iepriekš tika izmantotas kā daļa no multivides komponenta, taču no v3.3.0 ir novecojušas šim lietojumam. Tie ir aptuveni līdzvērtīgi .media-leftun .media-right, izņemot tos, .media-rightkas jāievieto aiz .media-bodyHTML.
Multivides izlīdzināšana
Attēlus vai citus datu nesējus var līdzināt augšā, vidū vai apakšā. Noklusējums ir līdzināts augšpusē.
Augšpusē līdzināts apdrukājamais materiāls
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.
Vidēji līdzināta multivide
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.
Apakšējā izlīdzinātais apdrukājamais materiāls
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.
Mediju saraksts
Izmantojot nedaudz papildu marķējumu, varat izmantot multividi sarakstā (noderīgi komentāru pavedieniem vai rakstu sarakstiem).
Multivides virsraksts
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.
Ligzdotas multivides virsraksts
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.
Ligzdotas multivides virsraksts
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.
Ligzdotas multivides virsraksts
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.
Saraksta grupa
Sarakstu grupas ir elastīgs un jaudīgs komponents, lai parādītu ne tikai vienkāršus elementu sarakstus, bet arī sarežģītus ar pielāgotu saturu.
Pamatpiemērs
Visvienkāršākā sarakstu grupa ir vienkārši nesakārtots saraksts ar saraksta vienumiem un atbilstošām klasēm. Veidojiet to, izmantojot tālāk norādītās opcijas vai pēc vajadzības savu CSS.
Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulums un eross
Nozīmītes
Pievienojiet emblēmu komponentu jebkuram saraksta grupas vienumam, un tas automātiski tiks novietots labajā pusē.
14Cras justo odio
2Dapibus ac facilisis in
1Morbi leo risus
Saistītie vienumi
Saistīt saraksta grupas vienumus, saraksta vienumu vietā izmantojot enkura tagus (tas nozīmē arī vecāku <div>, nevis <ul>). Nav nepieciešami atsevišķi vecāki katram elementam.
Saraksta grupas vienumi var būt pogas, nevis saraksta vienumi (tas nozīmē arī vecāku <div>, nevis <ul>). Nav nepieciešami atsevišķi vecāki katram elementam. Šeit neizmantojiet standarta .btnklases.
Atspējotie priekšmeti
Pievienojiet .disabledsimbolam a .list-group-item, lai to pelēkotu, lai parādītos atspējota.
Lai gan tas ne vienmēr ir nepieciešams, dažreiz jums ir jāievieto DOM kastē. Šādās situācijās izmēģiniet paneļa komponentu.
Pamatpiemērs
Pēc noklusējuma viss, kas jādara, .panelir izmantot dažas pamata apmales un polsterējumu, lai ietvertu kādu saturu.
Pamata paneļa piemērs
Panelis ar virsrakstu
Viegli pievienojiet virsrakstu konteineru savam panelim, izmantojot .panel-heading. Varat arī iekļaut jebkuru<h1> — <h6>ar .panel-titleklasi, lai pievienotu iepriekš izveidotu virsrakstu. Tomēr - fontu <h1>lielumus <h6>ignorē .panel-heading.
Lai saites būtu pareizi nokrāsotas, noteikti ievietojiet saites virsrakstos sadaļā .panel-title.
Paneļa virsraksts bez nosaukuma
Paneļa saturs
Paneļa nosaukums
Paneļa saturs
Panelis ar kājeni
Aptiniet pogas vai sekundāro tekstu .panel-footer. Ņemiet vērā, ka paneļu kājenes nepārmanto krāsas un apmales, ja tiek izmantotas kontekstuālās variācijas, jo tām nav jābūt priekšplānā.
Paneļa saturs
Kontekstuālās alternatīvas
Tāpat kā citus komponentus, varat viegli padarīt paneli jēgpilnāku konkrētam kontekstam, pievienojot kādu no konteksta stāvokļa klasēm.
Paneļa nosaukums
Paneļa saturs
Paneļa nosaukums
Paneļa saturs
Paneļa nosaukums
Paneļa saturs
Paneļa nosaukums
Paneļa saturs
Paneļa nosaukums
Paneļa saturs
Ar galdiem
Pievienojiet .tablepaneļa iekšpusi bez apmales, lai izveidotu nevainojamu dizainu. Ja ir .panel-body, mēs pievienojam papildu apmali tabulas augšpusē atdalīšanai.
Paneļa virsraksts
Šeit ir kāds noklusējuma paneļa saturs. 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.
#
Vārds
Uzvārds
Lietotājvārds
1
Atzīmēt
Otto
@mdo
2
Jēkabs
Torntons
@resns
3
Lerijs
putns
@twitter
Ja paneļa korpusa nav, komponents bez pārtraukuma pārvietojas no paneļa galvenes uz tabulu.
Paneļa virsraksts
#
Vārds
Uzvārds
Lietotājvārds
1
Atzīmēt
Otto
@mdo
2
Jēkabs
Torntons
@resns
3
Lerijs
putns
@twitter
Ar sarakstu grupām
Ērti iekļaujiet pilna platuma sarakstu grupas jebkurā panelī.
Paneļa virsraksts
Šeit ir kāds noklusējuma paneļa saturs. 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
Vestibulums un eross
Atsaucīga iegulšana
Ļaujiet pārlūkprogrammām noteikt video vai slaidrādes izmērus, pamatojoties uz to saturošā bloka platumu, izveidojot raksturīgo attiecību, kas tiks pareizi mērogota jebkurā ierīcē.
Noteikumi tiek tieši piemēroti <iframe>, <embed>, <video>un <object>elementiem; pēc izvēles izmantojiet nepārprotamu pēcnācēju klasi .embed-responsive-item, ja vēlaties saskaņot citu atribūtu stilu.
Pro-Padoms! Jums nav jāiekļauj frameborder="0"jūsu <iframe>s, jo mēs to ignorējam jūsu vietā.
Wells
Noklusējums labi
Izmantojiet aku kā vienkāršu elementa efektu, lai piešķirtu tam ieliktu efektu.
Paskaties, es esmu akā!
Izvēles nodarbības
Kontroles polsterējums un noapaļoti stūri ar divām izvēles modifikatoru klasēm.