JavaWeb（3）之前段框架---BootStrap

最新推荐文章于 2022-04-22 12:01:05 发布

A.夕阳

最新推荐文章于 2022-04-22 12:01:05 发布

阅读量202

点赞数

分类专栏： JavaWeb 文章标签： javascript

本文链接：https://blog.csdn.net/qq_43581078/article/details/105512845

版权

JavaWeb 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

本文介绍了BootStrap，一个基于HTML、CSS、JavaScript的前端框架，详细讲解了其响应式布局、环境搭建、格栅系统、布局容器、响应式工具、列表、按钮、导航条等核心组件的使用，旨在帮助开发者快速高效地开发网页并适配多种设备。

摘要由CSDN通过智能技术生成

BootStrap

css样式文档
 组件文档
 JavaScript插件文档

什么是BootStrap？BootStrap的作用？

Bootstrap,基于HTML、CSS、 JAVASCRIPT 的前端框架。

该框架已经预定义了一套CSS样式和与样式对应的JS代码。(对应的样式有对应的特效)。

开发人员只需要编写HTML结构，添加bootstrap固定的class样式,就可以轻松完成指定效果的实现。

作用：

①Bootstrap使得Web开发更加快捷，高效。
②BootStrap支持响应式开发，解决了移动互联网前端开发问题。

什么是响应式开发布局？响应式布局解决的问题？

响应式布局:一个网站的展示能够兼容多个终端(手机、iPad. PC等)，而不需要为每个终端单独做一个展示版本。
此概念专为解决移动互联网浏览而诞生的。

响应式布局，使得网站仅适用一套样式,就可以在不同分辨率下展示出不同的舒适效果，大大降低了网站开发维护成本，并且能带给用户更好的体验性。

BootStrap环境搭建

下载资源

BootStrap下载地址
 详解
 jquery下载地址
 全局CSS样式手册

模板

<!DOCTYPE html>
<html lang="zh-CN"> <!-- 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">
    <!-- 上述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">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>你好，世界！</h1>

    <!-- 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>
  </body>
</html>

3个meta标签的作用：
< meta charset=“utf-8”> ：设置HTML页面的字符集 utf-8
< meta http-equiv=“X-UA-Compatible” content=“IE=edge”> ：使用IE最新的渲染模式，展示页面
< meta name=“viewport” content=“width=device-width, initial-scale=1”>：
只在移动标签上生效
在这里插入图片描述

布局容器

BootStrap必须需要至少一个布局容器，才能为页面内容进行封装和方便的样式控制。
相当于一个画板。

任意元素使用了布局容器的样式，都会成为-一个布局容器，建议使用div作为布局容器。
在这里插入图片描述
示例1：
container

<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>Bootstrap 101 Template</title>
		<link href="../css/bootstrap.min.css" rel="stylesheet">
		<script src="../js/jquery-3.4.1.min.js"></script>
		<script src="../js/bootstrap.min.js"></script>
	</head>
	<body>
		<div class="container" style="border: 1px solid red;">
			1111111111
		</div>
	</body>
</html>

结果：
居中，两端留白
在这里插入图片描述
示例2：

<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>Bootstrap 101 Template</title>
		<link href="../css/bootstrap.min.css" rel="stylesheet">
		<script src="../js/jquery-3.4.1.min.js"></script>
		<script src="../js/bootstrap.min.js"></script>
	</head>
	<body>
		<div class="container-fluid" style="border: 1px solid red;">
			1111111111
		</div>
	</body>
</html>

结果：
占据了视口的100%的宽度
在这里插入图片描述

格栅系统

简述格栅系统

栅格系统
为了方便在布局容器中进行网页的布局操作。

BootStrap提供了一套专门用于响应式开发布局的栅格系统。

栅格系统将一行分为12列，通过设定元素占用的列数来布局元素在页面上的展示位置。

在这里插入图片描述

作用：可以让开发人员更加轻松进行网页布局，并且轻松进行响应式开发。

栅格系统的特点及入门案例

栅格特点：

“行(row)”必须包含在 .container(固定宽度)或.container-fluid (100% 宽度) 中。
行使用的样式“.row",列使用样式“col- - ”元素内容应当放置于“列(column)”内。
基本的书写方式必须是:容器—行---列—内容

列元素的书写顺序，决定布局顺序，先写的列元素会被先布局到行上。

注意：

一个row下，如果设置的col列数总和小于等于12，那么该row下元素在一行排列;
一个row下，如果设置的col列数总和大于12,那么超出的元素会另起一行排列;。
行和列可以进行无限嵌套，嵌套方式必须为列—列---行…。

栅格参数:“col-屏幕尺寸占用列数”

示例：

<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>Bootstrap 101 Template</title>
		<link href="../css/bootstrap.min.css" rel="stylesheet">
		<script src="../js/jquery-3.4.1.min.js"></script>
		<script src="../js/bootstrap.min.js"></script>
	</head>
	<body>
		<!-- 定义一个布局容器 -->
		<div class="container">
			<!-- 在布局容器中，定义行 -->
			<div class="row">
				<!-- 在行山定义列 -->
				<div class="col-lg-2" style="border: 1px solid red;">
					1111
				</div>
				<div class="col-lg-4" style="border: 1px solid red;">
					2222
				</div>
				<div class="col-lg-6" style="border: 1px solid red;">
					3333
				</div>
			</div>
		</div>
	</body>
</html>

结果：
使用了container布局，1占用了2列，2占用了4列，3占用了6列
在这里插入图片描述

栅格屏幕尺寸设置

在这里插入图片描述
屏幕尺寸简介：
large:lg ------大屏幕，一般PC尺寸。
medium:md ------中等屏幕，小PC尺寸。
small: sm: sm ------小屏幕，iPad 尺寸。
x small: xs ------超小屏幕，智能手机尺寸。

示例：

<div class="col-lg-2" style="border: 1px solid red;">

设置屏幕尺寸时的注意事项

若设置了某个屏幕尺寸的样式，那么比该尺寸大的屏幕,会沿用该设置;比该尺寸小的屏幕，会默认一个元素占12列的设置。

例如:

设置了col-md-4,那么相当于也设置了col-lg-4。
其他屏幕尺寸均默认为col-sm-12,col-xs- 12

列偏移

列偏移
通常情况下我们需要将元素居中显示，需要左边空出一定的空白区域,这里我们就可以使用列偏移来达到效果。
在这里插入图片描述
示例：

<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>Bootstrap 101 Template</title>
		<link href="../css/bootstrap.min.css" rel="stylesheet">
		<script src="../js/jquery-3.4.1.min.js"></script>
		<script src="../js/bootstrap.min.js"></script>
	</head>
	<body>
		<!-- 定义一个布局容器 -->
		<div class="container">
			<!-- 在布局容器中，定义行 -->
			<div class="row">
				<!-- 在行山定义列 -->
				<div class="col-lg-2 col-lg-offset-5" style="border: 1px solid red;">
					1111
				</div>
				</div>
			</div>
		</div>
	</body>
</html>

运行结果：
向右偏移了5列
在这里插入图片描述

响应式工具

响应式工具
为针对性地在移动页面上展示和隐藏不同的内容，bootStrap 提供响应式工具。

可以让开发人员通过该工具决定，在何种屏幕尺寸下，隐藏或者显示某些元素。
在这里插入图片描述
示例：

<div class="col-lg-2 visible-lg" style="border: 1px solid red;">

列表

列表
BootStrap同样提供了实用的列表样式供开发人员使用。
在这里插入图片描述

示例：

	<body>
		<ul class="list-inline">
			<li>电脑</li>
			<li>家电</li>
			<li>化妆品</li>
		</ul>
	</body>

运行结果：
改变了html原生的无序列表格式
在这里插入图片描述

按钮

按钮
BootStrap提供了丰富的按钮样式供开发人员使用。

任何HTML元素加上以下样式都会变成对应按钮

按钮样式：
在这里插入图片描述
尺寸：

激活状态：

禁用状态：

导航条

导航条
BootStrap ,已经提供了完整的导航条实例，通常情况下，我们仅需进行简单修改即可使用。

模板：

<body>
		<!-- 导航条 -->
		<nav class="navbar navbar-default">
			<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">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="#">分类1 <span class="sr-only">(current)</span></a></li>
						<li><a href="#">分类2</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="#">Action</a></li>
								<li><a href="#">Another action</a></li>
								<li><a href="#">Something else here</a></li>
								<li role="separator" class="divider"></li>
								<li><a href="#">Separated link</a></li>
								<li role="separator" class="divider"></li>
								<li><a href="#">One more separated link</a></li>
							</ul>
						</li>
					</ul>
					<!-- 将left更改为right就会靠右 -->
					<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>
					<ul class="nav navbar-nav navbar-right">
						<li><a href="#">Link</a></li>
						<li class="dropdown">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown
								<span class="caret"></span></a>
							<ul class="dropdown-menu">
								<li><a href="#">Action</a></li>
								<li><a href="#">Another action</a></li>
								<li><a href="#">Something else here</a></li>
								<li role="separator" class="divider"></li>
								<li><a href="#">Separated link</a></li>
							</ul>
						</li>
					</ul>
				</div>
			</div>
		</nav>
	</body>

运行结果：
在这里插入图片描述
也可以将导航条改变颜色

轮播图

轮播图
BootStrap ,已经提供了完整的轮播图实例，通常情况下，我们仅需进行简单修改即可使用。
增加轮播图片，需要增加小圆点和图片。

轮播图div的定时换图属性:
data-interval=“毫秒值”
注意:多个轮播图必须修改轮播图的ID，对应的轮播图ID也要修改（小圆点和左右按钮）。

模板：

<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>Bootstrap 101 Template</title>
		<link href="../css/bootstrap.min.css" rel="stylesheet">
		<script src="../js/jquery-3.4.1.min.js"></script>
		<script src="../js/bootstrap.min.js"></script>
	</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>
			</ol>

			<!-- 轮播图，图片主体部分 -->
			<div class="carousel-inner" role="listbox">
				<!-- item active代表轮播显示的第一张图片 -->
				<div class="item active">
					<img src="图片地址" alt="替代图片文字">
					<div class="carousel-caption">
						图片说明信息
					</div>
				</div>
				<div class="item">
					<img src="图片地址" alt="替代图片文字">
					<div class="carousel-caption">
						图片说明信息
					</div>
				</div>
				<div class="item">
					<img src="图片地址" alt="替代图片文字">
					<div class="carousel-caption">
						图片说明信息
					</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>
	</body>
</html>

排版-对齐方式

排版-对齐方式
BootStrap提供统一的排版方式设置，方便开发人员对内容板式进行调整。
会将元素内所有内容都进行排版设置
在这里插入图片描述
常用的方法

表单元素

表单
BootStrap同样提供了丰富的表单控件供开发人员来选择。

改变表单的文本框大小，可以改变占用的栅格列数。
在这里插入图片描述

分页条

分页条
BootStrap为我们还准备了分页条的样式组件。

模板：

<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="#">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>
	</body>

A.夕阳

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaWeb（3）之前段框架---BootStrap

BootStrap什么是BootStrap？BootStrap的作用？Bootstrap,基于HTML、CSS、 JAVASCRIPT 的前端框架。该框架已经预定义了一套CSS样式和与样式对应的JS代码。(对应的样式有对应的特效)。开发人员只需要编写HTML结构，添加bootstrap固定的class样式,就可以轻松完成指定效果的实现。作用：①Bootstrap使得Web开发更加快捷...
复制链接

扫一扫

专栏目录