前端编程：bootstrap4 中 bootstrap.bundle.min.js 既然已经包含了Popper，那为啥大家不用它？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端编程：bootstrap4 中 bootstrap.bundle.min.js 既然已经包含了Popper，那为啥大家不用它？相关的知识，希望对你有一定的参考价值。
前端编程：bootstrap4 中 bootstrap.bundle.min.js 既然已经包含了Popper，那为什么大家不用它？而是用 popper.js + bootstrap.js？
可以看下这篇关于Popover弹框文章，说明的很详细奥：http://www.apiref.com/bootstrap4-zh/components/popovers.html
参考技术A 很多原因，可能是各人的习惯，毕竟不用的组件用法也不太一样，学习起来要一定的成本。也可能boot的功能不是那么全面，毕竟popper是专精。 参考技术B 有用的，并不是所有的人都不用。不过bootstrap体积太大，不灵活。事实上更多的是只用部分模块。前端BootStrap框架笔记总结
Boot Strap
笔记整理自b站up主：编程不良人
1.Boot Strap 的引言
Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷
Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目
Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。
2.Boot Strap 环境搭建
1.下载bootStrap 相关资料 说明:bootstrap第3.3.7版本
https://v3.bootcss.com/getting-started/#download
2.下载完成之后解压bootstrap压缩包
css bootstrap核心css文件 bootstrap.css 核心css bootstarp.min.css(压缩css)
fonts 用来存放bootstrap字体图标的文件夹
js bootstrap.js 是bootstrap核心js bootstrap.min.js(压缩js)
3.将bootstrap文件夹全部放入项目中
4.页面使用bootstrap
<meta name="viewport" content="width=device-width, initial-scale=1"> 移动设备优先
<link rel="stylesheet" href="../boot/css/bootstrap.min.css">
3.Boot Strap 容器
<div class="container" style="border: 1px red solid;"></div>
注意: 两边留有一定宽度 padding
<div class="container-fluid" style="border: 1px blue solid;"></div>
注意: 占用页面的100宽度
注意: 两种容器类不能互相嵌套
4.Boot Strap 栅格系统
栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。下面就介绍一下 Bootstrap 栅格系统的工作原理：
“行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
通过“行（row）”在水平方向创建一组“列（column）”。
你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。
类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。
通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。
负值的 margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。
栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。
如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。
栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-md-* 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-lg-* 不存在， 也影响大屏幕设备。
1.栅格系统分配
注意: 无论屏幕尺寸多大在bootsrap中将其分为12份
2.栅格系统基本使用
<div class="container-fulid">
<div class="row">
12column (.col-xs .col-sm(推荐) .col-md .col-lg)
</div>
</div>
3.栅格系统的分配(一个行12等份)
<div class="row">
<!--行最多12个列-->
<div class="col-sm-1 aa">1</div>
<div class="col-sm-1 aa">1</div>
<div class="col-sm-1 aa">1</div>
<div class="col-sm-1 aa">1</div>
<div class="col-sm-1 aa">1</div>
<div class="col-sm-1 aa">1</div>
<div class="col-sm-1 aa">1</div>
<div class="col-sm-1 aa">1</div>
<div class="col-sm-1 aa">1</div>
<div class="col-sm-1 aa">1</div>
<div class="col-sm-1 aa">1</div>
<div class="col-sm-1 aa">1</div>
</div>
4.栅格系统的拆分
<div class="row">
<!--行最多12个列-->
<div class="col-sm-4 aa">1</div>
<div class="col-sm-4 aa">1</div>
<div class="col-sm-4 aa">1</div>
</div>
5.栅格系统嵌套
<div class="row">
<!--行最多12个列-->
<div class="col-sm-2 aa">1</div>
<div class="col-sm-8 aa">
<div class="col-sm-10 bb">
aaa
</div>
<div class="col-sm-2 bb">
bb
</div>
</div>
<div class="col-sm-2 aa">1</div>
</div>
6.栅格系统列偏移 (.col-sm-offset)
<div class="row">
<div class="col-sm-4 aa col-sm-offset-8">aaa</div>
</div>
7.栅格系统多余列
<div class="row">
<!--占4份-->
<div class="col-sm-4 aa">aaa</div>
<!--占4份-->
<div class="col-sm-4 aa">bbb</div>
<!--超过另起一行-->
<div class="col-sm-8 aa">bbb</div>
<!--没有超过12等份 在同一行-->
<div class="col-sm-4 aa">ccc</div>
</div>
5.Boot Strap 排版
5.1 标题
<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>
注意: 在bootstrap中默认h1标题的大小为36px 最小标题的字体12px
5.2 页面主体
Bootstrap 将全局 font-size 设置为 14px，line-height 设置为 1.428。这些属性直接赋予 <body> 元素和所有段落元素
1.使用可以直接在body标签中书写文字
2.可以在<p>标签中书写文字和直接在body标签中书写文字样式一致
<p>这是一个段落</p>
3.突出显示
<p class="lead">这是一个段落突出显示</p>
5.3 内联文本元素
1.使用<mark>标签高亮元素
这是一个段落<mark>突出</mark>显示
5.4 被删除的文本
1.使用<del>标签让元素显示删除线
小<del>黑小</del>明
小<s>黑小</s>明
5.5 插入文本和带有下划线的文本
1.使用<ins>标签
<ins>这是bootstrap相关的内容</ins>
2.使用<u>标签
<u>这是bootstrap相关的内容</u>
5.6 小号文本
1.使用<small>标签完成字体小号展示
这是一个好<small>的课程</small>
注意:使用 <small> 标签包裹，其内的文本将被设置为父容器字体大小的 85%
2.副标题
<h1>h1. Bootstrap heading<small>V2.0</small></h1>
<h2>h2. Bootstrap heading<small>副标题</small></h2>
<h3>h3. Bootstrap heading<small>副标题</small></h3>
<h4>h4. Bootstrap heading<small>副标题</small></h4>
<h5>h5. Bootstrap heading<small>副标题</small></h5>
<h6>h6. Bootstrap heading<small>副标题</small></h6>
5.7 着重 和 斜体
1.使用<strong>标签着重展示
小明是一个<strong>好人</strong>
2.使用<em>标签可以让包裹的文本变成斜体
小明是一个<strong><em>好人</em></strong>
5.8 文本对齐方式
1.设置文本对齐方式
<!--左对齐-->
<p class="text-left">小黑</p>
<!--右对齐-->
<p class="text-right">小黑</p>
<!--居中对齐-->
<p class="text-center">小黑</p>
<!--不换行-->
<p class="text-nowrap">小黑</p>
5.9 改变大小写
1.设置转换大小写
<p class="text-lowercase">LOwercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text boot.</p> 注意:这里是首字母大写
6.0 列表
1.无序列表
<ul>
<li>小明</li>
<li>小黑</li>
</ul>
2.有序列表
<ol>
<li>小黑</li>
<li>小张</li>
</ol>
3.无样式列表
<ul class="list-unstyled">
<li>小明
<ul>
<li>二级</li>
<li>二级</li>
</ul>
</li>
<li>小黑</li>
</ul>
注意: list-unstyled 只能解决ul中一级列表没有样式 但是内部嵌套列表依然存在样式
4.内联列表(列表项一行展示)
<ul class="list-inline">
<li>看电视</li>
<li>看书</li>
<li>看报</li>
</ul>
5.水平列表
<dl class="dl-horizontal">
<dt>小明明</dt>
<dd>是一个非常好的人</dd>
<dd>是一个非常好的人1</dd>
<dd>是一个非常好的人2</dd>
<dt>小嘿嘿</dt>
<dd>是一个非常好的人</dd>
<dd>是一个非常好的人1</dd>
<dd>是一个非常好的人2</dd>
</dl>
6.Boot Strap 表格
6.1 基本表格
基本样式表格.table 用来美化table控件
<table class="table">
...
</table>
6.2 条纹状表格(斑马线表格)
<table class="table table-striped">
...
</table>
6.3 带边框的表格
<table class="table table-bordered">
...
</table>
6.4 鼠标悬停表格(鼠标引入变色)
<table class="table table-hover">
...
</table>
6.5 紧缩表格
<table class="table table-condensed">
...
</table>
6.6 表格的状态类
1.提供的状态类
.active 鼠标悬停在行或单元格上时所设置的颜色 灰色着重
.success 标识成功或积极的动作 浅绿色
.info 标识普通的提示信息或动作 浅蓝色
.warning 标识警告或需要用户注意
.danger 标识危险或潜在的带来负面影响的动作
2.在tr中使用
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>
3.在td中使用 注意: 只有当前td的背景颜色发生变化
<tr>
<td class="active">...</td>
<td class="success">...</td>
<td class="warning">...</td>
<td class="danger">...</td>
<td class="info">...</td>
</tr>
7.Boot Strap 表单
7.1 基本实例
使用方式:单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的 <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;。 将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。
1.基本实例
<form action="">
<div class="form-group">
<label for="aa">用户名:</label>
<input type="text" id="aa" name="name" class="form-control"/>
</div>
<div class="form-groupBootstrap 4：无论屏幕大小，始终显示移动菜单按钮