bootstrap4框架使用总结
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了bootstrap4框架使用总结相关的知识，希望对你有一定的参考价值。
参考技术Abootstrap 是一个开源的前端框架，主要应用于页面的布局。
官网介绍：
同时，它也是移动优先的布局框架。
移动优先，指使用bootstrap开发的页面，不仅能用于web显示，还能用于移动端显示。
使用bootstrap中规范好的CSS样式，能使页面根据屏幕大小自适应，但必须要在 head 部分加入：
可以设置的属性：
m - 设置外边距 margin
p - 设置内边距 padding
可以设置的方向：
t - 设置上 距 *-top
b - 设置下 距 *-bottom
l - 设置左 距 *-left
r - 设置右 距 *-right
x - 设置x方向的*距，即左右边距 both *-left and *-right
y - 设置y方向 both *-top and *-bottom
(none) - 空则表示设置四个方向
可以设置的大小：
0 - 设置 边距为0：for classes that eliminate the margin or padding by setting it to 0
1 - (by default) 设置 the margin or padding to $spacer * .25
2 - (by default) 设置 the margin or padding to $spacer * .5
3 - (by default) 设置 the margin or padding to $spacer
4 - (by default) 设置 the margin or padding to $spacer * 1.5
5 - (by default) 设置 the margin or padding to $spacer * 3
auto - 设置自动的 外边距 * the margin to auto
示例：
mr-3 对应 margin-right: 3 3为不定值，随屏幕大小变化。
py-2 对应 padding-top:2;padding-bottom:2;
......
d-inline-block 将块级元素转换为行内块级元素
见官网： 栅栏布局
效果如下：
offset-*
d-flex
justify-content-*
作用于div子元素。
效果依次为：
align-items-*
同样作用于div子元素。
效果依次为：
flex-fill
作用于当前元素，效果是充满父元素。
flex-grow-*
将当前元素尽可能地增长，效果如下：
flex-shrink-*
将当前元素有必要地缩短，效果如下：
利用外边距可以实现：
ml-auto 表示 margin-left:auto ，效果使得当前元素水平居右。
mx-auto 表示左右外边距都为 auto ，效果是水平居中。
align-*
作用于当前元素 ，效果如下：
效果如下：
text-wrap
字体会自动换行，适用于 规定宽度 的div中的字体。
不包裹字体则是 text-nowarp 。
text-truncate
适用于块级元素中的字体。
text-*
效果如下：
list-unstyled 列表无黑点
list-inline 行内列表
list-inline-item 行内列表中的一项
使用如下：
见官网 表格
blockquote 设置为块引用
blockquote-footer 块引用的引脚
效果如下：
前端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-group如何将数据传递给模态以使用bootstrap4.6动态构造模态