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>