一.巨幕组件
巨幕组件主要是展示网站的关键性区域。
//在固定的范围内,有圆角
<div class="container">
<div class="jumbotron">
<h3>网站标题</h3>
<p>我是网站的详细简介!</p>
<p><a href="#" class="btn btn-default">快速进入</a></p>
</div>
</div>
//100%全屏,没有圆角
<div class="jumbotron">
<div class="container">
<h2>网站标题</h2>
<p>这是一个学习性的网站!</p>
<p><a href="#" class="btn btn-default">更多内容</a></p>
</div>
</div>
二.页头组件
<div class="page-header">
<h1>我是大标题 <small>我是小标题</small></h1>
</div>
三.缩略图组件
//缩略图配合响应式
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="thumbnail">
<img src="img/pic.png" alt="">
<div class="caption">
<h3>图片</h3>
<p>关于这张图片的详情!</p>
<p><a href="#" class="btn btn-default">快速进入</a></p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="thumbnail">
<img src="img/pic.png" alt="">
<div class="caption">
<h3>图片</h3>
<p>关于这张图片的详情!</p>
<p><a href="#" class="btn btn-default">快速进入</a></p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="thumbnail">
<img src="img/pic.png" alt="">
<div class="caption">
<h3>图片</h3>
<p>关于这张图片的详情!</p>
<p><a href="#" class="btn btn-default">快速进入</a></p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="thumbnail">
<img src="img/pic.png" alt="">
<div class="caption">
<h3>图片</h3>
<p>关于这张图片的详情!</p>
<p><a href="#" class="btn btn-default">快速进入</a></p>
</div>
</div>
</div>
</div>
</div>
四.警告框组件
警告框组件是一组预定义消息。
//基本警告框
<div class="alertalert-success">Bootstrap</div>
<div class="alertalert-info">Bootstrap</div>
<div class="alertalert-warning">Bootstrap</div>
<div class="alertalert-danger">Bootstrap</div>
//带关闭的警告框
<div class="alertalert-success">
Bootstrap
<button type="button"class="close"data-dismiss="alert">
<span>×</span>
</button>
</div>
//自动适配的超链接
<div class="alertalert-success">
Bootstrap,请到官网<a href="#"class="alert-link">下载</a>
</div>
//实例
<div class="alert alert-success" style="margin: 0 100px">
我是一个成功警告框!请下载 <a href="#" class="alert-link">最新版本</a>
<button class="close" data-dismiss="alert"><span>×</span></button>
</div>