Bootstrap的组件使用(四)

感谢Jie’ blog http://ilog.vip/ ,谢谢他让我有了继续写下去的信念。愿一起坚持，在路上…
上一章简单介绍了Boostrap的组件使用(三),如果没有看过，请观看上一章

一.警告框

需要设置class为alert,role=“alert”

<div class="alert alert-success" role="alert">成功</div>

可以设置背景色，有alert-success,alert-info,alert-warning,alert-danger
添加可关闭按钮X 号.

<div class="alert alert-warning" role="alert">
			<button type="button" class="close"
				aria-label="Close">
				<span aria-hidden="true">&times;</span>
			</button>
			<strong>Warning!</strong> Better check yourself, you're not looking
			too good.
		</div>

点击X号时，让这个警告框消失

<div class="alert alert-warning alert-dismissible" role="alert">
			<!-- 设置data-dismiss=alert -->
			<button type="button" class="close" data-dismiss="alert"
				aria-label="Close">
				<span aria-hidden="true">&times;</span>
			</button>
			<strong>Warning!</strong> Better check yourself, you're not looking
			too good.
		</div>

在警告框中添加链接

<div class="alert alert-success" role="alert">
  			你成功了吗?<a href="#" class="alert-link">成功了</a>
		</div>

二.进度条

默认样式

<!-- 设置class为progress,进度条 -->
		<div class="progress">
			<div class="progress-bar" role="progressbar"
			aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:60%">
			</div>
		</div>

aria-valuenow表示现在的值,aria-valuemin表示最小值，aria-valuemax表示最大值。 style中width:60%,设置宽度;

设置提供标签数值

//在里面添加一个span ,里面设置数值
<span>60%</span>

在数值过小的时候，也可以设置值

<div class="progress">
			<div class="progress-bar" role="progressbar"
			aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="width:2%;min-width:2em;">
				<span>2%</span>
			</div>
		</div>

添加背景颜色，在div中progress-bar 里面添加progress-bar-success,progress-bar-info,progress-bar-warning,progress-bar-danger 等样式，可以准确的表示，数值越大，越不同的，着重提醒。

<!-- 设置class为progress,进度条 -->
		<div class="progress">
			<div class="progress-bar progress-bar-success" role="progressbar"
				aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"
				style="width: 40%">
				<span >40% Complete (success)</span>
			</div>
		</div>
		<div class="progress">
			<div class="progress-bar progress-bar-info" role="progressbar"
				aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"
				style="width: 20%">
				<span>20% Complete</span>
			</div>
		</div>
		<div class="progress">
			<div class="progress-bar progress-bar-warning" role="progressbar"
				aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
				style="width: 60%">
				<span>60% Complete (warning)</span>
			</div>
		</div>
		<div class="progress">
			<div class="progress-bar progress-bar-danger" role="progressbar"
				aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"
				style="width: 80%">
				<span>80% Complete (danger)</span>
			</div>
		</div>

增加条纹效果，可以在progress-bar中添加，progress-bar-striped.

<div class="progress">
  <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>

让条纹动态显示，可以添加.active

<div class="progress">
  <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
    <span class="sr-only">45% Complete</span>
  </div>
</div>

可以将多个进度条放在同一个.progress里面，表示不同的范围.

<div class="progress">
  <div class="progress-bar progress-bar-success" style="width: 35%">
    <span class="sr-only">35% Complete (success)</span>
  </div>
  <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
    <span class="sr-only">20% Complete (warning)</span>
  </div>
  <div class="progress-bar progress-bar-danger" style="width: 10%">
    <span class="sr-only">10% Complete (danger)</span>
  </div>
</div>

在这里插入图片描述

三.列表组

在ul中，添加list-group

<ul class="list-group">
			<li class="list-group-item">Cras justo odio</li>
			<li class="list-group-item">Dapibus ac facilisis in</li>
			<li class="list-group-item">Morbi leo risus</li>
			<li class="list-group-item">Porta ac consectetur ac</li>
			<li class="list-group-item">Vestibulum at eros</li>
		</ul>

在列表组中，添加徽章，将文字转换成徽章。

 <li class="list-group-item">
    <span class="badge">14</span>
    Cras justo odio
  </li>

在列表组中添加链接
如果里面放置的是链接，那么需要用a标签来替换li

<div class="list-group">
			<a href="#" class="list-group-item active"> Cras justo odio </a> 
			<a href="#" class="list-group-item">Dapibus ac facilisis in</a> 
				<a href="#" class="list-group-item">Morbi leo risus</a> 
				<a href="#" class="list-group-item">Porta ac consectetur ac</a> 
				<a href="#" class="list-group-item">Vestibulum at eros</a>
		</div>

里面可以放置按钮

 <button type="button" class="list-group-item">Cras justo odio</button>

表示禁用，则在class=“list-group-item” 中添加 .disabled.
添加情景类，即添加背景色。在class=“list-group-item” 中添加 list-group-item-info, list-group-item-success,list-group-item-warning,list-group-item-danger.
里面可以放置多种内容，可以自己定制。

<div class="list-group">
  <a href="#" class="list-group-item active">
  <!--添加自定义内容-->
    <h4 class="list-group-item-heading">List group item heading</h4>
    <p class="list-group-item-text">...</p>
  </a>
</div>

四.面板

面板，为.panel

<div class="panel panel-default">
			<!-- 只有panel-body 主体内容 -->
			<div class="panel-body">Basic panel example</div>
		</div>

添加标题用.panel-heading

<div class="panel panel-default">
			<div class="panel-heading">Panel heading without title</div>
			<div class="panel-body">Panel content</div>
		</div>

带有脚注的面板用.panel-footer

<div class="panel panel-default">
			<div class="panel-heading">Panel heading without title</div>
			<div class="panel-body">Panel content</div>
			 <div class="panel-footer">Panel footer</div>
		</div>

设置背景色用在.panel 中添加.panel-primary,.panel-success,.panel-info,.panel-warning, .panel-danger.
里面放置表格

<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>
  <!--要有panel-body,如果没有，则会与表格联系在一起了，没有空隙-->
  <div class="panel-body">
    <p>...</p>
  </div>

  <!-- 具体的表格 -->
  <table class="table">
    ...
  </table>
</div>

里面放置列表组

<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>...</p>
  </div>

  <!-- List group -->
  <ul class="list-group">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

五 well

想达到一种inset 嵌入的效果，用.well

<div class="well">两个蝴蝶飞</div>

可以选择相应的尺寸，如well-lg,well-sm,默认是well-md 不显示。

谢谢!!!