2015-04-23 12 views
8

Dodałem kod przykładowy wyświetlania Bootstrap 3 za objaśnienie do mojego Yii2-zasilanego aplikacji:Bootstrap 3 objaśnienia brakujących w Yii 2 Zastosowanie

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

I nie widzę właściwą stylistykę.

Czego mi brakuje. Bootstrap na pokładzie Yii2 jest stary i nie ma tych stylów? A może zapomniałem gdzieś nacisnąć magiczny przycisk?

Odpowiedz

14

Objaśnienia są używane w ich dokumentach, ale nie są zawarte w głównym pliku CSS. Yii 2 jest dostarczany z najnowszą wersją Bootstrapa (w chwili obecnej 3.3.4), więc to nie jest powód.

Musisz samodzielnie napisać odpowiednie style CSS. Zgodnie z this article musisz dodać:

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

w dowolnym miejscu w stylach CSS.

Następnie można użyć objaśnienia tak:

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

Zastanawiam się, dlaczego nie obejmują tego. Uważam, że jest to niezwykle przydatne w użyciu. Mają oczywiście "Alarmy". Ale wolę objaśnienie. https://getbootstrap.com/docs/4.0/components/alerts/ – botenvouwer