BootStrap工具使用

已于 2022-11-02 16:51:12 修改
阅读量1.6k 收藏 4
点赞数 2
分类专栏： html 文章标签： 前端 bootstrap 前端框架
于 2022-11-02 16:49:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wangshiqi666/article/details/127653158
版权

boorstrap是什么？

Bootstrap是一个做网页的框架（目前最流行的WEB前端框架之一），就是说你只需要写HTML标签调用它的类你就可以很快速的做一个高大上的网页，你不用担心兼容问题，提供了很多样式供你选择！

简单点说就是使用现成的CSS和JS。

bootstrap需要引用才能使用。

提取码：1234

下载解压完如下。

 将这三个文件复制到你的前端项目文件中即可。

如图

 写HTML代码的时候，在HTML里面需要引用。

如图

 下面开始正式使用

（PS：很多代码细节和理解我写在代码注释里了，文章中我就不写了）

十二栅格

理解：

Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随着设备或视口大小的增加而适当地扩展到 12 列。它包含了用于简单的布局选项的预定义类，也包含了用于生成更多语义布局的功能强大的混合类。

以上称之为栅格系统，通俗来讲就是把一个页面平分为十二等份所以又叫十二栅格系统。

演示：

拖拽边框时能看出来，想发视频但不好发，就没发。

代码：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1" />
		<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" />	<!--导入css-boots-->
		<script type="application/javascript" src="../js/jquery-3.2.1.js"></script>	<!--导入js-jquery-->
		<script type="application/javascript" src="../js/bootstrap.min.js"></script>	<!--导入js-bootstrap-->
		<link href="../img/favicon.ico" rel="shortcut icon">	<!--浏览器小图标-->
		<title>十二栅格</title>
	</head>
	
	<style type="text/css">
		.title {
			text-align: center;
		}
		div{
			border:1px solid red;
			text-align: center;
			}
	</style>
	
	<script type="text/javascript">
		$(document).ready(function(){
			window.onresize=function(){	// 当窗口大小发生变化时执行此方法
				$("#pw1").text("windows窗口的宽度为："+$("#b1").width())	// 浏览器当前页面的可视宽度
				$(document).width();	// 浏览器当前文档对象的宽度
				$(document.body).width();	// 浏览器当前窗口文档body的宽度
				/*以上三种方式输出宽度结果都一样*/
			}
		})
	</script>

	<!--十二栅格原理-->
	<body id="b1">
		<p id="pw1"></p>
		<!--默认container有留白-->
		<p>1、默认十二栅格</p>
		<div class="container">	<!--bootstrap的类：container-->
			<div class="row">	<!--bootstrap的类：row-->
				   <div class="col-md-2">A1</div>	<!--bootstrap的类：col-md-2-->
			   	   <div class="col-md-2">A2</div>
			   	   <div class="col-md-2">A3</div>
			   	   <div class="col-md-2">A4</div>
			   	   <div class="col-md-2">A5</div>
			   	   <div class="col-md-2">A6</div>
			   	   <div class="col-md-1">A7</div>
			   	   <div class="col-md-1">A8</div>
			   	   <div class="col-md-1">A9</div>
			   	   <div class="col-md-1">A10</div>
			   	   <div class="col-md-1">A11</div>
			   	   <div class="col-md-1">A12</div>
			</div>
		</div>
		
		<hr>
		
		<!--container-fluid：与屏幕等宽-->
		<p>2、container-fluid：与屏幕等宽</p>
		<div class="container-fluid">
			<div class="row">
				<div class="col-md-6 col-sm-6">占6格</div>
				<div class="col-md-6 col-sm-6">占6格</div>
			</div>
		</div>
		
		<hr>
		
		<!--栅格移动-->
		<p>3、栅格移动</p>
		<div class="container">
			<div class="row">
				<!--col-md-offset-偏移格数(向右)-->
				<div class="col-md-1 col-md-offset-2">占1格</div>
				<div class="col-md-2 col-md-offset-4">占2格</div>
			</div>
		</div>
		<div class="container">
			<div class="row">
				<!--push向右-->
				<div class="col-md-1 col-md-push-3">占1格</div>
				<!--pull向左-->
				<div class="col-md-2 col-md-pull-1">占2格</div>
			</div>
		</div>
		
		<hr>
		<!--栅格嵌套-->
		<p>4、栅格嵌套</p>
		<div class="container">
			<div class="row">
				<div class="col-md-10">
					<div class="row">
						<div>
						   <div class="col-md-4">内占4格</div>
					   	   <div class="col-md-4">内占4格</div>
					   	   <div class="col-md-4">内占4格</div>
						</div>
					</div>
				</div>
				<div class="col-md-2">外占2格</div>
			</div>
		</div>
	</body>

</html>

表格

理解：就说表格，但是用了boorstrap会更好看更方便。

演示：

代码：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1" />
		<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" />
		<script type="application/javascript" src="../js/jquery-3.2.1.js"></script>
		<script type="application/javascript" src="../js/bootstrap.min.js"></script>
		<link href="../img/favicon.ico" rel="shortcut icon">	<!--浏览器小图标-->
		<title>表格</title>
	</head>
	
	<style>
		.title {
			text-align: center;
		}
	</style>
	
	<body id="b1">
		<!--表格样式-->
		<!--1.条纹状的表格-->
		<p>1、条纹状的表格</p>
		<div class="container">
		<table class="table table-striped">
			<tr>
				<th>编号</th><th>名称</th><th>创建人</th>
			</tr>
			<tr>
				<td>01</td><td>西瓜</td><td>张三</td>
			</tr>
			<tr>
				<td>02</td><td>西瓜</td><td>张四</td>
			</tr>
			<tr>
				<td>03</td><td>西瓜</td><td>张五</td>
			</tr>
		</table>
		</div>
		
		<hr>
		
		<!--2.带边框的表格-->
		<p>2、带边框的表格</p>
		<div class="container">
		<table class="table table-bordered">
			<tr>
				<th>编号</th><th>名称</th><th>创建人</th>
			</tr>
			<tr>
				<td>01</td><td>西瓜</td><td>张三</td>
			</tr>
			<tr>
				<td>02</td><td>西瓜</td><td>张四</td>
			</tr>
			<tr>
				<td>03</td><td>西瓜</td><td>张五</td>
			</tr>
		</table>
		</div>
		
		<hr>
		
		<!--3.鼠标指向变色的表格-->
		<p>3、鼠标指向变色的表格</p>
		<div class="container">
		<table class="table table-hover">
			<tr>
				<th>编号</th><th>名称</th><th>创建人</th>
			</tr>
			<tr>
				<td>01</td><td>西瓜</td><td>张三</td>
			</tr>
			<tr>
				<td>02</td><td>西瓜</td><td>张四</td>
			</tr>
			<tr>
				<td>03</td><td>西瓜</td><td>张五</td>
			</tr>
		</table>
		</div>
		
		<hr>
		
		<!--4.紧缩式的表格-->
		<p>4、紧缩式的表格</p>
		<div class="container">
		<table class="table table-condensed">
			<tr>
				<th>编号</th><th>名称</th><th>创建人</th>
			</tr>
			<tr>
				<td>01</td><td>西瓜</td><td>张三</td>
			</tr>
			<tr>
				<td>02</td><td>西瓜</td><td>张四</td>
			</tr>
			<tr>
				<td>03</td><td>西瓜</td><td>张五</td>
			</tr>
		</table>
		</div>
		
		<hr>
		
		<!--5.响应式的表格-->
		<p>5、响应式的表格</p>
		<div class="container">
			<div class="row">
				<div class="col-xs-6 col-md-12">
					<div class="table-responsive">
						<table class="table table-hover">
							<tr>
								<th>编号</th><th>名称</th><th>创建人</th>
							</tr>
							<tr>
								<td>01</td><td>西瓜</td><td>张三</td>
							</tr>
							<tr>
								<td>02</td><td>西瓜</td><td>张四</td>
							</tr>
							<tr>
								<td>03</td><td>西瓜</td><td>张五</td>
							</tr>
						</table>
					</div>
				</div>
			</div>
		</div>
		
		<hr>
		
		<!--6.彩色的表格-->
		<p>6、彩色的表格</p>
		<div class="container">
			<table class="table table-bordered">
				<tr class="info">
					<th>编号</th><th>名称</th><th>创建人</th>
				</tr>
				<tr class="warning">
					<td>01</td><td>西瓜</td><td>张三</td>
				</tr>
				<tr class="success">
					<td>02</td><td>西瓜</td><td>张四</td>
				</tr>
				<tr class="danger">
					<td>03</td><td>西瓜</td><td>张五</td>
				</tr>
				<tr class="active">
					<td>04</td><td>西瓜</td><td>张六</td>
				</tr>
			</table>
		</div>
	</body>

</html>

表单

理解：就是html里的input输入框组成的。

演示：

代码：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1" />
		<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" />
		<script type="application/javascript" src="../js/jquery-3.2.1.js"></script>
		<script type="application/javascript" src="../js/bootstrap.min.js"></script>
		<link href="../img/favicon.ico" rel="shortcut icon"><!--浏览器小图标-->
		<title>表单</title>
	</head>
	
	<style>
		.title {
			text-align: center;
		}
		legend {
			text-align: center;
		}
	</style>

	<body>
		<!--表单-->
		<div class="container">
			<form action="#" method="post">
				<fieldset>
					<legend>登录</legend>
					<div class="form-group">
						<label>用户名：</label>
						<input type="text" class="form-control" placeholder="请输入用户名" />
					</div>
					<div class="form-group has-feedback">
						<label>密     码-小星号：</label>
						<input type="password" class="form-control" />
						<span class="glyphicon-asterisk form-control-feedback"></span>
					</div>
					<div class="form-group has-feedback">
						<label>密     码-大星号：</label>
						<input type="password" class="form-control" />
						<span class="glyphicon glyphicon-asterisk form-control-feedback"></span>
					</div>
					<div class="checkbox">
						<label><input type="checkbox">记住密码</label>
						<input type="text" class="form-control" />
					</div>
					<button type="submit" class="btn btn-default">登录</button>
				</fieldset>
			</form>
		</div>
	</body>

</html>

按钮

理解：就是按钮。注意不同的样式的使用。

演示1：

 代码1：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1" />
		<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" />
		<script type="application/javascript" src="../js/jquery-3.2.1.js"></script>
		<script type="application/javascript" src="../js/bootstrap.min.js"></script>
		<link href="../img/favicon.ico" rel="shortcut icon">	<!--浏览器小图标-->
		<title>按钮</title>
	</head>
	<style>
		.title {
			text-align: center;
		}
	</style>

	<body>
		<!--按钮样式-->
		<div class="container">
			<p>1、朴素按钮</p>
			<button class="btn-default">按钮</button>
			<button class="btn-primary">按钮</button>
			<button class="btn-success">按钮</button>
			<button class="btn-info">按钮</button>
			<button class="btn-warning">按钮</button>
			<button class="btn-danger">按钮</button>
			<button class="btn-link">按钮</button>
			<hr>
			
			<p>2、普通按钮</p>
			<button class="btn btn-default">默认按钮</button>
			<button class="btn btn-primary">按钮</button>
			<button class="btn btn-success">按钮</button>
			<button class="btn btn-info">按钮</button>
			<button class="btn btn-warning">按钮</button>
			<button class="btn btn-danger">按钮</button>
			<button class="btn btn-link">按钮</button>
			<hr>
			
			<p>3、特殊按钮</p>
			<button class="btn btn-default btn-lg">默认按钮</button>
			<button class="btn btn-primary btn-sm">按钮</button>
			<button class="btn btn-success btn-xs">按钮</button>
			<button class="btn btn-info btn-block">按钮</button>
			<hr>
			
			<p>4、按钮组</p>
			<div class="btn-group">
				<button class="btn btn-primary btn-lg">按钮</button>
				<button class="btn btn-success btn-sm">按钮</button>
				<button class="btn btn-info btn-xs">按钮</button>
			</div>
		</div>
	</body>

</html>

演示2：

代码2：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1" />
		<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" />
		<script type="application/javascript" src="../js/jquery-3.2.1.js"></script>
		<script type="application/javascript" src="../js/bootstrap.min.js"></script>
		<link href="../img/favicon.ico" rel="shortcut icon">	<!--浏览器小图标-->
		<title></title>
	</head>
	<style>
		.title {
			text-align: center;
		}
	</style>

	<body>
		<!--按钮样式-->
		<div class="container">
			<div class="btn-toolbar">
			<p>5、响应式按钮组</p>
			<div class="btn-group">
				<button class="btn btn-primary">按钮</button>
				<button class="btn btn-success">按钮</button>
				<button class="btn btn-info">按钮</button>
			</div>
			<div class="btn-group btn-group-vertical">	<!--竖着排-->
				<button class="btn btn-primary">按钮</button>
				<button class="btn btn-success">按钮</button>
				<button class="btn btn-info">按钮</button>
			</div>
			</div>
		</div>
	</body>

</html>

图片

理解：图片，注意图片的引用地址吧，很容易找不到图片路径。

演示：

代码：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1" />
		<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" />
		<script type="application/javascript" src="../js/jquery-3.2.1.js"></script>
		<script type="application/javascript" src="../js/bootstrap.min.js"></script>
		<link href="../img/favicon.ico" rel="shortcut icon">	<!--浏览器小图标-->
		<title>图片</title>
	</head>

	<body>
	<!--图片样式-->
		<div class="container">
			<p>1、class="img-circle"</p>
			<img src="../img/3.jpg" width="100" height="100" class="img-circle"/>
			<hr>
			<p>2、class="img-rounded"</p>
			<img src="../img/3.jpg" width="100" height="100" class="img-rounded"/><br>
			<hr>
			<p>3、class="img-thumbnail"</p>
			<img src="../img/3.jpg" width="100" height="100" class="img-thumbnail"/><br>
			<hr>
			<p>4、class="img-responsive"</p>
			<img src="../img/3.jpg" width="100" height="100" />
			<img src="../img/3.jpg" width="100" height="100" />
			<img src="../img/3.jpg" width="100" height="100" class="img-responsive"/>
		</div>
	</body>

</html>

导航

理解：boorstrap的导航很不错，自己单独写的话会很麻烦。

演示：

代码：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1" />
		<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" />
		<script type="application/javascript" src="../js/jquery-3.2.1.js"></script>
		<script type="application/javascript" src="../js/bootstrap.min.js"></script>
		<link href="../img/favicon.ico" rel="shortcut icon">	<!--浏览器小图标-->
		<title>导航栏</title>
	</head>
	<style>
		.title {
			text-align: center;
		}
	</style>

	<style>
		img{
			height: 300px;
			width: 300px;
		}
	</style>
	<body>
		<!--导航栏-->
		<h1>一、导航栏</h1>
		<hr>
		<h3>导航栏1</h3>
		<nav class="navbar navbar-default">
			<div class="navbar-header">
				<a href="#" class="navbar-brand">导航</a>
			</div>
				<ul class="nav navbar-nav">
					<li class="active"><a href="#">首页</a></li>
					<li><a href="#">军事</a></li>
					<li><a href="#">文学</a></li>
				</ul>
				<form class="navbar-form navbar-right">
					<div class="form-group">
						<input type="text" class="form-control">
					</div>
					<button type="button">搜索</button>
				</form>
		</nav>
		<br>
		
		<h3>导航栏2</h3>
		<nav class="navbar navbar-inverse">
			<div class="navbar-header">
				<button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
					<span class="sr-only">Toggle navigtion</span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>
				<a href="#" class="navbar-brand">导航</a>
			</div>
			<div class="collapse navbar-collapse navbar-responsive-collapse">
				<ul class="nav navbar-nav">
					<li class="active"><a href="#">首页</a></li>
					<li><a href="#">军事</a></li>
					<li><a href="#">文学</a></li>
				</ul>
				<form class="navbar-form navbar-right">
					<div class="form-group">
						<input type="text" class="form-control">
					</div>
					<button type="button">搜索</button>
				</form>
				</div>
		</nav>
		<br>
		
		<!--导航-->
		<h1>二、导航</h1>
		<hr>
	<div class="container">
		<!--纵向堆叠式导航-->
		<h3>1、纵向堆叠式导航</h3>
		<hr>
		<ul class="nav nav-tabs">
			<li class="active"><a href="#">首页</a></li>
			<li class="active"><a href="#">娱乐</a></li>
			<li><a href="#">军事</a></li>
			<li><a href="#">文学</a></li>
		</ul>
		<br>
		<!--胶囊式导航-->
		<h3>2、胶囊式导航</h3>
		<hr>
		<ul class="nav nav-pills">
			<li class="active"><a href="#">首页</a></li>
			<li class="active"><a href="#">娱乐</a></li>
			<li><a href="#">军事</a></li>
			<li><a href="#">文学</a></li>
		</ul>
		<br>
		<!--竖着导航-->
		<h3>3、竖着导航</h3>
		<hr>
		<ul class="nav nav-stacked">
			<li class="active"><a href="#">首页</a></li>
			<li class="active"><a href="#">娱乐</a></li>
			<li><a href="#">军事</a></li>
			<li><a href="#">文学</a></li>
		</ul>
		<br>
		<!--二级导航-->
		<h3>4、二级导航</h3>
		<hr>
		<ul class="nav nav-tabs">
			<li class="active"><a href="#">首页</a></li>
			<li><a href="#" class="dropdown-toggle" data-toggle="dropdown">娱乐</a>
				<ul class="dropdown-menu">
					<li><a href="#">子菜单1</a></li>
					<li><a href="#">子菜单2</a></li>
					<li><a href="#">子菜单3</a></li>
				</ul>
			</li>
			<li><a href="#">军事</a></li>
			<li><a href="#">文学</a></li>
		</ul>
		<br>
		<!--自适应导航-->
		<h3>5、自适应导航</h3>
		<hr>
		<ul class="nav nav-tabs nav-justified">
			<li class="active"><a href="#">首页</a></li>
			<li class="active"><a href="#">娱乐</a></li>
			<li><a href="#">军事</a></li>
			<li><a href="#">文学</a></li>
		</ul>
	</div>
	</body>

</html>

进度条

理解：用处不大。

演示：

代码：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1" />
		<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" />
		<script type="application/javascript" src="../js/jquery-3.2.1.js"></script>
		<script type="application/javascript" src="../js/bootstrap.min.js"></script>
		<link href="../img/favicon.ico" rel="shortcut icon">	<!--浏览器小图标-->
		<title></title>
	</head>
	<style>
		.title {
			text-align: center;
		}
	</style>

	<body>
		<!--进度条-->
		<div class="container">
			<div class="progress">
				<div id="pr1" class="progress-bar" style="width: 60%;">1-normal</div>
			</div>
			<!--条纹进度条-->
			<div class="progress progress-striped">
				<div class="progress-bar progress-bar-danger" style="width: 60%;">2-danger-striped</div>
			</div>
			<div class="progress">
				<div class="progress-bar progress-bar-success" style="width: 60%;">3-success</div>
			</div>
			<div class="progress">
				<div class="progress-bar progress-bar-warning" style="width: 60%;">4-warning</div>
			</div>
			<div class="progress">空白</div>
			<button onclick="a()">减少</button>
			<button onclick="b()">增加</button>
			<button onclick="c()">复原</button>
		</div>
		<hr>
		
		<!--堆叠式进度条-->
		<div class="container">
			<div class="progress">
				<div class="progress-bar" style="width: 21%;">1-normal</div>
				<div class="progress-bar progress-bar-danger" style="width: 23%;">2-danger</div>
				<div class="progress-bar progress-bar-success" style="width: 25%;">4-success</div>
				<div class="progress-bar progress-bar-warning" style="width: 31%;">5-warning</div>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		function a(){
			$("#pr1").attr("style","width: 10%;");
		}
		function b(){
			$("#pr1").attr("style","width: 80%;");
		}
		function c(){
			$("#pr1").attr("style","width: 60%;");
		}
	</script>
</html>

轮播图

理解：很重要很重要很重要。实际用的时候，直接复制就行，自己打也是很麻烦。

演示：

代码：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1" />
		<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" />
		<script type="application/javascript" src="../js/jquery-3.2.1.js"></script>
		<script type="application/javascript" src="../js/bootstrap.min.js"></script>
		<link href="../img/favicon.ico" rel="shortcut icon">	<!--浏览器小图标-->
		<title>轮播图</title>
	</head>
	
	<style>
		.title {
			text-align: center;
		}
		img{
			width: 5000px;
		}

	</style>
	
	<body>
		
		<div class="container" text-align="center">
			<div class="row">
				<div class="col-md-2">
					<div data-ride="carousel" data-interval="1000" id="carousel_container" class="carousel slide">
						<div class="carousel-inner">
							<div class="item"><img src="../img/3.jpg" style="object-fit: fill;"/></div>
							<div class="item"><img src="../img/4.jpg" style="object-fit: fill;"/></div>
							<div class="item active"><img src="../img/5.jpg" style="object-fit: fill;"/></div>
						</div>
						<ol class="carousel-indicators">
							<li data-slide-to="0" data-target="#carousel_container"></li>
							<li data-slide-to="1" data-target="#carousel_container"></li>
							<li data-slide-to="2" data-target="#carousel_container"></li>
						</ol>
						<a href="#carousel_container" data-slide="prev" class="left carousel-control">
							<span class="glyphicon glyphicon-chevron-left"></span>
						</a>
						<a href="#carousel_container" data-slide="next" class="right carousel-control">
							<span class="glyphicon glyphicon-chevron-right"></span>
						</a>
					</div>
				</div>
				<div class="col-md-10"></div>
			</div>
		</div>
		
	</body>

</html>

王雀跃
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
Bootstrap介绍和使用
qq_44757223的博客
04-13 898
Bootstrap简介、Bootstrap使用以及布局容器 Bootstrap栅格系统：列嵌套、列偏移、列排序以及响应式工具
bootstrap响应式工具使用详解
08-28
Bootstrap响应式工具使用详解 Bootstrap响应式工具是Bootstrap框架中的一种功能强大且灵活的工具，允许开发者根据不同的设备和屏幕尺寸来显示或隐藏页面的内容。该工具可以帮助开发者快速创建响应式的Web应用程序，...
bootstrap table使用总结
weixin_43704154的博客
05-21 1726
使用服务器端处理时，bootstrap-table的默认操作模式是简单地丢弃表中当前存在的任何数据，并向服务器发出请求以获取要显示的第一页数据。因此，您可以使用data-defer-url而不是data-url来指示bootstrap-table不发出初始请求，而是使用页面上已有的数据。依赖：tablednd v0.9，如果你想要你可以包含bootstrap-table-reorder-rows.css文件来使用默认的。1，$ 100，$ 2，$ 20而不是$ 1，$ 2，$ 20，$ 100。
Bootstrap框架最新V5 快速入门&直通
qingwan_91的博客
06-03 1321
一篇文章直通Bootstrap
bootstrap studio使用笔记
qq_45911550的博客
11-02 5614
一、基本操作 1、预览 2、调整位置和大小 3、复制操作 也可以在本页面进行复制，然后粘贴到其他页面，在左侧的overview处选择粘贴的位置，粘贴模式选择pasetd linked 4、拖拽式导入图片、html、js等 3、编辑生成的代码 双击custom code改变能够改变的代码 另外使用插件custom code编辑新增插入的内容 4、发送邮件 添加之后对此做出更改 5、设置输入框是否必填 6、通过邮箱发送文件 7、设置元素位置 ...
Bootstrap系列之布局工具
老__L的博客
05-24 455
布局工具
Bootstrap 工具提示插件
歪脖先生的博客
03-14 689
工具提示当鼠标移动到特定元素上时，显示相关的提示信息，比如给出链接说明或缩写词的全称等，是一个非常人性化的功能。HTML本身就支持这样的功能，只需给任何元素添加 title 属性，当鼠标悬停时，浏览器就会将 title 属性的值作为提示信息显示出来。由于原生的工具提示样式单调、功能单一，经常需要自己去开发相关的工具提示功能。鉴于此，Bootstrap提供了一个工具提示插件，它功能完善，使用简单、灵...
BootstrapTable使用教程
牧小七的博客
09-01 1603
文章目录1. 服务端分页功能 1. 服务端分页功能 sidePagination 属性: data-side-pagination 类型: String 细节: 定义表的侧面分页，只能是 ‘client’ 或 ‘server’。使用 ‘server’ 端需要设置 ‘url’ 或 ‘ajax’ 选项。 请注意，所需的服务器响应格式不同，具体取决于 ‘sidePagination’ 选项设置为 ‘client’ 还是 ‘server’。请参见以下示例： 使用客户端分页 使用服务端分页 默认: ‘client’
BootStrap简单使用
凌北辰的博客
03-24 3699
BootStrap一、介绍响应式布局二、Bootstrap环境配置布局容器三、栅格系统简述栅格特点屏幕尺寸设置列表格表单按钮按钮组图片导航进度条轮播图 一、介绍 ​ Bootstrap基于HTML、css、JavaScript的前端框架 ​ 此框架定义一套CSS样式和央视对应的JS代码。（对应的样式有对应的特效） ​ 开发人员只需要编写HTML架构，添加Bootstrap固定的class样式，就可以完成效果的实现 ​ 作用：Bootstrap使得web开发更加便捷，高效 ​ 支持响应式开发，
Bootstrap 4 简单使用
weixin_44554896的博客
01-18 775
开发工具与关键技术：Adobe Dreamweaver CC 2017 Bootstrap 4的使用 作者：孙水兵 撰写时间：2019年1月16 Bootstrap是当前世界主流的响应式、移动设备优先的门户和应用前端框架。使用它我们可以减少许多代码，并且让布局更加简单，完善。即使有一些布局不适合，我们也可以进行修改。 首先，我们应先下载Bootstrap 4 的离线版本（下载网址：中文网址：...
BootstrapTable使用实例
duansamve的博客
08-31 2820
一、bootstrapTable简单使用： <link rel="stylesheet" href="./static/libs/bootstrap/css/bootstrap.css"> <link rel="stylesheet" href="./static/libs/bootstrap-table-master/bootstrap-table.css"> &lt...
bootstrap工具
11-10
通过这个包含所有CSS和JS的Bootstrap工具包，开发者可以方便地将这些特性整合到自己的项目中。无论你是初学者还是经验丰富的开发者，Bootstrap都能提供一套强大而直观的工具，帮助你快速实现美观且功能丰富的网页...
bootstrap使用API
09-11
此工具可以帮助对bootstrap的初学者，其中包括一些下拉，按钮、菜单、图标、样式等的代码快，帮助开发者实现快速进行代码生成。 此工具可以帮助对bootstrap的初学者，其中包括一些下拉，按钮、菜单、图标、样式等的...
bootstrap使用
08-08
Bootstrap是世界上最受欢迎的前端开发框架，它为开发者提供了一套完整的、响应式的、移动优先的网页设计工具。这个框架由Twitter公司开发，并于2011年开源，目的是简化网页设计和开发流程，使得创建美观且功能丰富的...
Bootstrap CSS使用方法
08-31
以下是关于Bootstrap CSS使用方法的详细说明： 1. **简介**： Bootstrap 是一个开源的HTML、CSS和JavaScript框架，旨在加速开发美观且功能丰富的用户界面。它基于HTML5和CSS3，提供一系列预先设计的组件、布局工具...
【分享】前端程序员-技术网站推荐
一位前行者的博客
07-30 410
对于前端开发人员来说，以下是一些推荐的技术网站，这些网站提供了丰富的资源和知识，可以帮助你提升前端开发技能：收集一些 、、 的网站 vite 官方中文文档 element-plus 官方中文文档 pinia 官方中文文档 vue-router 官方中文文档 Tailwind CSS 官方文档 vitest 官方中文文档 es6 中文文档 axios 官方中文文档 vxetable 官方中文文档 lodash 中文文档 echarts 官方中文文档 animat
js、ts、argular、nodejs学习心得
最新发布
07-30 193
工作中需要前端argular开发桌面程序，后端用nodejs开发服务器，商用软件架构。
苍穹外卖浏览器前端界面修改
程序员象漂亮的博客
07-25 271
客户原始方案是期望做一个Spring Boot + Vue的饿了么系统，但时间上太仓促，所以建议选择开源的苍穹外码目作为作业提交。客户接受了建议的方案后，期望对前端页面提出了一些个性化的定制修改。
electron 主进程和渲染进程
qq_21087199的博客
07-29 264
虽然最近一年前端大环境不好，但是大家还是要加油鸭！，努力总不会错，千军万马过独木桥，希望大家都是闯过去那一个。进入正题。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

王雀跃

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值