一.警告框

基本款

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

可关闭的警告框

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

警告框中的链接

在警告框中的链接,可以给其添加 .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>

二.媒体对象

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

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

如果是做评论列表,可以借助 <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>

嵌套使用,如下

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

本作品采用《CC 协议》，转载必须注明作者和本文链接