学编程,来源栈;先学习,再交钱
当前系列: Bootstrap和JQuery 修改

图标

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

  • 图片本身更大
  • 每一个图片,都要使用一次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自身差异造成的颜色阴影等除外。
源栈培训 前端 CSS bootstrap
觉得很 ,不要忘记分享哟!

任何问题,都可以直接加 QQ群:273534701

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

我们的 特色

  • 先学习,后付费
  • 线上/线下,自由组合

更多了解

QQ群:273534701

答疑解惑,远程debug……

B站 源栈-小九 的直播间

写代码要保持微笑 (๑•̀ㅂ•́)و✧