BootStrap

最新推荐文章于 2022-12-05 11:40:29 发布

风~叶～草

最新推荐文章于 2022-12-05 11:40:29 发布

阅读量90

点赞数

本文链接：https://blog.csdn.net/qq_39544980/article/details/105738740

版权

BootStrap

一、概念

Bootstrap是基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。
优势：
	1.响应式布局
	2.提供了很多css样式和js插件

二、Bootstrap的资源引入

下载地址：https://v3.bootcss.com/

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>

三、响应式布局

概念：指的是同一个页面可以兼容不同分辨率的设备
实现：依赖于栅格系统，价格一行平均划分成了12列。
使用步骤：
	1.定义容器
		a.container：两边有空白
		b.container-fluid：100%宽度
	2.定义行
		row
	3.定义元素
		需要指定元素在不同设备上所占的列数，格式：col-代号-数量
		代号：
			xs：超小屏幕(<768px)
			sm：小屏幕(≥768px)
			md：中等屏幕(≥992px)
			lg：大屏幕(≥1200px)
注：超过12列的，超出部分会另起一行

四、CSS样式、组件、js插件

4.1 CSS样式

4.1.1 表格table

条纹状：table-striped
带边框的表格：table-bordered
鼠标悬停：table-hover

4.1.2 按钮btn

默认：btn-default
首选项：btn-primary
成功：btn-success
一般信息：btn-info
警告：btn-warning
危险：btn-danger
Link：btn-link

4.1.3 图片

圆角矩形：img-rounded
圆形：img-circle
圆角边框：img-thumbnail

4.2 组件

4.2.1 导航栏

<!DOCTYPE html>
<html>

	<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></title>
		<link href="css/bootstrap.min.css" rel="stylesheet">
		<script src="js/jquery-3.3.1.min.js"></script>
		<script src="js/bootstrap.min.js"></script>
		
		<style type="text/css">
			#av{
				height: 20px;
				background: white;
			}
			a{
				color: purple !important;
			}
		</style>
	</head>

	<body>
		<nav class="navbar navbar-default" id="av">
			<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">
				        <span class="sr-only">Toggle navigation</span>
				        <span class="icon-bar"></span>
				        <span class="icon-bar"></span>
				        <span class="icon-bar"></span>
				    </button>
					<a class="navbar-brand" href="#">千锋</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>

					</ul>
					<ul class="nav navbar-nav navbar-right">
						<li>
							<a href="#">其他</a>
						</li>
					</ul>
				</div>
			</div>
		</nav>
	</body>

</html>

4.2.2 分页条

<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></title>
	<link href="css/bootstrap.min.css" rel="stylesheet">
	<script src="js/jquery-3.3.1.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
</head>

<body>
	<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="#">11</a>
			</li>
			<li>
				<a href="#">12</a>
			</li>
			<li>
				<a href="#">13</a>
			</li>
			<li>
				<a href="#">14</a>
			</li>
			<li>
				<a href="#">15</a>
			</li>
			<li class="active">
				<a href="#">16</a>
			</li>
			<li>
				<a href="#" aria-label="Next">
					<span aria-hidden="true">&raquo;</span>
				</a>
			</li>
		</ul>
	</nav>

	<hr />

	<nav aria-label="...">
		<ul class="pager">
			<li>
				<a href="#">Previous</a>
			</li>
			<li>
				<a href="#">Next</a>
			</li>
		</ul>
	</nav>

	<hr />

	<nav aria-label="...">
		<ul class="pager">
			<li class="previous">
				<a href="#"><span aria-hidden="true">&larr;</span> Older</a>
			</li>
			<li class="next">
				<a href="#">Newer <span aria-hidden="true">&rarr;</span></a>
			</li>
		</ul>
	</nav>
</body>

### 4.3 js插件

4.3.1轮播图

<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></title>
	<link href="css/bootstrap.min.css" rel="stylesheet">
	<script src="js/jquery-3.3.1.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
</head>

<body>

	<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
		<!-- Indicators -->
		<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>
		</ol>

		<!-- Wrapper for slides -->
		<div class="carousel-inner" role="listbox">
			<div class="item active">
				<img src="img/5.jpg" alt="...">
				<div class="carousel-caption">
				</div>
			</div>
			<div class="item">
				<img src="img/6.jpg" alt="...">
				<div class="carousel-caption">
				</div>
			</div>
		</div>

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

</body>

风~叶～草

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
BootStrap

BootStrap一、概念Bootstrap是基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。优势： 1.响应式布局 2.提供了很多css样式和js插件二、Bootstrap的资源引入下载地址：https://v3.bootcss.com/<meta charset="utf-8"><meta h...
复制链接

扫一扫