第 10 章 巨幕页头缩略图和警告框组件

    1.巨幕组件

    2.页头组件

    3.缩略图组件

    4.警告框组件

    主讲教师：李炎恢

    本节课我们主要学习一下 Bootstrap 的四个组件功能：巨幕组件、页头组件、缩略图组件和警告框组件。

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

    //在固定的范围内，有圆角

    //100%全屏，没有圆角

    2.     <div class="container">
    3.         <h2>网站标题</h2>
    4.         <p> 这是一个学习性的网站！ </p>
    5.         <p>
    6.             <a href="#" class="btn btn-default">更多内容</a>
    7.         </p>
    8.     </div>
    9. </div>

    二．页头组件

    //增加一些空间

    三．缩略图组件

    1. <div class="container">
    2.     <div class="row">
    3.         <div class="col-xs-6 col-md-3 col-sm-4">
    5.             </div>
    6.         </div>
    7.         <div class="col-xs-6 col-md-3 col-sm-4">
    8.             <div class="thumbnail">
    9.                 <img src="img/pic.png" alt="">
    10.             </div>
    11.         </div>
    12.         <div class="col-xs-6 col-md-3 col-sm-4">
    13.             <div class="thumbnail">
    14.                 <img src="img/pic.png" alt="">
    15.             </div>
    17.             <div class="thumbnail">
    18.                 <img src="img/pic.png" alt="">
    19.             </div>
    20.         </div>
    21.     </div>
    22. </div>

    //自定义内容

    四．警告框组件

    警告框组件是一组预定义消息。

    //基本警告框

    1. <div class="alert alert-success">Bootstrap</div>
    2. <div class="alert alert-info">Bootstrap</div>
    3. <div class="alert alert-warning">Bootstrap</div>
    4. <div class="alert alert-danger">Bootstrap</div>

    //带关闭的警告框

    //自动适配的超链接

    1. <div class="alert alert-success"> Bootstrap，请到官网 <a href="#" class="alert-link">下载</a>