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

学习笔记

一．巨幕组件

1.留有边距的巨幕。也就是固定大小的巨幕

在固定的范围内，有圆角
<div class="container">
<div class="jumbotron">
<h2>网站标题<h2>
<p>这是一个学习型网站</p>
<p><a href="#" class="btn btn-default">更多内容</a></p>
</div>
</div>

2.100%全屏的巨幕，没有留外边距，没有圆角。1.2两种巨幕只是交换了container和jumbotron的位置
<div class=" jumbotron">
<div class="container">
<h2>网站标题<h2>
<p>重中之重</p>
<p><a href="#" class="btn btn-default">更多内容</a></p>
</div>
</div>

1.2效果如下：

二．页头组件

//增加一些空间
<div class="page-header">
<h1>大标题<small>小标题</small></h1>
</div>

三．缩略图组件

//缩略图配合响应式

<div class="container">
<div class="row">
<div class="col-xs-6 col-md-3 col-sm-4">
<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 class="alert alert-success">Bootstrap</div>
<div class="alert alert-info">Bootstrap</div>
<div class="alert alert-warning">Bootstrap</div>
<div class="alert alert-danger">Bootstrap</div>

带关闭的警告框

<div class="alert alert-success">
Bootstrap
<button type="button" class="close" data-dismiss="alert">
<span>&times;</span>
</button>
</div>

data-dismiss="alert"加了这个就自动集成了关闭的JS.&times;关闭的×

自动适配的超链接

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

实例：

<!-- 巨幕-->
<div class="jumbotron">
   <div class="container">
      <hgroup>
         <h1>资讯</h1>
         <h4>企业内训的最新动态、资源等...</h4>
      </hgroup>
   </div>
</div>