bootstrap框架基础知识点整理

大忽悠爱学习

发布于 2021-11-15 11:23:15

3.8K0

发布于 2021-11-15 11:23:15

文章被收录于专栏：c++与qt学习

bootstrap框架

基本模板及代码注释

<!doctype html>
<html lang="zh-CN"><!--当前html页面使用中文简体-->
  <head>
    <meta charset="utf-8"><!--设置html页面的字符集-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge"><!--使用IE最新的渲染模式，展示页面-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<!--
	viewport:视口，浏览器网页上的可视区域
	视口作用:用于移动设备将大型页面进行比例缩放演示
	
	以下设置只在移动设备上生效
	width=device-width:设置视口的宽度   device-width:设备宽度
	initial-scale=1:初始化缩放设置  移动设备打开网页时的缩放级别  100% 正常
	                 1~5
	-->
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>
     <link href="../css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <h1>你好，世界！</h1>

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
   <script src="../js/jquery-1.11.3.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
        <script src="../js/bootstrap.min.js"></script>
  </body>
</html>

视口设置

视口常见的设置:

布局容器

布局容器帮助手册网址链接

注意: 任意元素使用了布局容器的样式，都会称为布局容器，建议使用div作为布局容器

布局容器之container

特点：居中，两端有留白

代码:

<!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">
    <title>模板1</title>
    <link href="../css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
	 <!--布局容器1： container-->
   <div class="container" style="border: 3px solid red;">
	   11111
   </div>
   <script src="../js/jquery-1.11.3.min.js"></script>
      <script src="../js/bootstrap.min.js"></script>
  </body>
</html>

布局容器2—container-fluid

特点: 占据了视口100%的宽度

代码:

<!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">
    <title>模板1</title>
    <link href="../css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
	 <!--布局容器2： container-fluid -->
   <div class="container-fluid" style="border: 3px solid red;">
	   11111
   </div>
    <script src="../js/jquery-1.11.3.min.js"></script>
      <script src="../js/bootstrap.min.js"></script>
  </body>
</html>

栅格系统

栅格系统帮助文档链接

栅格系统的特点和案例

案例演示:

<!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">
    <title>模板1</title>
     <link href="../css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
      <!--定义一个布局容器-->
	  <div class="container">
		   <!--在布局容器中定义一行-->
		   <div class="row">
			   <!--在行上，定义列-->
			   <!--lg是当前pc屏幕尺寸，是固定的-->
			   <div class="col-lg-2" style="border: solid 2px red;">
				   当前元素占两列
				   </div>
				   <div class="col-lg-4" style="border: solid 2px red;">
				   				  当前元素占四列
				   	</div>
					<div class="col-lg-4" style="border: solid 2px red;">
									  当前元素占六列
						</div>
			   </div>
	  </div>
   <script src="../js/jquery-1.11.3.min.js"></script>
      <script src="../js/bootstrap.min.js"></script>
  </body>
</html>

注意点

列元素的书写顺序，决定布局顺序，先写的列元素会被先布局到行上
列元素的占用列数，定义列元素的大小
如果列元素的占用列数，总和小于等于12，这些列元素还排列在一行上
如果列元素的占用列数，总和大于等于12，大于12的列元素会另起一行排列
栅格是可以进行无限嵌套的：行----列----行—列…
一行有十二列，指的是一个row元素下有十二列

栅格屏幕尺寸设置----响应式开发

屏幕尺寸简述:

large: lg -----大屏幕，一般的pc尺寸
medium: md -----中等屏幕，小pc尺寸
small: sm ------小屏幕,ipad尺寸
x small: xs -----超小屏幕，智能手机屏幕

如果没有设置当前屏幕的样式，默认一个元素占据一行

设置为xs时:

<!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">
    <title>模板1</title>
     <link href="../css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
	  <div class="container">
		   <div class="row">
			   <div class="col-xs-4" style="border: solid 2px red;">
				   当前元素占两列
				   </div>
				   <div class="col-xs-4" style="border: solid 2px red;">
				   				  当前元素占四列
				   	</div>
					<div class="col-xs-4" style="border: solid 2px red;">
									  当前元素占六列
						</div>
			   </div>
	  </div>
   <script src="../js/jquery-1.11.3.min.js"></script>
      <script src="../js/bootstrap.min.js"></script>
  </body>
</html>

多个屏幕尺寸共同设置

方法1：

<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4" style="border: solid 2px red;">

完整代码演示:

<!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">
    <title>模板1</title>
     <link href="../css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
	  <div class="container">
		   <div class="row">
			   <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4" style="border: solid 2px red;">
				   当前元素占四列
				   </div>
				   <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4" style="border: solid 2px red;">
				   				  当前元素占四列
				   	</div>
					<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4" style="border: solid 2px red;">
									  当前元素占四列
						</div>
			   </div>
	  </div>
  <script src="../js/jquery-1.11.3.min.js"></script>
      <script src="../js/bootstrap.min.js"></script>
  </body>
</html>

方法2

如果设置了一个屏幕尺寸，比这个屏幕尺寸大的屏幕，继承当前的设置

比这个屏幕小的尺寸，默认一个元素占一行

代码演示:

<!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">
    <title>模板1</title>
   <link href="../css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
	  <div class="container">
		   <div class="row">
			   <div class="col-xs-4" style="border: solid 2px red;">
				   当前元素占四列
				   </div>
				   <div class="col-xs-4" style="border: solid 2px red;">
				   				  当前元素占四列
				   	</div>
					<div class="col-xs-4" style="border: solid 2px red;">
									  当前元素占四列
						</div>
			   </div>
	  </div>
  <script src="../js/jquery-1.11.3.min.js"></script>
      <script src="../js/bootstrap.min.js"></script>
  </body>
</html>

栅格系统列偏移

列偏移帮助文档链接

代码演示:

<!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">
    <title>模板1</title>
     <link href="../css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
	  <div class="container">
		   <div class="row">
			   <div class="col-xs-4 col-xs-offset-4" style="border: solid 2px red;">
				   当前元素占四列,列偏移4
				   </div>
			   </div>
	  </div>
    <script src="../js/jquery-1.11.3.min.js"></script>
      <script src="../js/bootstrap.min.js"></script>
  </body>
  </body>
</html>

列表

内联列表

内联列表帮助文档链接

内联元素: 位于一行上，元素结束时，不会自动换行

代码演示:

<!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">
    <title>模板1</title>
    <link href="../css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
<ul class="list-inline">
	<li>
		大忽悠
		</li>
		<li>
			小朋友
			</li>
			<li>
				大朋友
				</li>
	</ul>
 
    <script src="../js/jquery-1.11.3.min.js"></script>
      <script src="../js/bootstrap.min.js"></script>
  </body>
  </body>
</html>

按钮

按钮帮助文档链接

注意: 任何html元素加上按钮样式都会变成对应按钮

代码演示:

<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">（链接）Link</button>

按钮尺寸设置

需要让按钮具有不同尺寸吗？使用 .btn-lg、.btn-sm 或 .btn-xs 就可以获得不同尺寸的按钮。

代码演示:

<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>

激活状态

当按钮处于激活状态时，其表现为被按压下去（底色更深、边框夜色更深、向内投射阴影）。对于 <button> 元素，是通过 :active 状态实现的。对于 <a> 元素，是通过 .active 类实现的。然而，你还可以将 .active 应用到上（包含 aria-pressed="true" 属性)），并通过编程的方式使其处于激活状态。

button 元素

由于 :active 是伪状态，因此无需额外添加，但是在需要让其表现出同样外观的时候可以添加 .active 类。

代码演示:

<button type="button" class="btn btn-primary btn-lg active">Primary button</button>
<button type="button" class="btn btn-default btn-lg active">Button</button>

链接（< a >）元素

可以为基于 <a> 元素创建的按钮添加 .active 类。

代码演示:

<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg active" role="button">Link</a>

禁用状态

通过为按钮的背景设置 opacity 属性就可以呈现出无法点击的效果。

button 元素

为 <button> 元素添加 disabled 属性，使其表现出禁用状态。

代码演示：

<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>

链接（< a >）元素

为基于 <a> 元素创建的按钮添加 .disabled 类。

该写法图标变为灰色，鼠标放上去没有禁止点击的标记:

<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>

另一种写法,鼠标放入图标后，有禁止点击的标记

<a href="#" class="btn btn-primary btn-lg" disabled="disabled">Primary link</a>
<a href="#" class="btn btn-default btn-lg" disabled="disabled">Link</a>

导航条

导航条帮助文档链接

反色导航条

代码演示:

<!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">
    <title>模板1</title>
     <link href="../css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
	  <!--导航条-->
			<nav class="navbar navbar-inverse">
			  <div class="container-fluid">
				<!-- 导航图标，汉堡按钮 -->
				<div class="navbar-header">
				  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
					  <!--sr-only阅读器专用-->
					<span class="sr-only">这是汉堡按钮</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="#">大忽悠个人主页 <span class="sr-only">(current)</span></a></li>
					<li><a href="#">大忽悠军团</a></li>
					<!--下拉菜单-->
					<li class="dropdown">
					  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">更多 <span class="caret"></span></a>
					  <ul class="dropdown-menu">
						<li><a href="#">爱好</a></li>
						<li><a href="#">特长</a></li>
						<li><a href="#">财富</a></li>
						<!--分割线-->
						<li role="separator" class="divider"></li>
						<li><a href="#">经历</a></li>
						<li role="separator" class="divider"></li>
						<li><a href="#">学校</a></li>
					  </ul>
					</li>
				  </ul>
				  <!--让提交部分的表单，靠右排列-->
				  <form class="navbar-form navbar-right">
					<div class="form-group">
					  <input type="text" class="form-control" placeholder="Search">
					</div>
					<button type="submit" class="btn btn-default">Submit</button>
				  </form>
			</nav>
    <script src="../js/jquery-1.11.3.min.js"></script>
      <script src="../js/bootstrap.min.js"></script>
  </body>
</html>

轮播图

轮播图帮助文档链接

代码演示:

<!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">
    <title>模板1</title>
     <link href="../css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
	  
	  
  		 <!-- 轮播图  -->
		   <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>
			    <li data-target="#carousel-example-generic" data-slide-to="3"></li>
			  </ol>
			
			  <!-- 轮播图 图片主体部分 -->
			  <div class="carousel-inner" role="listbox">
			    <div class="item active">
			      <img src="../funImage/1.jpg"/>
			      <div class="carousel-caption">
			        图片1的说明信息
			      </div>
			    </div>
			    <div class="item">
			      <img src="../funImage/2.jpg"/>
			      <div class="carousel-caption">
			        图片2的说明信息
			      </div>
			    </div>
			    <div class="item">
			      <img src="../funImage/3.jpg"/>
			      <div class="carousel-caption">
			        图片3的说明信息
			      </div>
			    </div>
			    <div class="item">
			      <img src="../funImage/bartlesvillecf.jpg"/>
			      <div class="carousel-caption">
			        图片4的说明信息
			      </div>
			    </div>
			  </div>
			
			  <!-- 左右控制按钮 -->
			  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
			    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
			    <span class="sr-only">Previous</span>
			  </a>
			  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
			    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
			    <span class="sr-only">Next</span>
			  </a>
			</div>
			
			
    <script src="../js/jquery-1.11.3.min.js"></script>
      <script src="../js/bootstrap.min.js"></script>
  </body>
</html>

定时切换轮播图

轮播图DIV定时换图属性:

data-interval : 毫秒值

代码演示:

 <!-- 轮播图  -->
	   <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="1000">

注意: 多个轮播图必须修改轮播图的ID

同时也要修改小圆点控制的轮播图id和左右按钮控制的轮播图id

代码演示:

<!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">
    <title>模板1</title>
     <link href="../css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
	  
	  
  		 <!-- 轮播图2  -->
		   <div id="lbt1" class="carousel slide" data-ride="carousel" data-interval="3000">
			  <!-- 小圆点 -->
			  <ol class="carousel-indicators">
			    <li data-target="#lbt1" data-slide-to="0" class="active"></li>
			    <li data-target="#lbt1" data-slide-to="1"></li>
			    <li data-target="#lbt1" data-slide-to="2"></li>
			    <li data-target="#lbt1" data-slide-to="3"></li>
			  </ol>
			
			  <!-- 轮播图 图片主体部分 -->
			  <div class="carousel-inner" role="listbox">
			    <div class="item active">
			      <img src="../funImage/1.jpg"/>
			      <div class="carousel-caption">
			        图片1的说明信息
			      </div>
			    </div>
			    <div class="item">
			      <img src="../funImage/2.jpg"/>
			      <div class="carousel-caption">
			        图片2的说明信息
			      </div>
			    </div>
			    <div class="item">
			      <img src="../funImage/3.jpg"/>
			      <div class="carousel-caption">
			        图片3的说明信息
			      </div>
			    </div>
			    <div class="item">
			      <img src="../funImage/bartlesvillecf.jpg"/>
			      <div class="carousel-caption">
			        图片4的说明信息
			      </div>
			    </div>
			  </div>
			
			  <!-- 左右控制按钮 -->
			  <a class="left carousel-control" href="#lbt1" role="button" data-slide="prev">
			    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
			    <span class="sr-only">Previous</span>
			  </a>
			  <a class="right carousel-control" href="#lbt1" role="button" data-slide="next">
			    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
			    <span class="sr-only">Next</span>
			  </a>
			</div>
			
			<!-- 轮播图2  -->
			  <div id="lbt2" class="carousel slide" data-ride="carousel" data-interval="3000">
						  <!-- 小圆点 -->
						  <ol class="carousel-indicators">
						  <!--小圆点控制的轮播图id也要修改-->
						    <li data-target="#lbt2" data-slide-to="0" class="active"></li>
						    <li data-target="#lbt2" data-slide-to="1"></li>
						    <li data-target="#lbt2" data-slide-to="2"></li>
						    <li data-target="#lbt2" data-slide-to="3"></li>
						  </ol>
						
						  <!-- 轮播图 图片主体部分 -->
						  <div class="carousel-inner" role="listbox">
						    <div class="item active">
						      <img src="../funImage/1.jpg"/>
						      <div class="carousel-caption">
						        图片1的说明信息
						      </div>
						    </div>
						    <div class="item">
						      <img src="../funImage/2.jpg"/>
						      <div class="carousel-caption">
						        图片2的说明信息
						      </div>
						    </div>
						    <div class="item">
						      <img src="../funImage/3.jpg"/>
						      <div class="carousel-caption">
						        图片3的说明信息
						      </div>
						    </div>
						    <div class="item">
						      <img src="../funImage/bartlesvillecf.jpg"/>
						      <div class="carousel-caption">
						        图片4的说明信息
						      </div>
						    </div>
						  </div>
						
						  <!-- 左右控制按钮 -->
						  <!--左右按钮控制的轮播图id也要修改-->
						  <a class="left carousel-control" href="#lbt2" role="button" data-slide="prev">
						    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
						    <span class="sr-only">Previous</span>
						  </a>
						  <a class="right carousel-control" href="#lbt2" role="button" data-slide="next">
						    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
						    <span class="sr-only">Next</span>
						  </a>
						</div>
    <script src="../js/jquery-1.11.3.min.js"></script>
      <script src="../js/bootstrap.min.js"></script>
  </body>
</html>

排版-对齐方式

排版–对齐帮助文档链接

代码演示:

<div class="text-center">
	大忽悠和小朋友
	<img src="../funImage/我他妈直接拒绝.jpg"/>
	</div>

表单元素

表单帮助文档链接

水平排列的表单代码演示:

<!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">
    <title>模板1</title>
     <link href="../css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
			<form class="form-horizontal">
			  <div class="form-group">
				<label  class="col-sm-2 control-label">用户名</label>
				<div class="col-sm-5">
					<!--placeholder:替代文字-->
				  <input type="text" class="form-control"  placeholder="请输入用户名">
				</div>
			  </div>
			  <div class="form-group">
				<label  class="col-sm-2 control-label">密码</label>
				<div class="col-sm-5">
				  <input type="password" class="form-control"  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>
	
	
    <script src="../js/jquery-1.11.3.min.js"></script>
      <script src="../js/bootstrap.min.js"></script>
  </body>
</html>

表单校验

表单校验帮助文档链接

代码演示:

			  <div class="form-group has-error">
			  <div class="form-group has-success">

分页条

分页条帮助文档链接

代码演示:

					<nav aria-label="Page navigation">
					<!--分页条整体列表-->
					  <ul class="pagination">
						  <!--上一页-->
						<li>
						  <a href="#" aria-label="Previous">
							<span aria-hidden="true">&laquo;</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">&raquo;</span>
						  </a>
						</li>
					  </ul>
					</nav>

分页条激活状态

代码演示:

	<li class="active"><a href="#">1</a></li>

禁用状态

代码演示:

			  <!--上一页-->
						<li class="disabled">

对应设置了不可用里面的a标签的herf属性，最好删掉，这样用户点击之后也不会再跳转了。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2021/06/19 ，如有侵权请联系 cloudcommunity@tencent.com 删除

容器

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

容器

登录后参与评论

0 条评论

热度