以下为个人认为有必要记录的笔记不喜勿喷

BootStrap简介
BootStrp使用
BootStrap排版
- Bootstrap 网格系统（Grid System
- - 工作原理
  - 如何跨多个设备工作
- 标题
- 副标题
- 段落（正文文本）
- - 文本
  - - 对齐
    - 大小写
    - 强调内容
    - 通过颜色强调内容
    - 其他
- 列表
- - 有序列表
  - 无序列表
  - 定义列表
- 表格
- - BootStrap支持的一些表格元素：
  - 表格类
  - th、tr、td类
- 表单
- - 垂直或基本表单
  - 内联表单
  - 水平表单
  - 表单校验状态
  - 下拉菜单
  - - 下拉菜单标题
    - 下拉菜单分割线
  - 按钮组
  - - 按钮
  - 向上出现的菜单
  - 静态控件
  - 表单帮助文本
- 图片
- 组件
- - 图标
  - 下拉菜单
  - - 导航栏
    - 面包屑导航
  - 分页
  - 标签
  - 徽章
  - 超大屏幕
  - 标题
  - 缩略图
  - 警告
  - - 可取消的警告
    - 警告中的链接
  - 进度条
  - - 堆叠进度条
  - 多媒体对象
  - 面板
  - Well
  - 弹窗modal
- 插件 - data属性
- meta标签中的viewport
- 单位
BootStrap插件
- 过渡效果（Transition）插件
- 模态框（Modal）插件
- 下拉菜单（Dropdown）插件
- 滚动监听（Scrollspy）插件
- 标签页（Tab）插件
- 提示工具（Tooltip）插件
- 弹出框（Popover）插件
- 警告框（Alert）插件
- 按钮（Button）插件
- - 加载状态
  - 单个切换
  - 复选框（Checkbox）
- 折叠（Collapse）插件
- 轮播（Carousel）插件
- 附加导航（Affix）插件

BootStrap简介

GitHub上这样介绍 bootstrap：

简单灵活可用于架构流行的用户界面和交互接口的html、css、javascript工具集。
基于html5、css3的bootstrap，友好的学习曲线，卓越的兼容性，响应式设计，12列格网，样式向导文档。
自定义JQuery插件，完整的类库，基于Less等。

Bootstrap框架注重重置可能产生问题的样式（如，body,form的margin等），保留和坚持部分浏览器的基础样式，解决部分潜在的问题，提升一些细节的体验，具体说明如下：
* 移除body的margin声明。
* 设置body的背景色为白色。
* 为排版设置了基本的字体、字号和行高。
* 设置全局链接颜色，且当链接处于悬浮“:hover”状态时才会显示下划线样式。

缺点：
- 缺点是不方便修改样式，对细节的不好把握。

各部分简单说明如下：

HTML是基于HTML5
CSS是使用LESS创建
JavaScript是使用jQuery创建
- 不同版本的BootStrap引用的jQuery版本不同
- jQuery的引用要在BootStrap.js之前

BootStrp使用

W3C教程中目前推荐的国内使用的BootCDN库：

<link href=“https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css” rel=“stylesheet”>

<script src=“https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css”>

<script src=“https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js”>

<script src=“https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js”></script>

BootStrap中的JS插件依赖于jQuery，因此jQuery要在BootStrap前引入。
把CSS文件放在head标签中，把JS文件放在body标签的最下面。
使用 HTML5 文档类型（Doctype）。
移动设备优先是 Bootstrap 3 的最显著的变化。
为了让 Bootstrap 开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的 head 之中添加 viewport meta 标签。
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
- width 属性控制设备的宽度。假设您的网站将被带有不同屏幕分辨率的设备浏览，那么将它设置为 device-width 可以确保它能正确呈现在不同设备上。
- initial-scale=1.0 确保网页加载时，以 1:1 的比例呈现，不会有任何的缩放。
Normalize.css 是一个很小的 CSS 文件，在 HTML 元素的默认样式中提供了更好的跨浏览器一致性。
数据行(.row)必须包含在容器（.container）中，以便为其赋予合适的对齐方式和内距(padding)。
在行(.row)中可以添加列(.column)，但列数之和不能超过平分的总列数，比如12。
具体内容应当放置在列容器（column）之内，而且只有列（column）才可以作为行容器(.row)的直接子元素。
通过设置内距（padding）从而创建列与列之间的间距。然后通过为第一列和最后一列设置负值的外距（margin）来抵消内距(padding)的影响。
在Bootstrap框架的网格系统中带有响应式效果，其带有四种类型的浏览器（超小屏，小屏，中屏和大屏），其断点（像素的分界点）是768px、992px和1220px。
容器(.container) - 针对不同的浏览器分辨率，其宽度也不一样：自动、750px、970px和1170px。
注意以下文件
- bootstrap.less：这个是核心文件。它用来引入其他文件，最终由你来编译它。
- reset.less：始终是最先引入的文件。
- variables.less 和 mixins.less：这两个文件总是同时出现，因为其他文件都依赖于它们。前一个文件包含了在生成器网站上使用的相同的变量。
- utilities.less：这个文件总是最后引入，你可以把想要覆盖的类写到这里。

BootStrap排版

Bootstrap 网格系统（Grid System

工作原理

行必须放置在 .container class 内（在 Bootstrap 4 中还可以放置在 .container-fluid (全屏宽度) class的容器中），以便获得适当的对齐（alignment）和内边距（padding）。
使用行来创建列的水平组。
内容应该放置在列内，且唯有列可以是行的直接子元素。
预定义的网格类，比如 .row 和 .col-xs-4，可用于快速创建网格布局。LESS 混合类可用于更多语义布局。
列通过内边距（padding）来创建列内容之间的间隙。该内边距是通过 .rows 上的外边距（margin）取负，表示第一列和最后一列的行偏移。
网格系统是通过指定您想要横跨的十二个可用的列来创建的。例如，要创建三个相等的列，则使用三个 .col-xs-4。

如何跨多个设备工作

标题

覆盖其默认样式使用其在所有浏览器下显示的效果一样。

所有标题的行高都是1.1（也就是font-size的1.1倍）,而且文本颜色和字体都继承父元素的颜色和字体。
固定不同级别标题字体大小，h1=36px，h2=30px，h3=24px，h4=18px，h5=14px和h6=12px。

副标题

用<small>标签包裹。

副标题small一定要写在h1 ~ h6标签里才能生效，要不然就是减小字号的作用。
行高都是1，而且font-weight设置了normal变成了常规效果（不加粗），同时颜色被设置为灰色（#999）。
由于<small>内的文本字体在h1 ~ h3内，其大小都设置为当前字号的65%；而在h4 ~ h6内的字号都设置为当前字号的75%；

段落（正文文本）

全局文本字号为14px(font-size)。
行高为1.42857143（line-height），大约是20px。
颜色为深灰色（#333）。
字体为"Helvetica Neue", Helvetica, Arial, sans-serif;（font-family）。

文本

对齐

.text-left - 左对齐
.text-center - 中对齐
.text-right - 右对齐
.text-justify - 两端对齐

大小写

.text-uppercase - 设置大写字母
.text-lowercase - 设置小写字母
.text-capitalize - 设置首字母变大写，其他字母大小写不变。

强调内容

.lead - 增大文本字号，加粗文本
small - 减小文本字号
b - 文本加粗
strong - 文本加粗
em - 文本倾斜
i - 文本倾斜
cite - 文本引用，也是倾斜

通过颜色强调内容

.text-muted：提示，使用浅灰色（#999）
.text-primary：主要，使用蓝色（#428bca）
.text-success：成功，使用浅绿色(#3c763d)
.text-info：通知信息，使用浅蓝色（#31708f）
.text-warning：警告，使用黄色（#8a6d3b）
.text-danger：危险，使用褐色（#a94442）

其他

mark - 着重
del - 删除线
ins - 小段文字的引用
u - 下划线
abbr - 缩写：在文本底部的一条虚线边框
- .initialism - 显示在 <abbr> 元素中的文本以小号字体展示
address - 地址（默认display:block）
blockquote - 大段文字的引用
- .pull-right - 向右对齐引用
- .blockquote-reverse - 设定引用右对齐
code - 单行内联代码
pre - 预排版文字，多行块代码（会变成块元素，一块显示）
- .pre-scrollable - 使最大高度为340px， <pre> 元素可滚动 scrollable
kbd - 用户输入代码（底部黑色背景）

列表

.list-group：代表列表组
.list-group-item：代表列表项
.badge：表示状态数
.xctive：表示选中状态
支持有序列表、无序列表和定义列表。
list-style-type属性:
- none：不使用项目符号。
- disc：实心圆。
- circle：空心圆。
- square：实心方块。
- demical：阿拉伯数字。
- lower-alpha：小写英文字母。
- upper-alpha：大写英文字母。
- lower-roman：小写罗马数字。
- upper-roman：大写罗马数字。

有序列表

无序列表

.list-unstyled - 移除样式：（padding-left: 0;list-style: none;）
.list-inline - 把所有列表项放在同一行中（制作水平导航）
- （padding-left: 0;margin-left: -5px;list-style: none;）

定义列表

.dl-horizontal - 把dl与其描述并排显示
- 将dt设置了一个左浮动，并且设置了一个宽度为160px
- 将dd设置一个margin-left的值为180px，达到水平的效果
- 当标题宽度超过160px时，将会显示三个省略号
dl设置了margin-bottom:20px

表格

BootStrap支持的一些表格元素：

表格类

使用样式的时候一定要先加入表格基础类 .table。
- 给表格设置了margin-bottom:20px以及设置单元内距。
- 在thead底部设置了一个2px的浅灰实线。
- 每个单元格顶部设置了一个1px的浅灰实线。
.table-bordered - 每个元素周围都有边框，且占整个表格是圆角的。
.table-condensed - 减少单元格的内边距，为5px。
.table-responsive - 让表格水平滚动以适应小型设备（小于 768px）。当在大于 768px 宽的大型设备上查看时，将看不到任何的差别。
.table-hover - 在tbody范围内，当指针悬停在行上时会出现浅灰色背景。

th、tr、td类

表单

.form-control - 显示宽度都会变成100%，且placeholder的颜色都设置成了#999999。
对一系列复选框和单选框的label使用 .checkbox-inline 或 .radio-inline class，控制它们显示在同一行上。
避免使用元素，因为 WebKit 浏览器不能完全绘制它的样式。
避免使用元素，由于它们的 rows 属性在某些情况下不被支持。
不要将表单组或栅格列（column）类直接和输入框组混合使用。

垂直或基本表单

创建基本表单的步骤：
- 向父 <form> 元素添加 role=“form”。
- 把标签和控件放在一个带有 class .form-group 的 <div> 中。这是获取最佳间距所必需的。
- 向所有的文本元素 <input>、<textarea> 和 <select> 添加 class .form-control。

内联表单

所有元素是内联的，向左对齐的，标签是并排的，向 <form> 标签添加 class .form-inline。

只适用于视口（viewport）至少在 768px 宽度时（视口宽度再小的话就会使表单折叠）。
需要手动设置宽度 - 默认情况下，width: auto; - Bootstrap 中的 input、select 和 textarea 有 100% 宽度。
一定要添加lablel标签，否则屏幕阅读器将无法正确识别。
使用 class .sr-only，您可以隐藏内联表单的标签。

水平表单

创建基本步骤：
- 向父 <form> 元素添加 class .form-horizontal，并配合网格系统。
- 把标签和控件放在一个带有 class .form-group 的 <div> 中。
- 向标签添加 class .control-label。

表单校验状态

添加 .has-warning、.has-error 或 .has-success 类到这些控件的父元素即可。

label要加.control-label
input、textarea、select要加.form-control
想让表单在对应的状态下显示 icon 出来，只需要在对应的状态下添加类名“has-feedback”。请注意，此类名要与“has-error”、“has-warning”和“has-success”在一起。

下拉菜单

基本使用方法：
- 使用一个名为“dropdown”的容器包裹了整个下拉菜单元素。
- 使用了一个按钮做为父菜单，并且定义类名“dropdown-toggle”和自定义“data-toggle”属性，且值必须和最外容器类名一致。
- 下拉菜单项使用一个ul列表，并且定义一个类名为“dropdown-menu”
默认是左对齐。想让下拉菜单相对于父容器右对齐时，可以在“dropdown-menu”上添加一个“pull-right”或者“dropdown-menu-right”类名。

下拉菜单标题

.dropdown-header（display: block;padding: 3px 20px;font-size: 12px;line-height: 1.42857143;color: #999;）

下拉菜单分割线

.divider - 分割线。

组与组之间可以通过添加一个空的
，并且给这个
添加类名“divider”来实现添加下拉分隔线的功能。

按钮组

单个按钮组 - 用.btn-group封装多个带.btn的<button>。
多个按钮组 - 将多个<div class=“btn-group”>放进<div class=“btn-toolbar”>中。
垂直按钮组 - 向.btn-group添加.btn-group-vertical。
控制大小 - 使用.btn-large、.btn-small、.btn-mini控制大小。
.input-group-btn：把按钮作为输入框组的前缀或者后缀元素。

按钮

建议在 <button> 元素上使用按钮 class，避免跨浏览器的不一致性问题。

可用于<a>, <button>, 或 <input> 元素上：
- .btn - 为按钮添加基本样式。
- .btn-default - 默认/标准按钮。
- .btn-primary - 原始按钮样式（未被操作）。
- .btn-success - 表示成功的动作。
- .btn-info - 该样式可用于要弹出信息的按钮。
- .btn-warning - 表示需要谨慎操作的按钮。
- .btn-danger - 表示一个危险动作的按钮操作。
- .btn-link - 让按钮看起来像个链接 (仍然保留按钮行为)。
- .btn-lg - 制作一个大按钮。
- .btn-sm - 制作一个小按钮。
- .btn-xs - 制作一个超小按钮。
- .btn-block - 块级按钮(拉伸至父元素100%的宽度)，全屏按钮大小。
- .active - 按钮被点击，按下的状态。
- .disabled - 禁用按钮，禁用状态。

向上出现的菜单

.dropup - 在.btn-group同级加上.dropup。

静态控件

在一个水平表单内的表单标签后放置纯文本时，请在

上使用 class .form-control-static。

表单帮助文本

在输入框 input 上有一个块级帮助文本。为了添加一个占用整个宽度的内容块，请在后使用 .help-block。

图片

.img-rounded：添加 border-radius:6px 来获得图片圆角(IE8 不支持)。
.img-circle：添加 border-radius:500px 来让整个图片变成圆形(IE8 不支持)。
.img-thumbnail：添加一些内边距（padding）和一个灰色的边框。
.img-responsive：图片响应式 (将很好地扩展到父元素)。

组件

一个网站、APP、系统构建或是一些零件的组合。

role：HTML5标签属性，使标签语义化，方便特定浏览器识别。
aria-label：通常使用在输入框。
tabIndex：设置键盘中的tab键在控件中进行移动，即焦点的移动顺序。
data-：HTML5新增自定义属性，在页面上不显示。

图标

.glyphicon：图标类
.glyphicon-minus：具体图标类
-webkit-font-smoothing和-moz-osx-font-smoothing属性可以使页面上的字体反锯齿，使用后字体看起来会更清晰舒服。

下拉菜单

.dropdown：控制组件下拉
.dropdown-toggle：切换样式
data-toggle=“dropdown”：绑定下拉事件
.dropdown-header：下拉菜单标题
.dropdown-menu：下拉菜单
.dropdown-menu-right：代替pull-right右对齐
.divider：分割线
.caret：角标符号

<span class="glyphicon glyphicon-minus"></span> <div class="dropdown"> <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> <span class="glyphicon glyphicon-send"></span> 点击显示下拉菜单 <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="http://www.baidu.com">百度</a></li> <li><a href="http://www.baidu.com">百度</a></li> <li><a href="http://www.baidu.com">百度</a></li> <li><a href="http://www.baidu.com">百度</a></li> </ul> </div> ### 控件组 - .input-group：表示控件组 - .input-group-addon：可放置额外内容及图标 <div class="input-group"> <span class="input-group-addon glyphicon glyphicon-alert"></span> <input type="text" class="form-control"> </div> ### 导航 #### 导航元素 - .nav：无序列表的开始 - .nav-tabs：可切换的导航 - .nav-pills：胶囊导航 - .nav-justified：平均分每个选项 - .nav-stacked：使导航栏垂直

导航栏

<nav>标签添加.navbar、.navbar-default并且加 role=“navigation”，有助于增加可访问性。
向 <div> 元素添加一个标题.navbar-header，内部包含了带有 .navbar-brand 的 <a> 元素。这会让文本看起来更大一号。
为了向导航栏添加链接，只需要简单地添加带有 class .nav、.navbar-nav 的无序列表即可。
data-toggle=“collapse” 添加到想要展开或折叠的组件的链接上。
href 或 data-target 属性添加到父组件，它的值是子组件的 id。
data-parent 属性把折叠面板（accordion）的 id 添加到要展开或折叠的组件的链接上。
需要折叠显示的div加 .collapse、.navbar-collapse
.icon-bar 的创建所谓的汉堡按钮。

面包屑导航

.breadcrumb：无序列表。分隔符会通过 CSS（bootstrap.min.css）中的 class 自动被添加。

分页

nav包裹一下

.pagination：在父元素中添加表示分页 - ul
.pager：放置在分页区域 - ul
.previous：把链接向左对齐 - li
.next：把链接向右对齐 - li

徽章

只需要把添加到链接、Bootstrap 导航等这些元素上即可。
与标签相似，主要的区别在于徽章的边角更加圆滑。
当没有新的或未读的项时，通过 CSS 的 :empty 选择器，徽章会折叠起来，表示里边没有内容。

超大屏幕

增加标题的大小，并为登陆页面内容添加更多的外边距（margin）。

创建步骤：
- 创建一个带有 class .jumbotron. 的容器 <div>。
- 除了更大的 <h1>，字体粗细 font-weight 被减为 200px。
为了获得占用全部宽度且不带圆角的超大屏幕，请在所有的 .container外使用 .jumbotron。

标题

把标题放置在带有.page-header 的 <div> 中。

缩略图

创建步骤：
- 在图像周围添加带有 .thumbnail 的 <a> 标签。
- 这会添加四个像素的内边距（padding）和一个灰色的边框。
- 当鼠标悬停在图像上时，会动画显示出图像的轮廓。

警告

通过创建一个 <div>，并向其添加一个 .alert 和四个上下文 class（即 .alert-success、.alert-info、.alert-warning、.alert-danger）之一，来添加一个基本的警告框。

可取消的警告

添加可选的 .alert-dismissable。

再添加一个关闭按钮。

警告中的链接

使用 .alert-link 实体类来快速提供带有匹配颜色的链接。

进度条

.progress：表示进度条
.progress-bar-*：通过状态类改变进度条的颜色(success、info、danger等)
.pregress-bar：进度条的进度
.progress-bar-striped：使得进度条颜色渐变
style:width=“60%;”：设置进度条已完成进度

堆叠进度条

把多个进度条放在相同的 .progress 中即可实现堆叠。

多媒体对象

.media：该 class 允许将媒体对象里的多媒体（图像、视频、音频）浮动到内容区块的左边或者右边。
.media-object：
.media-body：
.media-list：如果你需要一个列表，各项内容是无序列表的一部分，可以使用该 class。可用于评论列表与文章列表。

面板

.panel：代表面板
.panel-default：面板基本样式
.panel-heading：面板头部
.panel-title class 的

-

来添加预定义样式的标题。
.panel-body：代表面板内容
.panel-footer：代表面板注脚

Well

是一种会引起内容凹陷显示或插图效果的容器 <div>。

弹窗modal

和panel基本一致。

插件 - data属性

通过data属性控制页面交互。

$(document).off(".data-api")解除属性绑定
data-toggle：绑定方法
data-target：指定相应内容的位置
data-dismiss：实现关闭某一元素

meta标签中的viewport

手机端常用，调节视窗的大小。

width、height：宽、高 - device-width
user-scalable：是否允许用户缩放
initial-scale：初始倍数
maximum-scale：最大放大多少倍
minimum-scale：最小放大多少倍

单位

px：相对于显示屏幕分辨率的长度单位
em：相对于当前文本内的字体尺寸
- 会继承父级元素的字体大小
- 1em=16px（不一定）
- IE浏览器并不支持em
rem与em类似，相对于HTML根节点的字体单位
- 继承根元素字体大小
- 比em稳定，一般不用考虑兼容性问题

BootStrap插件

过渡效果（Transition）插件

模态框（Modal）插件

模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。

在控制器元素（比如按钮或者链接）上设置属性 data-toggle=“modal”，同时设置 data-target="#identifier" 或 href="#identifier" 来指定要切换的特定的模态框（带有 id=“identifier”）。

下拉菜单（Dropdown）插件

可以向任何组件（比如导航栏、标签页、胶囊式导航菜单、按钮等）添加下拉菜单。

通过 data 属性，向链接或按钮添加 data-toggle=”dropdown” 来切换下拉菜单。

滚动监听（Scrollspy）插件

即自动更新导航插件，会根据滚动条的位置自动更新对应的导航目标。

向顶部导航添加滚动监听行为：
- 向想要监听的元素（通常是 body）添加 data-spy=“scroll”。然后添加带有 Bootstrap .nav 组件的父元素的 ID 或 class 的属性 data-target。为了它能正常工作，必须确保页面主体中有匹配所要监听链接的 ID 的元素存在。

标签页（Tab）插件

添加 data-toggle=“tab” 或 data-toggle=“pill” 到锚文本链接中。

添加 nav 和 nav-tabs 类到 ul 中，将会应用 Bootstrap 标签样式。
添加 nav 和 nav-pills 类到 ul 中，将会应用 Bootstrap 胶囊式样式。
如果需要为标签页设置淡入淡出效果，请添加 .fade 到每个 .tab-pane 后面。第一个标签页必须添加 .in 类，以便淡入显示初始内容。

提示工具（Tooltip）插件

默认情况下是把提示工具（tooltip）放在它们的触发元素后面。

如需添加一个提示工具（tooltip），只需向一个锚标签添加 data-toggle=“tooltip” 即可。
锚的 title 即为提示工具（tooltip）的文本。
默认情况下，插件把提示工具（tooltip）设置在顶部。
data-placement：显示的位置(top、bottom、left、right)。

弹出框（Popover）插件

弹出框（Popover）与工具提示（Tooltip）类似，提供了一个扩展的视图。如需激活弹出框，用户只需把鼠标悬停在元素上即可。

如需添加一个弹出框（popover），只需向一个锚/按钮标签添加 data-toggle=“popover” 即可。
锚的 title 即为弹出框（popover）的文本。
默认情况下，插件把弹出框（popover）设置在顶部。
data-container：想指定元素追加弹出框。

警告框（Alert）插件

向关闭按钮添加 data-dismiss=“alert”，就会自动为警告框添加关闭功能。

按钮（Button）插件

加载状态

向 button 元素添加 data-loading-text=“Loading…” 作为其属性即可。

单个切换

向 button 元素添加 data-toggle=“button” 作为其属性即可。

复选框（Checkbox）

创建复选框组，并通过向 btn-group 添加 data 属性 data-toggle=“buttons” 来添加复选框组的切换。

折叠（Collapse）插件

让页面区域折叠起来。

创建可折叠的分组或折叠面板（accordion）。
创建不带 accordion 标记的简单的可折叠组件（collapsible）。

轮播（Carousel）插件

是一种灵活的响应式的向站点添加滑块的方式。

不需要使用 data 属性，只需要简单的基于 class 的开发即可。
通过 .item 内的 .carousel-caption 元素向幻灯片添加标题。
属性 data-slide 接受关键字 prev 或 next，用来改变幻灯片相对于当前位置的位置。
使用 data-slide-to 来向轮播传递一个原始滑动索引，data-slide-to=“2” 将把滑块移动到一个特定的索引，索引从 0 开始计数。
data-ride=“carousel” 属性用于标记轮播在页面加载时就开始动画播放。
data-interval - 自动循环每个项目之间延迟的时间量。如果为 false，轮播将不会自动循环。
data-pause - 鼠标进入时暂停轮播循环，鼠标离开时恢复轮播循环。
data-wrap - 轮播是否连续循环。

附加导航（Affix）插件

向需要监听的元素添加 data-spy=“affix” 即可。

允许某个 <div> 固定在页面的某个位置。
也可以在打开或关闭使用该插件之间进行切换。
附加导航（Affix）插件在三种 class 之间切换，每种 class 都呈现了特定的状态： .affix、.affix-top 和 .affix-bottom。
- 在开始时，插件添加 .affix-top 来指示元素在它的最顶端位置。这个时候不需要任何的 CSS 定位。
- 当滚动经过添加了附加导航（Affix）的元素时，应触发实际的附加导航（Affix）。此时 .affix 会替代 .affix-top，同时设置 position: fixed;（由 Bootstrap 的 CSS 代码提供）。
- 如果定义了底部偏移，当滚动到达该位置时，应把 .affix 替换为 .affix-bottom。由于偏移是可选的，假如设置了该偏移，则要求同时设置适当的 CSS。在这种情况下，请在必要的时候添加 position: absolute;。

BootStrap 入门教程学习摘要笔记相关推荐

零基础Bootstrap入门教程(0)--教程背景与目录
点此查看所有教程.项目.源码导航本文目录 1. 背景 2. 教程目录 3. 源码下载 1. 背景在学习完成HTML/CSS/JS/jQuery零基础入门教程后,自然而然我们要进入Bootstra ...
.NetCore微服务Surging新手傻瓜式入门教程学习日志---结构简介（二）
.NetCore微服务Surging新手傻瓜式入门教程学习日志---结构简介(二) 原文:.NetCore微服务Surging新手傻瓜式入门教程学习日志---结构简介(二) 先上项目解决方案图 ...
学习嵌入式的书籍推荐，嵌入式编程入门教程学习大纲
嵌入式系统是当前热门.具发展前景的IT应用领域之一,很多数字包括手机.电子字典.可视电话.数字相机.数字摄像机.机顶盒.智能玩具医疗仪器和航空航天设备等都是典型的嵌入式系统.越来越多的人想要了解学习嵌 ...
[Matlab]入门教程基础向笔记（B站视频）
[Matlab]入门教程基础向笔记(B站视频) 快捷操作 clc:清除命令行窗口历史操作用⬆(上箭头)表示快捷输入上一段代码计算细节矩阵相乘 A*B:表示现代中的相乘运算 A.B:表示各个数字分 ...
51单片机入门教程学习笔记
基于江科大自化协B站教学视频<51单片机入门教程-2020版程序全程纯手打从零开始入门> 一.单片机介绍单片机,英文Micro Controller Unit,简称MCU 内部集成了 ...
廖雪峰git入门教程——学习笔记
https://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000 Q1:什么是GIT? A1:分布 ...
Unity3d菜鸟入门的学习路线--笔记1
最近刚刚开始接触unity3d,因此想把自己的学习路线记录下来,方便自己以后总结. 由于毕业论文的关系,需要使用Unity3D开发,做虚拟现实的应用,使用的设备是HTC vive pro产品. 初始学 ...
鸡啄米VS2010/MFC编程入门教程——学习1初次接触
2015年5月12日23:13:44 2013年~2014年,在九固开发伺服上位机的时候,刚开始的时候还想用VC6.0开发的,但是在WIN7下,各种不兼容,索性干脆直接换了VC2010. 原本想装VS ...
C语言入门教程学习 C语言学习包括哪些？
嵌入式开发有一定了解的朋友们知道是在操作系统内部开发的,对于操作系统内部来说基本上都是用C语言来进行编译的,所以说对于C语言的学习在嵌入式开发过程中是非常重要的.下面就给大家介绍一些C语言入门教程的相 ...

BootStrap 入门教程学习摘要笔记

以下为个人认为有必要记录的笔记 不喜勿喷

BootStrap简介

BootStrp使用

BootStrap排版

Bootstrap 网格系统（Grid System

工作原理

如何跨多个设备工作

标题

副标题

段落（正文文本）

文本

对齐

大小写

强调内容

通过颜色强调内容

其他

列表

有序列表

无序列表

定义列表

表格

BootStrap支持的一些表格元素：

表格类

th、tr、td类

表单

垂直或基本表单

内联表单

水平表单

表单校验状态

下拉菜单

下拉菜单标题

下拉菜单分割线

按钮组

按钮

向上出现的菜单

静态控件

表单帮助文本

图片

组件

图标

下拉菜单

导航栏

面包屑导航

分页

标签

徽章

超大屏幕

标题

缩略图

警告

可取消的警告

警告中的链接

进度条

堆叠进度条

多媒体对象

面板

-

来添加预定义样式的标题。

Well

弹窗modal

插件 - data属性

meta标签中的viewport

单位

BootStrap插件

过渡效果（Transition）插件

模态框（Modal）插件

下拉菜单（Dropdown）插件

滚动监听（Scrollspy）插件

标签页（Tab）插件

提示工具（Tooltip）插件

弹出框（Popover）插件

警告框（Alert）插件

按钮（Button）插件

加载状态

单个切换

复选框（Checkbox）

折叠（Collapse）插件

轮播（Carousel）插件

附加导航（Affix）插件

以下为个人认为有必要记录的笔记不喜勿喷