学习使用Bootstrap4开发网页前端笔记

学习使用Bootstrap4开发网页前端笔记
Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。Bootstrap4 目前是 Bootstrap 的最新版本，是一套用于 HTML、CSS 和 JS 开发的开源工具集。
好处：
•1.定义了很多的css样式和js插件。我们开发人员直接可以使用这些样式和插件得到丰富的页面效果。
•2.响应式布局。

一、使用Bootstrap开发web前端的方法：
1、先用Notepad新建一个文件，写入网页通用代码：
（其中的jquery.min.js和bootstrap.min.js的引用一般可以放到网页后面即</body>后一行，这样加载页面时不卡顿）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap4</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>

<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>
2、打开菜鸟教程网站Bootstrap教程网页或Bootstrap中文网帮助网页，根据自身需要的组件打开对应的网页，复制代码并进行修改，例如：需要表单，则打开表单帮助页选择复制。
（菜鸟教程网站：https://www.runoob.com/bootstrap4/bootstrap4-tutorial.html
Bootstrap中文网：https://v4.bootcss.com/docs/utilities/colors/
）

二、css相关知识：
(一)、script在html中的摆放位置：
一般script标签会被放在头部或尾部。头部就是<head>里面，尾部一般指<body>里。但有些script的位置也不是随便放的。首先我们需要了解的一点就是，在浏览器渲染页面之前，它需要通过解析HTML标记然后构建DOM树。在这个过程中，如果解析器遇到了一个脚本(script)，它就会停下来，并且执行这个脚本，然后才会继续解析HTML。如果遇到了一个引用外部资源的脚本(script)，它就必须停下来等待这个脚本资源的下载，而这个行为会导致一个或者多个的网络往返，并且会延迟页面的首次渲染时间。因为，html文件是自上而下的执行方式，但引入的css和javascript的顺序有所不同，css引入执行加载时，程序仍然往下执行，而执行到<script>脚本是则中断线程，待该script脚本执行结束之后程序才继续往下执行。所以，一般将script放在body之后是因为避免长时间执行script脚本而延迟阻塞。而有一些页面的效果的实现，是需要预先动态的加载一些js脚本，所以这些脚本应该放在<body>之前。其次，不能将需要访问dom元素的js放在body之前，因为此时还没有开始生成dom，所以在body之前的访问dom元素的js会出错，或者无效，这种情况下则只能放到尾部。总结出一些加载JavaScript文件的最佳实践:
对于必须要在DOM加载之前运行的JavaScript脚本，我们需要把这些脚本放置在页面的head中，而不是通过外部引用的方式，因为外部的引用增加了网络的请求次数；并且我们要确保内敛的这些JavaScript脚本是很小的，最好是压缩过的，并且执行的速度很快，不会造成浏览器渲染的阻塞。
对于支持使用script标签的async(这个属性是HTML5给script新添加的属性)和defer属性的浏览器，我们可以使用这两个属性；其中需要注意的点就是，async表示的意思是异步加载JavaScript文件，它的下载过程可以在HTML的解析过程中进行，加载完成之后立即执行这个文件的代码，执行文件代码的过程中会阻塞HTML的解析，它不保证文件加载的顺序。defer表示的意思是在HTML文档解析之后在执行加载完成的JavaScript文件，JavaScript文件的下载过程可以在HTML的解析过程中进行，它是按照script标签的先后顺序来加载文件的。<script type="text/javascript" src="demo_async.js" async="async"></script>
（二）、css样式写在哪里？
CSS (Cascading Style Sheets) 用于渲染HTML元素标签的样式，CSS 可以通过以下三种方式添加到HTML中，分别是：内联样式、嵌套样式、外联样式。3种方式调用css样式时css样式编写的位置：
内联样式：在HTML元素中使用"style" 属性。
<p style="color: red; margin-left: 20px">
This is a paragraph
</p>
嵌套样式，在HTML文档头部 <head> 区域使用<style> 元素来包含CSS代码。
<head><style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style></head>
外联样式，使用外部 CSS 文件。我们在实际开发中最常用的便是第三种。
<head><link rel="stylesheet" type="text/css" href="mystyle.css"></head>
CSS的3种引入方式及优先级：
A.就近原则
B.理论上：行内>内嵌>链接
C.实际上：内嵌、链接在同一个文件头部，谁离相应的代码近，谁的优先级高
一般处理方法：
A、如果同一个css定义分布在两个css文件中，那么样式取后引入的css文件。
B、最好将第三方组件的css放在html靠前位置，自定义的css放到html后面位置。
（三）、CSS中的 Id 和 Class选择器（类似于对象选择器）：
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。如以下的样式规则应用于元素属性 id="para1"：
#para1
{
text-align:center;
color:red;
}
class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示，如在以下的例子中，所有拥有 center 类的 HTML 元素均为居中。
.center {text-align:center;}
你也可以指定特定的HTML元素使用class。如在以下实例中, 所有的 p 元素使用 class="center" 让该元素的文本居中:
p.center {text-align:center;}
没有id和 Class则是对象，如
body{
margin: 0;
padding: 0;
background-color: #eef4f6;
background-image: url("/static/index/images/bg2.jpg");
}

（四）、CSS 盒子模型：
https://www.runoob.com/css/css-boxmodel.html
所有HTML元素可以看作盒子，从上到下或从左到右依次为：
Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。
如：总宽度为450像素的元素
div {
width: 300px;
border: 25px solid green;
padding: 25px;
margin: 25px;
}
总宽度为250像素的元素:
div {
width: 220px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}

margin 属性：设置外边距：
margin:10px 5px 15px 20px;（顺时针方向）
上边距是 10px （盒子距屏幕上边的距离）
右边距是 5px （盒子距屏幕右边的距离）
下边距是 15px （盒子距屏幕下边的距离）
左边距是 20px （盒子距屏幕左边的距离）
margin:10px 5px 15px;
上边距是 10px
右边距和左边距是 5px
下边距是 15px
margin:10px 5px;
上边距和下边距是 10px
右边距和左边距是 5px
margin:10px;
所有四个边距都是 10px
（五）、css3中-moz、-ms、-webkit各什么意思：
-moz代表firefox浏览器私有属性；-ms代表IE浏览器私有属性；-webkit代表chrome、safari私有属性；-o代表opera浏览器私有属性

（六）媒体查询：
@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。
如果文档宽度小于 300 像素则修改背景颜色(max-width最大意思可理解为相反意思即小于多少):
@media screen and (max-width: 300px) {
body {
background-color:lightblue;
}
}

（七）、CSS 定位和浮动：
CSS 为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务。
定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。显然，这个功能非常强大，也很让人吃惊。
一切皆为框：
div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容，即“块框”，块元素是一个元素，占用了全部宽度，在前后都是换行符。与之相反，span 、 strong 、<a>等元素称为“行内元素”，这是因为它们的内容显示在行中，即“行内框”，内联元素只需要必要的宽度，不强制换行。
您可以使用 display 属性改变生成的框的类型。这意味着，通过将 display 属性设置为 block，可以让行内元素（比如 <a> 元素）表现得像块级元素一样，下面的示例把span元素作为块元素：span {display:block;}。还可以通过把 display 设置为 none，让生成的元素根本没有框。这样的话，该框及其所有内容就不再显示，不占用文档中的空间。下面的示例把列表项显示为内联元素：li {display:inline;}
隐藏元素 - display:none或visibility:hidden：visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。
display: flex是什么意思：前端布局神器display:flex，Flex布局是Flexible Box的缩写，翻译成中文就是“弹性盒子”，用来为盒装模型提供最大的灵活性。display:flex 是一种布局方式。它即可以应用于容器中，也可以应用于行内元素。任何一个容器都可以指定为Flex布局。采用Flex布局的元素，被称为Flex容器(flex container)，简称“容器”。其所有子元素自动成为容器成员，成为Flex项目(Flex item)，简称“项目”。布局中的属性flex-wrap: wrap表示换行，第一行在上方。

CSS 定位机制：
CSS 有三种基本的定位机制：普通流、浮动和绝对定位。
除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在 (X)HTML 中的位置决定。
块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。
position 属性的五个值：static、relative、fixed、absolute、sticky
static 定位：HTML 元素的默认值，即没有定位，遵循正常的文档流对象。
fixed 定位：元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动。Fixed定位使元素的位置与文档流无关，因此不占据空间。
relative 定位：相对定位元素的定位是相对其正常位置。移动相对定位元素，但它原本所占的空间不会改变。相对定位元素经常被用来作为绝对定位元素的容器块。
absolute 定位：绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>。absolute 定位使元素的位置与文档流无关，因此不占据空间。
sticky 定位：粘性定位。基于用户的滚动位置来定位。
重叠的元素：元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素。z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面）

CSS Float(浮动)：
CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。Float（浮动），往往是用于图像，但它在布局时一样非常有用。元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。浮动元素之后的元素将围绕它。浮动元素之前的元素将不会受到影响。
清除浮动 - 使用 clear：元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。clear 属性指定元素两侧不能出现浮动元素。对于CSS的清除浮动(clear)，一定要牢记：这个规则只能影响使用清除的元素本身，不能影响其他元素。（好像是换行后再浮动）

Overfolw属性：规定当内容溢出元素框时发生的事情。 overflow：visible 默认值。内容不会被修剪，会呈现在元素框之外。 Overflow：hidden 内容会被修剪，并且其余内容是不可见的。 Overflow：scroll 内容被修剪，但浏览器会显示滚动条以便查看其余的内容。 Overflow：auto 若内容被修建，则浏览器会显示滚动条以便查看其余的内容。

行元素、块元素、行内块元素：
块元素：dl、h1、 hr、menu（菜单列表）、ol（排序表单）、 p、table 、ul （非排序列表）、li
内联元素：a 、b、br 、em （强调）、font、 i（斜体）、img、input、 label 、 span（常用内联容器，定义文本内区块）、strong（粗体强调）、textarea（多行文本输入框）

（八）、Css样式div的height设置成100%无效问题：
关于div层的height高设置成100%时，始终无法满屏显示，不起作用。这个问题相信很多都遇到这个问题，这个高需要把上两层html和body的高都设置为100%内部的div层才能起作用。找了很多都遇到这个问题。
height： height 100% 是以父元素的高度为准的，比如父元素的高度是300px，#nav占去了50px，#content理应是250px。div的height="100%"，执行网页时，css先执行到，而整个网页中的内容还没有完全载入，是获取不到div外面的<body>等的高度的，所以height="100%"也就不能如愿显示了。加上 html,body{height:100%}就轻松解决啦，一开始就让body以100%显示，他的下级div自然就100%的。
（九）、HTML <label> 标签的 for 属性:
for 属性规定 label 与哪个表单元素绑定。
<label for="SSN">Social Security Number:</label>
<input type="text" name="SocSecNum" id="SSN" />

（十）、页面顶部与浏览器窗口的有间距的问题：
很多标签在不同的浏览器下有默认的margin值和padding值，使用前可以先清除下默认值，都归0就不会出现这种问题了
解决办法1：
body,html,div{ padding:0; margin:0;}
解决办法2：
直接*{padding:0; margin:0}也可以
<style type="text/css">
*{
margin: 0;
padding: 0;
}
</style>
因为标签太多很多用不到的所以推荐第一种用法，只写常用的标签就行
如果文件里面最开始写了*{margin:0px;padding:0px;}但还是有间距则说明是bom问题，解决方法，把网页文件在notepad软件中打开，然后在“编码”菜单中选择“utf-8无BOM格式编码”，然后再保存就可。
（十一）、HTML注释：


JS/jQuery注释：
//这是单行注释
/*
    这是多行注释
*/
css注释：
/*这是单行注释*/
/*
    这是多行注释
*/

（十二）、网页宽度自动适应手机屏幕宽度的方法：
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />

另：javascript中的<!-- ：
<script language="javascript" type="text/javascript">
<!-- 这行的作用是用 HTML 的注释把 javascript 的代码包括起来，如果浏览器不支持 javascript，那么会当做注释处理，防止javascript 的代码直接出现在页面上

三、bootstrap4框架知识摘录
bootstrap的自适应尽量少用绝对宽度px来定义大小，这会导致缩小屏幕宽度时相冲突，多使用百分比来改变位置。
（一）、容器（Container）
网格每一行需要放在设置了 .container (固定宽度) 或 .container-fluid (全屏宽度) 类的容器中，这样就可以自动设置一些外边距与内边距。
container class 用于包裹页面上的内容，Bootstrap 网格的基本结构：
<div class="container">
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">...</div>
</div>
网格类
Bootstrap 4 网格系统有以下 5 个类:（小于后面数值时每个控件响应为一行，如小于576px）
.col- 针对所有设备
.col-sm- 平板 - 屏幕宽度等于或大于 576px
.col-md- 桌面显示器 - 屏幕宽度等于或大于 768px)
.col-lg- 大桌面显示器 - 屏幕宽度等于或大于 992px)
.col-xl- 超大桌面显示器 - 屏幕宽度等于或大于 1200px)
（xs是maxsmall简写：超小， sm是small简写：小， md是medium简写：中等， lg是large简写：大；）
响应在浏览器中测试方法：F12运行开发者工具拉动窗口大小
容器的宽度：容器为 .container (固定宽度) 为固定宽度，即屏幕宽度是超大桌面显示器（宽度>1200px）时容器宽度固定为1140px，屏幕宽度是大桌面显示器（992px ≤ 宽度＜ 1200px）时容器宽度固定为960px，屏幕宽度是桌面显示器（768px ≤ 宽度＜992px）时容器宽度固定为720px，屏幕宽度是平板（576px ≤ 宽度＜768px）时容器宽度固定为540px，屏幕宽度是移动手机（宽度<=576px）时容器宽度为屏幕宽度的100%（即随屏幕宽度减少而减小）。.container-fluid (全屏宽度)则容器宽度一律为屏幕宽度的100%（即随屏幕宽度减少而减小）
网格列是通过跨越指定的 12 个列来创建。不管在哪种屏幕上，栅格系统都会自动的每行row分12列，即它把将浏览器一行当是12份。 col-xs-*和col-sm-* 和col-md-*后面跟的参数表示在当前的屏幕中每个div所占列数。
<div class="col-*-*"></div> 第一个星号 (*) 表示响应（缩放）的设备: sm, md, lg 或 xl, 第二个星号 (*) 表示一个数字, 同一行的数字相加为 12。例如：
<div class="container"><div class="col-sm-3">sm响应</div></div> 意思当屏幕宽度大于 576px时本层宽度为容器宽度（如上面几行说明的固定宽度：540px）的12分之3（540px的3/12），屏幕宽度小于576px时则响应为上下堆叠排版（每个控件独占一行，即每个控件宽为576px的100%）（即这里的响应意思是属于同一行的元素受到挤压后，行的右边元素自动换行显式，表现为上下堆叠排版）；
<div class="container"><div class="col-lg-3">lg响应</div></div>意思当屏幕宽度大于992px时本层宽度为容器宽度（如上面几行说明的固定宽度：960px）的12分之3（960px的3/12），屏幕宽度小于992px时则响应为上下堆叠排版（每个控件独占一行，即每个控件宽为992px的100%）
<div class="container-fluid"><div class="col-sm-3">sm响应</div></div> container-fluid容器时统一响应宽度为 576px，即当屏幕宽度大于 576px时本层宽度为容器宽度（全屏宽度，数据不固定，数据随屏幕宽度减少而减小，等于当前屏幕的宽度）的12分之3（如此时浏览器窗口宽度为800px，则本层宽度为800px的3/12），屏幕宽度小于576px时则响应为上下堆叠排版（每个控件独占一行，即每个控件宽为576px的100%）
（二）、Bootstrap 4 默认设置：
Bootstrap 4 默认的 font-size 为 16px, line-height 为 1.5。
默认的 font-family 为 "Helvetica Neue", Helvetica, Arial, sans-serif。
此外，所有的 <p> 元素 margin-top: 0 、 margin-bottom: 1rem (16px)。

（三）、解决BOOTSTRAP使用container-fluid有间隙的问题（或者说是两边留白的问题）：
加上row, 但不加col-，就可以填满了，
<div class="container-fluid">
<div class="row">
<在这里写代码>
</div>
</div>

（四）、bootstrap4中的外边距和内边距样式类（1rem = 16px）：
margin：外边距
padding：内边距
外边距：
m-{0 | 1 | 2 | 3 | 4 | auto}
定义四周间距
.m-0 等价于{margin:0 !important}
.m-1 等价于{margin:0.25rem !important}
.m-2 等价于{margin:0.5rem !important}
.m-3 等价于{margin:1rem !important}
.m-4 等价于{margin:1.5rem !important}
.m-auto 等价于{margin:auto !important}
.mt-{0 | 1 | 2 | 3 | 4 | auto} 表示margin-top设置
.mr-{0 | 1 | 2 | 3 | 4 | auto} 表示margin-right设置
.mb-{0 | 1 | 2 | 3 | 4 | auto} 表示margin-bottom设置
.ml-{0 | 1 | 2 | 3 | 4 | auto} 表示margin-left设置
.mx-{0 | 1 | 2 | 3 | 4 | auto} 表示margin-left与margin-right同时设置
.my-{0 | 1 | 2 | 3 | 4 | auto} 表示margin-top与margin-bottom同时设置
内边距：
.p-{0 | 1 | 2 | 3 | 4 | auto}
定义四周间距
.p-0 等价于{padding:0 !important}
.p-1 等价于{padding:0.25rem !important}
.p-2 等价于{padding:0.5rem !important}
.p-3 等价于{padding:1rem !important}
.p-4 等价于{padding:1.5rem !important}
.p-auto 等价于{padding!important}
.pt-{0 | 1 | 2 | 3 | 4 | auto} 表示padding-top设置
.pr-{0 | 1 | 2 | 3 | 4 | auto} 表示padding-right设置
.pb-{0 | 1 | 2 | 3 | 4 | auto} 表示padding-bottom设置
.pl-{0 | 1 | 2 | 3 | 4 | auto} 表示padding-left设置
.px-{0 | 1 | 2 | 3 | 4 | auto} 表示padding-left与padding-right同时设置
.py-{0 | 1 | 2 | 3 | 4 | auto} 表示padding-top与padding-bottom同时设置
附：CSS1 !important 语法：提升指定样式规则的应用优先权。E6及以下浏览器有个比较显式的支持问题存在，!important并不覆盖掉在同一条样式的后面的规则。
如
div{color:#f00!important;}
div{color:#000;}
）
在上述代码中，IE6及以下浏览器中div的文本颜色表现与其它浏览器一致，都为#f00

（五）网页中宽度长度常用到的单位：
A、单位pt、px、em、rem：
1.pt (point，磅)：是一个物理长度单位，指的是72分之一英寸。
2.px (pixel，像素)：相对长度单位。像素（Pixels）。像素px是相对于显示器屏幕分辨率而言的。
3.em：相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
4. rem：相对长度单位。相对于根元素(即html元素)font-size计算值的倍数。是CSS3新增的一个相对单位
B、单位vw、vh：
根据CSS3规范，视口单位主要包括以下4个：
1.vw：1vw等于视口宽度的1%。
2.vh：1vh等于视口高度的1%。
3.vmin：选取vw和vh中最小的那个。
4.vmax：选取vw和vh中最大的那个。
vh and vw：相对于视口的高度和宽度，而不是父元素的（CSS百分比是相对于包含它的最近的父元素的高度和宽度）。1vh 等于1/100的视口高度，1vw 等于1/100的视口宽度。
比如：浏览器高度950px，宽度为1920px, 1 vh = 950px/100 = 9.5 px，1vw = 1920px/100 =19.2 px。

（六）、bootstrap4中的层水平居中方法：
<div class="row justify-content-center"> abcde</div>
Bootstrap4垂直水平居中：
应用.align-items-center可以使元素垂直居中，应用. justify-content-center可以使元素水平居中：
<div class="row align-items-center justify-content-center" style="height:80vh">//1vw等于视口宽度的1%，给元素定高度，指定高度后垂直居中才有效
…
</div>
其它：
（https://blog.sbot.io/articles/37）
1、对于inline元素水平居中：
在水平排列中，对于inline元素（例如<a>, <span>, <strong>等），我们可以使用text-left，text-center及text-right来快速进行左，中，右对齐（这3个text-align属性会将inline元素放置于直属父级block元素的宽度左，中，右，如果我们未对父级block元素宽度未进行设置，那么此时父级<div>元素默认宽度将是container宽度扣去padding值）
<div class="container bg-primary">
<div class="text-center bg-warning">
<strong>text-center</strong>
</div>
</div>
2、要使block元素整体居中，我们需要使用row或者d-flex：
<div class="container bg-primary">
<div class="row mx-0 justify-content-center w-100">//或者<div class="d-flex justify-content-center w-100">
<div class="text-center bg-warning w-50">
<div>
<strong>text-center</strong>
</div>
</div>
</div>
</div>
如何将子元素垂直居中于父元素中间呢？需要使用align-items-center这个类：
<div class="row mx-0 justify-content-center w-100 h-100">变成 <div class="row mx-0 justify-content-center align-items-center w-100 h-100">
3、使用表格，该怎么水平居中或垂直居中呢？
水平居中：text-center就可以直接搞定，只需要给<td>或<TH>加上text-center
垂直居中：用到vertical-alignment的类，只需要给<td>或<TH>加上align-middle这个类就可以了：<td class="align-middle text-success">Python</td>
（<TH>标签就是Table Heading，意思是表格标题。<TH>标签在使用时，跟<TD>标签没有什么区别，如果非要说有点区别的话，那就是<TH>一般只用在第一个<TR>下。在浏览器中显示时，<TH>标签被显示为加粗的字体，其它的跟普通的<TD>也没有区别。）

（七）、Bootstrap4 折叠（隐藏与显示，一般用于后台左侧菜单）：
.collapse 类用于指定一个折叠元素（即class="collapse"这个类用于隐藏）。一般用链接元素<a>或按钮元素 <button> 来控制隐藏与显示。
控制内容的隐藏与显示，需要在 <a> 或 <button> 元素上添加 data-toggle="collapse" 属性，data-target="#id" 属性是对应折叠的内容 (一般是个层，如<div id="demo">)。
注意: <a> 元素上你可以使用 href 属性来代替 data-target 属性:
（几个英文单词的意思：toggle切换，target目标，accordion手风琴）
例如：
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#accordion"><span class="navbar-toggler-icon"></span></button>

或
<a class="card-link" data-toggle="collapse" href="#collapseTwo">

（八）、Bootstrap 表单
（内容较多，情况较多，用时可参考：https://v4.bootcss.com/docs/components/forms/）
把标签 <label>和控件<input>放在一个带有类 .form-group 的 <div> 中。这是获取最佳间距所必需的。标签元素一般用样式类.col-form-label，控件元素一般用样式类.form-control。例如：
1、垂直或基本表单：
<form>
<div class="form-group">
<label for="colFormLabelSm" class="col-sm-2 col-form-label col-form-label-sm">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control form-control-sm" id="colFormLabelSm" placeholder="col-form-label-sm">
</div>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1">
</div>
<div class="form-group form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
2、水平表单
form-group后面加上row：
<form>
<div class="form-group row">
<label for="colFormLabelSm" class="col-sm-2 col-form-label col-form-label-sm">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control form-control-sm" id="colFormLabelSm" placeholder="col-form-label-sm">
</div>
</div>
</form>

（九）、在Bootstrap中如何使用图标：
用第三方图标样式：Font Awesome图标的使用：
（Font Awesome 中文网：http://www.fontawesome.com.cn）
可以用<i>标签包裹起来，用到你网站的任何地方。如
<a href="#"><i class="fa fa-cog fa-fw" aria-hidden="true"></i>  系统设置</a>
使用：
1、复制 font-awesome 目录到你的项目中
2、在<head>处加载font-awesome.min.css如下
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
3、通过设置CSS前缀fa和图标的具体名称，来把Font Awesome 图标放在任意位置。Font Awesome 被设计为用于行内元素（我们喜欢用更简短的<i>标签，它的语义更加精准）。如
<i class="fa fa-camera-retro"></i>
附：HTML <i> 标签：
在 HTML 4.01 中，<i> 标签呈现斜体的文本。然而，在 HTML5 中没有必要这么做，可以使用样式表来格式化 <i> 元素中的文本。在没有其他适当语义的元素可以使用时，可使用 <i> 元素。
有时使用 i 标签做小图标，这个不是H5特有的情况，只是设计师习惯性用法，用i表示ico图标，便于他人理解。

（十）、图片根据屏幕的大小自动适应：
响应式图片，即当屏幕（或容器大小）小于图片实际大小不法容得下图片时，响应式图片类会根据当时屏幕大小自动缩放图片以显示完整。
图像有各种各样的尺寸，我们需要根据屏幕的大小自动适应。我们可以通过在 <img> 标签中添加 .img-fluid 类来设置响应式图片。
.img-fluid 类设置了 max-width: 100%; 、 height: auto; :
实例： <img class="img-fluid" src="img_chania.jpg" alt="Chania">

四、bootstrap4 常用样式类名
https://blog.csdn.net/Altaba/article/details/81324513
1、容器和网格系统
容器
container 固定宽度，不同尺寸固定了不同的宽度；container-fluid 100%宽度
2、字体颜色及背景颜色
字体
text-muted 柔和；text-primary 重要；text-success 成功；text-info 提示；text-warning 警告；text-danger 危险；text-secondary 副标题；text-dark 深灰色文字；text-light 浅灰色；text-white 白色；
背景
bg-primary；bg-secondary；bg-success；bg-danger；bg-warning；bg-info；bg-light；bg-dark；bg-white；
3、边框
增加边框
border //默认：1px solid #dee2e6!important
border-top；border-left；border-right；border-bottom；
删除边框
border-0 //去除边框或者除去某一边的边框
border-top-0；border-left-0；border-right-0；border-bottom-0；
边框颜色
border-primary；border-secondary；border-success；border-danger；border-warning；border-info；border-light；border-dark；border-white；
圆角边框
rounded //border-radius: .25rem!important;
rounded-top //只有顶部的两边有圆角
rounded-right；rounded-bottom；rounded-left；rounded-circle 类可以设置椭圆形图片；rounded-0；.img-thumbnail 类用于设置图片缩略图(图片有边框)
4 内边距（pading）外边距（margin）
m - for classes 代表 margin
p - for classes 代表 padding
.m-{0 | 1 | 2 | 3 | 4 | auto}
.m-0 等价于{margin:0 !important}
.m-1 等价于{margin:0.25rem !important}
.m-2 等价于{margin:0.5rem !important}
.m-3 等价于{margin:1rem !important}
.m-4 等价于{margin:1.5rem !important}
.m-auto 等价于{margin:auto !important}
.mt-{0 | 1 | 2 | 3 | 4 | auto} 表示margin-top设置
.mr-{0 | 1 | 2 | 3 | 4 | auto} 表示margin-right设置
.mb-{0 | 1 | 2 | 3 | 4 | auto} 表示margin-bottom设置
.ml-{0 | 1 | 2 | 3 | 4 | auto} 表示margin-left设置
.mx-{0 | 1 | 2 | 3 | 4 | auto} 表示margin-left与margin-right同时设置
.my-{0 | 1 | 2 | 3 | 4 | auto} 表示margin-top与margin-bottom同时设置
内边距：
.p-{0 | 1 | 2 | 3 | 4 | auto}
.pt-{0 | 1 | 2 | 3 | 4 | auto} 表示padding-top设置
.pr-{0 | 1 | 2 | 3 | 4 | auto} 表示padding-right设置
.pb-{0 | 1 | 2 | 3 | 4 | auto} 表示padding-bottom设置
.pl-{0 | 1 | 2 | 3 | 4 | auto} 表示padding-left设置
.px-{0 | 1 | 2 | 3 | 4 | auto} 表示padding-left与padding-right同时设置
.py-{0 | 1 | 2 | 3 | 4 | auto} 表示padding-top与padding-bottom同时设置
5 尺寸（size）
w-25
//width: 25%!important; 以下值同理
w-50
w-75
w-100
6、文本
文本定位
text-left //文本居左
text-center
text-right
字体加重和斜体（Font weight and italics）
font-weight-bold //字体加重
font-weight-normal //正常字体
font-weight-light //字体变细
font-italic //斜体
7、垂直对齐（Vertical alignment）
align-baseline
align-top
align-middle
align-bottom
align-text-top
align-text-bottom
8、显示隐藏
show
hidden or sr-only
hide //类仍然可用，但是它不能对屏幕阅读器起作不建议使用
invisible 隐藏保留该元素的文档位置
visible //可见
visibility: hidden!important;
9、表格
table //默认样式
table-striped //条纹表格
table-bordered //边框表格
table-hover //鼠标悬停
table-dark //黑色背景表格
table-condensed //紧凑的表格
table-responsive //响应式表格
表格行设置背景色
active //鼠标悬停在行或单元格上时所设置的颜色
success //标识成功或积极的动作
info //标识普通的提示信息或动作
warning //标识警告或需要用户注意
danger //标识危险或潜在的带来负面影响的动作
10、按钮及按钮组
按钮
btn-primary //主要按钮
btn-secondary //次要按钮
btn-success //成功按钮
btn-info //信息按钮
btn-danger //危险
btn-outline-primary //按钮边框
btn-xs btn-sm btn-lg //小大号按钮
btn-block //块级按钮
active //可用
disabled //禁用
11、列表组
list-group //列表组
list-group-item //列表li
list-unstyled //无样式列表
list-inline //内联列表添加在ul上
列表背景色
list-group-item-action
list-group-item-success,
list-group-item-secondary,
list-group-item-info,
list-group-item-warning,
list-group-item-danger,
list-group-item-dark
list-group-item-light:
12、表单
form-inline //form元素添加该类，可构成内联表单
form-group //表单组 margin-bottom: 15px;
input-group-addon //配合input表单使用，可再起前后添加图标或者后缀
form-control //该表单元素宽度变成100%
sr-only 隐藏表单
控制表单尺寸
input-lg
input-sm
多选和单选
checkbox //包裹复选框
checkbox-inline // 内联多选
radio // 包裹单选框
radio-inline // 内联单选
disabled //不可点击
下拉列表（select）
form-control

秒客网

学习使用Bootstrap4开发网页前端笔记

相关文章