Bootstrap框架
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: 左右按钮
- 前端框架Bootstrap - 快速搭建网站
- 前端框架—Bootstrap(一)
- Bootflat – 基于 Bootstrap CSS 框架的扁平化界面
- jsp采用bootstrap框架 tab页失效 解决方法
- AngularJs+bootstrap搭载前台框架——准备工作
- bootstrap前端框架使用modal弹出框form表单submit操作后解决页面提示不显示
- fh admin bootstrap 模版下载 框架 源码 SpringMVC mybatis or hibernate
- 整合django和bootstrap框架
- 前端美化框架bootstrap
- Bootstrap框架
- Adobe Edge Animate --异步条件加载框架(yepnop)之三:加载bootstrap之按钮、进度条、菜单效果
- 响应式框架Bootstrap
- 推荐一个优秀的前端框架——Bootstrap
- bootstrap后台框架源码 java图片爬虫 自定义表单
- springmvc mybatis(oracle 和 mysql) HTML5 全新高大尚后台框架 bootstrap
- springmvc整合mybatis框架源码 bootstrap html5 mysql oracle
- 基于Metronic的Bootstrap开发框架经验总结(1)-框架总览及菜单模块的处理
- 最火的前端开发框架Bootstrap使用教程
- 旺财速啃H5框架之Bootstrap(六)
- 前端框架--bootstrap开始