Bootstrap巨幕页头缩略图和警告框组件

巨幕组件

巨幕组件主要是展示网站的关键性区域

<!-- 固定范围内，有圆角 -->
<div class="container">
    <div class="jumbotron">
        <h2>网站标题</h2>
        <p>这是一个学习性网站</p>
        <p><a href="#" class="btn btn-default">更多内容</a></p>
    </div>
</div>
<!-- 100%全屏，没有圆角 -->
<div class="jumbotron">
    <div class="container">
        <h2>网站标题</h2>
        <p>这是一个学习性网站</p>
        <p><a href="#" class="btn btn-default">更多内容</a></p>
    </div>
</div>

页头组件

可以增加一些空间

<div class="page-header">
    <h1>大标题<small>小标题</small></h1>
</div>

缩略图组件

<!-- 缩略图配合响应式 -->
<div class="container">
    <div class="row">
        <div class="col-md-3 col-sm-4 col-xs-6">
            <div class="thumbnail">
                <img src="../img/2.jpg">
                <!-- 自定义内容 -->
                <div class="caption">
                    <h3>图文并茂</h3>
                    <p>这是一个图片文字的缩略图</p>
                    <p><a href="#" class="btn btn-default">进入</a></p>
                </div>
            </div>
        </div>
        <div class="col-md-3 col-sm-4 col-xs-6">
            <div class="thumbnail">
                <img src="../img/2.jpg">
                <!-- 自定义内容 -->
                <div class="caption">
                    <h3>图文并茂</h3>
                    <p>这是一个图片文字的缩略图</p>
                    <p><a href="#" class="btn btn-default">进入</a></p>
                </div>
            </div>
        </div>
        <div class="col-md-3 col-sm-4 col-xs-6">
            <div class="thumbnail">
                <img src="../img/2.jpg">
                <!-- 自定义内容 -->
                <div class="caption">
                    <h3>图文并茂</h3>
                    <p>这是一个图片文字的缩略图</p>
                    <p><a href="#" class="btn btn-default">进入</a></p>
                </div>
            </div>
        </div>
        <div class="col-md-3 col-sm-4 col-xs-6">
            <div class="thumbnail">
                <img src="../img/2.jpg">
                <!-- 自定义内容 -->
                <div class="caption">
                    <h3>图文并茂</h3>
                    <p>这是一个图片文字的缩略图</p>
                    <p><a href="#" class="btn btn-default">进入</a></p>
                </div>
            </div>
        </div>
    </div>
</div>

警告框组件

警告框组件式一组预定义消息

<!-- 警告框组件 -->
<div class="alert alert-success">Bootstrap</div>
<div class="alert alert-info">Bootstrap</div>
<div class="alert alert-warning">Bootstrap</div>
<div class="alert alert-danger">Bootstrap</div>
<!-- 带关闭的警告框 -->
<div class="alert alert-success">
    Bootstrap
    <button type="button" class="close" data-dismiss="alert">
        <span>&times;</span>
    </button>
</div>
<!-- 自动适配超链接 -->
<div class="alert alert-success">
    Bootstrap,请到官网 <a href="#" class="alert-link">下载</a>
</div>