首页 > 其他分享> 文章详细

Bootstrap4.x （李琰恢老师）

2021-10-02 12:00:57 阅读：192 来源： 互联网

标签：flex 元素老师 Bootstrap 李琰设置使用 Bootstrap4

Bootstrap

01.Bootstrap4.x 入门

学习要点：

简单介绍
下载和目录
安装和测试

本节课我们来开始学习 Bootstrap，第一节课重点了解它的作用，下载安装以及测试。

一．简单介绍

Bootstrap 是一款 CSS/HTML 的框架库，目前最新版本是 V4.3;
它集成了各种常用的前端（HTML、CSS 和 JavaScript）组件库；
用于响应式前端布局，移动设备优先的 Web 项目开发；
所以，在学习 Bootstrap 之前需要有 HTML5 的学习基础；

二．下载和目录

从官网上下载了压缩包：bootstrap-4.3.1-dist.zip；
解压后，有两个目录：css 和 js，以下是它的目录结构；

在上面的目录结构中，带 min 字样的是编译后的压缩版，可以用于生产部署环境，不带 min 的可以用于开发调试环境；带 map 字样的是 CSS 地图查询文件，方便查询精确的样式位置。
js 目录中没有 jquery 库文件，需要我们自行下载安装

三．安装和测试

创建一个 Bootstrap 文件夹目录，这里将存放以后课程中所有代码和实例；
创建子目录 01，并创建.html 代码，生成 HTML5 基本格式；

开发工具可以是 Sublime Text、Nodepad Plus 或者 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. 布局系统【上】

一．布局介绍

对于容器布局，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 是以移动端为优先的。

二．栅格系统

Bootstrap4.x 的栅格系统是一个以移动为优先的网格系统；
基于 12 列的布局、5 种响应尺寸（面向不同屏幕设备）；
完全使用 flexbox 流式布局构建的，完全支持响应式标准；
具体采用 div 容器的行、列和对齐内容来构建响应式布局；

首先，实现一个一行三列的布局，通过火狐浏览器切换屏幕测试；

<div class="container">
    <div class="row">
        <div class="col-sm">第一列</div>
        <div class="col-sm">第二列</div> 		
        <div class="col-sm">第三列</div>
    </div>
</div>

为了显示的更加清楚，可以给行列加对比鲜明的 CSS 来观察；
row 表示一行，.col-*来表示一列，实现了智能三列；
sm 表示屏幕类型，本节先不去详细了解，下节课会探讨；
如果我们采用的是.container-fluid，那么会 100%占用屏幕宽度；

<div class="container-fluid">
  ...
</div>

在手机页面都是一样的，因为手机页面大小都是固定的。

在.col-sm-*的星号位置，还可以强制设定每列所占有的栅格列；

<div class="container-fluid">
    <div class="row"> 
        <div class="col-sm-4">第一列</div>
        <div class="col-sm-4">第二列</div>
        <div class="col-sm-4">第三列</div>
    </div> 
</div>

所占的栅格位正好是 12 列，超过 12 列则会换行，小于 12 列则不能 100%；

以上智能计算和强制设置栅格位都是等宽的，我们也可以设置不对称的；

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-8">第一列</div> 
        <div class="col-sm-4">第二列</div>
    </div>
</div>

03.布局系统【下】

学习要点：
一．栅格等级

栅格系统中有五个栅格等级，具体如下表：

如果只使用了超小屏幕的话，无论你拉到多大都会按照超小屏幕的大小来拉伸。

如果同时是使用两个或以上的级别，并且比例相同，则遵循移动端优先的原则；

<div class="container">
    <div class="row">
        <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="container"> 
    <div class="row"> 
        <div class="c col-sm">第一列</div> 
        <div class="c col-sm-7">第二列</div> 
        <div class="c col-sm">第三列</div>
    </div>
</div>

可以通过两个或以上来实现不同设备不同比例的混合布局；

<div class="container"> 
    <div class="row"> 
        <div class="c col-sm-8 col-xl-12">第一列</div> 
        <div class="c col-sm-4 col-xl-12">第二列</div>
    </div>
</div>

使用.w-100 可以切割栅格栏位，进行分行操作；

<div class="container">
    <div class="row"> 
        <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>

如果强制设置了 col-3 数值，那切割后，将不会自动填充；

<div class="container">
    <div class="row">
        <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. 要实现垂直效果，需要给行.row 和列.c 设置高度；

.row {
    height: 100px;
    margin: 20px 0; 
    border: dashed 1px red;
} 
.c { 
    border: solid 1px blue;
    height: 30px;
}

如果我们要垂直居中，那么直接设置: .align-items-center

<div class="row align-items-center"> 
    <div class="c col">第一列</div>
    <div class="c col">第二列</div> 
    <div class="c col">第三列</div>
</div>

对于列来说，也有三种垂直居中的方法，如下表；

使用三种列垂直方案；

<div class="row align-items-center">
    <div class="c col align-self-start">第一列</div>
    <div class="c col align-self-center">第二列</div> 
    <div class="c col align-self-end">第三列</div>
</div>

如果我们要不足 100%填充的行实现水平对齐方式，参考下表；

比如说下面这个例子

  <div class="row ">
            <div class="c col-3">第一列</div>
            <div class="c col-3">第二列</div>
            <div class="c col-3">第三列</div>
   </div>

这里多出来的这些是就给我们排序用的。

每个列只占 3 个栅格列，共 3 列，然后实现间隔相等分散对齐；

间隔相等分散：

<div class="row justify-content-around"> 
    <div class="c col-3">第一列</div>
    <div class="c col-3">第二列</div>
    <div class="c col-3">第三列</div>
</div>

两端对齐分散：

<div class="row justify-content-between">
    <div class="c col-3">第一列</div>
    <div class="c col-3">第二列</div>
    <div class="c col-3">第三列</div>
</div>

二．栅格排列

栅格的列可以排序，使用.order-N，N 最大值为 12； 2. 如果我们要给一个三列的行的第一列排到最后，可以如下设置；

如果我们要给一个三列的行的第一列排到最后，可以如下设置；

<div class="row">
    <div class="c col-3 order-3">第一列</div>
    <div class="c col-3 order-2">第二列</div> 
    <div class="c col-3 order-1">第三列</div>
</div>

使用.order-first，强行设置列为第一列，而.order-last 为最后一列；

<div class="row align-items-start">
    <div class="c col-3 order-last">第一列</div>
    <div class="c col-3">第二列</div> 
    <div class="c col-3 order-first">第三列</div>
</div>

使用.offset-N 或.offset-*-N 来设置列的偏移量，1 表示一个栅格列；

<div class="row align-items-start">
    <div class="c col-3 offset-1">第一列</div>
    <div class="c col-3">第二列</div> 
    <div class="c col-3 offset-1">第三列</div>
</div>

使用.ml-N 或.mr-N 来微调列距离，使用.ml-auto 和.mr-auto 来左右对齐；

<div class="row align-items-start"> 
    <div class="c col-3">第一列</div>
    <div class="c col-3 ml-2">第二列</div>
    <div class="c col-3 ml-auto">第三列</div>
</div>

ml-N向左边挤出去位置，就是向右偏移

mr-N向右寄出位置，那就是向左

05.内容排版

使用<h1>~<h6>可以创建不同尺寸的标题文字；

<h1>Bootstrap</h1> 
<h2>Bootstrap</h2> 
<h3>Bootstrap</h3>
<h4>Bootstrap</h4>
<h5>Bootstrap</h5>
<h6>Bootstrap</h6>

如果是使用其它元素标签，比如
或
，调用.h1~6 同样实现大标题；
```
<p class="h1">Bootstrap</p>
<div class="h2">Bootstrap</div>
```

通过.text-muted 样式，构建大标题的附属小标题；使用了这个样式的字体会变暗

<p class="h1"> 
    Bootstrap <small class="text-muted">V4.3</small>
</p> 
<div class="h2"> 
    Bootstrap <small class="text-muted">V4.3</small>
</div>

还有一种更大型，更加醒目的标题： .display-1~4

<h1 class="display-1">Bootstrap</h1>
<h1 class="display-2">Bootstrap</h1>
<h1 class="display-3">Bootstrap</h1>
<h1 class="display-4">Bootstrap</h1>

这个标题更加醒目，更加庞大！

二．文本类

想要指定一些段落中重要的内容，可以使用.lead 强调；

<p class="lead"> 这是一段测试各种文本效果的话，本身没有意义！
</p>

比较常用的文本内联元素，来自 HTML5；

<p>这是一段测试各种文本<mark>效果的话</mark>，本身没有意义！</p>
<p><del>这是一段测试各种文本效果的话，本身没有意义！</del></p>
<p><s>这是一段测试各种文本效果的话，本身没有意义！</s></p>
<p><ins>这是一段测试各种文本效果的话，本身没有意义！</ins></p>
<p><u>这是一段测试各种文本效果的话，本身没有意义！</u></p>
<p><small>这是一段测试各种文本效果的话，本身没有意义！</small></p> 
<p><strong>这是一段测试各种文本效果的话，本身没有意义！</strong></p>
<p><em>这是一段测试各种文本效果的话，本身没有意义！</em></p>

效果如下图所示：

也可以使用.mark，.small 等方式实现同样元素的效果；

<p>这是一段测试各种文本<span class="mark">效果</span>的话</p>
<p class="small">这是一段测试各种文本效果的话，本身没有意义！</p>

使用.title 样式和缩略语给文本做提示；
提示

使用 Blockquote 设置来源备注或引用；效果相比于不加blockquote的

<blockquote class="blockquote">
    <p>这是一段测试各种文本效果的话，本身没有意义！</p>
</blockquote>

使用.blockquote-footer 设置底部备注来源；

<blockquote>
        <p>这是一段测试各种文本效果的话，本身没有意义！</p>
        <footer class="blockquote-footer">--from a good people</footer>
</blockquote>

可以对内容进行居中对齐.text-center 或居右对齐.text-right；

    <blockquote>
        <p>这是一段测试各种文本效果的话，本身没有意义！</p>
        <footer class="blockquote-footer text-center">--from a good people</footer>
    </blockquote>

默认情况下都是居左的

三．列表类

使用.list-unstyled 样式，可以将列表初始化；

会将使用了这个类的元素前面的圆点去掉，并且靠左对齐，不留空隙。

<ul class="list-unstyled"> 
    <li>A 班</li>
    <li>B 班</li>
    <li>C 班 
        <ul>
            <li>张三</li>
            <li>李四</li> 
            <li>王五</li> 
            <li>马六</li>
        </ul>
    </li> 
    <li>D 班</li>
</ul>

最好只在最外层的ul里面加，如果在字列表里面也取消前面的圆点，会导致父集列表和子集列表都去掉圆点居左对齐，层次不太分明。

使用.list-inline 和.list-inline-item 结合实现多列并排列表；

<ul class="list-inline">
    <li class="list-inline-item">A 班</li> 
    <li class="list-inline-item">B 班</li> 
    <li class="list-inline-item">C 班</li>
    <li class="list-inline-item">D 班</li>
</ul>

使用 dl、dt 和 dd 可以实现水平描述，使用.text-truncate 可以省略溢出；

<div class="container">
    <dl class="row">
        <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">一个关于描述列表的内容， 但是这个稍微长了一点点以至于换行！</dd>
    </dl>
</div>

在这里如果你不去掉这个c和 col的高度他会很难看，但是去掉高度之后他会自适应。

如果设置了高度，不能自适应增长的话，我们就可以设置文字的内容截断。显示效果他会截断多出来的内容并且占一行内容。

06代码和图文

一．代码样式

使用<code>标签元素，可以将编程代码放入其中，但还是要手动转义特殊符号；

会有一个自带的样式：<div>

<code>
    &lt;div&gt;
</code>

使用<pre>标签元素，配合实现代码块的效果；所见即所得


  	  
  	 <div> <span>这是一个代码块效果！<span><div>
  	 
  
<pre class="pre-scrollable" style="width: 500px;">
	 <code> 
	 &lt;div&gt; &lt;span&gt;这是一个代码块效果！&lt;span&gt;&lt;div&gt;
	</code> 
</pre>



可以在代码区域设置.pre-scrollable 样式，实现固定区域滚动，默认高 350px；
<pre class="pre-scrollable" style="width: 500px;">




使用标签元素标识变量部分；本身有一个倾斜功能！
y = m + b
 <var>y</var> = <var>m</var> + <var>b</var>



使用标签元素标识键盘输入；
ctrl+shift+c
 <kbd>ctrl</kbd>+<kbd>shift</kbd>+<kbd>c</kbd>



使用<samp>标签元素标识这是一个示例；
这是一段代码


 <samp>这是一段代码</samp>

二．图文样式


给图片添加一个.img-fluid 样式或设置 max-width:100%，height:auto；
<img src="./img/banner.png" class=" img-fluid" alt="响应式图片">



给小图片加上一个缩略图的样式.img-thumbnail，会设置一个空心边框；
<img src="img/thumb.png" class="img-thumbnail" alt="缩略图">




通过设置.float-left 和.float-right 来设置图片的左右浮动；
<img src="img/thumb.png" class="float-left" alt="左浮动">
<img src="img/thumb.png" class="float-right" alt="有浮动">

这里再次添加一个图片
<img src="img/thumb.png" class="img-thumbnail float-left" alt="缩略图">
<img src="img/thumb.png" class="img-thumbnail float-right" alt="缩略图">
<img src="img/thumb.png" class="img-thumbnail " alt="缩略图">


最后添加的图片因为之前的浮动影响了
使用老方法清除浮动
<img src="img/thumb.png" class="img-thumbnail float-left" alt="缩略图">
<img src="img/thumb.png" class="img-thumbnail float-right" alt="缩略图">
<div style="clear: both;">
    <img src="img/thumb.png" class="img-thumbnail " alt="缩略图">
</div>




通过.d-block 设置为区块，再通过 margin 左右 auto 方式.mx-auto 实现居中；
 <img src="/img/thumb.png" class="mx-auto d-block">



因为图片本身是内联块属性，所以，直接在父层用.text-center 也可以实现居中；
<div class="text-center">
    <img src="img/thumb.png" class="img-thumbnail" alt="缩略图">
</div>



使用 HTML5 新标签来实现响应式图片设置；
<picture> 
    <source srcset="img/banner2.png" media="(max-width:800px)"> 
    <img src="img/banner.png" alt="大图">
</picture>



使用 figure 和 figcaption 实现图文组合显示；


<figure class="figure">
    <img src="img/thumb.png" class="figure-img" alt="图文组合"> 
    <figcaption class="figure-caption text-right"> 这是一张图片</figcaption>
</figure>



这里是外层包裹的figure要设置类为 figure，然后text-right才能居于这个figure区域的右侧，否则回到整个页面的最右侧

07表格样式
一．表格样式


使用.table 给表格设置一个基类，这是表格的基本样式；

<table class="table">
    <thead>
        <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>99</td>
        </tr>
        <tr>
            <td>3</td>
            <td>马六2</td>
            <td>男</td>
            <td>97</td>
        </tr>
    </tbody>
</table>



使用.table-dark 样式，启用颜色反转对比效果；



在使用.thead-light 或.thead-dark 实现浅黑或深灰色调的标头；
 <thead class="thead-light">




使用.table-striped 实现数据表的条纹状显示；
 <table class="table table-striped">




条纹状显示也适用于反转色调上； 显示效果就是黑、浅黑间接交替出现。
 <table class="table table-dark table-striped">




默认情况下，边框是不完全的，使用.table-bordered 设置表格边框；
 <table class="table table-bordered">




表格边框也可以作用域反转色调上；
 <table class="table table-bordered table-dark">



使用.table-borderless 设置无边框；
 <table class="table table-borderless">



无边框效果也可以作用于反转色调上；
 <table class="table table-borderless table-dark">



使用.table-hover 实现一行悬停效果；
初始状态下，整行表格是一个颜色，只有当你
 <table class="table table-hover">

行悬停效果也可以作用于反转色调上；
<table class="table table-hover table-dark">



使用.table-sm 实现紧缩型表格，反转色调依然支持；
  <table class="table table-sm">



使用.table-success 等语义化实现或、等效果，反转色调通用；
<tr class="table-success"> <td class="table-info">男</td>

PS：.table-*中的*包含：active、primary、secondary、danger、warning、info、light、dark。


使用.table-responsive 实现溢出时出现底部滚动条；
 <table class="table table-responsive">

一般情况下是出现在手机端！





使用.table-responsive-sm 实现只有小于 768px 溢出时出现底部滚动条；
 <table class="table table-responsive-sm">



08.边框和颜色
一．边框样式


使用.border 给元素增加相应的边框，默认是淡灰色；


如果颜色太淡，可以使用.border-*设置想要的场景，比如.border-success；


.border-*，包含：primary、secondary、success、danger、warning

info、light、dark 和 white；
<img src="img/img1.png" alt="边框" class=" border-success border">
<img src="img/img1.png" alt="边框" class=" border-success border-right">
<img src="img/img1.png" alt="边框" class=" border-success border-left">
<img src="img/img1.png" alt="边框" class=" border-success border-top">
<img src="img/img1.png" alt="边框" class=" border-success border-bottom">




使用.border-0 消减四周的边框，或使用.border-*-0 消减某一边的边框；
<img src="img/img1.png" alt="边框" class="border-success border border-0">
<img src="img/img1.png" alt="边框" class="border-success border border-top-0">
<img src="img/img1.png" alt="边框" class="border-success border border-bottom-0">
<img src="img/img1.png" alt="边框" class="border-success border border border-left-0">
<img src="img/img1.png" alt="边框" class="border-success border border border-right-0">




使用.rounded 和 .rounded-*实现各种方位圆角
<img src="img/img2.png" alt="圆角" class="rounded">
<img src="img/img2.png" alt="圆角" class="rounded-top"> 
<img src="img/img2.png" alt="圆角" class="rounded-bottom">
<img src="img/img2.png" alt="圆角" class="rounded-left"> 
<img src="img/img2.png" alt="圆角" class="rounded-right">
<img src="img/img2.png" alt="圆角" class="rounded-circle">
<img src="img/img2.png" alt="圆角" class="rounded-pill">
<img src="img/img2.png" alt="圆角" class="rounded-0">


注意这里的rounded-pill需要给他设置宽高才能看出这个效果：
.rounded-pill {
    width: 200px;
    height: 100px;
}




使用.rounded-sm 和.rounded-lg 实现圆角半径大小；


<img src="img/img2.png" alt="圆角" class="rounded-sm"> 
<img src="img/img2.png" alt="圆角" class="rounded-lg">


二．颜色样式

使用.text-*将文本设置成指定的颜色，比如：text-success；

<span class="text-primary">Bootstrap</span>
<span class="text-secondary">Bootstrap</span> 
<span class="text-success">Bootstrap</span>
<span class="text-danger">Bootstrap</span>
<span class="text-warning">Bootstrap</span>
<span class="text-info">Bootstrap</span>
<span class="text-dark">Bootstrap</span>
<span class="text-body">Bootstrap</span> 
<span class="text-muted">Bootstrap</span>
<span class="text-light bg-dark">Bootstrap</span>
<span class="text-white bg-dark">Bootstrap</span>
<span class="text-black-50">Bootstrap</span>
<span class="text-white-50 bg-dark">Bootstrap</span>




使用.text-*也可以实现悬停和焦点的超链接样式，white 和 muted 不支持；
<a href=# class="text-primary">Bootstrap</a>
<a href=# class="text-secondary">Bootstrap</a>
<a href=# class="text-success">Bootstrap</a> 
<a href=# class="text-danger">Bootstrap</a>
<a href=# class="text-warning">Bootstrap</a> 
<a href=# class="text-info">Bootstrap</a> 
<a href=# class="text-dark">Bootstrap</a>
<a href=# class="text-body">Bootstrap(no)</a> 
<a href=# class="text-muted">Bootstrap(no)</a>
<a href=# class="text-light bg-dark">Bootstrap</a>
<a href=# class="text-white bg-dark">Bootstrap(no)</a>
<a href=# class="text-black-50">Bootstrap</a>
<a href=# class="text-white-50 bg-dark">Bootstrap</a>



使用.bg-*可以实现背景色，具体如下：
<div class="p-2 mb-2 bg-primary">Bootstrap</div>
<div class="p-2 mb-2 bg-secondary">Bootstrap</div>
<div class="p-2 mb-2 bg-success">Bootstrap</div> 
<div class="p-2 mb-2 bg-danger">Bootstrap</div> 
<div class="p-2 mb-2 bg-warning">Bootstrap</div>
<div class="p-2 mb-2 bg-light">Bootstrap</div> 
<div class="p-2 mb-2 bg-dark">Bootstrap</div> 
<div class="p-2 mb-2 bg-white">Bootstrap</div>
<div class="p-2 mb-2 bg-transparent">Bootstrap</div>



p-N ,这里的N默认是0，最大是5,6就会没有效果了。p-2：padding：0.5rem；
mb-2：margin-bottom ：0.5rem



09. 工具类【上】

使用.close 和&times 构建一个关闭按钮； 

 <button type="button" class="close" aria-label="关闭"> 
     <span aria-hidden="true">&times;</span>
</button>


使用.clearfix 给浮动的区域的父元素添加，实现清理浮动的功能；

div.border {
    width: 200px;
    height: 200px;
}

<div class="clearfix"> 
    <div class="float-left border border-success">left</div>
    <div class="float-right border border-success">right</div>
</div>
<div class="border border-warning">
    both
</div>


浮动元素会脱离文档流，不占位，盒子重叠，内容不重叠；

如果想要内容都水平排列，需要所有的盒子都设置浮动

如果浮动的元素大于父元素的宽，显示不下就会另起一行，第二行显示

浮动不占位的副作用只会同级之间产生，浮动的副作用都是往下影响，不会影响上边的盒子

对其兄弟元素（非浮动）的影响

如果兄弟元素为块级元素，该元素会忽视浮动元素的而占据它的位置，并且元素会处在浮动元素的下层（并且无法通过z-index属性改变他们的层叠位置），但它的内部文字和其他行内元素都会环绕浮动元素。
如果如果兄弟元素为内联元素，则元素会环绕浮动元素排列。

<div class="float-left border border-success">left</div>
<div class="float-right border border-success">right</div>
<div class="float-none border border-success">none</div>


解决方法：
1.传统的方式可以设置其不浮动:style ="clear:both"
2.bootstrap的方式：
	在外层包裹一个div 设置class 为 "clearfix"


使用.text-hide 来隐藏元素标签内容，但本身还存在保持 SEO 优化；
<h1 class="text-hide" style="background:url('img/img1.png');"> 
    Bootstrap4.x
</h1>



使用.overflow-auto 和.overflow-hidden 来设置区域显示方式；
 <div class="overflow-auto">...</div><div class="overflow-hidden">...</div>



使用.visible 和.invisible 来设置内容可见或不可见；
<div class="visible">Bootstrap4.x</div>
<div class="invisible">Bootstrap4.x</div>



使用.align-*来设置内容文本的对齐方式；


<span class="align-baseline">baseline 基准</span>
<span class="align-text-top">text-top 文本顶部</span> 
<span class="align-top">top 顶部</span> 
<span class="align-middle">middle 垂直居中</span>
<span class="align-bottom">bottom 底部</span>
<span class="align-text-bottom">text-bottom 文本底部</span>
<table class="table table-bordered" style="height: 200px;">
    <tbody> 
        <tr>
            <td class="align-baseline">baseline</td> 
            <td class="align-top">top</td> 
            <td class="align-middle">middle</td>
            <td class="align-bottom">bottom</td>
            <td class="align-text-top">text-top</td>
            <td class="align-text-bottom">text-bottom</td>
        </tr>
    </tbody>

</table> 


PS：垂直对齐仅影响内联 inline、内联块 inline-block、内联表 inline-table、表格单元格 table cell 元素。
10工具类中
一．公共样式


使用.p-*来设置内边距(padding)，范围在 0-5 之间和 auto；
<span class="p-5">Bootstrap4.x</span>


padding: 3rem !important;



使用.m-*来设置外边距(margin)，范围在 0-5 之间和 auto；
 <span class="m-5">Bootstrap4.x</span>


.m-5 {
		margin: 3rem !important;
}



使用.pt-或 mt-设置边缘的距离，这里的 t 可以是 top；


其它的还有 b(bottom)、l(left)、r(right)等；
<span class="pt-5">Bootstrap4.x</span>
<span class="mt-5">Bootstrap4.x</span>


.pt-5, .py-5 {
padding-top: 3rem !important;
}
.mt-5, .my-5 {
margin-top: 3rem !important;
}



使用.px-*或 mx-*设置左右边缘的距离，这里的 x 表示(left、right);
<span class="px-5">Bootstrap4.x</span> 
<span class="mx-5">Bootstrap4.x</span>





使用.py-或 my-设置上下边缘的距离，这里的 y 表示(top、bottom)；
<span class="py-5">Bootstrap4.x</span> 
<span class="my-5">Bootstrap4.x</span>



使用.pt-*-5，*可以是 md、lg 等响应式的方式来设置边缘；
就是设置在特定屏幕下面，这些屏幕的大小。


使用.w-*设置元素的长度，包括 25%、50%、75%、100%和 auto；

<div class="p-3 w-25 bg-info">25%</div> 
<div class="p-3 w-50 bg-info">50%</div>
<div class="p-3 w-75 bg-info">75%</div> 
<div class="p-3 w-100 bg-info">100%</div>
<div class="p-3 w-auto bg-info">auto</div>



使用.h-*设置元素的高度，包括 25%、50%、75%、100%和 auto；
<div class="border border-success"> 
    <div class="p-3 h-25 bg-info d-inline-block">25%</div> 
    <div class="p-3 h-50 bg-info d-inline-block">50%</div>
    <div class="p-3 h-75 bg-info d-inline-block">75%</div> 
    <div class="p-3 h-100 bg-info d-inline-block">100%</div>
    <div class="p-3 h-auto bg-info d-inline-block">auto</div>
</div>




使用.mw-和.mh-设置 max-width 和 max-height；
 <div class="p-3 mw-100 mh-100 bg-info">max-100%</div>



使用.vw-和.vh-设置相对于窗口的大小；
因为上下高度有比较多意外，所以我们可以给他设置一个父元素容器。
<div class="p-3 vw-100 vh-100 bg-info">vw,vh 单位</div>



使用.shadow-*实现元素的阴影效果；
<div class="shadow-none mb-5">Bootstrap4.x</div>
<div class="shadow-sm mb-5">Bootstrap4.x</div>
<div class="shadow mb-5">Bootstrap4.x</div>
<div class="shadow-lg mb-5">Bootstrap4.x</div>



11. 工具类【下】
一．公共样式


使用.d-*来设置元素的 display 模式，比如 inline、block 等；


none、inline、inline-block、block、table、table-row


flex、inline-flex 这些常用的均为 display 可以设置的模式；


也可以通过.d-md-*中的 md 设置响应式的媒体查询效果；
这里的none代表消失啥也看不见。
 <div class="p-2 bg-info d-md-none">Bootstrap4.x</div>



使用.embed-responsive 实现嵌入响应式，比如<iframe>、<embed>等；


再使用.embed-responsive-16by9 实现响应式比例，还可以 21:9，4:3，1:1；
 <div class="embed-responsive embed-responsive-21by9">
     <iframe src="http://www.baidu.com"></iframe>
</div>



使用.text-*设置文本的对齐方式，有 left、center、right；


也可以设置.text-md-*实现响应式的媒体查询效果；
<div class="p-2 text-center">Bootstrap4.x</div>



使用.text-warp 和.text-nowarp 实现文本溢出时是否换行；
<div class="p-2 text-nowrap text-center" style="width: 6rem;">Bootstrap 4.x</div>



使用.text-break 对于很长的字符串，且中间没有空格实现换行；
<div class="p-2 text-break"> Bootstrap4.x...Bootstrap4.x</div>



使用.text-lowercase 设置小写，.text-uppercase 设置大写，以及 .text-capitalize 设置首字母大写；


<img src="https://gitee.com/forgetc77/blog-img/raw/master/image-20211001194728969.png" alt="image-20211001194728969" style="zoom:67%;" />

```html
<div class="p-2 text-lowercase">the bootstrap4.x</div>
<div class="p-2 text-uppercase">the bootstrap4.x</div>
<div class="p-2 text-capitalize">the bootstrap4.x</div>
```



使用.font-weight-bold 加粗、.font-weight-normal 正常、 .font-weight-light 纤细、.font-weight-italic 倾斜；

<div class="p-2 font-weight-bold">Bootstrap4.x</div>
<div class="p-2 font-weight-normal">Bootstrap4.x</div> 
<div class="p-2 font-weight-light">Bootstrap4.x</div>
<div class="p-2 font-italic">Bootstrap4.x</div>



使用.text-monospace 设置等宽字体；
<div class="p-2 text-monospace">Bootstrap 4.x</div>



使用.text-reset 实现字体颜色的重置；和父元素的效果一样。
<div class="text-muted"> Bootstrap 最新版本： 
    <a href="#" class="text-reset">V4.3</a>
</div>



使用.text-decoration-none 删除超链接下划线；

 <a href="#" class="text-decoration-none">V4.3</a>



12Flex弹性布局
一．Flex 样式


使用.d-flex 和.d-inline-flex 实现开启 flex 布局样式；
<div class="d-flex">Flex 弹性布局</div>


.d-flex {
display: flex !important;
}



这一对样式，也支持响应式的媒体查询：.d-*-flex； *可以是md或者是lg


.flex-row 可以呈现子元素水平方向的位置，默认居左并从左到右显示(1,2,3)；



<div class="d-flex flex-row"> 
    <div class="p-2">项目 1</div>
    <div class="p-2">项目 2</div>
    <div class="p-2">项目 3</div>
</div>



.flex-row-reverse 让子元素水平方向的位置居右并从左到右显示(3,2,1)；

<div class="d-flex flex-row-reverse"> 
    <div class="p-2">项目 1</div> 
    <div class="p-2">项目 2</div> 
    <div class="p-2">项目 3</div>
</div>



这一对样式，也支持响应式的媒体查询：.flex-*-row；


.flex-column 实现子元素垂直效果，并从上往下显示(1,2,3)；

<div class="d-flex flex-column">
    <div class="p-2">项目 1</div> 
    <div class="p-2">项目 2</div> 
    <div class="p-2">项目 3</div>
</div>



.flex-column-reverse 实现子元素垂直效果，并从上往下显示(3,2,1)；

<div class="d-flex flex-column-reverse">
    <div class="p-2">项目 1</div>
    <div class="p-2">项目 2</div>
    <div class="p-2">项目 3</div>
</div>



这一对样式，也支持响应式的媒体查询：.flex-*-column；


.justify-content-start(end、center、between、around)实现内容对齐；

<div class="d-flex justify-content-start">...</div> 
<div class="d-flex justify-content-end">...</div> 
<div class="d-flex justify-content-center">...</div>
<div class="d-flex justify-content-between">...</div>
<div class="d-flex justify-content-around">...</div>



这五个内容对齐样式，也支持媒体查询：justify-content-*-start;


.align-items-start(end、center、baseline、stretch)实现项目对齐；


这里要给一个高度，因为里面的元素和我们的父元素是百分之百的效果。

<div class="d-flex align-items-start" style="height:100px;">
    <div class="d-flex align-items-end" style="height:100px;"> 
        <div class="d-flex align-items-center" style="height:100px;"> 
            <div class="d-flex align-items-baseline" style="height:100px;">
                <div class="d-flex align-items-stretch" style="height:100px;">



这五个项目对齐，也支持媒体查询：align-items-*-start；


.align-self-start(end、center、baseline、stretch)实现单项目对齐；

<div class="d-flex m-2 p-2" style="height:100px;"> 
    <div class="p-2 align-self-start">项目 1</div> 
    <div class="p-2 align-self-end">项目 2</div> 
    <div class="p-2 align-self-center">项目 3</div> 
    <div class="p-2 align-self-baseline">项目 4</div> 
    <div class="p-2 align-self-stretch">项目 5</div>
</div>



13.弹性布局下
一．Flex 样式


使用.flex-fill 强制让每个元素项目占据相等的水平宽度；
<div class="d-flex">
    <div class="p-2 flex-fill">项目 1</div>
    <div class="p-2 flex-fill">项目 2</div> 
    <div class="p-2 flex-fill">项目 3</div>
</div>



三个项目同时设置了.flex-fill，则它们等比例分割宽度，适合导航项目；


如果其中一个或两个没有设置.flex-fill，则没有设置文本有多少就占据多少；


.flex-*-fill 也可以实现响应式的媒体查询操作；


使用.flex-grow-*，*表示 0 或 1，也能实现.flex-fill 的功能，设置 1 即可；
<div class="d-flex">
    <div class="p-2 flex-grow-1">项目 1</div>
    <div class="p-2 flex-grow-1">项目 2</div>
    <div class="p-2 flex-grow-1">项目 3</div>
</div>



通过元素生成的 CSS，我们可以看出，其实.flex-fill 就 flex 族的简写形式；


使用.flex-shrink-*，*表示 0 或 1，表示是否强制更换到新行中；


<div class="d-flex"> 
    <div class="p-2 w-100">项目 1</div>
    <div class="p-2 flex-shrink-0">项目 2</div>
</div>



这一对样式，也支持响应式的媒体查询：.flex-*-grow|shrink-*；


使用.mr-auto 等对齐方式，对 flex 元素进行浮动对

<div class="d-flex"> 
    <div class="p-2 mr-auto">项目 1</div>
    <div class="p-2">项目 2</div> 
    <div class="p-2">项目 3</div>
</div>
<div class="d-flex">
    <div class="p-2">项目 1</div> 
    <div class="p-2">项目 2</div> 
    <div class="p-2 border ml-auto">项目 3</div>
</div>



对于垂直方向，也可以使用.mb-auto 和.mt-auto 来设置对象方向；

<div class="d-flex flex-column align-items-start" style="height: 200px;">
    <div class="p-2 mb-auto">项目 1</div>
    <div class="p-2">项目 2</div>
    <div class="p-2">项目 3</div>
</div>
<div class="d-flex flex-column align-items-start" style="height: 200px;">
    <div class="p-2">项目 1</div>
    <div class="p-2">项目 2</div>
    <div class="p-2 mt-auto">项目 3</div>
</div>



使用.flex-wrap(包裹)和.flex-nowrap(不包裹，默认)来设置子元素项目；
<div class="d-flex flex-wrap" style="width: 200px;">
    <div class="p-2">项目 1</div> 
    <div class="p-2">项目 2</div>
    <div class="p-2">项目 3</div> 
    <div class="p-2">项目 4</div> 
    <div class="p-2">项目 5</div> 
    <div class="p-2">项目 6</div> 
    <div class="p-2">项目 7</div> 
    <div class="p-2">项目 8</div> 
    <div class="p-2">项目 9</div>
    <div class="p-2">项目 10</div>
</div>

不包裹的样式如下图所示：

包裹的样式如下图所示：



使用.flex-warp-reverse 进行项目排序顺序的倒序；



这三个样式，也支持响应式的媒体查询：.flex-*-warp 等


使用.order-*，来设置子元素项目的排序顺序，支持.order-*-*；

<div class="d-flex m-2 p-2 bg-secondary text-light flex-row">
    <div class="p-2 border border-light order-3">项目1</div>
    <div class="p-2 border border-light order-2 ">项目2</div>
    <div class="p-2 border border-light  order-1">项目3</div>
</div>



.align-content-start(end、center、between、around、stretch)垂直对齐；



 <div class="d-flex flex-wrap align-content-end"
style="height: 200px;">



.align-content-*-start 等支持媒体响应式查询；


14.警告提示框
一．警告框样式


使用.alert 设置警告框基础样式，并使用.alert-success 设置警告框颜色；

<div class="alert alert-success">Bootstrap4.x</div>
<div class="alert alert-primary">Bootstrap4.x</div>
<div class="alert alert-secondary">Bootstrap4.x</div>
<div class="alert alert-danger">Bootstrap4.x</div>
<div class="alert alert-warning">Bootstrap4.x</div>
<div class="alert alert-info">Bootstrap4.x</div>
<div class="alert alert-light">Bootstrap4.x</div>
<div class="alert alert-dark">Bootstrap4.x</div>



在使用了警告框的元素内部设置超链接.alert-link会显示加粗的样子；

<div class="alert alert-success"> Bootstrap4.x 
    <a href="#" class="alert-link">V4.3</a>
</div>



使用.alert-heading 可以设置继承颜色，alert 本身也可以设置水平线段落等；
<div class="alert alert-success">
    <h4 class="alert-heading">Bootstrap4.x</h4>
    <hr> 
    <p>这是一个前端工具：Bootstrap4.x</p>
</div>




.alert-heading {color: inherit;}

二．警告框组件


在组件一栏，可以和浏览器实现交互功能，比如警告框的关闭效果；
<div class="alert alert-warning alert-dismissible fade show"> 警告：请理解更新你的系统~ <button class="close" data-dismiss="alert">&times;</button>
</div>



解释一下手册给的案例：data-dismiss="alert"实现父元素关闭；
.fade .show 实现了关闭后的淡出效果；
.alert-dismissible 从调试器可以看到是 padding-right:4rem;
也就是说，真正实现关闭效果的只有 data-dismiss="alert"；
直接使用脚本的方式也可以关闭：
<div class="alert alert-warning alert-dismissible fade show updatesystem">
    警告：请立即更新你的系统~ 
    <button class="close updateclose">&times;</button>
</div>

$('.updateclose').click(function () { $('.updatesystem').alert('close');
});



15.徽章和面包屑导航
一．徽章样式


使用.badge 设置徽章基础样式，并使用.badge-success 等设置徽章颜色；

<h1>Bootstrap <span class="badge badge-secondary">4.x</span></h1>
<h2>Bootstrap <span class="badge badge-success">4.x</span></h2>
<h3>Bootstrap <span class="badge badge-info">4.x</span></h3>
<h4>Bootstrap <span class="badge badge-danger">4.x</span></h4>
<h5>Bootstrap <span class="badge badge-warning">4.x</span></h5>
<h6>Bootstrap <span class="badge badge-light">4.x</span></h6>
<h6>Bootstrap <span class="badge badge-primary">4.x</span></h6>
<h6>Bootstrap <span class="badge badge-dark">4.x</span></h6>



使用.badge-pill 将徽章设置成椭圆胶囊式；
<h3>Bootstrap
    <span class="badge badge-info badge-pill">4.x</span>
</h3>



在超链接使用徽章，鼠标悬停时会有换色效果；
<h3>Bootstrap <a href="#" class="badge badge-success badge-pill">4.x</a>
</h3>




二．面包屑导航


使用.breadcrumb 设置一个层次导航(一行分割显示那种)；



    <nav>
        <ol class="breadcrumb">
            <li class="breadcrumb-item">
                <a href="#">home </a>
            </li>
            <li class="breadcrumb-item">
                <a href="#">library </a></li>
            <li class="active breadcrumb-item">bootstrap</li>
        </ol>
    </nav>

16. 按钮和按钮组
一．按钮样式

使用.btn 和.btn-*实现按钮的预设样式；

	
<button type="button" class="btn btn-secondary">Bootstrap4.x</button> 
<button type="button" class="btn btn-success">Bootstrap4.x</button> 
<button type="button" class="btn btn-danger">Bootstrap4.x</button>   
<button type="button" class="btn btn-warning">Bootstrap4.x</button>
<button type="button" class="btn btn-info">Bootstrap4.x</button> 
<button type="button" class="btn btn-light">Bootstrap4.x</button>
<button type="button" class="btn btn-dark">Bootstrap4.x</button>
<button type="button" class="btn btn-link">Bootstrap4.x</button>



.btn 不单单在<button>元素下使用，也可以在<a>、<input>下使用；
<a href="#" class="btn btn-success">Bootstrap4.x</a>
<input type="submit" class="btn btn-danger" value="Bootstrap4.x">



使用.btn .btn-outline-*可以实现按钮的轮廓效果；

<button type="button" class="btn btn-outline-danger">Bootstrap4.x</button>
<button type="button" class="btn btn-outline-warning">Bootstrap4.x</button>



使用.btn-lg .btn-sm 可以实现按钮尺寸的大和小；

<button type="button" class="btn btn-lg btn-success">Bootstrap4.x</button>
<button type="button" class="btn btn-sm btn-danger">Bootstrap4.x</button>



使用.btn-block 将按钮进行 block 区块设置；整个一行都被占有了
<button type="button" class="btn btn-success btn-block">Bootstrap4.x</button>
<button type="button" class="btn btn-danger btn-block">Bootstrap4.x</button>




使用.active 启用按钮(默认)，使用.disabled 禁用按钮，特别注意的禁用；


<button type="button" class="btn btn-success active">Bootstrap4.x</button>
<button type="button" class="btn btn-success" disabled>Bootstrap4.x</button>
<a href="#" class="btn btn-success disabled">Bootstrap4.x</a> //写在 class 里
<input type="submit" class="btn btn-danger" disabled value="Bootstrap4.x">


disabled 属性只有a写在class里面，其他写在class外面



添加 data-toggle="button"实现按钮切换效果，使用.active 可以默认按下；


<button type="button" class="..." data-toggle="button">Bootstrap4.x</button>

二．按钮组样式


使用.btn-group 实现传统方案的复选框和单选框样式；

<div class="btn-group" data-toggle="buttons"> <label class="btn btn-secondary active"> <input type="checkbox" checked> PHP
    </label>
    <label class="btn btn-secondary"> <input type="checkbox"> Python
    </label>
    <label class="btn btn-secondary"> <input type="checkbox"> GO
    </label> </div>
<div class="btn-group" data-toggle="buttons"> <label class="btn btn-secondary active"> <input type="radio" name="options" checked> PHP
    </label>
    <label class="btn btn-secondary"> <input type="radio" name="options"> Python
    </label>
    <label class="btn btn-secondary"> <input type="radio" name="options"> GO
    </label>
</div>



使用.btn-group .btn-group-toggle 实现全新方案的复选框和单选框；

<div class="btn-group btn-group-toggle" data-toggle="buttons">


.btn-group-toggle 实现了选中后背景颜色加深



使用.btn-group 构建普通的按钮组；
<div class="btn-group">
    <button type="button" class="btn btn-secondary">左</button>
    <button type="button" class="btn btn-secondary">中</button>
    <button type="button" class="btn btn-secondary">右</button>
</div>



使用.btn-toolbar 构建分页工具类；
就是把他们整体管理起来。

<div class="btn-toolbar"> 
    <div class="btn-group mr-2"> 
        <button type="button" class="btn btn-secondary">1</button> 
        <button type="button" class="btn btn-secondary">2</button> 
        <button type="button" class="btn btn-secondary">3</button> 
        <button type="button" class="btn btn-secondary">4</button>
        <button type="button" class="btn btn-secondary">5</button>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-secondary">7</button> 
        <button type="button" class="btn btn-secondary">8</button>
        <button type="button" class="btn btn-secondary">9</button>
    </div>
</div>



使用.btn-group-lg 和.btn-group-sm 实现大尺寸和小尺寸；
<div class="btn-group btn-group-lg"> 
<div class="btn-group btn-group-sm">



使用.btn-group-vertical 设置垂直按钮组；

标签：flex,元素,老师,Bootstrap,李琰,设置,使用,Bootstrap4
来源： https://www.cnblogs.com/MyBlogForRecord/p/15361653.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Bootstrap4.x （李琰恢老师）

Bootstrap

01.Bootstrap4.x 入门

02. 布局系统【上】

03.布局系统【下】

04. 对齐与排列

05.内容排版

三．列表类

06代码和图文

07表格样式

08.边框和颜色

09. 工具类【上】

10工具类中

11. 工具类【下】

12Flex弹性布局

13.弹性布局下

14.警告提示框

15.徽章和面包屑导航

16. 按钮和按钮组