Skip to main content

Bootstrap 3.2 Callouts erstellen und in WordPress nutzen

Heute findet man auf sehr vielen Seiten diese Callouts mittels Bootstrap. Dabei handelt es sich um „Felder, deren Rand gefärbt“ ist. Hier zeige ich euch, wie ihr sehr einfach solche Callouts auf eurer Webseite einfügen könnt. Hier sind einige Beispiele:

Default Callout

This is a default callout.

Primary Callout

This is a primary callout.

Success Callout

This is a success callout.

Info Callout

This is an info callout.

Warning Callout

This is a warning callout.

Danger Callout

This is a danger callout.

 

Um die Callouts eurem WordPress Theme hinzuzufügen geht ihr unter Designs-> Editor. Dort fügt ihr folgende CSS Daten in die Datei „style.css“ ein:

.bs-callout {
    padding: 20px;
    margin: 20px 0;
    border: 1px solid #eee;
    border-left-width: 5px;
    border-radius: 3px;
}
.bs-callout h4 {
    margin-top: 0;
    margin-bottom: 5px;
}
.bs-callout p:last-child {
    margin-bottom: 0;
}
.bs-callout code {
    border-radius: 3px;
}
.bs-callout+.bs-callout {
    margin-top: -5px;
}
.bs-callout-default {
    border-left-color: #777;
}
.bs-callout-default h4 {
    color: #777;
}
.bs-callout-primary {
    border-left-color: #428bca;
}
.bs-callout-primary h4 {
    color: #428bca;
}
.bs-callout-success {
    border-left-color: #5cb85c;
}
.bs-callout-success h4 {
    color: #5cb85c;
}
.bs-callout-danger {
    border-left-color: #d9534f;
}
.bs-callout-danger h4 {
    color: #d9534f;
}
.bs-callout-warning {
    border-left-color: #f0ad4e;
}
.bs-callout-warning h4 {
    color: #f0ad4e;
}
.bs-callout-info {
    border-left-color: #5bc0de;
}
.bs-callout-info h4 {
    color: #5bc0de;
}

Danach könnt ihr auf eurer Webseite im Textmodus mittels folgendem Code die Callouts erstellen:

<div class="bs-callout bs-callout-default">
  <h4>Default Callout</h4>
  This is a default callout.
</div>

<div class="bs-callout bs-callout-primary">
  <h4>Primary Callout</h4>
  This is a primary callout.
</div>

<div class="bs-callout bs-callout-success">
  <h4>Success Callout</h4>
  This is a success callout.
</div>

<div class="bs-callout bs-callout-info">
  <h4>Info Callout</h4>
  This is an info callout.
</div>

<div class="bs-callout bs-callout-warning">
  <h4>Warning Callout</h4>
  This is a warning callout.
</div>

<div class="bs-callout bs-callout-danger">
  <h4>Danger Callout</h4>
  This is a danger callout.
</div>

Quelle:

Teile diesen Beitrag

Christian

Ich studiere derzeit Informatik und betreibe in meiner Freizeit diesen Blog.
Auf die Idee kam ich, als ich Anleitungen zum Thema Debian gesucht habe. Leider waren viele Anleitungen veraltet und daher nutzlos.

Da kam ich auf die Idee selbst Anleitungen zu schreiben.
Wenn meine Anleitungen auch veraltet sein sollten, dann schreibt mir das bitte und ich versuche sie zu aktualisieren.
Christian

Christian

Ich studiere derzeit Informatik und betreibe in meiner Freizeit diesen Blog. Auf die Idee kam ich, als ich Anleitungen zum Thema Debian gesucht habe. Leider waren viele Anleitungen veraltet und daher nutzlos. Da kam ich auf die Idee selbst Anleitungen zu schreiben. Wenn meine Anleitungen auch veraltet sein sollten, dann schreibt mir das bitte und ich versuche sie zu aktualisieren.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.