使用Bootstrap 3开发响应式网站实践03,轮播下方的内容排版

通常把一些重要信息、需要重点标注的信息放在轮播的下方显示，这部分区域用到了大字体的标题、副标题以及段落文字等。

        <div class="row" id="bigCallout">
            <div class="col-md-12">
                <div class="well">
                    <div class="page-header">
                        <h1>梅西升腾小宇宙<small>仍是2014年的王</small></h1>
                    </div>
                    
                    <p class="lead">
                        梅西第一次打进赛季首球是2008-09赛季，当时瓜迪奥拉刚接手巴萨，首轮客场0比1小负努曼西亚，此轮在诺坎普1比1战平桑坦德竞技队的比赛中，梅西为巴萨打进唯一的进球。
                    </p>
                    
                    <a href="" class="btn btn-large btn-PRimary">了解更多西甲资讯</a>
                    <a href="" class="btn btn-large btn-link">了解梅西动态</a>
                </div>
            </div>
        </div><!--标注区域结束-->

○ 通过<div class="row" ...>新起了一行○ 需要被重点标注的区域被包裹在<div class="col-md-12">的Grid内○ <div class="well">通常是一个带圆角的区域○ page-header属性值：这里被应用到div上，表示这部分div是页面的标题，通常有大的字体和间距○ small标签：文本会缩小到原来大小的85%○ lead属性值：这里被应用到p上，表示强调某个段落，段落文本会稍稍变大、变细、行高也变高。

如果缩小页面尺寸到手机屏幕般大小，我们希望在<div class="col-md-12">内再出现一个较小的<div class="well">，该如何做呢？--在<div class="col-md-12">和<div class="well">增加一个<div class="well well-small visible-xs">，完整代码如下：

        <div class="row" id="bigCallout">
            <div class="col-md-12">
                <div class="well well-small visible-xs">
                    <a href="" class="btn btn-large btn-block btn-default"><span class="glyphicon glyphicon-phone"></span>联系我们</a>
                </div>
                <div class="well">
                    <div class="page-header">
                        <h1>梅西升腾小宇宙<small>仍是2014年的王</small></h1>
                    </div>        
                               
                    <p class="lead">
                        梅西第一次打进赛季首球是2008-09赛季，当时瓜迪奥拉刚接手巴萨，首轮客场0比1小负努曼西亚，此轮在诺坎普1比1战平桑坦德竞技队的比赛中，梅西为巴萨打进唯一的进球。
                    </p>
                    
                    <a href="" class="btn btn-large btn-primary">了解更多西甲资讯</a>
                    <a href="" class="btn btn-large btn-link">了解梅西动态</a>