BootStrap 入门教程学习摘要笔记

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库：
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link href=“https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css” rel=“stylesheet”>

<!-- 可选的Bootstrap主题文件（一般不使用） -->
<script src=“https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css”>

<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src=“https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js”>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<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

标签

标签可用于计数、提示或页面上其他的标记显示。

• .label 来显示标签。
• .label-default、.label-primary、.label-success、.label-info、.label-warning、.label-danger 来改变标签的外观。

徽章

• 只需要把 添加到链接、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;。