logo   Boot strap - Selektor grupper


Den primære css-fil fra Bootstrap fylder ca 145 sider i pdf-format. Andre css-filer fra Bootstrap med visse delmængder fylder mindre.


I især menuafsnittene 'Layout', 'Content' og 'Components' i Bootstrap's 'Documentation' omtales en del af selektorerne i filen - nok de væsentligste. Derudover tilbyder hverken Bootstrap eller (tilsyneladende) andre værktøjer til analyse af det omfattende datamateriale.


Nedenfor er der link til først Bootstrap's egne css-filer i pdf-format, og efterfølgende er den primære Bootstrap-fil 'klippet' op i et antal dele:


Source css fil der indgår i den primære download.
bootstrap.cssHele bootstrap.css filen til BS 4.0.145
bootstrap-grid.cssSelektorer knyttet til opbygning af grids24
bootstrap-reboot.cssBootstrap-reboot.css filen6




Udpluk fra'bootstrap.css'


Nedenfor er den primære 'Bootstrap.css'-fil klippet op i dele for hhv:


GLOBALEAlle selektorer i bootstrap.css udenfor @media.95
HTML-tagsAnvendes default på alle Bootstrap-sider. (Kun tags uden tilknyttede selektorer.)9
.@media alleAlle selektorer i bootstrap.css indenfor @media51
.@media xsSelektorer til viewport 000-575 px.1
.@media smSelektorer til viewport 576-767 px.
Indeholder selektorer til form, card, jumbotron og modal der ikke indgår i md, lg og xl.
15
.@media mdSelektorer til viewport 768-991 px.12
.@media lgSelektorer til viewport 992-1199 px.12
.@media xlSelektorer til viewport 1200-xxxx px.12
.@media printSelektorer til styring af print.2
Gitter (grid)
BS4
beta
Selektor-
navn
BetegnelsePDF-
sider
BS4.2
dok
.containerContainer-selektorer2Grid
.rowRow-selektorer1Grid
.colSe den relevante @media ovenforGrid
Content
BS4
beta
Selektor-
navn
BetegnelsePDF-
sider
BS4.2
dok
.preSelektorer knyttet til code.1Code
.figureSelektorer knyttet til visning af Figurer (billeder).1Figres
.imgSelektorer til håndtering af billeder.1Images
Ingen selektorerGenerelt vedr. opbygning af base-line (default) side.Reboot
.tableSelektorer knyttet til opbygning af tabeller.5Tables



.blockquote
.display
.initialism
.lead
Generelt vedr. typography (tekster). 1
1
1
1
Typhography
Utilities
BS4
beta
Selektor-
navn
BetegnelsePDF-
sider
BS4.2
dok
.borderSelektorer knyttet til borders.1Borders
.clearfixSelektorer knyttet til clearfix.1Clearfix
.closeSelektorer knyttet til close.1Close icon

.bg
.text
Selektorer knyttet til baggrundsfarver hhv. tekstfarver.2
2
Colors
.dSelektorer knyttet til display. (Kun de væsentligste)3Display
.embedSelektorer knyttet til embed.1Embed
.d
.flex
.justify
.align
.order
Selektorer knyttet til flex.
Ca. 40 "ens" selektorer pr hver klasse.
17Flex
.floatSelektorer knyttet til float.2Float
.text-hideSelektorer knyttet til image replacement.1Image replacement
Ingen selektorerSelektorer knyttet til overflow.Overflow

.fixed
.sticky
Selektorer knyttet til position.1
1
Position
.srSelektorer knyttet til screenreaders.1Screenreaders
Ingen selektorerSelektorer knyttet til shadows.Shadows
.w, .hSelektorer knyttet til sizing (width, height ect.).1Sizing
.m-, p-Selektorer knyttet til spacing (margin, padding).23Spacing
.textSelektorer knyttet til modifikationer af text.2Text
.alignSelektorer knyttet til vertical align.1Vertical align
.visibleSelektorer knyttet til visibility.1Visibility
Komponenter
BS4
beta
Selektor-
navn
BetegnelsePDF-
sider
BS4.2
dok
.alertSelektorer knyttet til Alerts.3Alerts
.badgeSelektorer knyttet til Badges.2Badge
.breadcrumbSelektorer knyttet til Breadcrumbs.1Breadcrumb
.btnxSelektorer knyttet til Buttons.14Buttons
.btn-groupSelektorer knyttet til Button groups.14Button group
.cardSelektorer knyttet til Cards4Card
.carouselSelektorer knyttet til Carousel4Carousel


.collapse
.collapsing
.show
Selektorer knyttet til Collapse med "display: x". 1
1
1
Collapse
.dropxxSelektorer knyttet til Dropdown og Dropup.2Dropdowns

.form
.was
Selektorer knyttet til Forms. 7
3
Forms

.input
.custom
Selektorer knyttet til input-felter. 3
4
Input group
.jumbotronSelektorer knyttet til jumbotron1Jumbotron

.list-group
.show
Selektorer knyttet til lister og især listegrupper. 6
1
List gfroup

.media
.list
Selektorer knyttet til håndtering af media (billeder, video etc.). 1
1
Media object

.modal
.fade
Selektorer knyttet til Modal. 3
1
Modal

.nav
.tab
Selektorer knyttet til den indre opbygning af menu (navs). 2
1
Navs
.navbarSelektorer knyttet til den ydre opbygning af menu (navbar).9Navbar

.pagination
.page
Selektorer knyttet til pagination. 1
1
Pagination

.popover
.show
Selektorer knyttet til Popover. 4
1
Popovers
.progressSelektorer knyttet til Progress.1Progress
.Selektorer knyttet til Scrollspy.1Scrollspy
.Selektorer knyttet til Spinners.1Spinners

.
.show
Selektorer knyttet til Toasts.
1
Toasts

.tooltip
.invalid
Selektorer knyttet til Tooltip. 3
1
Tooltip


Har man brug for en generel selektor, der ikke er nævnt i Bootsrap's dokumentation, synes der ikke at være anden mulighed end at søge lykken i pdf-filen på 93 sider.




"rem" og "em"


'rem' eller 'em' bruges som hovedregel til størrelsesangivelse i stedet for px(pixels) i tilknytning til selektorerne:

background-xxx (rem)
border-xxx (rem)
bottom (em)
box-xxx (rem)
column (rem)
font-size (em, rem)
height (rem)
line-height (rem)
margin-xxx (rem). Ved container, row og col anvendes dog pixels.
min-xxx (rem)
padding-xxx (em, rem)
right-xxx (rem)
top (em, rem)
vertical (em)


Af de to anvendes "em" kun i beskedent omfang.





















x
x