主题
全局样式与组件（Bootstrap 1/2）
本页对应 课堂视频，共 7 段视频，约 2 小时 11 分。
学习目标
- 能说明 Bootstrap 3/4/5 的版本差异与依赖关系，并独立完成 Bootstrap CSS、jQuery、Bootstrap JS 的正确引入与基本模板搭建。
- 能使用
container、row、col-xs/sm/md/lg-*、offset、push等类名实现响应式栅格布局，并通过浏览器验证不同视口下的分栏与偏移效果。 - 能运用 Bootstrap 全局样式完成表格、按钮、图片、文本颜色、背景颜色及辅助类的应用，并能通过自定义类名覆盖默认样式。
- 能根据文档复制并改造导航条、页头、面板、列表组等组件，结合栅格系统完成页面区块布局。
- 能使用
data-*属性或 jQuery 调用方式启用选项卡、工具提示等 JavaScript 插件，并说明其基本初始化原理。 - 能独立完成“Bootstrap 页面案例 01”中的导航条改造，实现固定顶部、深色主题、菜单与搜索框布局，并验证页面滚动与响应式效果。
知识点
Bootstrap 是什么，为什么要学它
为什么需要：课堂里已经手写过选项卡、CSS 案例和若干特效，把这些样式、脚本攒成一套可复用的东西，就是界面框架的思路。Bootstrap 是 Twitter 前端工程师做出来的，出名早、接受度高，适合拿来摸清这类框架的套路。
怎么想：学习重点不是死记类名，而是理解它由哪些部分组成、怎么组织 CSS/JS、怎么按文档取用。Bootstrap 3、4、5 是同步更新的不同技术方向，不是简单替代：3 兼容性最好，依赖 jQuery；4 不再兼容 IE8；5 更激进，放弃 IE，采用网格布局方向。课程选 3，是因为它典型，且用 Less 编写，便于顺带分析源码设计。
怎么做：打开中文文档，先看“起步、全局样式、组件、插件”四大部分。下载时文档给三个选项：生产环境、源码、Sass 版。实际使用下载“生产环境”即可；想研究 Less 就下源码，源码里也带编译好的文件。
易错点：不要把“源码”和“生产环境”混为一谈；不要以为 4/5 一定比 3 新就无脑用，兼容性和项目要求要分开看。转写稿里的“几块论”就是 jQuery，“不特学”就是 Bootstrap，“山格”是栅格，“详应式”是响应式，“矢口”是视口，先把这些同音字纠正过来。
基本使用：先引入，再加类名
为什么需要：Bootstrap 自带现成 CSS 和 JS，直接拿来做页面能减少重复劳动；但引入顺序、压缩文件、目录结构不清楚，就会出现“类名写了没效果”。
怎么想：页面先引 Bootstrap 样式，再引 jQuery，最后引 Bootstrap 脚本。Bootstrap 3 的 JS 依赖 jQuery，顺序反了插件不好使。课堂目录里通常有 css、js、fonts：css 放样式，js 放脚本，fonts 放字体图标。
怎么做：
html
<link rel="stylesheet" href="./css/bootstrap.min.css">
<script src="./js/jquery.min.js"></script>
<script src="./js/bootstrap.min.js"></script>调试时先写一个 h1、按钮、段落，观察默认外边距、字号、按钮颜色是否变化。转写稿中第一次写栅格“没效果”，原因就是还没引入 Bootstrap；引入后 container 才有版心、固定宽度和居中效果。
易错点：bootstrap.min.css 是压缩版，空格换行被去掉，文件更小，适合上线；开发阶段想看报错可先用未压缩版。.map 文件是压缩后方便调试定位的映射记录，不需要手读。不要手动把 CSS 压成一行，后面用工具处理。
栅格系统：一行十二列
为什么需要：页面布局永远是先分行、行里再分列。Bootstrap 把这件事标准化：一行最多 12 份，元素通过类名声明占几份。
怎么想：先有 container（版心），里面放 row，行里放列。col-md-6 表示中等屏幕及以上占父元素的 12 分之 6。列里还能再放 row 继续分，但嵌套后的 12 份是相对“父元素”，不是整个页面。
怎么做：
html
<div class="container">
<div class="row">
<div class="col-md-3">1</div>
<div class="col-md-3">2</div>
<div class="col-md-3">3</div>
<div class="col-md-3">4</div>
</div>
</div>转写稿里先写 col-3 没分栏，补上 md 才生效；多一个列会自动换行。行间可自己加样式，列加边框时因 Bootstrap 设置了 box-sizing: border-box，内边距不会撑大尺寸。
易错点：断点是 <768 超小、≥768 小、≥992 中、≥1200 大，对应 xs/sm/md/lg。它是移动优先：只写 col-md-6，大屏也按 md，除非另写 lg 覆盖；小屏没写就默认占满。col-md-offset-3 是列偏移，转写稿里的“裂天移”就是列偏移。
全局样式：表格、表单、按钮
为什么需要：表格、表单、按钮是页面高频组成部分，Bootstrap 已写好基础样式，复制后改类名即可。
怎么想：表格先加 table，再加 table-bordered、table-hover、table-striped 等状态类；颜色语义常用 success/info/warning/danger，按钮用 btn btn-success、btn-lg、btn-sm、btn-block。
怎么做：表单建议直接从文档复制，水平表单里常再嵌一套栅格；按钮不仅可给 button，也可给 a 加类名变成按钮样式。
易错点：类名不用死记，打开文档查；按钮大小类写错就查文档纠正。表格宽度可用栅格控制，不要到处写死宽度。
组件与插件：需要哪个复制哪个
为什么需要：导航条、页头、面板、列表组、模态框、轮播图等都是页面组成部分，复制后改内容最快。
怎么想：组件是页面块，插件是 JS 效果。导航条常配合 navbar-fixed-top 固定顶部；固定后脱离文档流会盖住下面内容，转写稿中第一个 p 被盖住，解决是给 body 加上内边距，按导航条高度约 51px 调。
怎么做：选项卡靠 data-toggle="tab" 和 href="#对应内容id" 对齐；自己写 JS 时要用 jQuery 选中对应 a，再调用文档给出的 Tab 方法。
易错点：aria-*、role 等属性删掉一般不影响视觉，但它们是给屏幕阅读器做无障碍的；不要以为删了就不能用。自己写 JS 要写在 jQuery 和 Bootstrap 脚本之后。
页面案例：导航条改造
为什么需要：综合案例能把组件、插件、栅格串起来。
怎么想：先复制导航条，再把 container-fluid 改成 container 让内容进版心；加 navbar-inverse 变深色；加 navbar-fixed-top 固定顶部；搜索框用 input-group 让输入框和按钮紧挨；放大镜用字体图标类。
怎么做：改文字、改下拉项、改登录注册链接，最后用 body { padding-top: 51px; } 防止遮挡。
易错点：文档要熟，知道组件和插件里有什么；没有现成功能再自己写。类名不必背，边看文档边用，用多了自然熟。
全局样式先解决什么问题
为什么需要：页面里的表格、表单、按钮、图片、文字颜色，如果每个项目都从零写，既慢又不统一。Bootstrap 的“全局样式”就是先把这些通用元素的基础样式和类名约定好，我们复制结构、加类名即可。
怎么想：全局样式不是某个具体组件，而是“基础重置 + 类名约定”。它管的是通用元素，页面整体结构仍建议用栅格系统控制。开发时可以先引入未压缩版方便看报错；正式用压缩版减小体积。
怎么做：先引入 Bootstrap 样式，再按顺序引入 jQuery 和 Bootstrap 的 JS：
html
<link rel="stylesheet" href="./dist/css/bootstrap.min.css">
<script src="./dist/js/jquery.min.js"></script>
<script src="./dist/js/bootstrap.min.js"></script>易错点：Bootstrap 3 的 JS 依赖 jQuery，jQuery 必须在前；不要用行内样式硬改宽度，优先用栅格包一层。
表格：先加基础类，再叠加状态类
为什么需要：原生 <table> 几乎没有样式，转写稿里复制表格后“没有表格的特性”，看起来不像表格。
怎么想：Bootstrap 的表格是“基础类 + 状态类”组合。先加 table 得到基础表格，再加边框、悬停等效果。
怎么做：复制表格结构后加类名：
html
<table class="table table-bordered table-hover">
<thead>
<tr><th>姓名</th><th>课程</th></tr>
</thead>
<tbody>
<tr><td>小乐</td><td>Bootstrap</td></tr>
</tbody>
</table>调试过程：加 table 后表格样式出现；加 table-bordered 出现边框；加 table-hover 后鼠标移上去有背景色。转写稿里还演示了 success 等语义色，会让行或单元格变绿。
易错点：复制代码时容易多复制外层结构，要删干净；想改表格宽度不要写行内 600px，推荐外面套 col-md-6 之类栅格；条纹、边框、悬停类可以叠加，具体类名查文档。
表单：优先复制，水平表单看栅格
为什么需要：表单结构杂，输入框、标签、按钮手写容易乱。Bootstrap 文档给了基本表单和水平表单，直接复制最稳。
怎么想：基本表单是纵向排列；水平表单本质是在表单里又放了一套栅格系统，让标签和输入框各占份数。
怎么做：复制 form-group 结构，改文字和输入类型。转写稿里搜索框原来是两个普通元素挤在一起，换成 input-group 输入框组后，输入框和按钮就贴住了。
易错点：水平表单不要自己猜结构，先看文档里“文字占多少份、输入框占多少份”；表单整体宽度也用栅格控制，不要到处写死像素。
按钮：btn 基础类不能漏
为什么需要：按钮有默认、成功、信息、警告、危险、链接样式、大小和块级等状态，统一类名能快速切换。
怎么想：先写 btn，再加语义色，再加尺寸或块级类。转写稿里按钮颜色对应：success 绿、info 浅蓝、warning 黄、danger 红。
怎么做：
html
<button class="btn btn-default">默认</button>
<button class="btn btn-success">成功</button>
<a class="btn btn-link" href="#">链接按钮</a>
<button class="btn btn-lg btn-primary">大按钮</button>
<button class="btn btn-sm btn-info">小按钮</button>
<button class="btn btn-block btn-danger">块级按钮</button>调试过程：转写稿里演示大按钮时把 btn-lg 记错，刷新没效果，查文档后改回 btn-lg 才正常。这说明类名不熟时不要硬背，现场查。
易错点：btn 是基础类，漏了后面颜色类也不完整；a 标签加 btn 也能变按钮；btn-link 会让按钮看起来像超链接；块级按钮 btn-block 宽度跟父元素一样。
图片、辅助类与关闭按钮
为什么需要：图片形状、文字/背景语义色、关闭符号、快速浮动都是页面常用小样式，单独写重复。
怎么想：这些属于辅助类，和按钮、表格共用 success/info/warning/danger 这套语义词。转写稿里用 bg-success 给容器加绿色背景；关闭按钮用 span 加类名做出叉号，它是纯 CSS 三角/符号，不是字体图标。
怎么做：图片形状类名、关闭按钮类名直接查文档；背景色用 bg-success 等；快速浮动也查辅助类文档。易错点：Bootstrap 的绿不是正绿，是调配过的语义色；类名不要死记，文档里“全局样式/辅助类”一查就有。
本节学习路线与易错点
全局样式大部分是“复制—改内容—叠类名”，真正要理解的是类名组合关系和用栅格控制宽度。转写稿反复强调：不要局限于背类名，要熟悉文档结构，知道表格、表单、按钮、辅助类分别去哪里找。易错点集中在三处：引入顺序错、基础类漏写、用行内样式硬改布局。把这三处避开，全局样式就能快速拼出可用页面。
组件是什么：先建立“复制—改类名—改内容”的套路
为什么需要：Bootstrap 的组件就是页面里现成的组成部分，比如导航条、下拉菜单、输入框组、字体图标、巨幕、路径导航、缩略图、分页等。转写稿反复强调：组件不是让你从零写，而是“需要哪个复制哪个”，再把内容和类名改成项目要的样子。
怎么想：先判断页面由哪些块组成，再去文档“组件”里找对应示例。找到后不要急着大改结构，先复制整段，再改文字、改颜色、改宽度。宽度优先交给栅格系统，组件本身负责外观和交互。
怎么做：基本引入顺序不能反，Bootstrap 3 依赖 jQuery，所以先引入 jQuery，再引入 Bootstrap 的 JS：
html
<link rel="stylesheet" href="./dist/css/bootstrap.min.css">
<script src="./dist/js/jquery.min.js"></script>
<script src="./dist/js/bootstrap.min.js"></script>易错点：不要一上来背类名。转写稿里讲师明确说类名“不用刻意记，会看文档就行”。真正要熟的是文档结构：全局样式、组件、JS 插件分别去哪里找。
导航条：从示例改出项目导航
为什么需要：导航条是页面顶部最常见的组件，包含标题、导航项、下拉菜单、搜索框、登录注册等。手写一个带响应式和下拉交互的导航条很费时间，用组件能快速拼出来。
怎么想：转写稿的调试过程是：先复制导航条示例，发现它默认是 container-fluid，内容贴满全屏；而案例要求内容在版心里，于是把 container-fluid 改成 container。颜色默认是灰的，案例要黑色，就把 navbar-default 改成 navbar-inverse。需要固定在顶部时加 navbar-fixed-top。
怎么做：核心是改类名和内容，不是重写结构：
html
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<!-- navbar-header、navbar-collapse 等结构从文档复制后改文字 -->
</div>
</nav>固定顶部后，转写稿发现第一个段落被导航条盖住，原因是固定定位脱离文档流。解决方法是给 body 或后续内容加上边距，讲者通过检查元素看到导航条约 51px 高，于是加：
css
body {
padding-top: 51px;
}易错点：navbar-fixed-top 不是“加了就完事”，要处理遮挡；container-fluid 和 container 是两种宽度效果，别混用。
下拉菜单、输入框组、字体图标：三个高频小件
下拉菜单为什么需要：导航项多时要把“课程、视频”等收进下拉里。怎么想：它既是组件也带插件，示例里 data-toggle 等属性负责触发，aria- 开头属性主要给屏幕阅读器用，删掉一般不影响页面效果。怎么做：从导航条示例复制下拉结构，改菜单文字；分割线保留，讲师演示时它显示成一条线。易错点：不要自己臆造触发属性，按文档示例改 data- 属性最稳。
输入框组为什么需要：搜索框的输入框和按钮默认会分开，输入框组能让它们紧挨着。怎么想：把原来的普通 input 和 button 换成 input-group 结构。怎么做：从文档复制输入框组示例，替换导航条里的搜索表单。易错点：输入框组解决的是“贴合”，不要再用额外浮动硬挤。
字体图标为什么需要：搜索按钮里要放大镜，不想用图片。怎么想：Bootstrap 自带字体图标，用行内元素加类名即可。怎么做：转写稿演示用 i 标签，类名从组件文档复制：
html
<i class="glyphicon ..."></i>易错点：类名要从文档复制，别凭记忆写；字体文件路径要跟 CSS 一起放对。
巨幕、缩略图、路径导航、分页等：按需复制
巨幕为什么需要：做首屏大横幅。怎么想：复制 jumbotron 示例，再自己加背景图。转写稿建议不要直接改 Bootstrap 类名，而是自己加前缀类名，例如“小乐-”前缀。怎么做：
css
.xiaole-jumbotron {
background: url("./images/xxx.jpg") center / cover;
color: #fff;
}易错点：背景图路径、文字颜色要自己处理；宽度仍建议放栅格里。
缩略图、路径导航、分页：转写稿只列了名字，没有展开具体结构。可靠做法是：在文档“组件”里找到对应示例，复制后改内容；路径导航用于层级位置，分页用于列表翻页。易错点：不要凭记忆写类名，具体类名和结构以文档为准。
组件和栅格配合：宽度交给栅格
为什么需要：组件复制过来往往占满父元素，列表组、面板、选项卡需要控制宽度。怎么想：外层用 row 分行，再用 col-md-* 分列，把组件放进列里。怎么做：例如列表组放 col-md-4，面板放 col-md-3。易错点：栅格分的是父元素的 12 份，不是整个页面；嵌套时要在列里再写 row。组件学习的关键不是背，而是熟悉文档后快速复制、改类名、改内容，再用栅格收住布局。
先看插件在 Bootstrap 里的位置
Bootstrap 文档通常分三块：全局 CSS、组件、JavaScript 插件。插件就是已经写好的交互效果，例如下拉菜单、collapse 展开收起、模态框 modal.js、轮播图 carousel.js，以及转写稿里重点演示的选项卡（tab）和工具提示（tooltip）。学习时不要一上来背类名，而要先掌握套路：先保证 jQuery 和 bootstrap.js 按顺序引入，再从文档复制结构，改文字和 data 属性；需要自己控制时，再用 jQuery 调插件方法。
html
<link rel="stylesheet" href="./dist/css/bootstrap.min.css">
<script src="./dist/js/jquery.min.js"></script>
<script src="./dist/js/bootstrap.min.js"></script>为什么需要：插件依赖脚本，顺序错了效果不出现。怎么想：Bootstrap 3 的插件依赖 jQuery，所以先 jQuery 后 bootstrap.js。怎么做：把压缩版 CSS/JS 引入页面，自己写的样式和脚本放在后面。易错点：把 bootstrap.js 写在 jQuery 前面；以为只引 CSS 就能弹框；把 bootstrap.min.css.map 当成业务文件，其实它只方便压缩后调试。
下拉菜单 dropdown
为什么需要：导航里“课程”“视频”等需要二级菜单，手写显示隐藏和点击外部关闭很繁琐。怎么想：Bootstrap 用 data-toggle="dropdown" 驱动，结构复制后改文字即可。怎么做：父项加 dropdown，触发链接加 dropdown-toggle 和 data-toggle="dropdown"，菜单用 dropdown-menu；分割线用 divider。易错点：删掉 data-toggle 后菜单不弹；divider 是分割线不是文字；下拉菜单本身也是插件，不能只写 CSS 类名。
html
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">课程</a>
<ul class="dropdown-menu">
<li><a href="#">HTML</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">JavaScript</a></li>
</ul>
</li>collapse 展开收起
为什么需要：导航条在窄屏要折叠成三横杠，点开再显示菜单；手写高度动画容易出错。怎么想：转写稿里的导航条用了 navbar-collapse，三横杠按钮负责展开收起，这背后就是 collapse 插件。怎么做：复制导航条结构，保留 data-toggle="collapse" 和 data-target，改菜单文字。易错点：导航条固定顶部后会脱离文档流，下面的第一个段落被盖住；转写稿的调试是给 body 加上边距，按导航条高度约 51px 处理。
html
<button data-toggle="collapse" data-target="#navMenu">展开/收起</button>
<div id="navMenu" class="collapse">菜单内容</div>选项卡 tab 插件：转写稿的重点推导
为什么需要：选项卡要点击标题切换内容，自己写要维护选中状态和内容显隐。怎么想：标题的 href="#home" 对应内容区的 id="home"，再加 data-toggle="tab"，插件就能接管。怎么做：先复制文档结构，改标题和内容；如果要让外部按钮控制选项卡，用 jQuery 选中对应链接并调用 .tab('show')。易错点：转写稿特别调试过——document.querySelector() 得到原生 DOM 对象，没有 .tab()；必须用 $() 得到 jQuery 对象再调用。ARIA 属性删掉不影响功能，但它是给屏幕阅读器做无障碍阅读的，不要误以为它是效果开关。
html
<ul class="nav nav-tabs">
<li class="active"><a href="#home" data-toggle="tab">首页</a></li>
<li><a href="#message" data-toggle="tab">消息</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home">首页内容</div>
<div class="tab-pane" id="message">消息内容</div>
</div>js
$('#btnHome').click(function () {
$('a[href="#home"]').tab('show');
});工具提示 tooltip
为什么需要：按钮或链接需要悬浮提示，纯 title 样式不可控。怎么想：Bootstrap 用 data-toggle="tooltip" 声明插件，title 放提示文字，data-placement 控制方向。怎么做：从文档复制示例，改 title 和方向；它同样依赖 bootstrap.js。易错点：只写 title 不会变成 Bootstrap 提示；删掉 data-toggle 后插件不接管；不要把提示文字写成按钮可见文字。
html
<button class="btn btn-default"
data-toggle="tooltip"
data-placement="top"
title="提示文字">按钮</button>模态框 modal.js 与轮播图 carousel.js
为什么需要：模态框用于弹层确认，轮播图用于多图切换，都是常见但手写成本高的交互。怎么想：它们和下拉、collapse 一样，优先在“插件”页找示例复制，再改内容和尺寸；转写稿明确说这两个放到综合案例中演示，因此这里不编造额外参数。怎么做：先确认脚本已引入，再复制对应示例结构，保留触发按钮和内容容器的对应关系。易错点：不要在没有引入 bootstrap.js 时手写动画；不要删掉触发按钮与目标容器之间的对应属性；固定导航条遮挡内容的问题同样要在综合案例里检查。
调试顺序与学习原则
为什么需要：插件代码是现成的，出错多半在引入顺序、复制遗漏和对象类型。怎么想：先看控制台，再查 jQuery 是否先加载，最后查 data-* 是否完整。怎么做：按“引入脚本→复制结构→改文字→需要时写 jQuery 调用”的顺序做。易错点：把 data-toggle 写成 data-togo；把 .tab() 用在原生 DOM 上；忘了固定导航条要给内容让出上边距。掌握这套套路后，换其他界面框架也能快速上手。
课堂画面
代码示例
示例一：Bootstrap 基本使用 + 栅格系统
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 基本使用</title>
<!-- 引入编译好的压缩版样式 -->
<link rel="stylesheet" href="./dist/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="page-header">
<h1>Bootstrap 基本使用 <small>基本使用</small></h1>
</div>
<!-- 一行放 4 个，每个占 12 份里的 3 份 -->
<div class="row">
<div class="col-md-3">1</div>
<div class="col-md-3">2</div>
<div class="col-md-3">3</div>
<div class="col-md-3">4</div>
<div class="col-md-3">5</div>
</div>
<!-- 列嵌套：8 份里再分成 6 + 6 -->
<div class="row">
<div class="col-md-4">占 4 份</div>
<div class="col-md-8">
<div class="row">
<div class="col-md-6">内层 6 份</div>
<div class="col-md-6">内层 6 份</div>
</div>
</div>
</div>
<!-- 表格：一个 table 类名就有样式，其他是状态类 -->
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>编号</th>
<th>课程</th>
</tr>
</thead>
<tbody>
<tr class="success">
<td>1</td>
<td>HTML5</td>
</tr>
<tr class="danger">
<td>2</td>
<td>CSS3</td>
</tr>
</tbody>
</table>
<p class="text-danger">红色文字</p>
<p class="text-success">绿色文字</p>
<button class="btn btn-danger">按钮</button>
<button class="btn btn-info btn-lg">大按钮</button>
<button class="btn btn-default btn-sm">小按钮</button>
<button class="btn btn-default btn-block">块级按钮</button>
</div>
<!-- 顺序不能反：先 jQuery，再 bootstrap -->
<script src="./dist/js/jquery.min.js"></script>
<script src="./dist/js/bootstrap.min.js"></script>
</body>
</html>要点解释关键行和易错点：
bootstrap.min.css/bootstrap.min.js是压缩版（把空格换行去掉了，体积更小，正式用），bootstrap.css是未压缩版，便于调试。container是版心，宽度本身是响应式的；row必须包在container（或container-fluid）里，col-*必须包在row里，这是栅格的三层结构。col-md-3的md是中等屏幕（≥992px），一共 12 份，占 3 份就是 1/4；一行放满 12 份之后多余的元素会自动换行。- 列嵌套时，内层再分 12 份是相对于父列，不是相对于整个页面。
table、table-bordered、table-hover可以叠加；success / info / warning / danger这套颜色词在表格、按钮、文字、背景里通用。- 易错点：jQuery 必须先引入，Bootstrap 3 依赖 jQuery，顺序反了插件就不好使。
- 易错点：
btn-block让它变成块元素、宽度和父元素一样，注意父级宽度。
示例二：响应式栅格系统
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>响应式栅格系统</title>
<link rel="stylesheet" href="./dist/css/bootstrap.min.css">
<style>
[class*="col-"] {
border: 1px solid #ccc;
padding: 10px;
}
</style>
</head>
<body>
<!-- container 自带响应式宽度：768→750，992→970，1200→1170 -->
<div class="container bg-success">
<!-- 每种屏幕都单独设计：超小 6、小 4、中 3、大 2 -->
<div class="row">
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">1</div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">2</div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">3</div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">4</div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">5</div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">6</div>
</div>
<!-- 只写 sm 和 md：小于 768 时没有设置，默认占满 -->
<div class="row">
<div class="col-sm-6 col-md-3">只写了 sm 和 md</div>
<div class="col-sm-6 col-md-3">只写了 sm 和 md</div>
</div>
<!-- 列偏移：占 6 份再向右偏 3 份，等于居中 -->
<div class="row">
<div class="col-md-6 col-md-offset-3">col-md-6 col-md-offset-3</div>
</div>
<!-- 响应式工具类：在小屏幕上隐藏 -->
<div class="row">
<div class="col-md-6 hidden-sm">我在小屏幕上隐藏</div>
<div class="col-md-6">正常显示</div>
</div>
</div>
<script src="./dist/js/jquery.min.js"></script>
<script src="./dist/js/bootstrap.min.js"></script>
</body>
</html>要点解释关键行和易错点：
- 断点：
xs< 768，sm768~992，md992~1200，lg≥ 1200，对应 sm=small、md=medium、lg=large。 - 移动优先：内部媒体查询写的是
min-width，所以只写col-md-6时，大屏幕（lg）也按 md 的 6 份走，除非你给 lg 单独设置了；而比 md 小的屏幕相当于“没设置”，默认占满整行。 - 所以规则是：比自己大的屏幕沿用设置，比自己小的屏幕默认 100%。
col-md-offset-3是向右偏移 3 份，和col-md-6加起来正好 12，实现居中；如果只写 offset 不写宽度，容易看不出效果。- 易错点：偏移和占的份数要同步写，比如
col-md-6配col-md-offset-3，只在 md 及以上生效，小屏幕既不占 6 份也不偏移。 - 易错点：
hidden-sm只是在该尺寸隐藏，不是“小及以下都隐藏”，其他尺寸仍正常显示。 - 选择器
[class*="col-"]是属性选择器，class 值里包含col-的都命中，用来统一加边框方便观察。
示例三：导航条 + 选项卡插件
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>导航条与选项卡</title>
<link rel="stylesheet" href="./dist/css/bootstrap.min.css">
<style>
/* 固定定位脱离文档流，用上内边距把内容让出来 */
body { padding-top: 51px; }
.xiaole-tab { margin-top: 20px; }
</style>
</head>
<body>
<!-- 导航条：直接复制组件改内容，navbar-inverse 变黑底白字 -->
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-navbar">
<span class="sr-only">切换导航</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">上硅谷</a>
</div>
<div class="collapse navbar-collapse" id="bs-navbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">首页</a></li>
<li><a href="#">视频</a></li>
<li><a href="#">课程</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">前端 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">HTML5</a></li>
<li><a href="#">CSS3</a></li>
<li><a href="#">JavaScript</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Vue</a></li>
<li><a href="#">React</a></li>
</ul>
</li>
</ul>
<!-- 输入框组让输入框和按钮紧挨着 -->
<form class="navbar-form navbar-left">
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">登录</a></li>
<li><a href="#">注册</a></li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-md-6">
<!-- 选项卡：标题用 nav-tabs，href 对应下面面板的 id -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">
<a href="#home" data-toggle="tab" role="tab">首页</a>
</li>
<li role="presentation">
<a href="#profile" data-toggle="tab" role="tab">视频</a>
</li>
<li role="presentation">
<a href="#message" data-toggle="tab" role="tab">课程</a>
</li>
<li role="presentation">
<a href="#settings" data-toggle="tab" role="tab">设置</a>
</li>
</ul>
<div class="tab-content xiaole-tab">
<div class="tab-pane active" id="home" role="tabpanel">首页的内容</div>
<div class="tab-pane" id="profile" role="tabpanel">视频的内容</div>
<div class="tab-pane" id="message" role="tabpanel">课程的内容</div>
<div class="tab-pane" id="settings" role="tabpanel">设置的内容</div>
</div>
</div>
</div>
</div>
<script src="./dist/js/jquery.min.js"></script>
<script src="./dist/js/bootstrap.min.js"></script>
</body>
</html>要点解释关键行和易错点：
navbar-inverse直接变黑底白字，比手写样式省事；navbar-fixed-top会变成直角并固定在顶部。- 固定定位会脱离文档流，后面的内容会被盖住，所以要给
body加padding-top（按导航条实际高度，这里约 51px）。 navbar-header里的三个icon-bar就是响应式那个“三条杠”，配合data-toggle="collapse"和data-target="#bs-navbar"使用，靠的是 collapse 插件，一行 JS 都不用写。data-toggle="dropdown"是下拉菜单插件；divider是下拉里的分割线；caret是那个小三角。- 搜索框用
input-group+input-group-btn才能让输入框和按钮紧挨着；图标用glyphicon glyphicon-search，需要dist/fonts字体文件在位，否则图标显示成方块——这是最常见的易错点。 - 选项卡靠的是
data-toggle="tab"加上href="#id"，这个#id对应下面tab-pane的id，不是锚点跳转；active决定默认选中的是哪一项和哪块内容。 - 复制过来的
role、aria-*属性是给屏幕阅读器用的，删掉不影响功能。 - 易错点：
tab-pane的 id 和href对不上、忘了给默认面板加active，就会出现点了没反应或者一进去什么都不显示。 - 想自己改样式时，按转写稿建议加自己的前缀类名（如
xiaole-tab），不要直接改 Bootstrap 的类，保证选择器权重够或者写在后边覆盖。
常见错误
- 现象：下拉菜单、模态框、选项卡点击无反应，控制台报
jQuery is not defined→ 原因：Bootstrap 3 插件依赖 jQuery，且引入顺序写反或漏引 → 修法：按jquery.min.js → bootstrap.min.js顺序引入，生产用压缩版、调试可换未压缩版。 - 现象：小屏下列布局突然全宽或挤成一行 → 原因：只写了
col-md-*，小屏断点没有显式设计，移动优先下未设置的断点按默认全宽处理 → 修法：按xs/sm/md/lg逐级确认，必要时补col-xs-*、col-sm-*，并在浏览器不同宽度下实测。 - 现象：栅格出现横向滚动、左右间距怪异、列高不齐 → 原因：
col没放在.row里，或.row没放在.container/.container-fluid里，负边距和 padding 配套关系被破坏 → 修法：固定使用container > row > col层级，嵌套列时在列内再写row > col。 - 现象：自定义按钮/导航条样式不生效 → 原因：选择器权重低于 Bootstrap，或自定义 CSS 引入在 Bootstrap 之前 → 修法：自定义样式放在 Bootstrap 之后，加项目前缀类提高权重，避免直接改框架源码。
- 现象：复制组件后插件不触发，或删了
data-*后功能消失 → 原因：把驱动插件的data-toggle/data-target当冗余属性删掉；aria-*主要服务屏幕阅读器，功能属性不能删 → 修法：保留data-*，按文档改值；aria-*可保留，便于无障碍阅读。 - 现象：导航条
navbar-fixed-top后首屏内容被盖住 → 原因：固定定位脱离文档流，后续内容顶到导航条下面 → 修法：给body或主内容加等于导航高度的padding-top/margin-top，并随导航高度调整。 - 现象：表格、表单复制后“没样式” → 原因：只复制了结构，漏了
.table、.form-group、.form-control等基础类 → 修法：先补基础类，再按需叠加.table-bordered/.table-hover、水平表单栅格等状态类。 - 现象：用
querySelector拿到元素后调.tab()报错 → 原因：插件方法挂在 jQuery 对象上，DOM 对象没有该方法 → 修法：用$()/jQuery()获取元素后再调用插件方法，明确 DOM 对象与 jQuery 对象区别。
练习
- 用 Bootstrap 3 搭一个响应式导航条：品牌、首页/课程/视频下拉、输入框组搜索、登录/注册；要求固定顶部，并解决内容被遮挡问题，记录各断点下的折叠表现。
- 用栅格实现商品列表：
xs1 列、sm2 列、md3 列、lg4 列；给每列加边框和内边距，要求不撑破布局，并测试 768/992/1200 附近的变化。 - 在同一行放一个表格和一个表单：表格加基础类、边框、悬停；表单做水平排列；小屏时自动堆叠，按钮和输入框使用输入框组/按钮组。
- 用选项卡插件完成两种写法：先纯
data-*实现，再用 jQuery 调用.tab()切换到指定项；说明为什么不能直接用querySelector的结果调插件方法。 - 用工具提示实现四个方向的提示，修改提示文字和方向；再做一个“导航条 + 巨幕 + 面板/缩略图 + 轮播图”的小综合页，要求组件复制后改内容、加自定义前缀类覆盖样式。
原视频对照
| # | 视频 | 时长 |
|---|---|---|
| 1 | BootStrap介绍 | 13:32 |
| 2 | Bootstrap基本使用 | 32:32 |
| 3 | Bootstrap的栅格系统 | 32:06 |
| 4 | Bootstrap的全局样式 | 12:40 |
| 5 | Bootstrap组件 | 06:44 |
| 6 | Bootstrap插件 | 19:26 |
| 7 | Bootstrap页面案例01 | 14:14 |
小结
- 本阶段重点不是背类名，而是掌握“引资源→搭栅格骨架→复制组件改内容→用
data-*启插件→自定义样式覆盖”的界面框架使用套路。 - Bootstrap 3 兼容性好且依赖 jQuery；4/5 技术方向不同，但组件化、栅格化、插件化的使用脉络一致，迁移学习成本可控。
- 栅格必须按移动优先和断点来设计，行/列层级不能乱；只写一个断点类名时，要明确小屏和大屏分别继承到什么效果。
- 插件排错先看依赖和引入顺序，再看
data-*是否完整；调试用未压缩资源，生产用min资源，并保留map便于定位。 - 组件和插件文档的熟悉度直接决定开发效率；需要什么复制什么，但复制后必须按项目内容、断点和样式规范改造。
- 自定义样式要放在框架样式之后，用项目前缀类隔离，避免升级或换框架时大面积冲突。
- 源码和 Less 结构值得借鉴，但日常开发优先使用编译产物；固定导航、栅格嵌套、表单/表格基础类是案例中最容易翻车的检查点。