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

学习要点：

1.巨幕组件

2.页头组件

3.缩略图组件

4.警告框组件

主讲教师：李炎恢

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

一．巨幕组件

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

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

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

//100%全屏，没有圆角

  1. <div class="jumbotron">
  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="page-header">
  2.     <h1>大标题 <small>小标题</small></h1>
  3. </div>

三．缩略图组件

//缩略图配合响应式

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

//自定义内容

  1. <div class="container">
  2.     <div class="row">
  3.         <div class="col-xs-6 col-md-3 col-sm-4">
  4.             <div class="thumbnail">
  5.                 <img src="img/pic.png" alt="">
  6.                 <div class="caption">
  7.                     <h3>图文并茂</h3>
  8.                     <p> 这是一个图片结合文字的缩略图 </p>
  9.                     <p>
  10.                         <a href="#" class="btn btn-default">进入</a>
  11.                     </p>
  12.                 </div>
  13.             </div>
  14.         </div>
  15.         <div class="col-xs-6 col-md-3 col-sm-4">
  16.             <div class="thumbnail">
  17.                 <img src="img/pic.png" alt="">
  18.                 <div class="caption">
  19.                     <h3>图文并茂</h3>
  20.                     <p> 这是一个图片结合文字的缩略图 </p>
  21.                     <p>
  22.                         <a href="#" class="btn btn-default">进入</a>
  23.                     </p>
  25.                 </div>
  26.             </div>
  27.         </div>
  28.         <div class="col-xs-6 col-md-3 col-sm-4">
  29.             <div class="thumbnail">
  30.                 <img src="img/pic.png" alt="">
  31.                 <div class="caption">
  32.                     <h3>图文并茂</h3>
  33.                     <p> 这是一个图片结合文字的缩略图 </p>
  34.                     <p>
  35.                         <a href="#" class="btn btn-default">进入</a>
  36.                     </p>
  37.                 </div>
  38.             </div>
  39.         </div>
  40.         <div class="col-xs-6 col-md-3 col-sm-4">
  41.             <div class="thumbnail">
  42.                 <img src="img/pic.png" alt="">
  43.                 <div class="caption">
  44.                     <h3>图文并茂</h3>
  45.                     <p> 这是一个图片结合文字的缩略图 </p>
  46.                     <p>
  47.                         <a href="#" class="btn btn-default">进入</a>
  48.                     </p>
  49.                 </div>
  50.             </div>
  51.         </div>
  52.     </div>
  53. </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 <button type="button" class="close" data-dismiss="alert">
  2.         <span>&times;</span>
  3.     </button>
  4. </div>

//自动适配的超链接

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

原文: https://wizardforcel.gitbooks.io/liyanhui-tutorials/content/56.html