Webseiten erstellen
Thema Mobirise5
v5.5.8

Das ist nur eine Testseite
This is a test page only

Bootstrap 5 Komponente "Toast"

Dieses Plugin erzeugt eine Box, die sich nach wenigen Sekunden selbstständig wieder schließt oder man lässt den Mauszeiger über der Box, damit diese nicht schließt.

Zum besseren Verständnis guckt bitte auch hier bei w3schools.com und bei getbootstrap.com

Toast Header

Heute gibt es diese Neuigkeiten

Einbau der Komponente "Toast"

Die Box zur Anzeige in den "Code Editor" in den Bereich "HTML Editor":

<!-- Beginn Bootstrap "Toast" Beispiel -->
<button type="button" class="btn btn-primary" id="toastbtn">Zeige Neuigkeiten</button>
<div class="toast">
  <div class="toast-header">
    <strong class="me-auto">Toast Header</strong>
    <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
  </div>
  <div class="toast-body">
    <p>Heute gibt es diese Neuigkeiten</p>
  </div>
</div>
<!-- Ende Bootstrap "Toast" Beispiel -->

Das JavaScript zur Steuerung der Komponente "Toast" in die Seiteneinstellungen in den Bereich "End of <body> code":

<!-- Script Toast Komponente -->
<script>
  document.getElementById("toastbtn").onclick = function() {
    var toastElList = [].slice.call(document.querySelectorAll('.toast'))
    var toastList = toastElList.map(function(toastEl) {
      return new bootstrap.Toast(toastEl)
    })
    toastList.forEach(toast => toast.show())
  }
</script>

Features

Hover Block und die einzelnen Karten und mittleren Button für Tooltip
Schmetterling
Hover this card to animate the button

Mobirise is an easy website builder. Just drop site elements to your page, add content and style it to look the way you like.

Schmetterling
Hover this card and button for Tooltip

This is also a test for Bootstrap Tooltips.
You need an extra JavaScript with Bootstrap 5 now:

Schmetterling
Hover this card to animate the button

Select the theme that suits you. Each theme in the Mobirise Website Software contains a set of unique blocks.

Bootstrap 5 Tooltips

Um einen Bootstrap 5 Tooltip hinzuzufügen müsst ihr lediglich das Tooltip-Attribut und den Titel hinzufügen:

<a href="#" class="btn element item-btn" data-bs-toggle="tooltip" title="This is a tooltip">Heartbeat animated</a>

Um die Default Farbe Schwarz vom Tooltip in "Bootstrap 5" z.B. in Rot zu ändern, habe ich folgende CSS verwendet, die aber nicht in der Block-CSS, sondern nur in der gesamten Seite wirkt. Ich habe diese also als <style> Anweisung </style> in die Seiteneinstellungen im Bereich "Inside <head> code" eingefügt. Diese CSS ist komplett anders als noch in Bootstrap 4:

<!-- Änderung Tooltip-Farbe von Default-Schwarz in Rot -->
<style>
  .tooltip-inner {
    background-color: red !important;
    color: #fff;
  }
  .tooltip.bs-tooltip-top .tooltip-arrow::before {
    border-top-color: red;
  }
  .tooltip.bs-tooltip-bottom .tooltip-arrow::before {
    border-bottom-color: red;
  }
  .tooltip.bs-tooltip-start .tooltip-arrow::before {
    border-left-color: red;
  }
  .tooltip.bs-tooltip-end .tooltip-arrow::before {
    border-right-color: red;
  }
</style>

Tooltip-Aufruf über JavaScript. Dieses Script kommt in die Seiteneinstellungen "End of <body> code":

<script>
  // Initialize tooltips
  var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
  var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
    return new bootstrap.Tooltip(tooltipTriggerEl)
  })
</script>

Bootstrap 5 Popover

Das Bootstrap 5 Popover ist eine Variante des Tooltips. Hier ein Beispiel.


Klicke hier um das Popover zu öffnen  


Hier als Beispiel meine Einfügung im Code-Editor mit data-bs-html="true" zur Verwendung von HTML-Code im Popover:

<a href="javascript:void(0);" title="Bootstrap Popover Beispiel" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-html="true" data-bs-content="Irgendeinen Inhalt hier schreiben.<br><a href='https://www.w3schools.com/bootstrap5/bootstrap_popover.php' target='_blank' class='text-secondary'><b>Klicke zur Popover Anleitung</b></a><br>Klicke irgendwo, um dieses Fenster zu schließen.">Klicke hier um das Popover zu öffnen:</a>

Popover-Aufruf über JavaScript. Dieses Script kommt in die Seiteneinstellungen "End of <body> code":

<script>
  // Initialize popover
  var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
  var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
    return new bootstrap.Popover(popoverTriggerEl)
  })
</script>

Das geht natürlich auch mit einem Bild:




Mausüber für Bild vom Schmetterling  




<a href="javascript: void(0);" data-bs-toggle="popover" data-bs-trigger="hover" data-bs-placement="top" data-bs-html="true" data-bs-content="<img src='https://www.mobirise-tutorials.com/Testseiten/Testseite-Blank/images/butterfly.jpg' alt='Bild'>">Bild vom Schmetterling</a>

Button animiert in Cards:

<a class="btn element item-btn" href="javascript: void();">Learn More</a>

CSS:

.element {
  background-color: #008CBA;
  color: white;
}
.item-wrapper {
  &:hover .element {
    animation: pulse 1s infinite;
    transform: scale(1.02);
  }
}
@keyframes pulse {
  0% {
    background-color: blue;
  }
  100% {
    background-color: red;
  }
}

Herzschlag - Heartbeat




Anzeige:

<div id="mybeat"></div>

CSS:

@keyframes heartbeat {
  0% {
    transform: scale(0.75);
  }
  20% {
    transform: scale(1);
  }
  40% {
    transform: scale(0.75);
  }
  60% {
    transform: scale(1);
  }
  80% {
    transform: scale(0.75);
  }
  100% {
    transform: scale(0.75);
  }
}

#mybeat {
  position: absolute;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  background-color: red;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid #232323;
  box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.6);
  animation: heartbeat 1s infinite;
}

Button animiert:

<a class="btn element" href="javascript: void();">Hover me to animate</a>

CSS:

.element {
  background-color: #008CBA;
  color: white;
}
.element:hover {
  animation: pulse 1s infinite;
}
@keyframes pulse {
  0% {
    background-color: blue;
  }
  100% {
    background-color: red;
  }
}

Bitte guckt euch auch die Beispiele bei "Werner-Zenk.de" an"

Timeline

23 April 2025

Butterfly

Website Builder

This is a timeline block. Click on the blue gear icon to set the number of items in this timeline. You don't have to code to create your own site. Select one of available themes in the Mobirise sitebuilder.

23 April 2025

Butterfly

Mobirise Kit

This is a timeline block. Click on the blue gear icon to set the number of items in this timeline. All sites you create with the Mobirise web builder are mobile-friendly natively. No special actions required.

23 April 2025

Butterfly

Form Builder

This is a timeline block. Click on the blue gear icon to set the number of items in this timeline. Select the theme that suits you. Each theme in the Mobirise site builder contains a set of unique blocks.

FAQ - Bug has been fixed

SchmetterlingLorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque nec purus ut massa hendrerit fringilla luctus mattis diam. Integer mollis sollicitudin tincidunt.


SchmetterlingLorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque nec purus ut massa hendrerit fringilla luctus mattis diam. Integer mollis sollicitudin tincidunt.


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque nec purus ut massa hendrerit fringilla luctus mattis diam. Integer mollis sollicitudin tincidunt.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque nec purus ut massa hendrerit fringilla luctus mattis diam. Integer mollis sollicitudin tincidunt.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque nec purus ut massa hendrerit fringilla luctus mattis diam. Integer mollis sollicitudin tincidunt.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque nec purus ut massa hendrerit fringilla luctus mattis diam. Integer mollis sollicitudin tincidunt.

Reveal Effect does not work since v5.4.1 in standard theme Mobirise 5
© Copyright Mobirise-Tutorrials