这是我参与2022首次更文挑战的第12天，活动详情查看：2022首次更文挑战

Bootstrap入门笔记

Bootstrap是一种Web前端开发框架，它为大多数标准的UI设计场景提供了用户友好的、跨浏览器的解决方案。它现成可用且经受了社区考验的HTML标记、CSS样式及JavaScript行为的组合，极大地提高了Web前端界面的开发效率，创造了让人愉悦的效果。Bootstrap 将设置全局的 CSS 样式。HTML 的基本元素均可以通过 class 设置样式并得到增强效果。当然，还有可以用作响应式的栅格系统！

一. 简化版教程（纯新手食用）

1. 用法

引入：在html文件开头引入别人写好的CSS文件

<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

使用：自己只需要在需要的标签元素那里设置特定的class属性就行。比如一个按钮，给它加上class属性，就能顺带修改它的样子了。~~（有手就会）~~

    <button> normal button</button>
    <button class="btn btn-default">default button</button>
    <button class="btn btn-primary">primary button</button>
    <button class="btn btn-info">info button</button>
    <button class="btn btn-danger">danger button</button>
    <button class="btn btn-success">info button</button>
    <button class="btn btn-warning">warning button</button>

2. 类名

那么问题来了，怎么知道要改成哪些类名class呢？

表格参考网址：v3.bootcss.com/css/#tables

按钮参考网址：v3.bootcss.com/css/#button…

其他的继续找就能找到啦~

3. 布局（栅格系统）

Bootstrap的核心，也是它响应式布局的一个亮点。能在页面上左右排版自己的东西。

简化用法说明(正常PC端)：在class= row中嵌套 class = col-md-数字就行。

参考网址：v3.bootcss.com/css/#grid-e…

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <style>
        .col-md-1{
            background-color: black;
        }
        .col-md-2{
            background-color: blue;
        }
        .col-md-3{
            background-color:yellow;
        }
        .col-md-4{
            background-color: red;
        }
        
    </style>
</head>
<body>
    <div class="row">
        <div class="col-md-1">col-md-1</div>       
        <div class="col-md-2">col-md-2</div>       
        <div class="col-md-3">col-md-3</div>       
        <div class="col-md-4">col-md-4</div>       
    </div>
</body>
</html>

类名里面的数字代表占有几列，而一行中默认有12列。

里面的md针对中等屏幕设备生效。

针对超小屏幕设备所定义的类，即 .col-xs-*

针对平板设备的 .col-sm-* 类

里面还有一种类名代表偏移的：v3.bootcss.com/css/#grid-o…

二. 细致版教程

1. 环境搭建

下载预编译压缩的bootstrap到本地，再导入项目中去。
从CDN直接引入

<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
<!--或者-->
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" rel="stylesheet">
<!--后面两条可以放在后面-->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>

<!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">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap HelloWorld</title>

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <h1>你好，世界！</h1>

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
  </body>
</html>

2. 基本模板

不要觉得下面的代码和上面一样，实际还是有点区别的。如果用到的CSS样式不依赖于JS插件，是可以不用引入jQuery那些JS文件的。

<!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">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>你好，世界！</h1>

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
  </body>
</html>

3. 响应式布局

同一套页面可以兼容不同分辨率的设备

实现：依赖于栅格系统。随着屏幕尺寸的增加，系统会自动分为最多12列。

栅格系统的使用方法：说白了就是用定义好的类（class）

容器

相当于之前的table。

.container 类用于固定宽度并支持响应式布局的容器，两边留白。

.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。

（这两种容器类不能互相嵌套）

行

相当于之前的tr。

“行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
通过“行（row）”在水平方向创建一组“列（column）”。

列

指定该元素在不同设备上的所占的格子的数目。

格式：col-设备代号-格子数目

设备代号：

xs：超小屏幕，手机（<768px）

sm：小屏幕平板 (≥768px)

md：中等屏幕桌面显示器 (≥992px)

lg：大屏幕大桌面显示器 (≥1200px)

你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。
类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。
通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。

注意

一行中如果格子数目超过12，则超出部分自动换行。

栅格属性可以向上兼容。小屏幕定义的属性适用于大屏幕。

如果设备宽度小于栅格类元素属性设置的最小宽度，那么一个元素会占满一行。

案例

<!DOCTYPE html>
<script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link
    href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css"
    rel="stylesheet">
<script
    src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
 
<style>
   
div.container div.row div {
    margin:5px 0px;
}
div.container div.row div {
    background-color: lightgray;
    border: 1px solid gray;
    text-align:center;
}
</style>
 
<div class="container">
    <div class="row">
        <div class="col-xs-12 ">一共12列</div>
    </div>
</div>
 
<div class="container">
    <div class="row">
        <div class="col-xs-1 ">1列</div>
        <div class="col-xs-1 ">1列</div>
        <div class="col-xs-1 ">1列</div>
        <div class="col-xs-1 ">1列</div>
        <div class="col-xs-1 ">1列</div>
        <div class="col-xs-1 ">1列</div>
        <div class="col-xs-1 ">1列</div>
        <div class="col-xs-1 ">1列</div>
        <div class="col-xs-1 ">1列</div>
        <div class="col-xs-1 ">1列</div>
        <div class="col-xs-1 ">1列</div>
        <div class="col-xs-1 ">1列</div>
    </div>
</div>
<div class="container">
    <div class="row">
        <div class="col-xs-4 ">占4列</div>
        <div class="col-xs-4 ">占4列</div>
        <div class="col-xs-4 ">占4列</div>
    </div>
</div>

列偏移

使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。例如，.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列（column）的宽度。

嵌套列

为了使用内置的栅格系统将内容再次嵌套，可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内。被嵌套的行（row）所包含的列（column）的个数不能超过12（其实，没有要求你必须占满12列）。

列排序

通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列（column）的顺序。

下面做个简单的区分，其中push和offset类似。

col-md-offset-3（在左侧补充3列） col-md-push-8（从左侧往右侧推8列） col-md-pull-2（往左侧拉2列）

语义化布局 Less mixin 和变量

除了用于快速布局的预定义栅格类，Bootstrap 还包含了一组 Less 变量和 mixin 用于帮你生成简单、语义化的布局。

变量

@grid-columns:              12;
@grid-gutter-width:         30px;
@grid-float-breakpoint:     768px;

mixin

例子：

.wrapper {
  .make-row();
}
.content-main {
  .make-lg-column(8);
}
.content-secondary {
  .make-lg-column(3);
  .make-lg-column-offset(1);
}

4. 样式

全局css样式

按钮：
- <button type="button" class="btn btn-default">默认按钮</button>
- <button type="button" class="btn btn-primary">提交按钮</button>
- <button type="button" class="btn btn-success">成功按钮</button>
- <button type="button" class="btn btn-info">信息按钮</button>
- class="btn btn-warning" 警告按钮
- class="btn btn-danger" 危险按钮
- class="btn btn-link" 链接按钮

类样式	描述
.btn	圆角灰色按钮，为了让按钮不那么尖锐，我们的按钮都应该使用这个样式来获得圆角，然后再覆盖上其他的特性。
.btn-default	默认/标准按钮，白色的按下灰色。
.btn-primary	原始按钮样式（未被操作），这个跟active相对应，他是一个按钮没被操作的样式，而active是按钮被点击时显示的相应的样式。
.btn-success	表示成功的动作
.btn-info	该样式可用于要弹出信息的按钮
.btn-warning	表示需要谨慎操作的按钮
.btn-danger	表示一个危险动作的按钮操作
.btn-link	让按钮看起来像个链接 (仍然保留按钮行为)
.btn-lg	大按钮
.btn-sm	小按钮
.btn-xs	超小按钮
.btn-block	块级按钮(拉伸至父元素100%的宽度)
.active	按钮被点击，按钮在激活时将呈现为被按压的外观（深色的背景、深色的边框、阴影）。
.disabled	禁用按钮，颜色会变淡 50%，并失去渐变。

图片

在div中指定class=img-responsive使图片支持响应式布局
//图片形状
<img src="xxx" alt="xxx" class="img-rounded">//方形
<img src="xxx" alt="xxx" class="img-circle">//圆形
<img src="xxx" alt="xxx" class="img-thunbnail">//相框

表格

  <body>
   <table class="table table-hover">
       <tr>
           <th>列名1</th>
           <th>列名2</th>
       </tr>
        <tr>
           <td>列值1</td>
           <td>列值2</td>
       </tr>
    </table>
  </body>
//class="table table-striped":条纹状表格
//class="table table-bordered":带边框的表格
//class="table table-condensed":紧凑表格（单元格中的内补（padding）均会减半）
//响应式表格:(屏幕小了就加上滑动条)
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

状态类，在"tr"或者"td"里面设置。

Class	描述
`.active`	鼠标悬停在行或单元格上时所设置的颜色
`.success`	标识成功或积极的动作
`.info`	标识普通的提示信息或动作
`.warning`	标识警告或需要用户注意
`.danger`	标识危险或潜在的带来负面影响的动作

表单
给表单项添加class="from-control"
缩略语

当鼠标悬停在缩写和缩写词上时就会显示完整内容，Bootstrap 实现了对 HTML 的 <abbr> 元素的增强样式。缩略语元素带有 title 属性，外观表现为带有较浅的虚线框，鼠标移至上面时会变成带有“问号”的指针。如想看完整的内容可把鼠标悬停在缩略语上（对使用辅助技术的用户也可见）, 但需要包含 title 属性。

为缩略语添加 .initialism 类，可以让 font-size 变得稍微小些。

例子：鼠标停在上面会出现title字样

<abbr title="attribute" class="initialism">attr</abbr>

引用

<blockquote>标签是用于对段落中大量的引用加引号.

内联条

可以让所有元素放在同一行 display: inline-block; 或

<ul class="list-inline">
  <li>...</li>
</ul>

组件

导航条
- 使用nav元素定义，<nav class="navbar navbar-default"></nav>
- 定义反色的导航条设置class="navbar navbar-inverse"
- 只支持 <button> 元素，不支持<a>
分页条

js插件

轮播：Carousel
可以选择轮播的标题，轮播速度，轮播的前后方向

5.特殊功能

带有下拉功能的导航栏

倒三角类: caret + 下拉菜单类： dropdown-menu

<!-- Small button group -->
<div class="btn-group">
  <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Small button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

（给父元素添加 .dropup 类就能使触发的下拉菜单朝上方打开。）

6. 总结

不会就查官方文档
导入时注意不要覆盖了自己的样式

三. 参考网址

Bootstrap中文文档：www.bootcss.com/

掘金快速入门文章：juejin.cn/post/692239…

四. 其他CSS库推荐

Spectre.css

Spectre.css 是一套轻量化、响应式的现代CSS框架，用于实现更快、可扩展性更强的开发能力。Spectre提供多种排版与元素的基本样式，基于Flexbox的响应式布局机制，外加纯CSS组件与工具程序。

Gitee 网址：gitee.com/mirrors/Spe…

用法：同Bootstrap类似，都是加上特定类名就OK了，但是体量要比Bootstrap小一点。

fontawesome

一套绝佳的字体及CSS样式库

官网：fontawesome.dashgame.com/

用法：类名即样式。但是里面的样式和bootstrap那种经典样式不太一样。

ElementUI

可以称得上是Vue框架的配套CSS库。

官网（快速上手）：element.eleme.cn/#/zh-CN/com…

用法：使用一些特定的“HTML标签”，比如<el-button>,<el-input>等等即可。（当然，主要和vue中的JS部分搭配使用控制数据，比如分页组件，卡片组件，效果极佳。）