代码拉取完成，页面将自动刷新
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 确保适当的绘制和触屏缩放 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 国产双核浏览器默认使用高速渲染模式 -->
<meta name="renderer" content="webkit">
<title>Bootstrap 101 Template</title>
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
<style type='text/css'>
body {
background-color: #CCC;
margin-left:auto;
margin-right:auto;
}
</style>
</head>
<body>
<div class="container"> <!-- 实现内容居中对齐 -->
<!-- 警示框
alert-dismissable和关闭按钮 可关闭的警示框
-->
<div class="alert alert-success alert-dismissable">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
<strong>警告!</strong>Well done! You <a href="#" class="alert-link">请点击这里</a>
</div>
<!--
<div class="alert alert-info">Well done! You successfully read this important alert message.</div>
<div class="alert alert-warning">Well done! You successfully read this important alert message.</div>
<div class="alert alert-danger">Well done! You successfully read this important alert message.</div>
-->
<!-- 页面标题
-->
<div class="page-header">
<h1>Example page header <small>Subtext for header</small></h1>
</div>
<!-- 导航
navbar-inverse 类可以改变导航条的外观,黑色
-->
<nav class="navbar navbar-default navbar-inverse" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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="#">Brand</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div>
</nav>
<hr>
<!-- 轮播
-->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!--
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
-->
<div class="carousel-inner" style="text-align:center">
<div class="item active">
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<p><a class="btn btn-primary btn-lg" role="button">Learn more</a></p>
</div>
</div>
<div class="item">
<img alt="Second slide" src="img/a2.gif" ></img>
</div>
<div class="item">
<img alt="Third slide" src="img/a2.gif" ></img>
</div>
</div>
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
<hr>
<!-- 大屏幕介绍
-->
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<p><a class="btn btn-primary btn-lg" role="button">Learn more</a></p>
</div>
<hr>
<!-- 面板
panel-default
panel-primary
panel-success
panel-info
panel-warning
-->
<div class="panel panel-primary">
<div class="panel-heading">
Panel heading without title
</div>
<div class="panel-body">
Panel content
</div>
<div class="panel-footer">
Panel footer
</div>
</div>
<!-- 列表组
-->
<div class="list-group">
<a href="#" class="list-group-item active">
<h5 class="list-group-item-heading">List group item heading</h5>
<p class="list-group-item-text">Cras sit amet nibh libero, in gravida nulla. n vulputate at,</p>
</a>
<a href="#" class="list-group-item">Dapibus ac facilisis in</a>
</div>
<ul class="list-group">
<li class="list-group-item"><span class="badge">14</span>Cras justo odio</li>
<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>
</ul>
<!-- 缩略图
-->
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="img/a1.gif" alt="...">
<div class="caption">
<h3>Thumbnail label</h3>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. </p>
<p><a href="#" class="btn btn-primary" role="button">Button</a></p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<a href="#" class="thumbnail">
<img src="img/a1.gif" alt="...">
</a>
</div>
<div class="col-sm-6 col-md-4">
<a href="#" class="thumbnail">
<img src="img/a1.gif" alt="...">
</a>
</div>
</div>
<hr>
<!-- 进度条
-->
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
<span class="sr-only">60% Complete</span>
</div>
</div>
<hr>
<!-- 翻页 分页
更改尺寸 .pagination-lg或.pagination-sm
-->
<ul class="pager">
<li><a href="#">Previous</a></li>
<li><a href="#">Next</a></li>
</ul>
<ul class="pagination pagination-lg">
<li><a href="#">«</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">»</a></li>
</ul>
<hr>
<!-- 标签页
.nav-tabs类需要.nav基类
nav-pills 胶囊式标签页
nav-stacked 可以竖直堆叠
nav-justified 可以很容易的让标签页或胶囊式标签呈现出同等宽度。在小屏幕上，导航链接呈现堆叠样式
-->
<ul class="nav nav-pills">
<li class="dropdown active">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li>
</ul>
</li>
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li>
</ul>
<hr>
<!-- 面包屑导航 -->
<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Library</a></li>
<li class="active">Data</li>
</ol>
<hr>
<!-- 标签 -->
<h3>Example heading <span class="label label-default">New</span></h3>
<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>
<hr>
<!--
<small>Secondary text</small><br>
<strong>rendered as bold text</strong><br>
<em>rendered as italicized text</em><br>
-->
<!-- 文本对齐
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
-->
<!-- 强调Class
<p class="text-muted">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
<p class="text-primary">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
<p class="text-success">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
<p class="text-info">Maecenas sed diam eget risus varius blandit sit amet non magna..</p>
<p class="text-warning">Maecenas sed diam eget risus varius blandit sit amet non magna..</p>
<p class="text-danger">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
-->
<!--
<h3>缩略图</h3>
<abbr title="attribute">attr</abbr>
<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>
-->
<!--
class form-inline 将其排布的更紧凑
form-horizontal 并使用Bootstrap预置的栅格class可以将label和控件组水平并排布局
-->
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="exampleInputEmail1" class="col-sm-1 control-label">Email</label>
<div class="col-sm-4">
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>
</div>
<div class="form-group">
<label for="exampleInputPassword1" class="col-sm-1 control-label">Password</label>
<div class="col-sm-4">
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
</div>
<!-- 上传用的
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
-->
<div class="form-group">
<div class="col-sm-offset-1 col-sm-11">
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-1 col-sm-11">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
</form>
<h3>textarea</h3>
<textarea class="form-control" rows="3"></textarea><br>
<!-- 按钮
btn-default
btn-primary
btn-success
btn-info
btn-warning
btn-danger
btn-link
btn-lg、.btn-sm、.btn-xs 可以获得不同尺寸的按钮
btn-block 可以使其充满父节点100%的宽度，而且按钮也变为了块级（block）元素
-->
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">链接</button>
<hr>
<p>
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-default btn-lg">Large button</button>
</p>
<p>
<button type="button" class="btn btn-primary">Default button</button>
<button type="button" class="btn btn-default">Default button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-default btn-sm">Small button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-xs">Extra small button</button>
<button type="button" class="btn btn-default btn-xs">Extra small button</button>
</p>
<hr>
<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>
<hr>
<!-- 图片
-->
<img src="http://placehold.it/150x150" alt="..." class="img-rounded">
<img src="http://placehold.it/150x150" alt="..." class="img-circle">
<img src="http://placehold.it/150x150" alt="..." class="img-thumbnail">
<img src="http://placehold.it/150x150" class="img-responsive" alt="Responsive image">
<!-- 分栏 栅格系统 -->
<div class="row">
<div class="col-xs-4"> <!-- 占4个网格 -->
<h2 class="page-header">区域一</h2>
<p>Bootstrap has a few easy ways to quickly get started, each one appealing to a different skill level and use case. Read through to see what suits your particular needs.</p>
</div>
<div class="col-xs-4">
<h2 class="page-header">区域二</h2>
<p>If you work with Bootstrap's uncompiled source code, you need to compile the LESS files to produce usable CSS files. For compiling LESS files into CSS, we only officially support Recess, which is Twitter's CSS hinter based on less.js.</p>
</div>
<div class="col-xs-4">
<h2 class="page-header">区域三</h2>
<p>Within the download you'll find the following directories and files, logically grouping common resources and providing both compiled and minified variations.</p>
</div>
</div>
<!-- list-inline list-unstyled -->
<h3>内联列表</h3>
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
</ul>
<!--
table-bordered 为表格和其中的每个单元格增加边框
table-striped 增加斑马条纹样式
table-hover 每一行响应鼠标悬停状态
table-condensed 可以让表格更加紧凑，单元格中的内部（padding）均会减半
active
success
warning
danger
table-responsive 中即可创建响应式表格 <div class="table-responsive">
-->
<div class="container">
<table class="table table-bordered table-hover table-condensed">
<caption>Table基本案例</caption>
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>User Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>aehyok</td>
<td>leo</td>
<td>@aehyok</td>
</tr>
<tr>
<td>lynn</td>
<td>thl</td>
<td>@lynn</td>
</tr>
</tbody>
</table>
</div>
<address>
<h3>地址</h3>
<strong>Twitter, Inc.</strong><br>
795 Folsom Ave, Suite 600<br>
San Francisco, CA 94107<br>
<abbr title="Phone">P:</abbr> (123) 456-7890<br>
<a href="mailto:#">first.last@example.com</a>
</address>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手