Create Your First Web Page With Bootstrap 5 ALLE ANLEITUNGEN SIND DER FOLGENDEN TRAININGSSEITE ENTNOMMEN: https://www.w3schools.com/bootstrap5/index.php Viel Spaß beim Training 1. Add the HTML5 doctype Bootstrap 5 uses HTML elements and CSS properties that require the HTML5 doctype. Always include the HTML5 doctype at the beginning of the page, along with the lang attribute and the correct title and character set: Bootstrap 5 Example 2. Bootstrap 5 is mobile-first Bootstrap 5 is designed to be responsive to mobile devices. Mobile-first styles are part of the core framework. To ensure proper rendering and touch zooming, add the following tag inside the element: The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device). The initial-scale=1 part sets the initial zoom level when the page is first loaded by the browser. 2 Containerarten: The .container class provides a responsive fixed width container The .container-fluid class provides a full width container, spanning the entire width of the viewport 1. Bootstrap Seite mit fixed container ---- container Bootstrap BEISPIEL CONTAINER FEST

My First Bootstrap Page

This part is inside a .container class.

The .container class provides a responsive fixed width container.

Resize the browser window to see that the container width will change at different breakpoints.

Bootstrap Example - Fluid Container

My First Bootstrap Page

This part is inside a .container-fluid class.

The .container-fluid class provides a full width container, spanning the entire width of the viewport.

Bootstrap Example

My First Bootstrap Page

This container has an extra top padding.

Try to remove the .pt-5 class to see the difference.

My First Bootstrap Page

This container has NO extra top padding.

Try to remove the .pt-5 class to see the difference.

Farben Bootstrap Example

My First Bootstrap Page

This container has a border and some extra padding and margins.

My First Bootstrap Page

This container has a dark background color and a white text, and some extra padding and margins.

My First Bootstrap Page

This container has a blue background color and a white text, and some extra padding and margins.

Verschiedene Sprünge des Containers Responsive Containers You can also use the .container-sm|md|lg|xl classes to determine when the container should be responsive. Bootstrap Example

Responsive Containers

Resize the browser window to see the effect.

.container-sm

.container-md

.container-lg

.container-xl

.container-xxl

Bootstrap Example

Three equal width columns

Note: Try to add a new div with class="col" inside the row class - this will create four equal-width columns.

.col

Three equal width columns

Note: Try to add a new div with class="col" inside the row class - this will create four equal-width columns.

Block 1

Block2

Block3

Block4

Responsive Columns .col-sm-3 .col-sm-3 .col-sm-3 .col-sm-3 The following example shows how to create four equal-width columns starting at tablets and scaling to extra large desktops. On mobile phones or screens that are less than 576px wide, the columns will automatically stack on top of each other: Example Bootstrap Example

Two Unequal Responsive Columns

Resize the browser window to see the effect.

The columns will automatically stack on top of each other when the screen is less than 576px wide.

.col

Bootstrap Example

Two Unequal Responsive Columns

Resize the browser window to see the effect.

The columns will automatically stack on top of each other when the screen is less than 576px wide.

.col

Bootstrap 5 Default Settings Bootstrap 5 uses a default font-size of 1rem (16px by default), and its line-height is 1.5. In addition, all

elements have margin-top: 0 and margin-bottom: 1rem (16px by default).

-

Bootstrap 5 styles HTML headings (

to

) with a bolder font-weight and a responsive font-size. Example Bootstrap Example

The font-size of each Bootstrap heading depends on the screen size. Try to resize the browser window to see the effect.

h1 Bootstrap heading

h2 Bootstrap heading

h3 Bootstrap heading

h4 Bootstrap heading

h5 Bootstrap heading

h6 Bootstrap heading

Bootstrap Example

h1 Bootstrap heading

h2 Bootstrap heading

h3 Bootstrap heading

h4 Bootstrap heading

h5 Bootstrap heading

h6 Bootstrap heading

Bootstrap Example

Display Headings

Display headings are used to stand out more than normal headings (larger font-size and lighter font-weight):

Display 1

Display 2

Display 3

Display 4

Display 5

Display 6

Bootstrap Example

Smaller, Secondary Text

The small element (and the .small class) is used to create a smaller, secondary text in any heading:

h1 heading secondary text

h2 heading secondary text

h3 heading secondary text

h4 heading secondary text

h5 heading secondary text

h6 heading secondary text

Bootstrap Example

Highlight Text

Use the mark element (or the .mark class) to highlight text.

Bootstrap Example

Abbreviations

The abbr element is used to mark up an abbreviation or acronym:

The WHO was founded in 1948.

Bootstrap Example

Blockquotes

The blockquote element is used to present content from another source:

For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.

From WWF's website

Bootstrap Example

Description Lists

The dl element indicates a description list:

Coffee: - black hot drink
Milk: - white cold drink

Sections in einem Dokument - werden rot angezeigt Bootstrap Example

Code Snippets

Inline snippets of code should be embedded in the code element:

The following HTML elements: span, section, and div defines a section in a document.

Bootstrap Example

Keyboard Inputs

To indicate input that is typically entered via the keyboard, use the kbd element:

Use ctrl + p to open the Print dialog box.

Bootstrap Example

Multiple Code Lines

For multiple lines of code, use the pre element:

Text in a pre element

is 
displayed in a fixed-width
font, and it preserves
both      spaces and
line breaks.

Typography

Use the .lead class to make a paragraph "stand out":

This paragraph stands out.

This is a regular paragraph.

Typography

Left-aligned text.

Right-aligned text.

Center-aligned text.

No wrap text. No wrap text. No wrap text. No wrap text.

Text break / Word break

The .text-break class prevents long text from breaking layout.

With .text-break:

AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZzAaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZzAaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZzAaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz

Without .text-break:

Keine UNTERSTRICHE

Text Decoration

Use the .text-decoration-none class to remove the underline from a link.

A link without underline.

KLEINSCHREIBUNG - GROSSSCHREIBUNG - ANFANGSBUCHSTABE - GROSS

Typography

Lowercased text.

Uppercased text.

Capitalized text.

ETWAS KLEINERER TEXT

Typography

The WHO was founded in 1948. (normal abbr)

The WHO was founded in 1948. (slightly smaller abbr)

STIL WIRD AUFGEHOBEN

Typography

The class .list-unstyled removes the default list-style and left margin on list items (immediate children only):

Coffee
Tea
- Black tea
- Green tea
Milk

ALLE BEGRIFFE IN EINER ZEILE NEBENEINANDER

Typography

The class .list-inline places all list items on a single line, when used together with the .list-inline-item:

Coffee
Tea
Milk

FARBEN DES TEXTES Bootstrap 5 has some contextual classes that can be used to provide "meaning through colors". 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:

Contextual Colors

Use the contextual classes to provide "meaning through colors":

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.

This text is dark grey.

Default body color (often black).

This text is light grey (on white background).

This text is white (on white background).

Opacity Text Colors

Add 50% opacity for black or white text with the .text-black-50 or .text-white-50 classes:

Black text with 50% opacity on white background

White text with 50% opacity on black background

HINTERGRUNDFARBEN 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-* color class.

Contextual Backgrounds

Use the contextual background classes to provide "meaning through colors".

Note that you can also add a .text-* class if you want a different text color:

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.

FOTOS ABGERUNDET

Rounded Corners

The .rounded class adds rounded corners to an image:

Aligning images

Use the float classes to float the image to the left or to the right:

Centered Image

Center an image by adding the utility classes .mx-auto (margin:auto) and .d-block (display:block) to the image:

Responsive Images Images come in all sizes. So do screens. Responsive images automatically adjust to fit the size of the screen. Create responsive images by adding an .img-fluid class to the tag. The image will then scale nicely to the parent element. The .img-fluid class applies max-width: 100%; and height: auto; to the image: Example New York

Image

The .img-fluid class makes the image scale nicely to the parent element (resize the browser window to see the effect):

Jumbotron

Example of Jumbotron

Jumbotron Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat..

ALERTS - HINWEISTEXTE

Alerts

Alerts are created with the .alert class, followed by a contextual color classes:

Success! This alert box could indicate a successful or positive action.

Info! This alert box could indicate a neutral informative change or action.

Warning! This alert box could indicate a warning that might need attention.

Danger! This alert box could indicate a dangerous or potentially negative action.

Primary! Indicates an important action.

Secondary! Indicates a slightly less important action.

Dark! Dark grey alert.

Light! Light grey alert.

BUTTONS - SCHALTKNÖPFE

Button Styles

BUTTONS OUTLINE - SCHWACH UMRANDETE BUTTONS

Button Outline

BUTTONS DREI GRÖSSEN

Button Sizes

BUTTONS ÜBER DIE GANZE ZEILE

Block Level Buttons

To create a block level button that spans the entire width of the parent element, use the .d-grid "helper" class on the parent element:

KLICKBARE UND NICHT KLICKBARE BUTTONS

Button States

Disabled Link

SPINNER BUTTONS

Spinner Buttons

Add spinners to buttons:

SEITENZÄHLUNG 1 2 3 :::

Pagination

To create a basic pagination, add the .pagination class to an ul element. Then add the .page-item to each li element and a .page-link class to each link inside li:

AKTIVE SEITE ERLEUCHTET

Pagination - Active State

Add class .active to let the user know which page he/she is on:

DISABLED PAGE class

Pagination - Disabled State

Add class .disabled if a page for some reason is disabled:

GRÖSSEN DER PAGINATION - GROSS UND KLEINERER

Pagination - Sizing

Add class .pagination-lg for larger blocks or .pagination-sm for smaller blocks.

Large:

Default:

Small:

PAGINATION LINKS MITTE RECHTS

Pagination

Use utilitiy classes to change the alignment of the pagination:

PAGINATION - BREADCRUMBS

Breadcrumbs

The .breadcrumb class indicates the current page's location within a navigational hierarchy:

SCROLL SPY - SEITENSCROLLBALKEN Bootstrap Example

Section 1

Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!

Section 2

Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!

Section 3

Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!

SCROLL BAR TEST

Wie arbeite ich

Eine Info über meine Arbeit gebe ich - TEXT VON REINHARD HIERZU::::Meditation ist der Königsweg für die Auflösung von .....

Zur Therapie

Beschreibung des Ablaufs der Therapie - TEXT VON REINHARD HIERZU:::: Wenn Du Dich entscheidest, eine Therapie zu beginnen, so solltest Du wissen, dass die Meditation der Schlüssel für die Veränderung von Mustern, unter denen Du .....

Neuigkeiten

Es gibt Veränderungen - TEXT VON REINHARD HIERZU:::: Wichtige Veränderungen haben in den vergangenen Jahren meine Arbeit mit Betroffenen ......

Section 1

Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!

Section 2

Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!

Section 3

Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!

ZENTRIERTER CONTAINER FÜR SCHRIFT - SIEHE AUCH DRITTE REIHE JACKEL

Häufige Fragen

Ich zeige Dir den Weg - Du löst Dein Leid durch tägliche Meditation auf!

Nur Du kannst Dich heilen!

Das hängt von Deinem persönlichen Weg ab!

Täglich Meditieren!

Gehe tief in Dein Gefühl hinein - und dann tröste Dich! - Nur so kann sich das Leid auflösen!

Die Therapie dauert so lange bis Du weißt, dass Du Deinen Weg alleine weitergehen willst!

Schreibe mir gerne eine Nachricht an reinhardjackel (at) t-online.de

Kontakt

Rufe mich an

TELEFON: +49 30 706 60 63

Sende mir eine Mail

reinhard.jackel (at) t-online.de

ENDE -->

Lage der Praxis

-->