前端学习笔记：bootstrap(10)
c.禁用和激活状态
链接在不同情况下可以定制。你可以给不能点击的链接添加 .disabled 类、给当前页添加 .active 类。下面的按钮中，<<这个按钮不能点击，数字1被激活，数字5不能点。
案例代码
<!DOCTYPE html>
<html lang="en">
<head>
<!--设置页面的字符集-->
<meta charset="UTF-8">
<title>Title</title>
<!--强制浏览器按照最新的标准去渲染当前的网页-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--
viewport：视口，支持响应式布局。
width: 初始宽度与设备的宽度相同
initial-scale：初始的缩放比，1:1
-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap 101 Template</title>
<!-- 1. 导入bootstrap中的css样式文件 -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- 2. 导入jQuery框架 -->
<script src="js/jquery-3.2.1.min.js"></script>
<!-- 3. 导入bootstrap的js文件 -->
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<!--分页容器是一个nav-->
<nav>
<ul class="pagination">
<!--这个按钮不能点-->
<li class="disabled">
<a href="#">
<span>«</span>
</a>
</li>
<!--这一项当前被激活-->
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<!--这一项看起来是链接，但不能点-->
<li><span>5</span></li>
<li>
<a href="#">
<!--向后的双箭头-->
<span>»</span>
</a>
</li>
</ul>
</nav>
</div>
</body>
</html>
