Bootstrap 3 Beschriftungen in Yü 2-Anwendung fehlen

Question

Ich habe hinzugefügt, um einen Beispiel-Code für die Anzeige von Bootstrap 3 des callout meiner Yii2 betriebenen Anwendung: siehe

<div class="bs-callout bs-callout-info"> 
    <h4>Use protocol</h4> 
    Avoid links without <code>http://www.</code> or <code>https://www.</code> in the beginning. 
</div> 

Und ich kann nicht die richtige Styling.

Was fehlt mir. Bootstrap an Bord Yii2 ist zu alt und hat diese Stile nicht? Oder vielleicht habe ich vergessen, irgendwo den magischen Knopf zu drücken?

Answer 1

Callouts werden in ihren Dokumenten verwendet, aber sie sind nicht im Haupt-CSS enthalten. Yii 2 wird mit der neuesten Version von Bootstrap ausgeliefert (momentan 3.3.4), das ist also nicht der Grund.

Sie müssen die richtigen CSS-Stile selbst schreiben. Nach this article müssen Sie diese hinzufügen:

.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; 
} 

überall in Ihrem CSS-Stile.

Dann können Sie Zusatzinformationen wie das verwenden:

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