BootStrap工具使用

朱雀 2023-10-07 20:56 81阅读 0赞

boorstrap是什么？

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

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

--------------------

bootstrap需要引用才能使用。

[提取码：1234][1234]

下载解压完如下。

![17af93f6675f45cf82f0019205f913a9.png][]

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

如图

![3509d8ae1ea94c3d90e4d8321ea36f26.png][]

--------------------

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

如图

![2e3400745a274824b3fe6323f4499705.png][]

下面开始正式使用

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

--------------------

## 十二栅格 ##

理解：

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

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

演示：

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

![ab08d52240b94e31954cf49201982309.png][]

代码：

<!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 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>
    		
    		<p>1、默认十二栅格</p>
    		<div class="container">	
    			<div class="row">	
    				   <div class="col-md-2">A1</div>	
    			   	   <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>
    		
    		
    		<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">
    				
    				<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">
    				
    				<div class="col-md-1 col-md-push-3">占1格</div>
    				
    				<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会更好看更方便。

演示：

![703b7bf6a6e64424843c570fc8b41d1e.png][]

代码：

<!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">
    		
    		
    		<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>
    		
    		
    		<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>
    		
    		
    		<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>
    		
    		
    		<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>
    		
    		
    		<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>
    		
    		
    		<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输入框组成的。

演示：

![529032dd3e9a4928b289bd0732e8b867.png][]

代码：

--------------------

## 按钮 ##

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

演示1：

![73b5985a5ad4486bada371d32fe8344b.png][]

代码1：

演示2：

![db7772102277489fb24e8e0e521ef021.png][]

代码2：

--------------------

## 图片 ##

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

演示：

![7303395b85d5483d9d24f9afdadf2a53.png][]

代码：

--------------------

## 导航 ##

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

演示：

![cd0f632e22d243f99cba584b116a289d.png][]

代码：

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

--------------------

## 进度条 ##

理解：用处不大。

演示：

![21b18d4c54d84e79877ec7cb2948748a.png][]

代码：

--------------------

## 轮播图 ##

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

演示：

![e3bb9db7d19442b1a2e74d5ae0d74564.png][]

代码：

--------------------

[1234]: https://pan.baidu.com/s/1CzrK8iSkVvBRhRmcI-WG5A
[17af93f6675f45cf82f0019205f913a9.png]: https://img-blog.csdnimg.cn/17af93f6675f45cf82f0019205f913a9.png
[3509d8ae1ea94c3d90e4d8321ea36f26.png]: https://img-blog.csdnimg.cn/3509d8ae1ea94c3d90e4d8321ea36f26.png
[2e3400745a274824b3fe6323f4499705.png]: https://img-blog.csdnimg.cn/2e3400745a274824b3fe6323f4499705.png
[ab08d52240b94e31954cf49201982309.png]: https://img-blog.csdnimg.cn/ab08d52240b94e31954cf49201982309.png
[703b7bf6a6e64424843c570fc8b41d1e.png]: https://img-blog.csdnimg.cn/703b7bf6a6e64424843c570fc8b41d1e.png
[529032dd3e9a4928b289bd0732e8b867.png]: https://img-blog.csdnimg.cn/529032dd3e9a4928b289bd0732e8b867.png
[73b5985a5ad4486bada371d32fe8344b.png]: https://img-blog.csdnimg.cn/73b5985a5ad4486bada371d32fe8344b.png
[db7772102277489fb24e8e0e521ef021.png]: https://img-blog.csdnimg.cn/db7772102277489fb24e8e0e521ef021.png
[7303395b85d5483d9d24f9afdadf2a53.png]: https://img-blog.csdnimg.cn/7303395b85d5483d9d24f9afdadf2a53.png
[cd0f632e22d243f99cba584b116a289d.png]: https://img-blog.csdnimg.cn/cd0f632e22d243f99cba584b116a289d.png
[21b18d4c54d84e79877ec7cb2948748a.png]: https://img-blog.csdnimg.cn/21b18d4c54d84e79877ec7cb2948748a.png
[e3bb9db7d19442b1a2e74d5ae0d74564.png]: https://img-blog.csdnimg.cn/e3bb9db7d19442b1a2e74d5ae0d74564.png