Bootstrap框架的概述和优点
目标
bootstrap的作用
什么是Bootstrap
Bootstrap一个前端的框架,提高前端的开发效率,制作出更加专业,漂亮的页面。基于html、css、js技术。
bootstrap中文官网:http://www.bootcss.com
Bootstrap的优势
- 自Bootstrap3起,框架包含了贯穿于整个库的移动设备优先的样式。能够自适应于台式机、平板电脑和手机。
- Bootstrap支持所有的主流浏览器。如:Internet Explorer、 Firefox、 Opera、 Google Chrome、Safari。
- 只要具备 HTML 和 CSS 的基础知识,就可以开始学习 Bootstrap。
小结
bootstrap是什么?
前端开发框架,提高前端的开发效率,界面效果美观
什么是响应式设计(重点)
目标
了解什么是响应式设计
传统的网页
电脑上和手机上看到的是不同的页面
电脑上效果
https://www.taobao.com/
手机上效果
https://h5.m.taobao.com/
响应式设计网页
电脑和手机看到的是同一个页面,根据屏幕尺寸不同,网页自动有不同布局
https://www.apple.com/cn/
电脑上效果
手机上效果
响应式布局特点
同一个网页在不同的屏幕上,会自动适应,拥有不同的布局.
小结
说出响应式布局特点?
同一个网页在不同的屏幕上,会自动适应,拥有不同的布局.
Bootstrap的下载和介绍
目标
学习Bootstrap的下载和介绍
下载
http://www.bootcss.com,下载用于生产环境的Bootstrap
Bootstrap包含的内容
-
设置全局 CSS 样式;基本的 HTML 元素均可以通过 class 设置样式并得到增强效果;还有先进的栅格系统。
-
组件:无数可复用的组件,包括字体图标、下拉菜单、导航、警告框、弹出框等更多功能。
-
JavaScript插件:jQuery 插件为 Bootstrap 的组件赋予了“生命”。可以简单地一次性引入所有插件,或者逐个引入到你的页面中。
目录结构
压缩版与标准版的介绍
功能上是一样的
- 标准版:代码可读性比较好,通常用于开发。
- 压缩版:文件小,通常用于工作环境。
小结
说说bootstrap中这几个目录的作用?
- css:存放Bootstrap提供的CSS样式
- fonts:存放Bootstrap提供的字体
- js:存放Bootstrap提供的JS代码
创建Bootstrap的模板(重点)
目标
学习创建bootstrap的模板
步骤
- 复制解压出来的三个文件夹到项目中:css,js, fonts
- 复制jquery框架:jquery-3.2.1.min.js复制到js目录下
- 复制文档中的:"起步->基本模板"中代码到网页,修改网页的内容
此模板文件只要创建1次即可,以后可以重用
离线文档位置:day23\source\Bootstrap离线文档\v3.bootcss.com\index.htm
模板的代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<!-- 对IE浏览器的兼容-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 设置视口参数,视口就是浏览器的显示区域,让视口宽度等于屏幕宽度,缩放比例为1-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
<title>Bootstrap模板</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边) -->
<script src="js/jquery-3.2.1.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="js/bootstrap.min.js"></script>
</head>
<body>
</body>
</html>
小结
创建bootstrap模板的步骤有哪几步?
- 复制bottstrap的css,js,fonts文件到到模块下
- 复制jquery-3.2.1.min.js到js文件夹下
- 复制文档中起步->基本模板的代码到html网页中,修改网络地址位本地地址
栅格系统的介绍
目标
学习Bootstrap的栅格系统和两种布局的容器
栅格系统的介绍
表格
<table>
<tr bgcolor="gray">
<td>姓名</th>
<td>电话</th>
<td>地址</th>
</tr>
</table>
Bootstrap提供了一套响应式、移动设备优先的流式栅格系统
栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局,一行会自动分为最多12格。你的内容就可以放入这些创建好的布局中。
Bootstrap 栅格系统的工作原理
<div class="container">
<div class="row">
<div class="col-md-4">
1列占4格子
</div>
<div class="col-md-4">
1列占4格子
</div>
<div class="col-md-4">
1列占4格子
</div>
</div>
</div>
栅格的参数
超小屏幕 手机 (<768px) | 小屏幕 平板 (≥768px) | 中等屏幕 (≥992px) | 大屏幕 (≥1200px) | |
---|---|---|---|---|
类前缀 | .col-xs- | .col-sm- | .col-md- | .col-lg- |
两种容器
两种容器的类样式名 | 说明 |
---|---|
container | 具有固定宽度的容器 |
container-fluid | 具有100%宽度的容器 |
案例效果
代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<!--对IE浏览器的兼容-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--设置视口参数,视口就是浏览器的显示区域,让视口宽度等于屏幕宽度,缩放比例为1-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
<title>Bootstrap两种容器</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边) -->
<script src="js/jquery-3.2.1.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="js/bootstrap.min.js"></script>
<style>
div {
border: 1px solid red;
height: 100px;
}
</style>
</head>
<body>
<div class="container">
container 固定宽度的容器
</div>
<div class="container-fluid">
container-fluid 100%宽度
</div>
</body>
</html>
设备查询@media
通过不同的设备类型和条件定义样式表规则。设备查询让CSS可以更精确作用于不同的设备类型和同一设备的不同条件。设备查询的大部分特性都接受min和max用于表达“大于或等于”和“小于或等于”。打开文件:bootstrap.css,可以看到以下代码:
.container {
padding-right: 15px; 右内边距
padding-left: 15px; 左内边距
margin-right: auto; 居中
margin-left: auto;
}
@media (min-width: 768px) { 如果设备大于等于768,容器的宽度是750
.container {
width: 750px;
}
}
@media (min-width: 992px) {
.container {
width: 970px;
}
}
@media (min-width: 1200px) {
.container {
width: 1170px;
}
}
- 结论:所以容器container可以随着设备的宽度发生变化
栅格系统有关的类样式名
栅格系统 | 描述 | 类似于表格 |
---|---|---|
.container | 固定宽度容器 | table |
.container-fluid | 100%宽度的容器 | table |
.row | 表示1行,1行最多12格 | tr |
.col-xx-n xx | 表示1列,1列可以占多格 .col-sm-3 在小屏幕上这1列占3格 .col-lg-6 在大屏幕上这1列占6格 | td |
小结
-
说出栅格系统的两种容器?
container: 固定宽度容器
container-fluid: 100%宽度的容器
-
一行的类名?
row
-
col-md-4表示什么意思?
这列在中等屏幕上占4个格子
演示:栅格系统的布局案例
目标
通过4个案例学习栅格系统的布局
示例1:基本结构,一列四个格子
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<!--设置网页编码为utf-8-->
<meta charset="utf-8">
<!--兼容ie-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--视口,虚拟的界面,适应手机-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
<title>基本布局</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!--注意一定要先引入jQuery后引入bootstrap-->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-3.2.1.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<style>
.row div {
border: 1px solid red;
height: 100px;
}
</style>
</head>
<body>
<h1>基本布局</h1>
<div class="container">
<!--一行-->
<div class="row">
<!--一列-->
<div class="col-md-4">
一列四个格子
</div>
<div class="col-md-4">
一列四个格子
</div>
<div class="col-md-4">
一列四个格子
</div>
</div>
<!--一行-->
<div class="row">
<!--一列-->
<div class="col-md-4">
一列四个格子
</div>
<div class="col-md-4">
一列四个格子
</div>
<div class="col-md-4">
一列四个格子
</div>
</div>
</div>
</body>
</html>
示例2:一行超过12格
如果一行超出了12格,多出的格子会放在下面
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<!--对IE浏览器的兼容-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--设置视口参数,视口就是浏览器的显示区域,让视口宽度等于屏幕宽度,缩放比例为1-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
<title>Bootstrap栅格系统</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边) -->
<script src="js/jquery-3.2.1.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="js/bootstrap.min.js"></script>
<style>
.row div {
border: 1px solid red;
height: 100px;
}
</style>
</head>
<body>
<!--容器-->
<div class="container">
<!--表示1行-->
<div class="row">
<div class="col-md-4">
1列占4格子
</div>
<div class="col-md-4">
1列占4格子
</div>
<div class="col-md-4">
1列占4格子
</div>
<div class="col-md-4">
1列占4格子
</div>
<div class="col-md-4">
1列占4格子
</div>
</div>
</div>
</body>
</html>
示例3:不同屏幕的适配
不同的设备上显示不同数量的列:中等屏幕占3格,小屏幕占4格,超小屏幕占6格
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<!--对IE浏览器的兼容-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--设置视口参数,视口就是浏览器的显示区域,让视口宽度等于屏幕宽度,缩放比例为1-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
<title>Bootstrap栅格系统</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边) -->
<script src="js/jquery-3.2.1.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="js/bootstrap.min.js"></script>
<style>
.row div {
border: 1px solid red;
height: 100px;
}
</style>
</head>
<body>
<!--容器-->
<div class="container">
<!--表示1行-->
<div class="col-xs-6 col-sm-4 col-md-3">
超小屏幕占6格,小屏幕占4格,中等屏幕占3格
</div>
<div class="col-xs-6 col-sm-4 col-md-3">
</div>
<div class="col-xs-6 col-sm-4 col-md-3">
</div>
<div class="col-xs-6 col-sm-4 col-md-3">
</div>
<div class="col-xs-6 col-sm-4 col-md-3">
</div>
<div class="col-xs-6 col-sm-4 col-md-3">
</div>
</div>
</body>
</html>
示例4:显示和隐藏块
可以让某些列在指定的设备上显示或隐藏
在大屏幕上显示,在超小屏幕上隐藏
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<!--设置网页编码为utf-8-->
<meta charset="utf-8">
<!--兼容ie-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--视口,虚拟的界面,适应手机-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
<title>基本布局</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!--注意一定要先引入jQuery后引入bootstrap-->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-3.2.1.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<style>
.row div {
border: 1px solid red;
height: 100px;
}
</style>
</head>
<body>
<h1>在大屏幕上显示,在超小屏幕上隐藏</h1>
<div class="container">
<!--一行-->
<div class="row">
<!--列-->
<div class="col-md-4 visible-lg">
一列占4个格子
在大屏幕上显示
</div>
<div class="col-md-4">
一列占4个格子
</div>
<div class="col-md-4 hidden-xs">
一列占4个格子
在超小屏幕上隐藏
</div>
</div>
</div>
</body>
</html>
小结
类样式名 | 作用 |
---|---|
.row | 表示一行 |
.col-xs-n | 表示这列在超小屏幕上占n个格子 |
.col-sm-n | 表示这列在小屏幕上占n个格子 |
.col-md-n | 表示这列在中等屏幕上占n个格子 |
.col-lg-n | 表示这列在大屏幕上占n个格子 |
.hidden-lg/md/sm/xs | 在某些屏幕上隐藏 |
.visible-lg/md/sm/xs | 在某些屏幕上显示 |
全局CSS样式:按钮
目标
学习使用Bootstrap中的按钮样式
效果
代码
<div class="container">
<h2>按钮</h2>
<input type="button" value="普通按钮" class="btn btn-default">
<button type="submit" class="btn btn-default">提交按钮</button>
<a href="#" class="btn btn-default">我是链接</a>
<h2>预定义按钮</h2>
<input type="button" value="蓝色按钮" class="btn btn-primary">
<input type="button" value="红色按钮" class="btn btn-danger">
<input type="button" value="绿色按钮" class="btn btn-success">
</div>
小结
- 按钮使用哪个类:btn
- 标准按钮使用哪个类:btn-default
- 成功按钮使用哪个类:btn-success
全局CSS样式:图片
目标
学习Bootstrap响应式图片的使用
响应式图片
通过为图片添加.img-responsive
类可以让图片支持响应式布局。其实质是为图片设置了 max-width: 100%;、height: auto; 和 display: block; 属性,从而让图片在其父元素中更好的缩放。
图片形状
图⽚片形状 | 类样式名 |
---|---|
圆⻆角 | img-rounded |
圆或椭圆 | img-circle |
有边框 | img-thumbnail |
效果
代码
<h2>图片</h2>
<!--响应式图片-->
<img src="img/08.jpg" class="img-responsive">
<hr/>
<!--圆角-->
<img src="img/01.jpg" class="img-responsive img-rounded">
<!--圆或椭圆-->
<img src="img/02.jpg" class="img-responsive img-circle">
<!--有边框-->
<img src="img/03.jpg" class="img-responsive img-thumbnail">
小结
响应式图片设置哪个类名?
img-responsive: 占父控件100%大小,随着父控件缩放。
全局CSS样式:表单
目标
使用表单样式制作如图效果
表单
样式名 | 作用 |
---|---|
form-control | 、、 元素都将被默认设置宽度:width: 100%; |
form-group | 将label元素和前面提到的控件包裹在一行中进行分组 |
代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<!--对IE浏览器的兼容-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--设置视口参数,视口就是浏览器的显示区域,让视口宽度等于屏幕宽度,缩放比例为1-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
<title>BootstrapFORM表单</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边) -->
<script src="js/jquery-3.2.1.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>添加联系人</h2>
<form style="width: 500px">
<!--.form-control 类的 <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;-->
<!--一组中包含label和input-->
<div class="form-group">
<label for="user">姓名:</label>
<input type="text" id="user" class="form-control" placeholder="请输入姓名">
</div>
<div class="form-group">
<label>性别:</label>
<input type="radio" id="male" value="male" name="gender" checked="checked"/>
<label for="male">男</label>
<input type="radio" id="female" value="female" name="gender"/>
<label for="female">女</label>
</div>
<div class="form-group">
<label for="birthday">生日:</label>
<input type="date" class="form-control" id="birthday"/>
</div>
<div class="form-group">
<label for="edu">学历:</label>
<select id="edu" class="form-control">
<option>本科</option>
<option>研究生</option>
</select>
</div>
<div class="form-group text-center">
<input type="button" class="btn btn-primary" value="注册"/>
<input type="button" class="btn btn-success" value="取消"/>
<input type="button" class="btn btn-warning" value="退出"/>
</div>
</form>
</div>
</body>
</html>
小结
-
form-control的特点:可以让,input, textarea, select 元素和父控件100%宽
-
form-group有什么用:表示一组,和其他组之间间距大一些
全局CSS样式:表格
目标
使用表格制作如图效果
表格的类样式
不同行的颜色
代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<!--对IE浏览器的兼容-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--设置视口参数,视口就是浏览器的显示区域,让视口宽度等于屏幕宽度,缩放比例为1-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
<title>Bootstrap表格</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边) -->
<script src="js/jquery-3.2.1.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h3>七龙珠人物</h3>
<table class="table table-striped table-bordered table-hover">
<tr class="success">
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>电话</th>
</tr>
<tr>
<td>1302</td>
<td>贝吉塔</td>
<td>男</td>
<td>19509869504</td>
</tr>
<tr>
<td>5940</td>
<td class="danger">孙悟空</td>
<td>男</td>
<td>13938475687</td>
</tr>
<tr>
<td>6841</td>
<td class="warning">龟仙人</td>
<td>男</td>
<td>18501029504</td>
</tr>
</table>
</div>
</body>
</html>
小结
bootstrap中表格有哪些类样式?
table: 每行之间有一根水平分割线。这个表格是父控件的100%宽度
table-striped: 隔行变灰色
table-bordered: 表格添加外边框和内边框
table-hover: 鼠标以上变灰色
组件:字体图标
目标
中国
A
代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<!--对IE浏览器的兼容-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--设置视口参数,视口就是浏览器的显示区域,让视口宽度等于屏幕宽度,缩放比例为1-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
<title>Bootstrap字体图标</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边) -->
<script src="js/jquery-3.2.1.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>字体图标</h2>
<!--字体图标使用span标签配上class显示,字体图标就是文字,可以设置字体-->
<span class="glyphicon glyphicon-star" style="font-size: 30px; color: red"></span>五角星
<span class="glyphicon glyphicon-zoom-in" style="font-size: 30px; color: blue"></span>放大镜
<span class="glyphicon glyphicon-trash" style="font-size: 30px; color: green"></span>回收站
</div>
</body>
</html>
小结
-
字体图标使用什么标签显示?
span
-
每个图标下的文字是什么意思?
就是这个图标的类样式
组件:导航条
目标
查询Bootstrap文档做出如下图所示的导航条
大屏幕
小屏幕
导航条
https://www.apple.com/cn/
什么是导航条:导航条是在您的应用或网站中作为导航页头的响应式基础组件。它们在移动设备上可以折叠(并且可开可关),且在视口(viewport)宽度增加时逐渐变为水平展开模式。
组成
整个导航条就是一个nav标签,nav与div功能相同,它是一个语义标签。
属性说明
代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<!--对IE浏览器的兼容-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--设置视口参数,视口就是浏览器的显示区域,让视口宽度等于屏幕宽度,缩放比例为1-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
<title>Bootstrap导航条</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边) -->
<script src="js/jquery-3.2.1.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="js/bootstrap.min.js"></script>
</head>
<div class="container">
<!--nav功能与div完全一样,只是语义区别 -->
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- 1. 左边商标 -->
<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>
</button>
<!--左边的商标-->
<a class="navbar-brand" href="#"><span class="glyphicon glyphicon-globe"></span>黑马旅游</a>
</div>
<!-- 2.链接,提交按钮,下拉菜单 -->
<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>
<li><a href="#">港澳游</a></li>
<li><a href="#">境外游</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>
<!--表单,提交按钮和文本框-->
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" class="form-control" placeholder="请输入">
</div>
<button type="button" class="btn btn-default">搜索</button>
</form>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div>
</body>
</html>
小结
导航条的作用是什么?
方便网页跳转到其他网页。
复制修改即可
组件:缩略图
目标
查询Bootstrap文档使用缩略图
缩略图介绍
通过缩略图组件扩展 Bootstrap的栅格系统,可以很容易地展示栅格样式的图像、视频、文本等内容。
缩略图的类样式
标准缩略图
自定义缩略图
代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<!--设置字符集-->
<meta charset="utf-8">
<!--告诉浏览器使用H5的内核去解析-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--
设置视口:在浏览器中虚拟容器,可以在不同的设备上自适应的
网页宽度:等于设备宽度
初始缩放比:1
-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
<title>Bootstrap 101 Template</title>
<!-- 1. 修改bootstrap.css文件 -->
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<h2>缩略图</h2>
<div class="row">
<div class="col-xs-6 col-md-3">
<!--缩略图-->
<a href="#" class="thumbnail">
<img src="img/03.jpg">
</a>
</div>
<div class="col-xs-6 col-md-3">
<!--缩略图-->
<a href="#" class="thumbnail">
<img src="img/04.jpg">
</a>
</div>
<div class="col-xs-6 col-md-3">
<!--缩略图-->
<a href="#" class="thumbnail">
<img src="img/05.jpg">
</a>
</div>
<div class="col-xs-6 col-md-3">
<!--缩略图-->
<a href="#" class="thumbnail">
<img src="img/06.jpg">
</a>
</div>
</div>
<div class="row">
<div class="col-sm-6 col-md-4">
<!--缩略图-->
<div class="thumbnail">
<img src="img/07.jpg">
<div class="caption">
<h3>海南双飞四天游</h3>
<p>一天到晚游泳的鱼</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a>
<a href="#" class="btn btn-default" role="button">Button</a></p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<!--缩略图-->
<div class="thumbnail">
<img src="img/07.jpg">
<div class="caption">
<h3>海南双飞四天游</h3>
<p>一天到晚游泳的鱼</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a>
<a href="#" class="btn btn-default" role="button">Button</a></p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<!--缩略图-->
<div class="thumbnail">
<img src="img/07.jpg">
<div class="caption">
<h3>海南双飞四天游</h3>
<p>一天到晚游泳的鱼</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a>
<a href="#" class="btn btn-default" role="button">Button</a></p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<!--缩略图-->
<div class="thumbnail">
<img src="img/07.jpg">
<div class="caption">
<h3>海南双飞四天游</h3>
<p>一天到晚游泳的鱼</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a>
<a href="#" class="btn btn-default" role="button">Button</a></p>
</div>
</div>
</div>
</div>
</div>
<!-- 2. 导入jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边) -->
<script src="js/jquery-3.2.1.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
小结
缩略图有哪两种?
-
简单的只有图片, 复制,修改图片的地址
-
自定义的,除了图片还有文字, 复制, 修改图片地址,修改内容
组件:分页组件
目标
查询Bootstrap学习分页组件
作用:为您的网站或应用提供带有展示页码的分页组件。
小结
分页组件,复制,修改页数和左右按钮
JavaScript插件:模态框
目标
查询Bootstrap学习JavaScript插件:模态框
模态框概念
模态框(Modal)是覆盖在父窗体上的子窗体,是一个经常使用的组件。通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动,一般用于提示信息,确认信息,表单,登录,注册等内容。模态框弹出时其他页面元素不可被选中。
相关属性
模态框案例
点击下面按钮,以模态框形式弹出下面添加联系人表单
data-target="#myModal": 呼出指定id的模态框
小结
模态框的类样式是?.modal
按钮呼出模态框:
data-target="#myModal"呼出指定id的模态框
JavaScript插件:轮播图
目标
查询Bootstrap文档创建轮播图
轮播图介绍
Bootstrap的Javascript插件必须要使用到jQuery框架
这个组件用于轮播显示一组图片,类似于旋转木马,页面加载就自动运行,也可以通过点击左右的两个箭头向左或向右翻页。
类样式名
相关的属性
代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<!--对IE浏览器的兼容-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--设置视口参数,视口就是浏览器的显示区域,让视口宽度等于屏幕宽度,缩放比例为1-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
<title>Bootstrap模板</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边) -->
<script src="js/jquery-3.2.1.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<h3>轮播图</h3>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="1000" style="width: 60%; margin: auto">
<!-- 指示器,下边中间的小圆点 -->
<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>
<li data-target="#carousel-example-generic" data-slide-to="3"></li>
</ol>
<!-- 轮播器的图片 -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img/01.jpg" alt="...">
<div class="carousel-caption">
第一张
</div>
</div>
<div class="item">
<img src="img/02.jpg" alt="...">
<div class="carousel-caption">
第二张
</div>
</div>
<div class="item">
<img src="img/03.jpg" alt="...">
<div class="carousel-caption">
第三张
</div>
</div>
<div class="item">
<img src="img/04.jpg" 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>
小结
轮播图三个组成部分:
- carousel-indicators: 小圆圈,指示器
- carousel-inner: 存放要轮流显示的图片
- carousel-control: 左右按钮