图标

早期的图标都是一个一个的图片，不利于页面性能优化：

• 图片本身更大
• 每一个图片，都要使用一次HTTP请求

所以，后来就出现了专门的图标库。流行的有

• iconfont（阿里）：缺点是不成体系，好处是（几乎）应有尽有，还可以自己上传图片转成图标
• fontawesome：缺点是免费可用的少，好处是成体系（而且有方便的“动态”图标）
  
• ……

bootstrap4也提供了官方（但不是内置）的图标库。

安装

一样可以使用CDN、npm和手动下载三种方式。

基于字体

使用前要引入.css文件：

<link rel="stylesheet" href="bootstrap-icons.css">

在这个.css文件中，引入了两个.woff字体文件：

@font-face {
  font-family: "bootstrap-icons";
  src: url("./fonts/bootstrap-icons.woff2?524846017b983fc8ded9325d94ed40f3") format("woff2"),
url("./fonts/bootstrap-icons.woff?524846017b983fc8ded9325d94ed40f3") format("woff");
}

当我们使用样式创建字体的时候（比如bi bi-activity）：

<i class="bi bi-activity"></i>

CSS做了两件事：（演示）

• 通过伪类填充了内容（实际上确定了图标的内容）：

  .bi-activity::before { content: "\f66b"; }

• 为内容引用了字体（实际上是将其扭曲变形）

  .bi::before,
  [class^="bi-"]::before,
  [class*=" bi-"]::before {
    display: inline-block;
    font-family: bootstrap-icons !important;

此外，使用时注意事项：

• 不要在 i 标签中插入文本，以免造成一些意料之外的问题
• 可以为图标添加简单样式，比如颜色：

  <i class="bi bi-activity text-success"></i>

SVG图片和Sprite

Scalable Vector Graphics（可缩放矢量图形），可以简单的理解成：能够在HTML中直接用文本/字符描述的图形。

好处：不要求新的HTTP请求

CSS Sprite：一种一次性加载拼接而成的大幅图片，在呈现时使用CSS技术只显示其中的一部分。

目的：减少HTTP请求。

其他详见文档，推荐使用基于字体的图标生成。使用基于svg的图标，唯一勉强能说得过去的是：不需要字体和.css文件，但还是需要加载.svg呀！

组件

待讲折叠时再讲：

JavaScript行为

“动画”效果需要（暂时由CDN）引入JQuery和bootstrap.js：

<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script src="/node_modules/bootstrap/dist/js/bootstrap.min.js"></script>

PS：注意先后顺序。

暂目前只介绍“声明式”使用方法，不需要任何JavaScript代码，只需要在HTML标签中进行声明即可，通常是：

• data-*=""，指定动作类型
• href=""，或者data-target=""，指定动作对应的目标元素id（用#打头）或class（用.打头）

可访问性

组件代码中经常会出现这样一些为screen reader（盲人）服务的CSS类或HTML属性：

• .sr-only：sreen reader-only，仅供screen reader使用，不会显示，类似于hidden （表单中出现）
  
• role：标签的作用
  
• aria-*：Accessible Rich Internet Applications

我们原封不动的复制使用即可。

参考文档整理归类：

展示类

静态

徽章（Badge）：还可以是胶囊状（pill）的

卡片（Card）：能够简单的形成瀑布流（Masonry-like columns），赞！

巨幕（Jumbotron）：

媒体对象（Media object）：非常适合做（带头像的）评论（列表）

列表组（List group）：JavaScript效果暂时略过

动态

折叠（Collapse）：典型的JavaScript应用场景

轮播（Carousel）：

进度条（Progress）：进度条本身的增长还需要自己用JavaScript实现

滚动监听（Scrollspy）：需要基于nav和list group

旋转图标（Spinners）：有点简陋/鸡肋。fontawesome提供了更有“逼格”的实现。

提示类

警告框（Alerts）

轻量弹框（Toasts）

工具提示框（Tooltips）

弹出框（Popovers）

模态框（Modal）：static蛮有用的

表单类

按钮（Buttons） ：a标签上也可以使用btn样式，且通过.disabled类真的可以禁用href跳转：

a.btn.disabled {
  pointer-events: none;
}

按钮组（Button group）

表单（Forms）：理解custom form（checkbox/radio，file browser 等）

• 使用capacity隐藏原来的等，
• 再通过伪元素生成一个“假”元素做样式

输入组（Input group）

导航类

面包屑导航（Breadcrumb）

分页（Pagination）

下拉菜单（Dropdowns）：注意和“下拉列表（select/option）”区分，没有form表单提交的功能

导航（Navs） 

导航条（Navbar）

定制

可以两种方式，进一步的定制（自定义）bootstrap：

1. 所有的bootstrap变量均放在scss/_varaibles.scss中，可以修改其变量值
2. 使用免费/付费的主题（theme）

以上两种方式都是骨灰级玩家……

但作为普通开发者，都应该：尽可能的使用bootstrap内置（及其扩展）样式，尽可能避免使用自己的行内样式，尤其不能：

修改bootstrap.css及其.js文件！

作业

1. 参照一起帮，利用bootstrap修饰之前作业完成页面：
   
   1. 展示类
   2. 表单类
      
   注意细节：主要是对齐间隔等，bootstrap4和bootstrap3自身差异造成的颜色阴影等除外。
   

源栈学历

在当前系列 Bootstrap和JQuery 中继续学习：

多快好省！前端后端，线上线下，名师精讲

• 先学习，后付费；
• 不满意，不要钱。
• 编程培训班，我就选源栈

更多了解 加：