(十)巨幕页头和警告框

本节知识点

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

(一) 巨幕组件 jumbotron

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

有圆角没有占满全屏

<div class="container">
  <!--巨幕组件开始-->
    <div class="jumbotron">
         <h2>网站标题</h2>
         <p>学习网站</p>
         <p><a href="#" class="btn btn-primary">更多内容</a></p>
    </div>
   <!--巨幕组件结束-->
</div>

第二种无圆角，占满全屏

 <div class="jumbotron">

      <div class="container">
           <h2>标题</h2>
           <p>这是一个学习分享的平台</p>
          <a href="#" class="btn btn-primary" role="button">标题</a>
      </div>
 </div>

(二) 页头组件 pageheader

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

(三) 缩略图组件 单说图片thumbnail 和img-thumbnail差不多

<div class="container">
    
    <div class="row">
        <div class="col-xs-6 col-md-3 col-sm-4">
            <div class="thumbnail"><img src="images/lunbo1.jpg" alt=""></div>
        </div>
        <div class="col-xs-6 col-md-3 col-sm-4">
            <div class="thumbnail"><img src="images/lunbo2.jpg" alt=""></div>
        </div>
        <div class="col-xs-6 col-md-3 col-sm-4">
            <div class="thumbnail"><img src="images/lunbo3.jpg" alt=""></div>
        </div>
        <div class="col-xs-6 col-md-3 col-sm-4">
            <div class="thumbnail"><img src="images/lunbo4.jpg" alt=""></div>
        </div>    
    </div>

• thumbnail 配合caption变成了缩略图格式

 <div class="row">
        <div class="col-xs-6 col-md-3 col-sm-4">
            <div class="thumbnail">
                <img src="images/lunbo1.jpg" alt="">
                 <div class="caption">
                     <h3>图文并茂</h3>
                     <p>这个就是文字结合</p>
                     <p><a href="#" class="btn btn-primary">进入</a> </p>
                 </div>
            </div>
        </div>
        <div class="col-xs-6 col-md-3 col-sm-4">
            <div class="thumbnail">
                <img src="images/lunbo2.jpg" alt="">
                <div class="caption">
                    <h3>图文并茂</h3>
                    <p>这个就是文字结合</p>
                    <p><a href="#" class="btn btn-primary">进入</a> </p>
                </div>
            </div>
        </div>
        <div class="col-xs-6 col-md-3 col-sm-4">
            <div class="thumbnail">
                <img src="images/lunbo3.jpg" alt="">
                <div class="caption">
                    <h3>图文并茂</h3>
                    <p>这个就是文字结合</p>
                    <p><a href="#" class="btn btn-primary">进入</a> </p>
                </div>
            </div>
        </div>
        <div class="col-xs-6 col-md-3 col-sm-4">
            <div class="thumbnail">
                <img src="images/lunbo4.jpg" alt="">
                <div class="caption">
                    <h3>图文并茂</h3>
                    <p>这个就是文字结合</p>
                    <p><a href="#" class="btn btn-primary">进入</a> </p>
                </div>
            </div>
        </div>
    </div>

(四)警告框组件 alert alert-warning alert-danger alert-success alert-info

    <div class="alert alert-success">Bootstrap</div>
    <div class="alert alert-warning">Bootstrap</div>
    <div class="alert alert-danger">Bootstrap</div>
    <div class="alert alert-info">Bootstrap</div>

带关闭的警告框

    <div class="alert alert-success">Bootstrap
     <button class="close" data-dismiss="alert">
         <span>X</span>
     </button>
    </div>

自动适配的超链接

    <div class="alert alert-warning">
        Bootstrap
        <a href="" class="alert-link">下载</a>
    </div>