bootstrap应用1
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- 使得ie内核使用更高的渲染展示效果 -->
<meta name="viewport" content="width=device-width, initial-scale=1"><!-- 设置支持移动端的视窗 -->
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/self.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js does n't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://cdn.bootcss.com/respond.js/1.412/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class = 'container'>
<div class = "row"><!-- 12列布局 -->
<div class = "col-md-1">1</div>
<div class = "col-md-1">1</div>
<div class = "col-md-1">1</div>
<div class = "col-md-1">1</div>
<div class = "col-md-1">1</div>
<div class = "col-md-1">1</div>
<div class = "col-md-1">1</div>
<div class = "col-md-1">1</div>
<div class = "col-md-1">1</div>
<div class = "col-md-1">1</div>
<div class = "col-md-1">1</div>
<div class = "col-md-1">1</div>
</div>
<br/>
<div class="row"><!-- 两列布局 -->
<div class = "col-md-8">8</div>
<div class = "col-md-4">4</div>
</div>
<br/>
<div class="row"><!-- 两列布局 -->
<div class="col-md-6">6</div>
<div class="col-md-6">6</div>
</div>
<br/>
<div class="row"><!-- 三列布局 -->
<div class="col-md-4">4</div>
<div class="col-md-4">4</div>
<div class="col-md-4">4</div>
</div>
<br/>
<h1>我是标题1 h1</h1>
<h2>我是标题2 h2</h2>
<h3>我是标题3 h3</h3>
<h4>我是标题4 h4</h4>
<h5>我是标题5 h5</h5>
<h6>我是标题6 h6</h6>
<br/>
<h1>我是标题1 h1. <small>我是副标题1 h1</small></h1>
<h2>我是标题2 h2. <small>我是副标题2 h2</small></h2>
<h3>我是标题3 h3. <small>我是副标题3 h3</small></h3>
<h4>我是标题4 h4. <small>我是副标题4 h4</small></h4>
<h5>我是标题5 h5. <small>我是副标题5 h5</small></h5>
<h6>我是标题6 h6. <small>我是副标题6 h6</small></h6>
<br/>
<br/>
页面标题
<div class="page-header">
<h1>页面标题实例
<small>子标题</small>
</h1>
</div>
<p>这是一个示例文本。这是一个示例文本。这是一个示例文本。这是一个示例文本。这是一个示例文本。</p>
<br/><br/><br/>
<h2>引导主体副本</h2>
<p class="lead">这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。
<br/>
<small>本行内容是在标签内</small><br>
<strong>本行内容是在标签内</strong><br>
<em>本行内容是在标签内，并呈现为斜体</em><br>
<p class="text-left">向左对齐文本</p>
<p class="text-center">居中对齐文本</p>
<p class="text-right">向右对齐文本</p>
<p class="text-muted">本行内容是减弱的</p>
<p class="text-primary">本行内容带有一个 primary class</p>
<p class="text-success">本行内容带有一个 success class</p>
<p class="text-info">本行内容带有一个 info class</p>
<p class="text-warning">本行内容带有一个 warning class</p>
<p class="text-danger">本行内容带有一个 danger class</p>
<p class="text-muted">该段落使用了样式 "text-muted"。</p>
<a class="text-muted" href="http://www.w3cschool.cn">链接使用了样式 "text-muted"。</a><!-- 链接按下，颜色会加深 -->
<p class="text-primary">该段落使用了样式 "text-primary"。</p>
<a class="text-primary" href="//www.w3cschool.cn">链接使用了样式 "text-primary"链接按下，颜色会加深。</a>
<p class="text-success">该段落使用了样式 "text-success"。</p>
<a class="text-success" href="http://www.w3cschool.cn">链接使用了样式 "text-success"。</a>
<p class="text-info">该段落使用了样式 "text-info"。</p>
<a class="text-info" href="http://www.w3cschool.cn">链接使用了样式 "text-info"。</a>
<p class="text-warning">该段落使用了样式 "text-warning"。</p>
<a class="text-warning" href="http://www.w3cschool.cn">链接使用了样式 "text-warning"。</a>
<p class="text-danger">该段落使用了样式 "text-danger"。</p>
<a class="text-danger" href="http://www.w3cschool.cn">链接使用了样式 "text-danger"。</a>
<p class="bg-primary">该段落使用了类 "bg-primary"。</p>
<a class="bg-primary" href="/index">该链接使用了类 "bg-primary"。</a>
<p class="bg-success">该段落使用了类 "bg-success"。</p>
<a class="bg-success" href="/index">该链接使用了类 "bg-success"。</a>
<p class="bg-info">该段落使用了类 "bg-info"。</p>
<a class="bg-info" href="/index">该链接使用了类 "bg-info"。</a>
<p class="bg-warning">该段落使用了类 "bg-warning"。</p>
<a class="bg-warning" href="/index">该链接使用了类 "bg-warning"。</a>
<p class="bg-danger">该段落使用了类 "bg-danger"。</p>
<a class="bg-danger" href="/index">该链接使用了类 "bg-danger"。</a>
<br/>
<br/>
标签
<br/>
<h1>Example Heading <span class="label label-default">Label</span></h1>
<h2>Example Heading <span class="label label-default">Label</span></h2>
<h3>Example Heading <span class="label label-default">Label</span></h3>
<h4>Example Heading <span class="label label-default">Label</span></h4>
<br/>
<span class="label label-default">默认标签</span>
<span class="label label-primary">主要标签</span>
<span class="label label-success">成功标签</span>
<span class="label label-info">信息标签</span>
<span class="label label-warning">警告标签</span>
<span class="label label-danger">危险标签</span>
<br/>
<br/>
徽章（Badges）
<br/>
<a href="#">Mailbox <span class="badge">50</span></a>
<br/>
<h4>胶囊式导航中的激活状态</h4>
<ul class="nav nav-pills">
<li class="active"><a href="#">首页 <span class="badge">42</span></a></li>
<li><a href="#">简介</a></li>
<li><a href="#">消息 <span class="badge">3</span></a></li>
</ul>
<br>
<h4>列表导航中的激活状态</h4>
<ul class="nav nav-pills nav-stacked" style="max-width: 260px;">
<li class="active">
<a href="#">
<span class="badge pull-right">42</span>
首页
</a>
</li>
<li><a href="#">简介</a></li>
<li>
<a href="#">
<span class="badge pull-right">3</span>
消息
</a>
</li>
</ul>
<br/>
<br/>
<br/>
<br/>
<abbr title="World Wide Web">WWW</abbr><br>
<abbr title="Real Simple Syndication" class="initialism">RSS</abbr>
<!-- HTML元素提供了用于缩写的标记，比如 WWW 或 HTTP。Bootstrap 定义 <abbr> 元素的样式为显示在文本底部的一条虚线边框，当鼠标悬停在上面时会显示完整的文本（只要您为 <abbr> title 属性添加了文本）。为了得到一个更小字体的文本，请添加 .initialism 到 <abbr>。 -->
<br/>
<br/>
<!-- 地址信息 -->
<address>
<strong>Some Company, Inc.</strong><br>
007 street<br>
Some City, State XXXXX<br>
<abbr title="Phone">P:</abbr> (123) 456-7890
</address>
<address>
<strong>Full Name</strong><br>
<a href="mailto:#">mailto@somedomain.com</a></address>
<br/>
<br/>
<blockquote><p>这是一个默认的引用实例。这是一个默认的引用实例。这是一个默认的引用实例。这是一个默认的引用实例。这是一个默认的引用实例。这是一个默认的引用实例。这是一个默认的引用实例。这是一个默认的引用实例。</p></blockquote>
<blockquote>这是一个带有源标题的引用。<small>Someone famous in <cite title="Source Title">Source Title</cite></small></blockquote>
<blockquote class="pull-right">这是一个向右对齐的引用。<small>Someone famous in <cite title="Source Title">Source Title</cite></small></blockquote>
<br/>
<br/>
<!-- 列表 -->
<h4>有序列表</h4>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ol>
<h4>无序列表</h4>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<h4>未定义样式列表</h4>
<ul class="list-unstyled">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<h4>内联列表</h4>
<ul class="list-inline">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<h4>定义列表</h4>
<dl>
<dt>Description 1</dt>
<dd>Item 1</dd>
<dt>Description 2</dt>
<dd>Item 2</dd>
</dl>
<h4>水平的定义列表</h4>
<dl class="dl-horizontal">
<dt>Description 1</dt>
<dd>Item 1</dd>
<dt>Description 2</dt>
<dd>Item 2</dd>
</dl>
<br/>
<br/>
<code>内联元素：作为内联元素被包围使用code标签</code>
<br/>
<br/>
<pre>
<article>
如果需要把代码显示为一个独立的块元素，请使用pre>标签
</article>
</pre>
<br/>
<br/>
<table class="table"><!-- 基本的表格布局 -->
<caption>基本的表格布局</caption>
<thead>
<tr>
<th>名称</th>
<th>城市</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tanmay</td>
<td>Bangalore</td>
</tr>
<tr>
<td>Sachin</td>
<td>Mumbai</td>
</tr>
</tbody>
</table>
<br/>
<br/>
<table class="table table-striped"><!-- 条纹表格布局 -->
<caption>条纹表格布局</caption>
<thead>
<tr>
<th>名称</th>
<th>城市</th>
<th>密码</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tanmay</td>
<td>Bangalore</td>
<td>560001</td>
</tr>
<tr>
<td>Sachin</td>
<td>Mumbai</td>
<td>400003</td>
</tr>
<tr>
<td>Uma</td>
<td>Pune</td>
<td>411027</td>
</tr>
</tbody></table>
<br/>
<br/>
<table class="table table-bordered"><!-- 边框表格布局 -->
<caption>边框表格布局</caption>
<thead>
<tr>
<th>名称</th>
<th>城市</th>
<th>密码</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tanmay</td>
<td>Bangalore</td>
<td>560001</td>
</tr>
<tr>
<td>Sachin</td>
<td>Mumbai</td>
<td>400003</td>
</tr>
<tr>
<td>Uma</td>
<td>Pune</td>
<td>411027</td>
</tr>
</tbody>
</table>
<br/>
<br/>
<table class="table table-hover"><!-- 悬停表格布局 -->
<caption>悬停表格布局</caption>
<thead>
<tr>
<th>名称</th>
<th>城市</th>
<th>密码</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tanmay</td>
<td>Bangalore</td>
<td>560001</td>
</tr>
<tr>
<td>Sachin</td>
<td>Mumbai</td>
<td>400003</td>
</tr>
<tr>
<td>Uma</td>
<td>Pune</td>
<td>411027</td>
</tr>
</tbody></table>
<br/>
<br/>
<table class="table table-condensed"><!-- 精简表格布局 -->
<caption>精简表格布局</caption>
<thead>
<tr>
<th>名称</th>
<th>城市</th>
<th>密码</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tanmay</td>
<td>Bangalore</td>
<td>560001</td>
</tr>
<tr>
<td>Sachin</td>
<td>Mumbai</td>
<td>400003</td>
</tr>
<tr>
<td>Uma</td>
<td>Pune</td>
<td>411027</td>
</tr>
</tbody></table>
<br/>
<br/>
<table class="table"><!-- 上下文表格布局 -->
<caption>上下文表格布局</caption>
<thead>
<tr>
<th>产品</th>
<th>付款日期</th>
<th>状态</th>
</tr>
</thead>
<tbody>
<tr class="active">
<td>产品1</td>
<td>23/11/2013</td>
<td>待发货</td>
</tr>
<tr class="success">
<td>产品2</td>
<td>10/11/2013</td>
<td>发货中</td>
</tr>
<tr class="warning">
<td>产品3</td>
<td>20/10/2013</td>
<td>待确认</td>
</tr>
<tr class="danger">
<td>产品4</td>
<td>20/10/2013</td>
<td>已退货</td>
</tr>
</tbody></table>
<br/>
<br/>
<div class="table-responsive"><!-- 响应式表格布局 -->
<table class="table">
<caption>响应式表格布局</caption>
<thead>
<tr>
<th>产品</th>
<th>付款日期</th>
<th>状态</th>
</tr>
</thead>
<tbody>
<tr>
<td>产品1</td>
<td>23/11/2013</td>
<td>待发货</td>
</tr>
<tr>
<td>产品2</td>
<td>10/11/2013</td>
<td>发货中</td>
</tr>
<tr>
<td>产品3</td>
<td>20/10/2013</td>
<td>待确认</td>
</tr>
<tr>
<td>产品4</td>
<td>20/10/2013</td>
<td>已退货</td>
</tr>
</tbody>
</table></div>
<br/>
<br/>
<form role="form"><!-- 垂直或基本表单 -->
<div class="form-group">
<label for="name">名称</label>
<input type="text" class="form-control" id="name"
placeholder="请输入名称">
</div>
<div class="form-group">
<label for="inputfile">文件输入</label>
<input type="file" id="inputfile">
<p class="help-block">这里是块级帮助文本的实例。</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> 请打勾 </label>
</div>
<button type="submit" class="btn btn-default">提交</button></form>
<br/>
<br/>
<form class="form-inline" role="form"><!-- 内联表单 -->
<div class="form-group">
<label class="sr-only" for="name">名称</label>
<input type="text" class="form-control" id="name"
placeholder="请输入名称">
</div>
<div class="form-group">
<label class="sr-only" for="inputfile">文件输入</label>
<input type="file" id="inputfile">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> 请打勾 </label>
</div>
<button type="submit" class="btn btn-default">提交</button></form>
<br/>
<br/>
<form class="form-horizontal" role="form"><!-- 水平表单 -->
<div class="form-group">
<label for="firstname" class="col-sm-2 control-label">名字</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="firstname"
placeholder="请输入名字">
</div>
</div>
<div class="form-group">
<label for="lastname" class="col-sm-2 control-label">姓</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="lastname"
placeholder="请输入姓">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> 请记住我 </label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">登录</button>
</div>
</div></form>
<br/>
<br/>
<form role="form"><!-- 输入框 -->
<div class="form-group">
<label for="name">标签</label>
<input type="text" class="form-control" placeholder="文本输入">
</div>
</form>
<br/>
<br/>
<form role="form"><!-- 文本框 -->
<div class="form-group">
<label for="name">文本框</label>
<textarea class="form-control" rows="3"></textarea>
</div></form>
<br/>
<br/>
<div class="checkbox"><!-- 默认的复选框和单选按钮的实例 -->
<label><input type="checkbox" value="">选项 1</label></div><div class="checkbox">
<label><input type="checkbox" value="">选项 2</label></div><div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1"
value="option1" checked> 选项 1 </label></div><div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2"
value="option2">
选项 2 - 选择它将会取消选择选项 1 </label></div><label for="name">内联的复选框和单选按钮的实例</label><div>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox1" value="option1"> 选项 1
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox2" value="option2"> 选项 2
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox3" value="option3"> 选项 3
</label>
<label class="checkbox-inline">
<input type="radio" name="optionsRadiosinline" id="optionsRadios3"
value="option1" checked> 选项 1
</label>
<label class="checkbox-inline">
<input type="radio" name="optionsRadiosinline" id="optionsRadios4"
value="option2"> 选项 2
</label>
</div>
<br/>
<br/>
<form role="form"><!-- 选择框 -->
<div class="form-group">
<label for="name">选择列表</label>
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<label for="name">可多选的选择列表</label>
<select multiple class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div></form>
<br/>
<br/>
<form class="form-horizontal" role="form"><!-- 静态控件 -->
<div class="form-group">
<label class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<p class="form-control-static">email@example.com</p>
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-sm-2 control-label">密码</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword"
placeholder="请输入密码">
</div>
</div></form>
<br/>
<br/>
<form class="form-horizontal" role="form"><!-- 验证状态 -->
<div class="form-group">
<label class="col-sm-2 control-label">聚焦</label>
<div class="col-sm-10">
<input class="form-control" id="focusedInput" type="text"
value="该输入框获得焦点...">
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-sm-2 control-label">
禁用 </label>
<div class="col-sm-10">
<input class="form-control" id="disabledInput" type="text"
placeholder="该输入框禁止输入..." disabled>
</div>
</div>
<fieldset disabled>
<div class="form-group">
<label for="disabledTextInput" class="col-sm-2 control-label">
禁用输入（Fieldset disabled） </label>
<div class="col-sm-10">
<input type="text" id="disabledTextInput" class="form-control"
placeholder="禁止输入">
</div>
</div>
<div class="form-group">
<label for="disabledSelect" class="col-sm-2 control-label">
禁用选择菜单（Fieldset disabled） </label>
<div class="col-sm-10">
<select id="disabledSelect" class="form-control">
<option>禁止选择</option>
</select>
</div>
</div>
</fieldset>
<div class="form-group has-success">
<label class="col-sm-2 control-label" for="inputSuccess">
输入成功 </label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputSuccess">
</div>
</div>
<div class="form-group has-warning">
<label class="col-sm-2 control-label" for="inputWarning">
输入警告 </label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputWarning">
</div>
</div>
<div class="form-group has-error">
<label class="col-sm-2 control-label" for="inputError">
输入错误 </label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputError">
</div>
</div></form>
<br/>
<br/>
<form role="form"><!-- 表单控件大小 -->
<div class="form-group">
<input class="form-control input-lg" type="text"
placeholder=".input-lg">
</div>
<div class="form-group">
<input class="form-control" type="text" placeholder="默认输入">
</div>
<div class="form-group">
<input class="form-control input-sm" type="text"
placeholder=".input-sm">
</div>
<div class="form-group">
</div>
<div class="form-group">
<select class="form-control input-lg">
<option value="">.input-lg</option>
</select>
</div>
<div class="form-group">
<select class="form-control">
<option value="">默认选择</option>
</select>
</div>
<div class="form-group">
<select class="form-control input-sm">
<option value="">.input-sm</option>
</select>
</div>
<div class="row">
<div class="col-lg-2">
<input type="text" class="form-control" placeholder=".col-lg-2">
</div>
<div class="col-lg-3">
<input type="text" class="form-control" placeholder=".col-lg-3">
</div>
<div class="col-lg-4">
<input type="text" class="form-control" placeholder=".col-lg-4">
</div>
</div></form>
<br/>
<br/>
<form role="form"><!-- 表单帮助文本 -->
<span>帮助文本实例</span>
<input class="form-control" type="text" placeholder="">
<span class="help-block">一个较长的帮助文本块，超过一行，
需要扩展到下一行。本实例中的帮助文本总共有两行。</span></form>
<br/>
<br/>
<!-- 标准的按钮 -->
<button type="button" class="btn btn-default">默认按钮</button>
<!-- 提供额外的视觉效果，标识一组按钮中的原始动作 -->
<button type="button" class="btn btn-primary">原始按钮</button>
<!-- 表示一个成功的或积极的动作 -->
<button type="button" class="btn btn-success">成功按钮</button>
<!-- 信息警告消息的上下文按钮 -->
<button type="button" class="btn btn-info">信息按钮</button>
<!-- 表示应谨慎采取的动作 -->
<button type="button" class="btn btn-warning">警告按钮</button>
<!-- 表示一个危险的或潜在的负面动作 -->
<button type="button" class="btn btn-danger">危险按钮</button>
<!-- 并不强调是一个按钮，看起来像一个链接，但同时保持按钮的行为 -->
<button type="button" class="btn btn-link">链接按钮</button>
<br/>
<br/>
<button type="button" class="btn btn-primary btn-lg"><!-- 不同大小的按钮 -->
大的原始按钮 </button>
<button type="button" class="btn btn-default btn-lg">
大的按钮 </button></p><p>
<button type="button" class="btn btn-primary">
默认大小的原始按钮 </button>
<button type="button" class="btn btn-default">
默认大小的按钮 </button></p><p>
<button type="button" class="btn btn-primary btn-sm">
小的原始按钮 </button>
<button type="button" class="btn btn-default btn-sm">
小的按钮 </button></p><p>
<button type="button" class="btn btn-primary btn-xs">
特别小的原始按钮 </button>
<button type="button" class="btn btn-default btn-xs">
特别小的按钮 </button></p><p>
<button type="button" class="btn btn-primary btn-lg btn-block">
块级的原始按钮 </button>
<button type="button" class="btn btn-default btn-lg btn-block">
块级的按钮 </button>
<br/>
<br/>
<button type="button" class="btn btn-default btn-lg "><!-- 不同激活状态的按钮 -->
默认按钮 </button>
<button type="button" class="btn btn-default btn-lg active">
激活按钮 </button></p><p>
<button type="button" class="btn btn-primary btn-lg ">
原始按钮 </button>
<button type="button" class="btn btn-primary btn-lg active">
激活的原始按钮 </button>
<br/>
<br/>
<button type="button" class="btn btn-default btn-lg"><!-- 禁用按钮 -->
默认按钮 </button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">
禁用按钮 </button></p><p>
<button type="button" class="btn btn-primary btn-lg ">
原始按钮 </button>
<button type="button" class="btn btn-primary btn-lg" disabled="disabled">
禁用的原始按钮 </button></p><p>
<a href="#" class="btn btn-default btn-lg" role="button">
链接 </a>
<a href="#" class="btn btn-default btn-lg disabled" role="button">
禁用链接 </a></p><p>
<a href="#" class="btn btn-primary btn-lg" role="button">
原始链接 </a>
<a href="#" class="btn btn-primary btn-lg disabled" role="button">
禁用的原始链接 </a>
<br/>
<br/>
<a class="btn btn-default" href="#" role="button">链接</a><!-- 按钮标签 -->
<button class="btn btn-default" type="submit">按钮</button>
<input class="btn btn-default" type="button" value="输入">
<input class="btn btn-default" type="submit" value="提交">
<br/>
<br/>
<img src="hh.jpg" class="img-rounded">
<img src="hh.jpg" class="img-circle">
<img src="hh.jpg" class="img-thumbnail">
<img src="hh.jpg" class="img-responsive">
<br/>
<br/>
关闭图标实例
<button type="button" class="close" aria-hidden="true">
</button>
<br/>
<br/>
插入符实例 <span class="caret"></span>
<br/>
<br/>
快速浮动
<div class="pull-left">
向左快速浮动</div>
<div class="pull-right">
向右快速浮动</div>
<br/>
<br/>
内容居中
<div class="center-block" style="width:200px;background-color:#ccc;">
这是 center-block 实例 </div>
<br/>
<br/>
清除浮动
<div class="clearfix" style="background: #D8D8D8;border: 1px solid #000;padding: 10px;">
<div class="pull-left" style="background:#58D3F7;">
向左快速浮动 </div>
<div class="pull-right" style="background: #DA81F5;">
向右快速浮动 </div>
</div>
<br/>
<br/>
显示和隐藏内容
<div class="row" style="padding: 91px 100px 19px 50px;">
<div class="show" style="left-margin:10px;width:300px;background-color:#ccc;">
这是 show class 的实例 </div>
<div class="hidden" style="width:200px;background-color:#ccc;">
这是 hide class 的实例 </div></div>
<br/>
<br/>
屏幕阅读器
<div class="row" style="padding: 10px 80px 19px 50px;">
<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="email">Email 地址</label>
<input type="email" class="form-control" placeholder="Enter email">
</div>
<div class="form-group">
<label class="sr-only" for="pass">密码</label>
<input type="password" class="form-control" placeholder="Password">
</div>
</form></div>
<br/>
<br/>
<br/>
调整浏览器的窗口大小，或者在不同的设备上加载实例，测试响应式实用工具类。
<div class="container" style="padding: 20px;">
<div class="row visible-on">
<div class="col-xs-6 col-sm-3" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<span class="hidden-xs">特别小型</span>
<span class="visible-xs">✔ 在特别小型设备上可见</span>
</div>
<div class="col-xs-6 col-sm-3" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<span class="hidden-sm">小型</span>
<span class="visible-sm">✔ 在小型设备上可见</span>
</div>
<div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-sm-3" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<span class="hidden-md">中型</span>
<span class="visible-md">✔ 在中型设备上可见</span>
</div>
<div class="col-xs-6 col-sm-3" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<span class="hidden-lg">大型</span>
<span class="visible-lg">✔ 在大型设备上可见</span>
</div>
</div>
</div>
<br/>
<br/>
字体图标
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-sort-by-attributes"></span>
</button>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-sort-by-attributes-alt"></span>
</button>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-sort-by-order"></span>
</button>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-sort-by-order-alt"></span>
</button></p><button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-user"></span> User</button>
<button type="button" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-user"></span> User</button>
<button type="button" class="btn btn-default btn-xs">
<span class="glyphicon glyphicon-user"></span> User</button>
<br/>
<br/>
带有导航栏的字体图标 已注释，显示取消注释即可
<!-- <div class="navbar navbar-fixed-top navbar-inverse" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#"><span class="glyphicon glyphicon-home">Home</span></a></li>
<li><a href="#shop"><span class="glyphicon glyphicon-shopping-cart">Shop</span></a></li>
<li><a href="#support"><span class="glyphicon glyphicon-headphones">Support</span></a></li>
</ul>
</div><!-- /.nav-collapse -->
<br/>
<br/>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://cdn.bootcss.com/jquery/1.11.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
浙公网安备 33010602011771号