1. 响应式设计
1.1 什么是响应式设计
1.2 为什么需要响应式设计
用户使用的设备尺寸
不同 用户使用的屏幕分辨率
不同 用户使用的浏览器
不同
1.3 响应式设计常见技术
2. 媒体查询
2.1 什么是媒体查询指令
媒体查询由媒体类型
和一个或多个检测媒体特性
的条件表达式组成 媒体查询让样式表有更强的针对性
,扩展了媒体类型的功能 响应式设计必须依靠媒体查询
,才能识别设备的特性
,从而进行特定的样式设置
2.2 媒体查询指令原理
2.3 媒体查询指令语法
引用
可以在内部样式表
中直接应用
也可以写在外部样式表
中,通过link导入
语法
@media [not , only ] 设备类型 and ( 设备特性) P{
CSS 样式代码
}
2.4 设备类型
设备名称 描述 Screen
显示屏幕
Print 打印机 Speech 语音合成器 all 适用于全部设备
@media print { body { font-size : 10pt } }
@media screen { body { font-size : 13px } }
@media screen, print { body { line-height : 16px } }
2.5 设备特性
@media screen and ( min-width : 600px) and ( max-width : 1024px) {
CSS样式声明
}
2.6 视口问题
2.6.1 PC端视口
视口(viewport)
在桌面浏览器
中,等于浏览器窗口
视口中的像素指CSS像素
,视口大小决定页面布局的可用宽度
2.6.2 移动端视口
移动设备如果同样以浏览器(即设备屏幕)窗口作为视口
,那已有的960像素宽的页面布局就会只显示移动设备屏幕宽度
为此,移动浏览器定义了两个视口
大多数移动浏览器默认把布局视口的宽度
设为:980px (IE10
默认设定为1024px)
尽可能放大可见视口
,以便在屏幕中显示完整的网站 布局视口宽度保持不变
2.6.3 针对移动端视口的设置
特性名称 描述 width 视口宽度 height 视口高度 Initial-scale 初始缩放比例 minimum-scale 允许缩放到的最小比例 maximum-scale 允许缩放到的最大比例 User-scalable 用户是否可以手动缩放
< meta name = " viewport" content = " 参数设置" >
< meta name = " viewport" content = " width=device-width, initial-scale=1.0" >
2.7 布局案例
< style>
* { margin : 0; padding : 0; }
#header {
height : 80px;
background-color : #ccc;
}
#left,#main,#right {
float : left;
height : 500px;
}
#left {
width : 20%;
background-color : #ff0;
}
#main {
width : 60%;
background-color : #0f0;
}
#right {
width : 20%;
background-color : #0ff;
}
#footer {
clear : both;
height : 60px;
background-color : #333;
color : #eee;
}
@media screen and ( min-width : 640px) and ( max-width : 1000px) {
#right {
display : none;
}
#main {
width : 80%;
}
}
@media screen and ( max-width : 640px) {
#left,#main,#right { float : none; width : 100%; }
}
</ style>
</ head>
< body>
< div id = " header" > Header</ div>
< div id = " left" > Left</ div>
< div id = " main" > Main</ div>
< div id = " right" > Right</ div>
< div id = " footer" > Fotter</ div>
</ body>
3. 认识 BootStrap
简单介绍
bootstrap 是当下非常经典且流行的前端框架(界面工具集
) 由twitter
的两位工程师2010年创建 bootstrap 的特点
官网
GitHub
4. BootStrap 框架概述
4.1 使用原因
BootStrap 提供了前后端(包括移动端)
需要的界面工具集合,能够让开发者快速搭建
出美观的,可适配
的前端界面 生态圈火
,不断的更新换代
并且基于 bootstrap 衍生出来了很多其他前端框架 使用 Bootstrap 并不代表不用写 CSS样式,JS代码,而是不用写所有通用的代码
4.2 技术特性
预定义
样式表提供完整的css组件
丰富的基于jQuery的js插件
响应式的栅格布局
授权协议宽松(MIT协议
) 支持移动平台
5. 开始使用 BootStrap
5.1 下载安装
下载安装
BootStrap
方式一:npm install bootstrap --save
通过 npm
进行安装,适合工程化开发
,比如集成到 react 或者 Node 项目
中 方式二:gitHub 或 官网
直接下载
5.2 框架目录结构
项目组织结构
5.3 框架导入方法
<! DOCTYPE html >
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< meta name = " viewport" content = " width=device-width,initial-scale=1" >
< title> </ title>
< link href = " css/bootstrap.css" rel = " stylesheet" >
</ head>
< body>
< h1> hello Bootstrap!</ h1>
< script src = " js/jquery-3.1.0.js" > </ script>
< script src = " js/bootstrap.js" > </ script>
</ body>
</ html>
5.4 框架技术体系
6. BootStrap 栅格系统
6.1 BootStrap 栅格系统定义
栅格系统用于通过一系列的行(row)与列(column)的组合
来创建页面布局 “行(row)”必须包含在 .container(固定宽度)
或 .container-fluid(100% 宽度)
中,以便为其赋予合适的排列(aligment)和内补(padding)
行内创建列,每行最大12列
,超过列转到下行 container
响应式
容器具有四个断点区域
1200px,992px,768px
container-fluid
6.2 BootStrap 栅格系统详情
内容放置于“列(column)
”内,并且,只有“列(column)”可以作为行(row)”的直接子元素
Bootstrap 源码中定义的 mixin
也可以用来创建语义化的布局
通过为“列(column)
”设置 padding
属性,从而创建列与列之间的间隔(gutter)
通过为 .row
元素设置负值
margin
从而抵消掉为 .container
元素设置的 padding
,也就间接为“行(row)”所包含的“列(column)”抵消掉了padding
栅格系统中的列是通过指定1到12的值
来表示其跨越的范围 栅格类适用于与屏幕宽度大于或等于分界点大小的设备
, 并且针对小屏幕设备覆盖栅格类
因此,在元素上应用任何 .col-md-*
栅格类适用于与屏幕宽度大于或等于分界点大小的设备
, 并且针对小屏幕设备覆盖栅格类 因此,在元素上应用任何 .col-lg-*
不存在, 也影响大屏幕设备
6.3 栅格系统参数
6.4 栅格系统实例
< div class = " row" >
< div class = " col-md-1" > .col-md-1</ div>
< div class = " col-md-1" > .col-md-1</ div>
< div class = " col-md-1" > .col-md-1</ div>
< div class = " col-md-1" > .col-md-1</ div>
< div class = " col-md-1" > .col-md-1</ div>
< div class = " col-md-1" > .col-md-1</ div>
< div class = " col-md-1" > .col-md-1</ div>
< div class = " col-md-1" > .col-md-1</ div>
< div class = " col-md-1" > .col-md-1</ div>
< div class = " col-md-1" > .col-md-1</ div>
< div class = " col-md-1" > .col-md-1</ div>
< div class = " col-md-1" > .col-md-1</ div>
</ div>
< div class = " row" >
< div class = " col-md-8" > .col-md-8</ div>
< div class = " col-md-4" > .col-md-4</ div>
</ div>
< div class = " row" >
< div class = " col-md-4" > .col-md-4</ div>
< div class = " col-md-4" > .col-md-4</ div>
< div class = " col-md-4" > .col-md-4</ div>
</ div>
< div class = " row" >
< div class = " col-md-6" > .col-md-6</ div>
< div class = " col-md-6" > .col-md-6</ div>
</ div>
6.5 BootStrap 栅格系统类样式
通过lg、md、sm、xs
四种类样式,针对不同大小的屏幕实现响应式布局
< div class = " row" >
< div class = " col-lg-3 col-lg-offset-3" > d1</ div>
< div class = " col-lg-3" > d2</ div>
< div class = " col-lg-3" > d3</ div>
< div class = " col-lg-3" > d4</ div>
</ div>
< div class = " col-lg-3" >
< div class = " col-lg-6" > d21</ div>
< div class = " col-lg-6" > d22</ div>
</ div>
列排序
col-md-push-num
col-md-pull-num
< div class = " row" >
< div id = " d1" class = " col-lg-3 col-lg-push-3" > d1</ div>
< div id = " d2" class = " col-lg-3 col-lg-pull-3" > d2</ div>
< div id = " d3" class = " col-lg-3" > d3</ div>
< div id = " d4" class = " col-lg-3" > d4</ div>
</ div>
6.6 BootStrap 栅格系统源码分析
.container {
padding-right : 15px;
padding-left : 15px;
margin-right : auto;
margin-left : auto;
}
@media ( min-width : 768px) {
.container {
width : 750px;
}
}
@media ( min-width : 992px) {
.container {
width : 970px;
}
}
@media ( min-width : 1200px) {
.container {
width : 1170px;
}
}
.container-fluid {
padding-right : 15px;
padding-left : 15px;
margin-right : auto;
margin-left : auto;
}
.jumbotron .container {
max-width : 100%;
}
.row {
margin-right : -15px;
margin-left : -15px;
}
col
利用float: left
实现水平排列
不同的栅格设置不同宽度
.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
float : left;
}
.col-lg-12 {
width : 100%;
}
.col-lg-9 {
width : 75%;
}
.col-lg-6 {
width : 50%;
}
.col-lg-3 {
width : 25%;
}
.col-lg-offset-12 {
margin-left : 100%;
}
.col-lg-offset-9 {
margin-left : 75%;
}
.col-lg-offset-6 {
margin-left : 50%;
}
.col-lg-offset-3 {
margin-left : 25%;
}
col-xx-pull-num、col-xx-push-num
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
position : relative;
min-height : 1px;
padding-right : 15px;
padding-left : 15px;
}
.col-lg-pull-12 {
right : 100%;
}
.col-lg-pull-9 {
right : 75%;
}
.col-lg-pull-6 {
right : 50%;
}
.col-lg-pull-3 {
right : 25%;
}
.col-lg-push-12 {
left : 100%;
}
.col-lg-push-9 {
left : 75%;
}
.col-lg-push-6 {
left : 50%;
}
.col-lg-push-3 {
left : 25%;
}
6.7 BootStrap 栅格系统案例
要求
lg状态下,两行两列(每列6格) md状态下,两行两列(下行两列4格分居左右) sm状态下,两行两列(上行两列4格分居左右) xs状态下,4行一列(每列12格)
< style>
#d1 { background-color : #f00; }
#d2 { background-color : #f0f; }
#d3 { background-color : #ff0; }
#d4 { background-color : #00f; }
</ style>
< div class = " container" >
< div class = " row" >
< div id = " d1" class = " col-sm-4 col-md-6 col-lg-6" > d1</ div>
< div id = " d2" class = " col-sm-4 col-sm-push-4 col-md-6 col-md-push-0 col-lg-6" > d2</ div>
< div id = " d3" class = " col-sm-6 col-md-4 col-lg-6" > d3</ div>
< div id = " d4" class = " col-sm-6 col-md-4 col-md-push-4 col-lg-6 col-lg-push-0" > d4</ div>
</ div>
</ div>
注意:
- md 状态下向后位移栅格距离会保留
- 要在对应的状态下重新定义位移距离
- 比如上面的例子
- md 状态下往后位移4个单位之后
- 在 lg 状态下依然会有4个单位空余出来
- 因此,在 lg 状态下也要设置 push 位移为0
7. BootStrap 全局样式
7.1 样式类型
7.2 基础设置
提供了h1~h6
六种标题标签和类样式 字体大小和边距
与普通标题标签不同标题类样式
可以应用于其他文本标签全局字体
样式默认14px,间距10px
,适用于body和全部文字段落
7.3 文字设置
7.3.1 强调文字
7.3.2 文字对齐方式
text-left
text-right
text-center
text-justify
text-nowrap
7.3.3 改变大小写
text-lowercase
text-uppercase
text-capitalize
首字母大写
7.4 列表样式
7.5 表格样式
7.5.1 基础类样式
7.5.2 附加类样式
table-striped
(条纹效果)table-bordered
(边框效果)table-condensed
(紧凑效果)table-hover
(光棒效果)
table-hover 效果源码解析
.table-hover > tbody > tr:hover {
background-color : #f5f5f5;
}
7.5.3 响应式布局类样式
table-responsive
在小屏幕设备上(小于768px
)水平滚动
当屏幕大于 768px
宽度时,水平滚动条消失
table-responsive 源码解析
.table-responsive {
min-height : .01%;
overflow-x : auto;
}
@media screen and ( max-width : 767px) {
.table-responsive {
width : 100%;
margin-bottom : 15px;
overflow-y : hidden;
-ms-overflow-style : -ms-autohiding-scrollbar;
border : 1px solid #ddd;
}
}
垂直方向
的内容截断
响应式表格使用了 overflow-y: hidden
属性,能将超出表格底部和顶部的内容截断
也可以截断下拉菜单和其他第三方组件
7.6 表单样式
7.6.1 基础类表单
form-control
类样式
<input>、<textarea>
和 <select>
元素都将被默认设置宽度属性为 width: 100%
form-group
类样式
将 label 元素
和前面提到的控件包裹在 .form-group
中可以获得最好的排列
7.6.2 内联表单 (min-width:768px
)
form-inline
类样式
为 <form>
元素添加 .form-inline
类可使其内容左对齐并且表现为 inline-block
级别的控件 只适用于视口(viewport)至少在 768px 宽度
时(视口宽度再小的话就会使表单折叠)
7.6.3 横向表单
form-horizontal
类样式
通过为表单添加 .form-horizontal
类,并联合使用 Bootstrap 预置的栅格类
,可以将 label 标签和控件组水平并排布局
7.7 按钮组件
使用下面列出的类可以快速创建一个带有预定义样式的按钮
< button type = " button" class = " btn btn-default" > (默认样式)Default</ button>
< button type = " button" class = " btn btn-primary" > (首选项)Primary</ button>
< button type = " button" class = " btn btn-success" > (成功)Success</ button>
< button type = " button" class = " btn btn-info" > (一般信息)Info</ button>
< button type = " button" class = " btn btn-warning" > (警告)Warning</ button>
< button type = " button" class = " btn btn-danger" > (危险)Danger</ button>
< button type = " button" class = " btn btn-link" > (链接)Link</ button>
注意
虽然按钮类可以应用到 <a>
和 <button>
元素上,但是,导航和导航条组件只支持 <button>
元素 如果 <a>
元素被作为按钮使用 – 并用于当前页面触发某些功能
– 而不是用于链接其他页面或链接当前页面中的其他部分
,那么,务必为其设置 role="button"
属性 强烈建议尽可能使用 <button>
元素来获得在各个浏览器上获得相匹配的绘制效果
7.7.1 按钮尺寸
使用 .btn-lg
、.btn-sm
、btn-sm
或 .btn-xs
就可以获得不同尺寸的按钮
通过给按钮添加 .btn-block
类可以将其拉伸至父元素100%的宽度
,而且按钮也变为了块级(block)元素
7.7.2 激活状态
对于 <button>
元素,是通过 :active 状态
实现的 对于 <a>
元素,是通过 .active
类实现的
< button type = " button" class = " btn btn-primary btn-lg active" > Primary button</ button>
< a href = " #" class = " btn btn-primary btn-lg active" role = " button" > Primary link</ a>
7.7.3 禁用状态
通过为按钮的背景设置 opacity 属性
就可以呈现出无法点击
的效果 为 <button>
元素添加 disabled 属性
,使其表现出禁用状态
< button type = " button" class = " btn btn-lg btn-primary" disabled = " disabled" > Primary button</ button>
7.8 图片样式
7.8.1 响应式图片类样式
img-responsive
原理
为图片设置了 max-width: 100%
、 height: auto
和 display: block
属性 让图片在其父元素
中更好的缩放
7.8.2 图片形状类样式
img-rounded
(圆角矩形)img-circle
(圆形)img-thumbnail
(缩略图)
7.9 颜色设置
7.9.1 颜色类型
灰色(muted)
关键蓝(primary)
成功绿(success)
信息蓝(info)
警告黄(warning)
危险红(danger)
7.9.2 文本及背景颜色类样式
前景色6种,text-颜色
背景色5种(少了灰色
),bg-颜色
7.10 辅助样式
7.10.1 关闭图标
< button type = " button" class = " close" aria-label = " Close" > < span aria-hidden = " true" > × </ span> </ button>
7.10.2 三角符号
< span class = " caret" > </ span>
7.10.3 快速浮动
pull-left,pull-right
类样式块元素居中对齐
清除浮动
通过为父元素添加 .clearfix
类可以很容易地清除浮动(float)
隐藏和显示
7.11 响应式工具类
通过单独或联合使用以下列出的类,可以针对不同屏幕尺寸隐藏或显示页面内容
7.11.1 响应式工具实现布局
< style>
#header {
height : 80px;
background-color : #ccc;
}
#left,#main,#right {
height : 500px;
}
#left {
background-color : #ff0;
}
#main {
background-color : #0f0;
}
#right {
background-color : #0ff;
}
#footer {
height : 60px;
background-color : #333;
color : #eee;
}
</ style>
< div class = " container" >
< div class = " row" >
< div id = " header" class = " col-sm-12 col-md-12" > Header</ div>
< div id = " left" class = " col-sm-3 col-md-3" > Left</ div>
< div id = " main" class = " col-sm-9 col-md-6" > Main</ div>
< div id = " right" class = " hidden-sm col-md-3" > Right</ div>
< div id = " footer" class = " col-sm-12 col-md-12" > Fotter</ div>
</ div>
</ div>
8. BootStrap CSS 组件
Bootstrap框架提供了20种CSS组件,是整个框架的核心之一
8.1 字体图标
由glyphicon公司
提供的250个免费icon资源,主要应用于内联元素
中 基于HTML5中的@font-face和before
实现 glyphicon以及glyphicon开头
的类样式可以把它们应用到按钮、工具条中的按钮组、导航或输入框
等地方 可自定义样式
< style>
span {
font-size : 50px;
color : #00f;
background-color : #ff0;
}
</ style>
< span class = " glyphicon glyphicon-home" > 首页</ span>
8.1.1 自定义字体
< style>
@font-face {
font-family : 'myMao' ;
src : url ( fonts/mao.ttf) ;
}
p {
font-family : 'myMao' ;
}
</ style>
< p> 红军不怕远征难</ p>
8.1.2 BootStrap 字体图标源码解析
@font-face {
font-family : 'Glyphicons Halflings' ;
src : url ( '../fonts/glyphicons-halflings-regular.eot' ) ;
src : url ( '../fonts/glyphicons-halflings-regular.eot?#iefix' ) format ( 'embedded-opentype' ) , url ( '../fonts/glyphicons-halflings-regular.woff2' ) format ( 'woff2' ) , url ( '../fonts/glyphicons-halflings-regular.woff' ) format ( 'woff' ) , url ( '../fonts/glyphicons-halflings-regular.ttf' ) format ( 'truetype' ) , url ( '../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular' ) format ( 'svg' ) ;
}
.glyphicon {
position : relative;
top : 1px;
display : inline-block;
font-family : 'Glyphicons Halflings' ;
font-style : normal;
font-weight : normal;
line-height : 1;
-webkit-font-smoothing : antialiased;
-moz-osx-font-smoothing : grayscale;
}
.glyphicon-asterisk:before {
content : "\002a" ;
}
8.1.3 使用其他图标
8.2 下拉菜单
由外部容器
和内部列表
构成 容器采用dropdown
类样式,列表采用dropdown-menu
类样式
8.2.1 下拉列表菜单项
菜单对齐方式
dropdown-menu pull-left(right)
类样式,针对ul 菜单的标题
分割线
禁用项
8.2.2 列表辅助属性
辅助属性aria-labelledby
辅助属性
针对ul标签,role = “menu”
针对li标签,role=“presentation”
针对a标签,role=“menuitem”
< div class = " dropdown" >
< button data-toggle = " dropdown" > 文件
< span class = " caret" > </ span>
</ button>
< ul class = " dropdown-menu pull-left" role = " menu" >
< li class = " dropdown-header" > < a href = " #" > 文件管理</ a> </ li>
< li class = " active" > < a href = " #" > 新建</ a> </ li>
< li> < a href = " #" > 打开</ a> </ li>
< li class = " divider" > </ li>
< li class = " disabled" > < a href = " #" > 保存</ a> </ li>
< li> < a href = " #" > 另存为</ a> </ li>
< li> < a href = " #" > 退出</ a> </ li>
</ ul>
</ div>
< div class = " dropdown open" >
< ul class = " dropdown-menu pull-right" role = " menu" >
< li class = " dropdown-header" > < a href = " #" > 翻译图书</ a> </ li>
< li> < a href = " #" > Javascript编程精解</ a> </ li>
< li class = " active" > < a href = " #" > Javascript设计模式</ a> </ li>
< li> < a href = " #" > Javascript启示录</ a> </ li>
< li class = " divider" > </ li>
< li class = " dropdown-header" > < a href = " #" > 原创图书</ a> </ li>
< li> < a href = " #" > 深入理解Bootstrap</ a> </ li>
< li class = " disabled" > < a href = " #" > 21天学会jQuery</ a> </ li>
</ ul>
</ div>
8.3 按钮组
将多个按钮包含在容器中,容器使用btn-group
类样式 按钮使用btn或者组合
类样式 通过容器样式可以设置所有按钮的尺寸
通过btn-group-vertical
设置垂直排列
按钮组
< div class = " btn-group btn-group-lg btn-group-vertical " >
< button type = " button" class = " btn btn-success" > 登录</ button>
< button type = " button" class = " btn btn-primary" > 注册</ button>
< button type = " button" class = " btn btn-default" > 退出</ button>
</ div>
8.4 导航组件
导航使用的标签元素
列表导航使用的类样式
nav基类
nav-tabs
nav-pills
nav-stacked
8.4.1 选项卡式导航
< ul class = " nav nav-tabs" >
< li role = " presentation" class = " active" > < a href = " #" > Home</ a> </ li>
< li role = " presentation" > < a href = " #" > Profile</ a> </ li>
< li role = " presentation" > < a href = " #" > Messages</ a> </ li>
</ ul>
8.4.2 胶囊式导航
HTML 标记相同,但使用 .nav-pills
类
< ul class = " nav nav-pills" >
< li role = " presentation" class = " active" > < a href = " #" > Home</ a> </ li>
< li role = " presentation" > < a href = " #" > Profile</ a> </ li>
< li role = " presentation" > < a href = " #" > Messages</ a> </ li>
</ ul>
8.4.3 堆叠式导航
胶囊是标签页也是可以垂直方向堆叠排列
的。只需添加 .nav-stacked
类
< ul class = " nav nav-pills nav-stacked" >
...
</ ul>
8.5 导航条组件
8.5.1 与导航组件的区别
导航条内所包含元素溢出
依赖 JavaScript 插件
修改视口的阀值
导航条的可访问性
8.5.2 主要类型
< 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" >
< 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 = " #" > Brand</ a>
</ div>
< div class = " collapse navbar-collapse" id = " bs-example-navbar-collapse-1" >
< ul class = " nav navbar-nav" >
< li class = " active" > < a href = " #" > Link < span class = " sr-only" > (current)</ span> </ a> </ li>
< 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>
< li role = " separator" class = " divider" > </ li>
< li> < a href = " #" > One more separated link</ a> </ li>
</ ul>
</ li>
</ ul>
< form class = " navbar-form navbar-left" >
< 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>
< form class = " navbar-form navbar-left" role = " search" >
< div class = " form-group" >
< input type = " text" class = " form-control" placeholder = " Search" >
</ div>
< button type = " submit" class = " btn btn-default" > Submit</ button>
</ form>
8.5.3 导航条的位置
顶部(底部)固定
.navbar-fixed-top
(固定在顶部
).navbar-fixed-bottom
(固定在底部
).navbar-static-top
(静止在顶部
)
8.5.4 反色
导航条
通过添加 .navbar-inverse
类可以改变导航条的外观
< nav class = " navbar navbar-inverse" >
...
</ nav>
8.5.5 路径导航
在一个带有层次
的导航结构中标明当前页面的位置
各路径间的分隔符
已经自动通过 CSS 的 :before
和 content
属性添加了
< ol class = " breadcrumb" >
< li> < a href = " #" > Home</ a> </ li>
< li> < a href = " #" > Library</ a> </ li>
< li class = " active" > Data</ li>
</ ol>
.breadcrumb {
padding : 8px 15px;
margin-bottom : 20px;
list-style : none;
background-color : #f5f5f5;
border-radius : 4px;
}
.breadcrumb > li {
display : inline-block;
}
.breadcrumb > li + li:before {
padding : 0 5px;
color : #ccc;
content : "/\00a0" ;
}
.breadcrumb > .active {
color : #777;
}
8.6 分页组件
分页组件在网站内容展示中得到广泛的应用 Bootstrap框架提供的分页组件类型
多页码
分页组件(pagination
类样式)上下页
分页组件(pager
类样式)
< 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>
8.7 媒体对象
一般用于文本内容
和两端对齐
的媒体对象 主要样式类型
media-list
:针对列表
media
:外部容器,针对列表项
media-left
:左侧
媒体元素media-object
:媒体
元素样式media-body
:文本
元素样式media-heading
:文本元素的标题
8.8 进度条
通过这些简单、灵活的进度条,为当前工作流程或动作提供实时反馈 进度条组件使用了 CSS3 的 transition
和 animation
属性来完成一些特效
< div class = " progress" >
< div class = " progress-bar" role = " progressbar" aria-valuenow = " 60"
aria-valuemin = " 0" aria-valuemax = " 100" style = " width : 60%; " >
60%
</ div>
</ div>
8.9 徽章
给链接、导航等元素嵌套 <span class="badge">
元素,可以很醒目的展示新的或未读的信息条目
< ul class = " nav nav-pills" role = " tablist" >
< li role = " presentation" class = " active" >
< a href = " #" > Home < span class = " badge" > 42</ span> </ a>
</ li>
< li role = " presentation" >
< a href = " #" > Profile</ a>
</ li>
< li role = " presentation" >
< a href = " #" > Messages < span class = " badge" > 3</ span> </ a>
</ li>
</ ul>
8.10 面板
某些时候可能需要将某些 DOM 内容放到一个盒子里。对于这种情况,可以试试面板组件
< div class = " panel panel-default panel-warning" >
< div class = " panel-heading" > 面板的头部</ div>
< div class = " panel-body" > 面板的内容</ div>
< div class = " panel-footer" > 面板的尾部</ div>
</ div>
8.11 BootStrap CSS 组件练习
<! DOCTYPE html >
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< meta name = " viewport" content = " width=device-width, initial-scale=1.0" >
< title> 响应式字体图标练习</ title>
< link rel = " stylesheet" href = " css/font-awesome.css" >
< link rel = " stylesheet" href = " css/bootstrap.css" >
< style>
span {
color : #fff;
}
span[class*='fa-check'] {
background-color : #0f0;
}
span[class*='fa-edit'] {
background-color : #00f;
}
span[class*='fa-trash'] {
background-color : #f00;
}
span[class*='fa-flag'] {
background-color : orange;
}
span[class*='fa-gear'] {
background-color : #00f;
}
</ style>
</ head>
< body>
< table class = ' table table-border table-striped' >
< tr>
< td> < input type = " checkbox" name = " " id = " " > </ td>
< td> Domain</ td>
< td> price</ td>
< td> Clicks</ td>
< td> Update</ td>
< td> Status</ td>
< td> </ td>
</ tr>
< tr>
< td> < input type = " checkbox" name = " " id = " " > </ td>
< td> A.COM</ td>
< td> $12</ td>
< td> 122</ td>
< td> 2020-9-1</ td>
< td class = ' hidden-xs' >
< p class = ' bg-success' > aaa</ p>
</ td>
< td>
< span class = " fa fa-check visible-md-inline-block visible-lg-inline-block" > </ span>
< span class = " fa fa-edit visible-md-inline-block visible-lg-inline-block" > </ span>
< span class = " fa fa-trash visible-md-inline-block visible-lg-inline-block" > </ span>
< span class = " fa fa-flag visible-md-inline-block visible-lg-inline-block" > </ span>
< span class = " fa fa-gear hidden-md hidden-lg" > </ span>
</ td>
</ tr>
< tr>
< td> < input type = " checkbox" name = " " id = " " > </ td>
< td> b.COM</ td>
< td> $22</ td>
< td> 100</ td>
< td> 2020-8-25</ td>
< td class = ' hidden-xs' >
< p class = ' bg-warning' > ccc</ p>
</ td>
< td>
< span class = " fa fa-check visible-md-inline-block visible-lg-inline-block" > </ span>
< span class = " fa fa-edit visible-md-inline-block visible-lg-inline-block" > </ span>
< span class = " fa fa-trash visible-md-inline-block visible-lg-inline-block" > </ span>
< span class = " fa fa-flag visible-md-inline-block visible-lg-inline-block" > </ span>
< span class = " fa fa-gear hidden-md hidden-lg" > </ span>
</ td>
</ tr>
< tr>
< td> < input type = " checkbox" name = " " id = " " > </ td>
< td> C.COM</ td>
< td> $55</ td>
< td> 88</ td>
< td> 2021-1-1</ td>
< td class = ' hidden-xs' >
< p class = ' bg-warning' > ddd</ p>
</ td>
< td>
< span class = " fa fa-check visible-md-inline-block visible-lg-inline-block" > </ span>
< span class = " fa fa-edit visible-md-inline-block visible-lg-inline-block" > </ span>
< span class = " fa fa-trash visible-md-inline-block visible-lg-inline-block" > </ span>
< span class = " fa fa-flag visible-md-inline-block visible-lg-inline-block" > </ span>
< span class = " fa fa-gear hidden-md hidden-lg" > </ span>
</ td>
</ tr>
< tr>
< td> < input type = " checkbox" name = " " id = " " > </ td>
< td> D.COM</ td>
< td> $64</ td>
< td> 99</ td>
< td> 2020-3-3</ td>
< td class = ' hidden-xs' >
< p class = ' bg-primary' > eee</ p>
</ td>
< td>
< span class = " fa fa-check visible-md-inline-block visible-lg-inline-block" > </ span>
< span class = " fa fa-edit visible-md-inline-block visible-lg-inline-block" > </ span>
< span class = " fa fa-trash visible-md-inline-block visible-lg-inline-block" > </ span>
< span class = " fa fa-flag visible-md-inline-block visible-lg-inline-block" > </ span>
< span class = " fa fa-gear hidden-md hidden-lg" > </ span>
</ td>
</ tr>
</ table>
</ body>
</ html>
9. BootStrap JS 插件
9.1 模态框
框架中称为Modal
,也叫popup
,一般放置在body标签的子级
9.1.1 模态框主要应用
主要应用
提示
信息、警告
信息和大文本
多按钮确认提示
单击缩略图时显示大图
9.1.2 模态弹窗样式结构
9.1.3 模态弹窗data声明用法
data-toggle
属性
触发事件的类型,如 modal,popover,tooltips
等 data-target
属性
data-dismiss
属性
< button data-toggle = " modal" data-target = " #myModal" > 打开模态框</ button>
< div id = " myModal" class = " modal" >
< div class = " modal-dialog" >
< div class = " modal-content" >
< div class = " modal-header" > 友情提示</ div>
< div class = " modal-body" > 您确认需要执行吗?</ div>
< div class = " modal-footer" >
< button onclick = " domywork()" data-dismiss = " modal" > 确认</ button>
< button data-dismiss = " modal" > 取消</ button>
</ div>
</ div>
</ div>
</ div>
9.1.4 模态弹窗JavaScript用法
名称 类型 默认值 描述 backdrop boolean 或字符串"static
" true 背景层是否有效 keyboard boolean true 键盘上的 esc 键被按下时关闭模态框
事件类型 描述 show.bs.modal show
方法调用之后立即触发该事件shown.bs.modal 此事件在模态框已经显示出来(并且同时在 CSS 过渡效果完成)之后被触发 hide.bs.modal hide
方法调用之后立即触发该事件hidden.bs.modal 此事件在模态框被隐藏(并且同时在 CSS 过渡效果完成)之后被触发 loaded.bs.modal 从远端的数据源
加载完数据之后触发该事件
< script>
function openModal ( ) {
$ ( '#myModal' ) . modal ( {
backdrop: "static"
} )
}
$ ( function ( ) {
$ ( '#myModal' ) . on ( 'show.bs.modal' , function ( ) {
alert ( '模态框要显示了' )
} )
$ ( '#myModal' ) . on ( 'shown.bs.modal' , function ( ) {
alert ( '模态框已经显示了!' )
} )
} )
</ script>
< button onclick = " openModal()" > 用JS代码打开模态框</ button>
< div id = " myModal" class = " modal" >
< div class = " modal-dialog" >
< div class = " modal-content" >
< div class = " modal-header" > 友情提示</ div>
< div class = " modal-body" > 您确认需要执行吗?</ div>
< div class = " modal-footer" >
< button onclick = " domywork()" data-dismiss = " modal" > 确认</ button>
< button data-dismiss = " modal" > 取消</ button>
</ div>
</ div>
</ div>
</ div>
9.1.5 模态弹窗练习
<! DOCTYPE html >
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< meta name = " viewport" content = " width=device-width, initial-scale=1.0" >
< title> Document</ title>
< link rel = " stylesheet" href = " css/font-awesome.css" >
< link rel = " stylesheet" href = " css/bootstrap.css" >
< style>
span {
color : #fff;
}
span[class*='fa-check'] {
background-color : #0f0;
}
span[class*='fa-edit'] {
background-color : #00f;
}
span[class*='fa-trash'] {
background-color : #f00;
}
span[class*='fa-flag'] {
background-color : orange;
}
span[class*='fa-gear'] {
background-color : #00f;
}
</ style>
</ head>
< body>
< table class = ' table table-border table-striped' >
< tr>
< td> < input type = " checkbox" name = " " id = " " > </ td>
< td> Domain</ td>
< td> price</ td>
< td> Clicks</ td>
< td> Update</ td>
< td> </ td>
</ tr>
< tr>
< td> < input type = " checkbox" name = " " id = " " > </ td>
< td> A.COM</ td>
< td> $12</ td>
< td> 122</ td>
< td> 2020-9-1</ td>
< td>
< span class = " fa fa-trash" > </ span>
</ td>
</ tr>
< tr>
< td> < input type = " checkbox" name = " " id = " " > </ td>
< td> b.COM</ td>
< td> $22</ td>
< td> 100</ td>
< td> 2020-8-25</ td>
< td>
< span class = " fa fa-trash" > </ span>
</ td>
</ tr>
< tr>
< td> < input type = " checkbox" name = " " id = " " > </ td>
< td> C.COM</ td>
< td> $55</ td>
< td> 88</ td>
< td> 2021-1-1</ td>
< td>
< span class = " fa fa-trash" > </ span>
</ td>
</ tr>
< tr>
< td> < input type = " checkbox" name = " " id = " " > </ td>
< td> D.COM</ td>
< td> $64</ td>
< td> 99</ td>
< td> 2020-3-3</ td>
< td>
< span class = " fa fa-trash" > </ span>
</ td>
</ tr>
</ table>
< div id = " myModal" class = " modal fade" >
< div class = " modal-dialog" >
< div class = " modal-content" >
< div class = " modal-header" > 友情提示</ div>
< div class = " modal-body" > 您确认需要删除该项吗?</ div>
< div class = " modal-footer" >
< button onclick = " delRow()" data-dismiss = " modal" > 确认</ button>
< button data-dismiss = " modal" > 取消</ button>
</ div>
</ div>
</ div>
</ div>
< script src = " https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js" > </ script>
< script src = " https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js" > </ script>
< script>
var delIndex = - 1
$ ( function ( ) {
$ ( 'span' ) . click ( function ( ) {
delIndex = $ ( 'span' ) . index ( $ ( this ) )
$ ( '#myModal' ) . modal ( {
backdrop: "static"
} )
} )
} )
function delRow ( ) {
$ ( 'tr' ) . eq ( delIndex + 1 ) . remove ( )
delIndex = - 1
}
</ script>
</ body>
</ html>
9.2 下拉列表
9.2.1 data 声明方式
< div class = " dropdown" >
< button id = " dLabel" type = " button" data-toggle = " dropdown" aria-haspopup = " true" aria-expanded = " false" >
Dropdown trigger
< span class = " caret" > </ span>
</ button>
< ul class = " dropdown-menu" aria-labelledby = " dLabel" >
...
</ ul>
</ div>
9.2.2 JS 方式
$ ( '.dropdown-toggle' ) . dropdown ( )
9.2.3 下拉列表 JS 用法
事件类型 描述 show.bs.dropdown show 方法调用之后立即触发该事件 shown.bs.dropdown 此事件在下拉列表框已经显示出来(并且同时在 CSS 过渡效果完成)之后被触发 hide.bs.dropdown hide 方法调用之后立即触发该事件 hidden.bs.dropdown 此事件在下拉列表框被隐藏(并且同时在 CSS 过渡效果完成)之后被触发
9.3 折叠导航条
9.3.1 折叠导航条语法
折叠导航条样式结构
data 声明方式
data-toggle: collapse
data-target
: 导航菜单项的容器
< 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" >
< span class = " icon-bar" > </ span>
< span class = " icon-bar" > </ span>
< span class = " icon-bar" > </ span>
</ button>
< a class = " navbar-brand" href = " #" > Brand</ a>
</ div>
< div class = " collapse navbar-collapse" id = " bs-example-navbar-collapse-1" >
< ul class = " nav navbar-nav" >
< li class = " active" > < a href = " #" > Link < span class = " sr-only" > (current)</ span> </ a> </ li>
< li> < a href = " #" > Link</ a> </ li>
</ ul>
</ div>
</ div>
</ nav>
< script src = " https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js" > </ script>
< script src = " https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js" > </ script>
9.4 轮播图
< 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>
< li data-target = " #carousel-example-generic" data-slide-to = " 3" > </ li>
</ ol>
< div class = " carousel-inner" role = " listbox" >
< div class = " item active" style = " background-color : aqua; " >
< img src = " images/02.jpg" alt = " ..." >
</ div>
< div class = " item" style = " background-color : #f00; " >
< img src = " images/03.jpg" alt = " ..." >
</ div>
< div class = " item" style = " background-color : #000; " >
< img src = " images/04.jpg" alt = " ..." >
</ div>
< div class = " item" >
< img src = " images/05.jpg" alt = " ..." >
</ 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>
< script src = " https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js" > </ script>
< script src = " https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js" >
10. BootStrap 4
10.1 BootStrap 4 新特性
不支持IE8
box-sizing
属性值改为 border-box
采用rem
作为计量单位
(root) 新的导入文件
新的栅格系统
新的全局样式
10.2 BootStrap 4 模版
< html lang = " en" >
< head>
< meta charset = " utf-8" >
<meta name="viewport“ content="width=device-width, initial-scale=1, shrink-to-fit=no">
< link rel = " stylesheet" href = " https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity = " " crossorigin = " anonymous" >
< title> Hello, world!</ title>
</ head>
< body>
< h1> Hello, world!</ h1>
< script src = " https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js" integrity = " " crossorigin = " anonymous" > </ script>
< script src = https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js integrity = " " crossorigin = " anonymous" > </ script>
< script src = " https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity = " " crossorigin = " anonymous" > </ script>
</ body>
</ html>
10.3 BootStrap 4 栅格系统
10.3.1 BootStrap 4 主断点
依据媒体查询指令@media
,按宽度从小到大分为xs、sm、md、lg和xl
五种规格
10.3.2 BootStrap 4 排列
10.3.3 BootStrap 4 组合对齐
常见列组合
col[-type]
样式平分宽度固定列宽+平分剩余宽度 固定列宽+由内容决定宽度 强制换行
常见对齐
方式
整行垂直
对齐 align-items-type
单个垂直
对齐 align-self-type
多行垂直
对齐align-content-type
水平
对齐 justify-content-type
11. 总结