<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="lib/dist/css/bootstrap.css">
<title>复习</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
以下都是Bootstrap的组件，若是实际开发的话最好还是去官网仔细查看一遍再写
1.输入框组 (仅适用于文本输入框)，必须放在.input-group基类中
1).添加左侧普通文本 .input-group-addon
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control">
</div>
2).添加按钮
<div class="input-group">
<span class="input-group-addon"><span class="caret"></span></span>
<input type="text" class="form-control">
<span class="input-group-btn">
<button type="button" class="btn btn-default">Search</button>
</span>
</div>
3).下拉框
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" >搜素 <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">jQuery</a></li>
</ul>
</div>
<input type="text" class="form-control">
</div>
2、选项卡
1).普通选项卡
<div class="nav nav-tabs">
<li><a href="#" >选项卡1</a></li>
<li class="active"><a href="#">选项卡2</a></li>
<li><a href="#">选项卡3</a></li>
</div>
<div class="nav nav-pills">
<li><a href="#" >选项卡1</a></li>
<li class="active"><a href="#">选项卡2</a></li>
<li><a href="#">选项卡3</a></li>
</div>
2).垂直式选项卡
<div class="nav nav-tabs nav-stacked">
<li><a href="#" >选项卡1</a></li>
<li class="active"><a href="#">选项卡2</a></li>
<li><a href="#">选项卡3</a></li>
</div>
3、导航条太长了，还是直接去bootstrap官网上复制吧
4、分页
<nav>
<ul class="pagination">
<li><a href="">«</a></li>
<li><a href="">1</a></li>
<li class="active"><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">»</a></li>
</ul>
</nav>
<nav>
<ul class="pager">
<li class="previous"><a href="">«</a></li>
<li class="next"><a href="">»</a></li>
</ul>
</nav>
5.标签与徽章
<span class="label label-danger">危险</span>
<button for="" class="btn btn-primary" >警告<span class="badge"></span></button>
<br>
6.缩略图
<div class="thumbnail">
<img src="img/1.jpg" alt="...">
<div class="caption">
<h3>Thumbnail label</h3>
<p>...</p>
<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>
</div>
<script src="lib/jquery.js"></script>
<script src="lib/dist/js/bootstrap.js"></script>
</body>
</html>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
