breadcrumb路径导航
pagination分页
label标签
badge未读消息
jumbotron巨幕
thumbnail缩略图
alert警告信息
alert-dismissible 可关闭警告框
data-dismiss="alert"警告信息隐藏功能
progress-bar进度条
.progress-bar-success .progress-bar-info
.progress-bar-warning .progress-bar-danger
progress-bar-striped条纹状进度条
list-group-item列表组
iframe,embed引入页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="../../bootstrap-3.3.7-dist/css/bootstrap.css"/>
<title></title>
</head>
<body style="height: 20000px">
<!-- breadcrumb路径导航 -->
<ol class="breadcrumb">
<li><a href="day01.html">Home</a></li>
<li><a href="#">Library</a></li>
<li class="active">Data</li>
</ol>
<!-- pagination分页 -->
<nav>
<ul class="pagination">
<li>
<a href="#">
<span>«</span>
</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="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
<nav aria-label="..."><ul class="pagination pagination-lg">
<li>
<a href="#">
<span>«</span>
</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="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul></nav>
<nav aria-label="..."><ul class="pagination">
<li>
<a href="#">
<span>«</span>
</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="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul></nav>
<nav aria-label="..."><ul class="pagination pagination-sm">
<li>
<a href="#">
<span>«</span>
</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="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul></nav>
<nav aria-label="...">
<ul class="pager">
<li class="previous"><a href="#">上一章</a></li>
<li class="next"><a href="#">下一章</a></li>
</ul>
</nav>
<!-- label标签 -->
<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 >
<!-- badge未读消息 -->
<a href="#">Inbox <span class="badge">42</span></a>
<button class="btn btn-primary" type="button">
Messages <span class="badge">4</span>
</button>
<!-- jumbotron巨幕 -->
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>...</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>
<div class="page-header">
<h1>Example page header <small>Subtext for header</small></h1>
</div>
<div class="row">
<!-- thumbnail缩略图 -->
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="../jq代码/zysy/en.png" alt="...">
</a>
</div>
...
</div>
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<div class="caption">
<h3>新增个人信息</h3>
<label>姓名</label>
<input type="button" class="form-control" name="" id="" value="" />
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
</div>
</div>
</div>
</div>
<!-- alert警告信息 -->
<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>
<!-- alert-dismissible 可关闭警告框 -->
<!-- data-dismiss="alert"警告信息隐藏功能 -->
<div class="alert alert-warning alert-dismissible" role="alert">
<button type="button" class="close"
data-dismiss="alert">
<span aria-hidden="true">×</span></button>
<strong>Warning!</strong> Better check yourself, you're not looking too good.
<a href="#" class="alert-link">帮助</a>
</div>
<hr >
<!-- progress-bar进度条 -->
<!-- .progress-bar-success .progress-bar-info
.progress-bar-warning .progress-bar-danger -->
<!-- progress-bar-striped条纹状进度条 -->
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-danger active" role="progressbar"
aria-valuenow="80" aria-valuemin="0"
aria-valuemax="100" style="width: 80%;">
80%加载中...
<span class="sr-only">60% Complete</span>
</div>
</div>
<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>
<!-- list-group-item列表组 -->
<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>
<ul class="list-group">
<li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
<li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
<li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
<li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
</ul>
<div class="list-group">
<a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
<a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>
<a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a>
</div>
<hr >
<!-- iframe,embed引入页面 -->
<iframe src="day08.html" frameborder="0"></iframe>
<embed src="day07.html" type="">
<!-- <video width="300" height="300" loop="loop" autoplay="autoplay" src="../studio_video_1683733036886.mp4"></video> -->
<div class="well">1111111111</div>
</body>
<script src="../../bootstrap-3.3.7-dist/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../../bootstrap-3.3.7-dist/js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
</html>
5138
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
