Bootstrap 4 nutsprogramme

Bootstrap 4 het baie nuts-/helperklasse om elemente vinnig te styl sonder om enige CSS-kode te gebruik.

Grense

Gebruik die borderklasse om grense van 'n element by te voeg of te verwyder:

Voorbeeld

Rand Kleur

Voeg 'n kleur by die grens met enige van die kontekstuele grenskleurklasse:

Voorbeeld

Grens radius

Voeg afgeronde hoeke by 'n element met die roundedklasse:

Voorbeeld

Float en Clearfix

Swaai 'n element na regs met die .float-rightklas of na links met .float-left, en maak dryf skoon met die .clearfixklas:

Voorbeeld

Float left Float right

Voorbeeld

<div class="clearfix">
<span class="float-left">Float left</span>
<span class="float-right">Float right</span>
</div>

Responsiewe dryf

Swaai 'n element na links of na regs, afhangende van skermwydte, met die responsiewe dryfklasse ( .float-*-left|right- waar * is sm(>=576px), md(>=768px), lg(>=992px) of xl(>=1200px)):

Voorbeeld

Float right on small screens or wider

Float right on medium screens or wider

Float right on large screens or wider

Float right on extra large screens or wider

Float none

Voorbeeld

<div class="float-sm-right">Float right on small screens or wider</div><br>
<div class="float-md-right">Float right on medium screens or wider</div><br>
<div class="float-lg-right">Float right on large screens or wider</div><br>
<div class="float-xl-right">Float right on extra large screens or wider</div><br>
<div class="float-none">Float none</div>

Sentrumbelyning

Sentreer 'n element met die .mx-autoklas (voeg kantlyn-links en kantlyn-regs by: outo):

Voorbeeld

Centered

Voorbeeld

<div class="mx-auto bg-warning" style="width:150px">Centered</div>

Breedte

Stel die breedte van 'n element met die w-* klasse ( .w-25, .w-50, .w-75, .w-100, .mw-100):

Voorbeeld

Width 25%

Width 50%

Width 75%

Width 100%

Max Width 100%

Voorbeeld

<div class="w-25 bg-warning">Width 25%</div>
<div class="w-50 bg-warning">Width 50%</div>
<div class="w-75 bg-warning">Width 75%</div>
<div class="w-100 bg-warning">Width 100%</div>
<div class="mw-100 bg-warning">Max Width 100%</div>

Hoogte

Stel die hoogte van 'n element met die h-* klasse ( .h-25, .h-50, .h-75, .h-100, .mh-100):

Voorbeeld

Height 25%

Height 50%

Height 75%

Height 100%

Max Height 100%

Voorbeeld

<div style="height:200px;background-color:#ddd">
<div class="h-25 bg-warning">Height 25%</div>
<div class="h-50 bg-warning">Height 50%</div>
<div class="h-75 bg-warning">Height 75%</div>
<div class="h-100 bg-warning">Height 100%</div>
<div class="mh-100 bg-warning" style="height:500px">Max Height 100%</div>
</div>

Spasiëring

Bootstrap 4 het 'n wye reeks responsiewe marge- en opvulling-nutsklasse. Hulle werk vir alle breekpunte: xs(<=576px), sm(>=576px), md(>=768px), lg(>=992px) of xl(>=1200px)):

Die klasse word gebruik in die formaat: {property}{sides}-{size}vir xsen {property}{sides}-{breakpoint}-{size}vir sm, md, lg, en xl.

Waar eiendom een van:

m - stelle margin
p - stelle padding

Waar sye een van is:

t- stelle margin-topofpadding-top
b- stelle margin-bottomofpadding-bottom
l- stelle margin-leftofpadding-left
r- stelle margin-rightofpadding-right
x- stel beide padding-leften padding-rightof margin-leftenmargin-right
y- stel beide padding-topen padding-bottomof margin-topenmargin-bottom
leeg - stel 'n marginof paddingaan al 4 kante van die element

Waar grootte een van is:

0- stelle marginof paddingaan0
1- stel marginof paddingna .25rem(4px as lettergrootte 16px is)
2- stel marginof paddingna .5rem(8px as lettergrootte 16px is)
3- stel marginof paddingna 1rem(16px as lettergrootte 16px is)
4- stel marginof paddingna 1.5rem(24px as lettergrootte 16px is)
5- stel marginof paddingna 3rem(48px as lettergrootte 16px is)
auto- stel marginna outomaties

Let wel: kantlyne kan ook negatief wees deur 'n "n" voor grootte by te voeg :

n1- stel marginna -.25rem(-4px as lettergrootte 16px is)
n2- stel marginna -.5rem(-8px as lettergrootte 16px is)
n3- stel marginna -1rem(-16px as lettergrootte 16px is)
n4- stel marginna -1.5rem(-24px as lettergrootte 16px is)
n5- stel marginna -3rem(-48px as lettergrootte 16px is)

Voorbeeld

I only have a top padding (1.5rem = 24px)

I have a padding on all sides (3rem = 48px)

I have a margin on all sides (3rem = 48px) and a bottom padding (3rem = 48px)

Voorbeeld

<div class="pt-4 bg-warning">I only have a top padding (1.5rem = 24px)</div>
<div class="p-5 bg-success">I have a padding on all sides (3rem = 48px)</div>
<div class="m-5 pb-5 bg-info">I have a margin on all sides (3rem = 48px) and a bottom padding (3rem = 48px)</div>

Meer spasiëringsvoorbeelde

`.m-# / m-*-#`	kantlyn aan alle kante
`.mt-# / mt-*-#`	marge bo
`.mb-# / mb-*-#`	marge onder
`.ml-# / ml-*-#`	kantlyn links
`.mr-# / mr-*-#`	kantlyn regs
`.mx-# / mx-*-#`	kantlyn links en regs
`.my-# / my-*-#`	marge bo en onder
`.p-# / p-*-#`	vulling aan alle kante
`.pt-# / pt-*-#`	vulling top
`.pb-# / pb-*-#`	vulling onderkant
`.pl-# / pl-*-#`	vulling links
`.pr-# / pr-*-#`	opvulling reg
`.py-# / py-*-#`	vulling bo en onder
`.px-# / px-*-#`	vulling links en regs

Skaduwees

Gebruik die shadow-klasse om skaduwees by 'n element te voeg:

Voorbeeld

No shadow

Small shadow

Default shadow

Large shadow

Voorbeeld

<div class="shadow-none p-4 mb-4 bg-light">No shadow</div>
<div class="shadow-sm p-4 mb-4 bg-white">Small shadow</div>
<div class="shadow p-4 mb-4 bg-white">Default shadow</div>
<div class="shadow-lg p-4 mb-4 bg-white">Large shadow</div>

Vertikaal bely

Gebruik die align-klasse om die belyning van elemente te verander (werk slegs op inlyn-, inlynblok-, inlyn-tabel- en tabelselelemente):

Voorbeeld

baseline top middle bottom text-top text-bottom

Voorbeeld

<span class="align-baseline">baseline</span>
<span class="align-top">top</span>
<span class="align-middle">middle</span>
<span class="align-bottom">bottom</span>
<span class="align-text-top">text-top</span>
<span class="align-text-bottom">text-bottom</span>

Responsiewe inbeddings

Skep responsiewe video- of skyfievertoning-insluitsels gebaseer op die breedte van die ouer.

Voeg die .embed-responsive-itemby enige inbedelemente (soos <iframe> of <video>) in 'n ouerelement met .embed-responsiveen 'n aspekverhouding van jou keuse:

Voorbeeld

<div class="embed-responsive embed-responsive-21by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>


<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>


<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>


<div class="embed-responsive embed-responsive-1by1">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>

Sigbaarheid

Gebruik die .visibleof .invisibleklasse om die sigbaarheid van elemente te beheer. Let wel: Hierdie klasse verander nie die CSS-vertoonwaarde nie. Hulle voeg net by visibility:visibleof visibility:hidden:

Voorbeeld

I am visible

I am invisible

Voorbeeld

<div class="visible">I am visible</div>
<div class="invisible">I am invisible</div>

Posisie

Gebruik die .fixed-topklas om enige element vas te maak/aan die bokant van die bladsy te bly:

Voorbeeld

Use the .fixed-bottom class to make any element fixed/stay at the bottom of the page:

Example

Use the .sticky-top class to make any element fixed/stay at the top of the page when you scroll past it. Note: This class does not work in IE11 and earlier (will treat it as position:relative).

Example

Close icon

Use the .close class to style a close icon. This is often used for alerts and modals. Note that we use the × symbol to create the actual icon (a better looking "x"). Also note that it floats right by default:

Example

Screenreaders

Use the .sr-only class to hide an element on all devices, except screen readers:

Example

<span class="sr-only">I will be hidden on all screens except for screen readers.</span>

Colors

As described in the Colors chapter, here is a list of all text and background color classes:

The classes for text colors are: .text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-white, .text-dark, .text-body (default body color/often black) and .text-light:

Example

This text is muted.

This text is important.

This text indicates success.

This text represents some information.

This text represents a warning.

This text represents danger.

Secondary text.

Dark grey text.

Body text.

Light grey text.

Contextual text classes can also be used on links, which will add a darker hover color:

Example

Muted link. Primary link. Success link. Info link. Warning link. Danger link. Secondary link. Dark grey link. Body/black link. Light grey link.

You can also add 50% opacity for black or white text with the .text-black-50 or .text-white-50 classes:

Example

Black text with 50% opacity on white background

White text with 50% opacity on black background

Background Colors

The classes for background colors are: .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark and .bg-light.

Note that background colors do not set the text color, so in some cases you'll want to use them together with a .text-* class.

Example

This text is important.

This text indicates success.

This text represents some information.

This text represents a warning.

This text represents danger.

Secondary background color.

Dark grey background color.

Light grey background color.

Typography/Text Classes

As described in the Typography chapter, here is a list of all typography/text classes:

Class	Description	Example
`.display-*`	Display headings are used to stand out more than normal headings (larger font-size and lighter font-weight), and there are four classes to choose from: `.display-1`, `.display-2`, `.display-3`, `.display-4`
`.font-weight-bold`	Bold text
`.font-weight-bolder`	Bolder bold text
`.font-weight-normal`	Normal text
`.font-weight-light`	Light weight text
`.font-weight-lighter`	Lighter weight text
`.font-italic`	Italic text
`.lead`	Makes a paragraph stand out
`.small`	Indicates smaller text (set to 85% of the size of the parent)
`.text-break`	Prevents long text from breaking layout
`.text-center`	Indicates center-aligned text
`.text-decoration-none`	Removes the underline from a link
`.text-left`	Indicates left-aligned text
`.text-justify`	Indicates justified text
`.text-monospace`	Monospaced text
`.text-nowrap`	Indicates no wrap text
`.text-lowercase`	Indicates lowercased text
`.text-reset`	Resets the color of a text or a link (inherits the color from its parent)
`.text-right`	Indicates right-aligned text
`.text-uppercase`	Indicates uppercased text
`.text-capitalize`	Indicates capitalized text
`.initialism`	Displays the text inside an `<abbr>` element in a slightly smaller font size
`.list-unstyled`	Removes the default list-style and left margin on list items (works on both `<ul>` and `<ol>`). This class only applies to immediate children list items (to remove the default list-style from any nested lists, apply this class to any nested lists as well)
`.list-inline`	Places all list items on a single line (used together with `.list-inline-item` on each <li> elements)
`.pre-scrollable`	Makes a `<pre>` element scrollable

Block Elements

To make an element into a block element, add the .d-block class. Use any of the d-*-block classes to control WHEN the element should be a block element on a specific screen width:

Example

d-block d-sm-block d-md-block d-lg-block d-xl-block

Example

<span class="d-block bg-success">d-block</span>
<span class="d-sm-block bg-success">d-sm-block</span>
<span class="d-md-block bg-success">d-md-block</span>
<span class="d-lg-block bg-success">d-lg-block</span>
<span class="d-xl-block bg-success">d-xl-block</span>

Other Display Classes

Other display classes are also available:

Class	Description	Example
`.d-none`	Hides an element
`.d-*-none`	Hides an element on a specific screen size
`.d-inline`	Makes an element inline
`.d-*-inline`	Makes an element inline on a specific screen size
`.d-inline-block`	Makes an element inline block
`.d-*-inline-block`	Makes an element inline block on a specific screen size
`.d-table`	Makes an element display as a table
`.d-*-table`	Makes an element display as a table on a specific screen size
`.d-table-cell`	Makes an element display as a table cell
`.d-*-table-cell`	Makes an element display as a table cell on a specific screen size
`.d-table-row`	Makes an element display as a table row
`.d-*-table-row`	Makes an element display as a table row on a specific screen size
`.d-flex`	Creates a flexbox container and transforms direct children into flex items
`.d-*-flex`	Creates a flexbox container on a specific screen size
`.d-inline-flex`	Creates an inline flexbox container
`.d-*-inline-flex`	Creates an inline flexbox container on a specific screen size

Flex

Use .flex-* classes to control the layout with flexbox.

Read more about Bootstrap 4 Flex, in our next chapter.

Example

Horizontal:

Flex item 1

Flex item 2

Flex item 3

Flex item 1

Flex item 2

Flex item 3

Vertical:

Flex item 1

Flex item 2

Flex item 3

Flex item 1

Flex item 2

Flex item 3

❮ Previous Next ❯

Bootstrap 4-tutoriaal

Bootstrap 4-rooster

Bootstrap 4 Ander

Bootstrap 4 Verw

Bootstrap 4 nutsprogramme