Skip to content

Latest commit

 

History

History
169 lines (128 loc) · 4.52 KB

readme.md

File metadata and controls

169 lines (128 loc) · 4.52 KB

Die Übungswebsite mit Bootstrap 5

Stand: 05.10.2020 - Bootstrap 5 alpha 2

Zugeschaut und mitgebaut ...
Übungswebsite von https://html-und-css.de mit Bootstrap 5

01 Bootstrap Template

  • grundlegendes Bootstrap-Template
  • BootstrapCSS via BootstrapCDN
  • Eigenes CSS in css/mein.css
  • link-Elemente zum CSS am Ende des head

02 Site-Header

  • Site-Header mit Container, Logo und Slogan
  • header.site-header > div.container
  • Utilities pt-3 und pb-0
  • optional: .container auf maximal 960px begrenzen

03 Site-Navigation

  • nav.site-nav > div.container

  • .navbar mit expand, dunkel, Schatten, sticky-top, p/m

  • Menübutton als .navbar-toggler

  • Hauptnavigation als .navbar-collapse

    • benötigt bootstrap.min.js
    • via BoostrapCDN vor </body> einfügen

  • Gestaltung der Listenelemente mit eigenem CSS

    • in css/mein.css
    • Rahmenlinien für die Listenelemente
    • sonstige Gestaltung für die Links
    • Farbwerte mit Boostrap-Root-Variablen wie z. B. var(--bs-light)

  • Gestaltung der Desktop-Navi ginge zum Teil auch mit Bootstrap-Utilities

    • text-center
    • px-3
    • border-left und border-right
    • border-light

04 Startseite > Abschnitt "Content-Intro"

  • main.site-content > section.content-intro > div.container
  • H2 und Fließtext
  • einspaltiger Inhalt ist auch ohne .row und .col horizontal bündig

05 Startseite > Abschnitt "Infoboxen"

  • mit versteckter H2-Überschrift "Die Bereiche der Website"
  • die Artikel in den Spalten haben h3-Überschriften

05a Infoboxen mit klassischem Grid-Markup

Klassisches Bootstrap-Verhalten: 3-spaltig ab sm

  • section.infoboxen mit .bg-light > .container
    • h2.visually-hidden "Die Bereiche der Website"
    • Grid
      • 1x .row
        • 3x .col-sm-6
        • 3x .col-lg-4
        • in jeder Spalte 1x article.card
  • Karten
    • div.card-body > h3.card-title, p.card-text und a
    • .card gestalten mit Utilities border-0 und mb-3

05b Infoboxen mit Boostrap-Icons

Infoboxen mit ein Bootstrap-SVG-Icons

  • RSS (der quadratische Rahmen drumherum wird auskommentiert, SVG ist cool)
  • People-Fill
  • At

06 Startseite > Abschnitt "Kundenstimmen"

Mehrfach 12-Spalten in einer Zeile

  • section.kundenstimmen > div.container
  • Überschrift mit .col-12 über die ganze Zeile
  • darunter drei Zitate
    • xtra-small mit 3x .col-12
    • small mit 2x .col-sm-2 und 1x .col-sm-12
    • ab medium

07 Site-Footer

  • footer.site-footer > div.container
  • darin eine Meta-Navigation mit nav.navbar
    • die Liste ul wird Flex-Container
    • Abstände rechts mit Utilities
    • mr-3 für den ersten Link
    • ml-auto beim schiebt Link Nr. 3 nach rechts außen
    • Link "Nach oben" mit Icon

08 Kontaktformular

Kontaktformular

  • einspaltig (label immer über input)
  • zweispaltig responsiv (label über/vor input)

08a Kontaktformular 1-spaltig

wie in der Bootstrap-Doku
DSGVO wie im Buch, Kapitel 9.8

08b Kontaktformular 2-spaltig

Layout ähnlich wie beim Videokurs

  • mobil: Kontaktdaten - Kontaktformular
  • ab sm
    • label rechtsbündig vor den Eingabefeldern
    • DSGVO und Button mit offset-sm-2

09 Template mit Header, Navigation und Footer

Vorlage mit Header, Navigation, und Footer
Ohne Inhalt

Startseite komplett

Template plus Content-Abschnitte für die Startseite Navigationslink aktivieren

Seite News komplett

Template plus Content-Abschnitte für die Seite News.
Inhalte in main.site-content hinzufügen:

  • nur einen div.container, da es keine farblichen Abschnitte gibt
  • erster Abschnitt section.col.content-intro über ganze Breite
  • zweiter Abschitt ist zweispaltig
    • div.row mit größerem Gutter .gx-5
    • alle H2 als .visually-hidden
    • Beitragsliste section.col-md-8.beitragsliste
    • Linklisten als aside.col-md-4.linklisten
    • Gestaltung der Artikel und Linklisten mit Bootstrap-Utilities
  • Navigationslinks aktivieren (auch auf der Startseite)

Seite Über uns komplett

Template plus Content-Abschnitte für die Seite Über uns

  • .content-intro mit nach rechts gefloatetem Bild
  • .team mit Karten
    • farbiger Header mit card-header bg-primary
    • Inhalt in card-body

Seite Kontakt komplett

Kontaktdaten und Kontaktformular

  • mobil untereinander
  • ab sm
    • kontaktformular links
    • kontaktdaten rechts

--- eof ---