BootStrap 基础笔记

最新推荐文章于 2024-05-08 10:24:25 发布

qq_43645678

最新推荐文章于 2024-05-08 10:24:25 发布

阅读量2.3k

点赞数 9

分类专栏： # 前端进阶文章标签： bootstrap bootstrap面试题 bootstrap基础笔记

本文链接：https://blog.csdn.net/qq_43645678/article/details/93380495

版权

前端进阶专栏收录该内容

13 篇文章 1 订阅

订阅专栏

BootStrap 基础笔记

1. 响应式设计

1.1 什么是响应式设计

案例网址
- http://2011.dconstruct.org

在这里插入图片描述

1.2 为什么需要响应式设计

用户使用的设备尺寸不同
用户使用的屏幕分辨率不同
用户使用的浏览器不同

1.3 响应式设计常见技术

弹性图片
- 例如：max-width:100%
弹性布局
- 例如：display:flex
媒体查询

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 的特点
  - 灵活简洁
  - 直接强悍
  - 让Web开发更迅速，简单
官网
- http://www.bootcss.com/ （中文网）
- https://getbootstrap.com/ （英文网）
GitHub
- https://github.com/twbs/bootstrap

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
- 自适应容器
- 100%宽度

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四种类样式，针对不同大小的屏幕实现响应式布局

在这里插入图片描述

列偏移
- col-xx-offset-num类样式

<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
- 利用媒体查询完成响应式的宽度调整

.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
- 最大宽度100%，实现自适应

.container-fluid {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

.jumbotron .container {
  max-width: 100%;
}

row
- 与container中的内边距抵消

.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-xx-offset-num
- 利用margin-left设置对应栅格的偏移距离

.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 强调文字

强调文字
- small
- strong
- em
- cite

7.3.2 文字对齐方式

text-left
text-right
text-center
text-justify
text-nowrap

7.3.3 改变大小写

text-lowercase
text-uppercase
text-capitalize 首字母大写

7.4 列表样式

list-unstyled
- 取消序列符号

7.5 表格样式

7.5.1 基础类样式

table

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 关闭图标

close类样式，内容×

<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>

7.10.2 三角符号

caret类样式

<span class="caret"></span>

7.10.3 快速浮动

pull-left，pull-right 类样式
块元素居中对齐
- center-block类样式
清除浮动
- 通过为父元素添加 .clearfix 类可以很容易地清除浮动（float）
隐藏和显示
- show、hidden和invisible类样式

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 自定义字体

@font-face

<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 使用其他图标

font-awesome
- http://www.fontawesome.com.cn
- Font Awesome 字体为您提供可缩放矢量图标,它可以被定制大小、颜色、阴影以及任何可以用CSS的样式
阿里图标
- https://www.iconfont.cn

8.2 下拉菜单

由外部容器和内部列表构成
容器采用dropdown类样式，列表采用dropdown－menu类样式

8.2.1 下拉列表菜单项

菜单对齐方式
- dropdown-menu pull-left（right）类样式，针对ul
菜单的标题
- dropdown-header类样式，针对列表项
分割线
- divider类样式，针对列表项
禁用项
- disabled类样式，针对列表项

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 选项卡式导航

注意 .nav-tabs 类依赖 .nav 基类

<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">
    <!-- Brand and toggle get grouped for better mobile display -->
    <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>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <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><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</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">&laquo;</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">&raquo;</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用法

modal(option)方法

名称	类型	默认值	描述
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"       //true表示点击背景可以关闭；false表示无背景；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 () {
            //有Bug
            // $('span').each(function(index,item){
            //     $(this).on('click',function(){
            //         delIndex = index  //确认需要删除行的索引值
            //         $('#myModal').modal({
            //             backdrop:"static"
            //         })
            //     })
            // })
            $('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 声明方式

data-dropdown

<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 方法

$('.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">
    <!-- Brand and toggle get grouped for better mobile display -->
    <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>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <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><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</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 轮播图

轮播图样式结构
data 声明方式
- data-ride
- data-target

<!-- 1.修改容器的宽度，让图片和容器保持一致 -->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    <!-- Indicators 指示符-->
    <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>
  
    <!-- Wrapper for slides -->
    <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>
  
    <!-- Controls -->
    <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> <!-- Required meta tags -->
	 <meta charset="utf-8"> 
	 <meta name="viewport“  content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
	 <!-- Bootstrap CSS -->
	 <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 排列

列组合
- col-type-num类样式
列偏移
- offset-type-num类样式
列排序
- order-num类样式

10.3.3 BootStrap 4 组合对齐

常见列组合
- col[-type]样式平分宽度
- 固定列宽+平分剩余宽度
- 固定列宽+由内容决定宽度
- 强制换行
常见对齐方式
- 整行垂直对齐 align-items-type
- 单个垂直对齐 align-self-type
- 多行垂直对齐align-content-type
- 水平对齐 justify-content-type