【Bootstrap】Bootstrap速成指南

Bootstrap是一款非常优秀的移动端优先的前端架构。我甚至认为，那些做back-end的码农，前端只要掌握HTML5/CSS3， JS/JQ和bs就行了。bs的学习也非常快，过一遍official documentation就好了，以后使用的时候来老地方copy就行了。

先说说我对bs的理解：

1. 首先bs基本上都是已经给你写好的css，js，你下载下来离线引用，或者直接使用CDN也行。
2. CSS有所谓的优先级规则，优先级高的样式会覆盖优先级低的样式，这就是为什么我们不推荐一个页面中使用多个前端框架，因为多个框架之间的css可能会产生非常复杂的覆盖作用，这样我们的样式将变得混乱。
3. 在bs已经把css和js封装的情况之下，我们还可以使用各种编辑器的bs4补全插件，让插件为我们自动生成代码，这时候我们只需要记住一些特别的类的就可以了。

这篇博文，就是在vscode编辑器上，使用plugin排名中的第一名：Bootstrap 4, Font awesome 4, Font Awesome 5 Free & Pro snippets（对，这一长串都是一个插件的名字）进行bs的学习。

需要注意的是，这篇博文主要是基于插件的，我会删除一些插件中基本上没什么效果，或者bs4本身就不用记的内容（比如h1等标签样式的重写）来尽可能地减少文章的大小。如果你发现你需要的元素或者样式不再你的记忆宫殿中，你大可以直接去官网上查询。

下面就让我们开始吧！

 

零. 基础操作

我们可以直接用插件引入我们必要的CSS和JS文件（截止bs4版本，我们还需要提前引入jq，但是bs5就不需要了，bs5都用了原生js进行了重写），那就是键入b4-$。

 

一. 内容之表格

表格的话，该插件主要有两种补全方式，我比较推荐b4-table-special的缩写补全。

除了补全中给到的类以外，其余推荐的类有：

1.  table-hover: 给相应的行提供一个鼠标悬停效果的样式。
2. bg-info, bg-success, ..等： 给相应的行或者单元格指定背景颜色。

 

二. 组件之alert

我关注的alert一共有两种：一种是dismissable的，另一种则是非dismissable的。

这两个一个可以用b4-alert-default实现，另一个可以用