第 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>
  24. </div>
  25. </div>
  26. </div>
  27. <div class="col-xs-6 col-md-3 col-sm-4">
  28. <div class="thumbnail">
  29. <img src="img/pic.png" alt="">
  30. <div class="caption">
  31. <h3>图文并茂</h3>
  32. <p> 这是一个图片结合文字的缩略图 </p>
  33. <p>
  34. <a href="#" class="btn btn-default">进入</a>
  35. </p>
  36. </div>
  37. </div>
  38. </div>
  39. <div class="col-xs-6 col-md-3 col-sm-4">
  40. <div class="thumbnail">
  41. <img src="img/pic.png" alt="">
  42. <div class="caption">
  43. <h3>图文并茂</h3>
  44. <p> 这是一个图片结合文字的缩略图 </p>
  45. <p>
  46. <a href="#" class="btn btn-default">进入</a>
  47. </p>
  48. </div>
  49. </div>
  50. </div>
  51. </div>
  52. </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