BootStrap
什么是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">«</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">»</span>
</a>
</li>
</ul>
</nav>
</body>