Bootstrap 3 didascalie mancanti in Yii 2 applicazione

Question

Ho aggiunto un codice di esempio per la visualizzazione di richiamo Bootstrap 3 della mia applicazione Yii2-alimentato:

<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> 

E non possono vedere lo stile corretto.

Cosa mi manca. Bootstrap a bordo Yii2 è vecchio e non ha questi stili? O forse ho dimenticato di premere il pulsante magico da qualche parte?

Answer 1

I callout vengono utilizzati nei loro documenti, ma non sono inclusi nel CSS principale. Yii 2 viene fornito con la versione più recente di Bootstrap (al momento attuale 3.3.4), quindi non è questo il motivo.

Devi scrivere stili CSS appropriati da solo. Secondo this article è necessario aggiungere questo:

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

ovunque nei vostri stili CSS.

Quindi è possibile utilizzare didascalie del genere:

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