初学 Bootstrap 警告框和媒体对象

一。警告框#

基本款#

给 <div> 添加 .alert 类样式，追加 .alert-success .alert-info .alert-warning .alert-danger 其中一个，就可以得到不同颜色的警告框.

<div class="alert alert-success">注册成功</div>
<div class="alert alert-info">操作成功</div>
<div class="alert alert-warning">发送失败</div>
<div class="alert alert-danger">密码错误</div>

file

可关闭的警告框#

<div class="alert alert-success">注册成功
    <button type="button" class="close" data-dismiss="alert">×</button>
</div>

file

警告框中的链接#

在警告框中的链接，可以给其添加 .alert-link 类样式，使链接更美观.

<div class="alert alert-success">注册成功,返回
    <a href="https://laravel-china.org/" class="alert-link">laravel-china.org</a>
</div>
<div class="alert alert-info">注册成功,返回
    <a href="https://laravel-china.org/" class="alert-link">laravel-china.org</a>
</div>

file

二。媒体对象#

图文混排的时候，使用这个比较方便.

<div class="media">
    <div class="media-left">
        <a href="#"><img src="./Image/beach.jpg" class="media-object" style="width: 64px;height: auto"></a>
    </div>
    <div class="media-body">
        <h4 class="media-heading">评论标题</h4><p>评论内容,评论内容,评论内容</p>
    </div>
</div>

file
如果是做评论列表，可以借助 <ul> , 添加上 .media-list 类样式，并给 <li> 添加上 .media 类样式，将 <li> 当成外层容器.

<ul class="media-list">
    <li class="media">
        <div class="media-left">
            <a href="#"><img src="./Image/beach.jpg" class="media-object" style="width: 64px;height: auto"></a>
        </div>
        <div class="media-body">
            <h4 class="media-heading">评论标题</h4>
            <p>评论内容,评论内容,评论内容</p>
        </div>
    </li>
    <li class="media">...</li>
</ul>

file
嵌套使用，如下

<ul class="media-list">
    <li class="media">
        <div class="media-left">
            <a href="#"><img src="./Image/beach.jpg" class="media-object" style="width: 64px;height: auto"></a>
        </div>
        <div class="media-body">
            <h4 class="media-heading">评论标题</h4>
            <p>评论内容,评论内容,评论内容</p>
            <div class="media">...
                <div class="media">...</div>
            </div>
        </div>
    </li>
</ul>