您的位置:首页 > Web前端 > BootStrap

Bootstrap框架

2019-08-15 15:46 1661 查看
版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。 本文链接:https://blog.csdn.net/Bulid_Evolto/article/details/99487617

Bootstrap框架的概述和优点

目标

bootstrap的作用

什么是Bootstrap

Bootstrap一个前端的框架,提高前端的开发效率,制作出更加专业,漂亮的页面。基于html、css、js技术。

bootstrap中文官网:http://www.bootcss.com

Bootstrap的优势

  1. 自Bootstrap3起,框架包含了贯穿于整个库的移动设备优先的样式。能够自适应于台式机、平板电脑和手机
  2. Bootstrap支持所有的主流浏览器。如:Internet Explorer、 Firefox、 Opera、 Google Chrome、Safari。
  3. 只要具备 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包含的内容

  1. 设置全局 CSS 样式;基本的 HTML 元素均可以通过 class 设置样式并得到增强效果;还有先进的栅格系统。

  2. 组件:无数可复用的组件,包括字体图标、下拉菜单、导航、警告框、弹出框等更多功能。

  3. JavaScript插件:jQuery 插件为 Bootstrap 的组件赋予了“生命”。可以简单地一次性引入所有插件,或者逐个引入到你的页面中。

目录结构

压缩版与标准版的介绍

功能上是一样的

  • 标准版:代码可读性比较好,通常用于开发。
  • 压缩版:文件小,通常用于工作环境。

小结

说说bootstrap中这几个目录的作用?

  1. css:存放Bootstrap提供的CSS样式
  2. fonts:存放Bootstrap提供的字体
  3. js:存放Bootstrap提供的JS代码

创建Bootstrap的模板(重点)

目标

学习创建bootstrap的模板

步骤

  1. 复制解压出来的三个文件夹到项目中:css,js, fonts
  2. 复制jquery框架:jquery-3.2.1.min.js复制到js目录下
  3. 复制文档中的:"起步->基本模板"中代码到网页,修改网页的内容

此模板文件只要创建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模板的步骤有哪几步?

  1. 复制bottstrap的css,js,fonts文件到到模块下
  2. 复制jquery-3.2.1.min.js到js文件夹下
  3. 复制文档中起步->基本模板的代码到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

小结

  1. 说出栅格系统的两种容器?

    container: 固定宽度容器

    container-fluid: 100%宽度的容器

  2. 一行的类名?

    row

  3. 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>

小结

  1. 按钮使用哪个类:btn
  2. 标准按钮使用哪个类:btn-default
  3. 成功按钮使用哪个类: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>

小结

  1. form-control的特点:可以让,input, textarea, select 元素和父控件100%宽

  2. 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>

小结

  1. 字体图标使用什么标签显示?

    span

  2. 每个图标下的文字是什么意思?

    就是这个图标的类样式

组件:导航条

目标

查询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>

小结

缩略图有哪两种?

  1. 简单的只有图片, 复制,修改图片的地址

  2. 自定义的,除了图片还有文字, 复制, 修改图片地址,修改内容

组件:分页组件

目标

查询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>

小结

轮播图三个组成部分:

  1. carousel-indicators: 小圆圈,指示器
  2. carousel-inner: 存放要轮流显示的图片
  3. carousel-control: 左右按钮
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: