01. Bootstrap4.x 入门
学习要点:
1.简单介绍
2.下载和目录
3.安装和测试
一.简单介绍
1. Bootstrap是一款CSS/HTML的框架库，目前最新版本是V4.3;
2. 它集成了各种常用的前端(HTML、CSS和JavaScript)组件库;
3. 用于响应式前端布局，移动设备优先的Web项目开发;
4. 所以，在学习Bootstrap之前需要有HTML5的学习基础;
二.下载和目录
从官网上下载了压缩包:bootstrap-4.3.1-dist.zip;
解压后，有两个目录:css和js，以下是它的目录结构;
bootstrap/ ├── css/
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ ├── bootstrap.min.css.map
│ ├── bootstrap-grid.css
│ ├── bootstrap-grid.css.map
│ ├── bootstrap-grid.min.css
│ ├── bootstrap-grid.min.css.map
│ ├── bootstrap-reboot.css
│ ├── bootstrap-reboot.css.map
│ ├── bootstrap-reboot.min.css
│ └── bootstrap-reboot.min.css.map └── js/
├── bootstrap.bundle.js
├── bootstrap.bundle.min.js
├── bootstrap.bundle.min.js.map
├── bootstrap.js
├── bootstrap.min.js
└── bootstrap.min.js.map
3. 在上面的目录结构中，带min字样的是编译后的压缩版，可以用于生产部署环境， 不带 min 的可以用于开发调试环境;带 map 字样的是 CSS 地图查询文件，方便查询精确的 样式位置。
4. js目录中没有jquery库文件，需要我们自行下载安装;
三.安装和测试
1. 创建一个Bootstrap文件夹目录，这里将存放以后课程中所有代码和实例;
2. 创建子目录01，并创建.html代码，生成HTML5基本格式;
3. 开发工具可以是SublimeText、NodepadPlus或者WebStorm;
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8"> <title>第一个 Bootstrap</title>
<!-- 引入 Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.css">
<!-- 移动设备优先 --> <meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"> </head>
<body> <h1>开启，Bootstrap4!</h1>
属性注解:
width=device-width 表示宽度是设备屏幕的宽度。
initial-scale=1 表示初始的缩放比例。
shrink-to-fit=no 自动适应手机屏幕的宽度。
<!-- 引入 jQuery 文件 -->
<script src="js/jquery-3.3.1.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>
02. 布局系统【上】
学习要点:
1.布局介绍
2.栅格系统
一.布局介绍
对于容器布局，Bootstrap4.x提供了.container和.container-fluid两种;
这两种样式是启用布局栅格系统最基本的要素;
.contianer是固体自适应方式，.container-fluid是流体100%自适应方式;
容器布局可以嵌套，但一般来说，不推荐且很少使用到:
自适应对应的响应式方式如下media:
// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }
// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }
// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
从响应式的media可以看出，Bootstrap4是以移动端为优先的。
二.栅格系统
1. Bootstrap4.x的栅格系统是一个以移动为优先的网格系统;
2. 基于12列的布局、5种响应尺寸(面向不同屏幕设备);
3. 完全使用flexbox流式布局构建的，完全支持响应式标准;
4. 具体采用div容器的行、列和对齐内容来构建响应式布局;
5. 首先，实现一个一行三列的布局，通过火狐浏览器切换屏幕测试;
6. 为了显示的更加清楚，可以给行列加对比鲜明的CSS来观察;
7. .row表示一行，.col-*来表示一列，实现了智能三列;
8. sm表示屏幕类型，本节先不去详细了解，下节课会探讨;
<div class="col-sm">第一列</div> <div class="col-sm">第二列</div> <div class="col-sm">第三列</div>
</div> </div>
9. 如果我们采用的是.container-fluid，那么会100%占用屏幕宽度;
10. 在.col-sm-*的星号位置，还可以强制设定每列所占有的栅格列;
11. 所占的栅格位正好是 12 列，超过 12 列则会换行，小于 12 列则不能 100%; 12. 以上智能计算和强制设置栅格位都是等宽的，我们也可以设置不对称的;
<div class="container-fluid"> ...
</div>
<div class="col-sm-4">第一列</div> <div class="col-sm-4">第二列</div> <div class="col-sm-4">第三列</div>
</div> </div>
<div class="col-sm-8">第一列</div>
<div class="col-sm-4">第二列</div> </div>
</div>
03. 布局系统【下】
学习要点:
1.栅格等级
一.栅格等级
1. 栅格系统中有五个栅格等级，具体如下表:
2. 如果同时是使用两个或以上的级别，并且比例相同，则遵循移动端优先的原则;
3. 栅格系统支持只指定其中一种或几种，其它随机的方式，指定数字奇偶均可;
4. 可以通过两个或以上来实现不同设备不同比例的混合布局;
|
超小屏幕 <576px |
小屏幕 >=576px |
中等屏幕 >=768px |
大屏幕 >=992px |
超大屏幕 >=1200px |
|
|
前缀 |
.col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
|
列数 |
12列 |
||||
<div class="c col-sm-4 col-lg-6 col-xl-12">第一列</div> <div class="c col-sm-4 col-lg-6 col-xl-12">第二列</div> <div class="c col-sm-4 col-lg-12 col-xl-12">第三列</div>
</div> </div>
<div class="c col-sm">第一列</div> <div class="c col-sm-7">第二列</div> <div class="c col-sm">第三列</div>
</div> </div>
<div class="c col-sm-8 col-xl-12">第一列</div>
<div class="c col-sm-4 col-xl-12">第二列</div> </div>
</div>
5. 使用.w-100可以切割栅格栏位，进行分行操作;
<div class="c col">第一列</div> <div class="c col">第二列</div> <div class="w-100"></div>
<div class="c col">第三列</div>
<div class="c col">第四列</div>
</div> </div>
6. 如果强制设置了col-3数值，那切割后，将不会自动填充;
<div class="c col-3">第一列</div> <div class="c col-3">第二列</div> <div class="w-100"></div>
<div class="c col-3">第三列</div>
<div class="c col-3">第四列</div>
</div> </div>
04. 对齐与排列
学习要点:
1.栅格对齐
2.栅格排列
一.栅格对齐
1. 对于栅格系统中的行，我们可以其进行垂直对齐操作，如下表;
2. 要实现垂直效果，需要给行.row和列.c设置高度;
|
样式(作用域行间) |
|
|
居顶(默认) |
.align-items-start |
|
居中 |
.align-items-center |
|
居底 |
.align-items-end |
}
.c {
border: solid 1px blue;
height: 30px; }
3. 如果我们要垂直居中，那么直接设置: .align-items-center
4. 对于列来说，也有三种垂直居中的方法，如下表;
</div>
|
样式(作用域列间) |
|
|
居顶(默认) |
.align-self-start |
|
居中 |
.align-self-center |
|
居底 |
.align-self-end |
5. 使用三种列垂直方案;
6. 如果我们要不足100%填充的行实现水平对齐方式，参考下表;
</div>
|
样式(作用域行间) |
|
|
居左(默认) |
.justify-content-start |
|
居中 |
.justify-content-center |
|
居右 |
.justify-content-end |
|
间隔相等(分散) |
.justify-content-around |
|
两端对齐(分散) |
.justify-content-between |
7. 每个列只占3个栅格列，共3列，然后实现间隔相等分散对齐;
二.栅格排列
1. 栅格的列可以排序，使用.order-N，N最大值为12;
2. 如果我们要给一个三列的行的第一列排到最后，可以如下设置;
3. 使用.order-first，强行设置列为第一列，而.order-last为最后一列;
</div>
</div>
</div>
4. 使用.offset-N或.offset-*-N来设置列的偏移量，1表示一个栅格列;
5. 使用.ml-N或.mr-N来微调列距离，使用.ml-auto和.mr-auto来左右对齐;
</div>
</div>
05. 内容排版
2.文本类
3.列表类
一.标题类
1. 使用<h1>~<h6>可以创建不同尺寸的标题文字;
2. 如果是使用其它元素标签，比如<p>或<div>，调用.h1~6同样实现大标题;
3. 通过.text-muted样式，构建大标题的附属小标题;
4. 还有一种更大型，更加醒目的标题方式:.display-1~4;
二.文本类
1. 想要指定一些段落中重要的内容，可以使用.lead强调;
2. 比较常用的文本内联元素，来自HTML5;
<p class="h1">Bootstrap</p> <div class="h2">Bootstrap</div>
</p> <div class="h2">
Bootstrap <small class="text-muted">V4.3</small> </div>
<p class="lead"> 这是一段测试各种文本效果的话，本身没有意义!
</p>
><em
这是一段测试各种文本效果的话，本身没有意义!</em></
也可以使用.mark，.small等方式实现同样元素的效果;
使用.title样式和<abbr>缩略语给文本做提示;
使用Blockquote设置来源备注或引用;
使用.blockquote-footer设置底部备注来源;
可以对内容进行居中对齐.text-center或居右对齐.text-right; blockquote ="blockquote text-center">
三.列表类
1. 使用.list-unstyled样式，可以将列表初始化;
<p>这是一段测试各种文本<span class="mark">效果</span>的话</p> <p> p>
class="small"
这是一段测试各种文本效果的话，本身没有意义!</
<p
|
><abbr |
title="这是一个提示! |
"> |
提示</abbr></ |
p> |
<blockquote class="blockquote"> <p>这是一段测试各种文本效果的话，本身没有意义!</p>
</blockquote>
——出自 Bootstrap 视频课堂 </footer>
</blockquote>
<ul> <li>张三</li> <li>李四</li> <li>王五</li> <li>马六</li>
</ul>
</li>
<li>D 班</li> </ul>
2. 使用.list-inline和.list-inline-item结合实现多列并排列表;
3. 使用dl、dt和dd可以实现水平描述，使用.text-truncate可以省略溢出;
</ul>
<dt class="c col-sm-3">列表标题</dt>
<dd class="c col-sm-9">一个关于描述列表的内容</dd>
<dt class="c col-sm-3">列表标题</dt>
<dd class="c col-sm-4 text-truncate">一个关于描述列表的内容，
</dl> </div>
但是这个稍微长了一点点以至于换行!</dd>
06. 代码与图文
学习要点:
1.代码样式
2.图片样式
一.代码样式
使用<code>标签元素，可以将编程代码放入其中，但还是要手动转义特殊符号;
使用<pre>标签元素，配合<code>实现代码块的效果;
可以在代码区域设置.pre-scrollable样式，实现固定区域滚动，默认高350px; pre ="pre-scrollable" =": px">
使用<var>标签元素标识变量部分;
使用<kbd>标签元素标识键盘输入; kbdkbdkbdkbdkbdkbd>
使用<samp>标签元素标识这是一个示例;
二.图文样式
1. 给图片添加一个.img-fluid样式或设置max-width:100%，height:auto; 2. 给小图片加上一个缩略图的样式.img-thumbnail，设置一个空心边框;
<code> div>
</code>
div
div </code>
</pre>
这是一个代码块效果!span>
<
>
<
<
span
>
>
<var>y</var> = <var>m</var> + <var>b</var>
<!-- 整体包含原则上是不对的 --> <var>y = m + b</var>
<
|
samp |
> |
这是一段代码</samp |
> |
<
|
img |
src="img/banner.png" |
class="img-fluid" |
alt="响应式图片 |
"> |
<
|
img |
src="img/thumb.png" |
class="img-thumbnail" |
alt="缩略图 |
"> |
通过设置.float-left和.float-right来设置图片的左右浮动;
通过.d-block设置为区块，再通过margin左右auto方式.mx-auto实现居中; img ="img/thumb.png" ="mx-auto d-block">
因为图片本身是内联块属性，所以，直接在父层用.text-center也可以实现居中;
使用HTML5新标签<picture>来实现响应式图片设置;
使用figure和figcaption实现图文组合显示;
<img src="img/thumb.png" class="float-left" alt="左浮动"> < ">
img
src="img/thumb.png"
class="float-right"
alt="有浮动
<div class="text-center">
<img src="img/thumb.png" class="img-thumbnail" alt="缩略图">
</div>
</picture>
</figure>
这是一张图片</figcaption>
07.表格样式
一.表格样式
1. 使用.table给表格设置一个基类，这是表格的基本样式;
2. 使用.table-dark样式，启用颜色反转对比效果; table ="table table-dark">
07. 表格样式
<tr>
<th>ID</th>
<th>姓名</th>
<th>性别</th>
<th>总成绩</th>
</tr> </thead>
<tbody> <tr>
<td>1</td> <td>张三</td> <td>男</td> <td>98</td>
</tr> <tr>
<td>2</td> <td>李四</td> <td>女</td> <td>94</td>
</tr> <tr>
<td>3</td> <td>王五</td> <td>男</td> <td>97</td>
</tr> </tbody>
</table>
在<thead>使用.thead-light或.thead-dark实现浅黑或深灰色调的标头; thead ="thead-light">
使用.table-striped实现数据表的条纹状显示;
条纹状显示也适用于反转色调上;
默认情况下，边框是不完全的，使用.table-bordered设置表格边框;
表格边框也可以作用域反转色调上;
使用.table-borderless设置无边框;
无边框效果也可以作用于反转色调上;
table ="table table-borderless table-dark">
使用.table-hover 实现一行悬停效果; table ="table table-hover">
行悬停效果也可以作用于反转色调上;
table ="table table-hover table-dark">
使用.table-sm 实现紧缩型表格，反转色调依然支持; table ="table table-sm">
使用.table-success 等语义化实现<tr>或<td>、<th>等效果，反转色调通用; PS:.table-*中的*包含:active、primary、secondary、danger、
warning、info、light、dark。
使用.table-responsive 实现溢出时出现底部滚动条;
table ="table table-responsive">
使用.table-responsive-sm 实现只有小于 768px 溢出时出现底部滚动条; table ="table table-responsive-sm">
<table class="table table-striped">
<table class="table table-dark table-striped">
<table class="table table-bordered">
<table class="table table-bordered table-dark">
<table class="table table-borderless">
<tr class="table-success"> <>>
td
class="table-info"
男</td
原文：https://www.cnblogs.com/life-fxl/p/13231495.html