其他分享
首页 > 其他分享> > Bootstrap4.x (李琰恢老师)

Bootstrap4.x (李琰恢老师)

作者:互联网

Bootstrap

01.Bootstrap4.x 入门

学习要点:

  1. 简单介绍

  2. 下载和目录

  3. 安装和测试

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

一.简单介绍

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

二.下载和目录

  1. 从官网上下载了压缩包:bootstrap-4.3.1-dist.zip;

  2. 解压后,有两个目录:css 和 js,以下是它的目录结构;

image-20210930195644127
  1. 在上面的目录结构中,带 min 字样的是编译后的压缩版,可以用于生产部署环境, 不带 min 的可以用于开发调试环境;带 map 字样的是 CSS 地图查询文件,方便查询精确的 样式位置。

  2. js 目录中没有 jquery 库文件,需要我们自行下载安装

三.安装和测试

  1. 创建一个 Bootstrap 文件夹目录,这里将存放以后课程中所有代码和实例;

  2. 创建子目录 01,并创建.html 代码,生成 HTML5 基本格式;

  3. 开发工具可以是 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. 布局系统【上】

一.布局介绍

  1. 对于容器布局,Bootstrap4.x 提供了.container 和.container-fluid 两种;

  2. 这两种样式是启用布局栅格系统最基本的要素;

  3. contianer 是固体自适应方式,.container-fluid 是流体 100%自适应方式;

  4. 容器布局可以嵌套,但一般来说,不推荐且很少使用到:

  5. 自适应对应的响应式方式如下 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) { ... }
    
  6. 从响应式的 media 可以看出,Bootstrap4 是以移动端为优先的。

二.栅格系统

  1. Bootstrap4.x 的栅格系统是一个以移动为优先的网格系统;

  2. 基于 12 列的布局、5 种响应尺寸(面向不同屏幕设备);

  3. 完全使用 flexbox 流式布局构建的,完全支持响应式标准;

  4. 具体采用 div 容器的行、列和对齐内容来构建响应式布局;

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

    <div class="container">
        <div class="row">
            <div class="col-sm">第一列</div>
            <div class="col-sm">第二列</div> 		
            <div class="col-sm">第三列</div>
        </div>
    </div>
    
  6. 为了显示的更加清楚,可以给行列加对比鲜明的 CSS 来观察;

  7. row 表示一行,.col-*来表示一列,实现了智能三列;

  8. sm 表示屏幕类型,本节先不去详细了解,下节课会探讨;

  9. 如果我们采用的是.container-fluid,那么会 100%占用屏幕宽度;

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

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

  1. .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>
    
  2. 所占的栅格位正好是 12 列,超过 12 列则会换行,小于 12 列则不能 100%;

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

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

03.布局系统【下】

学习要点:
一.栅格等级

  1. 栅格系统中有五个栅格等级,具体如下表:

    image-20210930212347163

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

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

    <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>
    
  3. 栅格系统支持只指定其中一种或几种,其它随机的方式,指定数字奇偶均可;

    <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>
    
  4. 可以通过两个或以上来实现不同设备不同比例的混合布局;

    <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>
    
  5. 使用.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>
    
  6. 如果强制设置了 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. 对于栅格系统中的行,我们可以其进行垂直对齐操作,如下表;

image-20210930214009762

​ 2. 要实现垂直效果,需要给行.row 和列.c 设置高度;

.row {
    height: 100px;
    margin: 20px 0; 
    border: dashed 1px red;
} 
.c { 
    border: solid 1px blue;
    height: 30px;
}
  1. 如果我们要垂直居中,那么直接设置: .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>
    
  2. 对于列来说,也有三种垂直居中的方法,如下表;

    image-20211001083439794

  3. 使用三种列垂直方案;

    <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>
    
  4. 如果我们要不足 100%填充的行实现水平对齐方式,参考下表;

    image-20211001083536695

    比如说下面这个例子

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

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

  5. 每个列只占 3 个栅格列,共 3 列,然后实现间隔相等分散对齐;

    间隔相等分散:

    image-20211001084447948

    <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>
    

    两端对齐分散:

    image-20211001084544579
    <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>
    

二.栅格排列

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

  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>
    
    image-20211001085022850
  3. 使用.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>
    
    image-20211001085206078
  4. 使用.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>
    
    image-20211001085525492
  5. 使用.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向右寄出位置,那就是向左

    image-20211001090905511

05.内容排版

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

    <h1>Bootstrap</h1> 
    <h2>Bootstrap</h2> 
    <h3>Bootstrap</h3>
    <h4>Bootstrap</h4>
    <h5>Bootstrap</h5>
    <h6>Bootstrap</h6>
    
  2. 如果是使用其它元素标签,比如

    ,调用.h1~6 同样实现大标题;

    <p class="h1">Bootstrap</p>
    <div class="h2">Bootstrap</div>
    
    image-20211001091847591
  3. 通过.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>
    
    image-20211001091857951
  4. 还有一种更大型,更加醒目的标题: .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>
    
    image-20211001093005632

    ​ 这个标题更加醒目,更加庞大!

二.文本类

  1. 想要指定一些段落中重要的内容,可以使用.lead 强调;
<p class="lead"> 这是一段测试各种文本效果的话,本身没有意义!
</p>
image-20211001093243446
  1. 比较常用的文本内联元素,来自 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>
    

    ​ 效果如下图所示:

    image-20211001093433272
  2. 也可以使用.mark.small 等方式实现同样元素的效果;

    <p>这是一段测试各种文本<span class="mark">效果</span>的话</p>
    <p class="small">这是一段测试各种文本效果的话,本身没有意义!</p>
    
  3. 使用.title 样式和缩略语给文本做提示;

    提示

    image-20211001095039493
  4. 使用 Blockquote 设置来源备注或引用; 效果相比于不加blockquote的

    <blockquote class="blockquote">
        <p>这是一段测试各种文本效果的话,本身没有意义!</p>
    </blockquote>
    
  5. 使用.blockquote-footer 设置底部备注来源;

    <blockquote>
            <p>这是一段测试各种文本效果的话,本身没有意义!</p>
            <footer class="blockquote-footer">--from a good people</footer>
    </blockquote>
    
    image-20211001095516621
  6. 可以对内容进行居中对齐.text-center 或居右对齐.text-right;

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

    默认情况下都是居左的

三.列表类

  1. 使用.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>
image-20211001100123627

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

  1. 使用.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>
image-20211001100624831
  1. 使用 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>

image-20211001100726897

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

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

06代码和图文

一.代码样式

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

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

<code>
    &lt;div&gt;
</code>
  1. 使用<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>
  1. 可以在代码区域设置.pre-scrollable 样式,实现固定区域滚动,默认高 350px;

    <pre class="pre-scrollable" style="width: 500px;">
    
    image-20211001103723505
  2. 使用标签元素标识变量部分;本身有一个倾斜功能!

    y = m + b

     <var>y</var> = <var>m</var> + <var>b</var>
    
  3. 使用标签元素标识键盘输入;

    ctrl+shift+c

     <kbd>ctrl</kbd>+<kbd>shift</kbd>+<kbd>c</kbd>
    
  4. 使用<samp>标签元素标识这是一个示例;

    这是一段代码

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

二.图文样式

  1. 给图片添加一个.img-fluid 样式或设置 max-width:100%,height:auto;

    <img src="./img/banner.png" class=" img-fluid" alt="响应式图片">
    
  2. 给小图片加上一个缩略图的样式.img-thumbnail,会设置一个空心边框;

    <img src="img/thumb.png" class="img-thumbnail" alt="缩略图">
    
    image-20211001104828570
  3. 通过设置.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="缩略图">
    

    image-20211001105148864

    最后添加的图片因为之前的浮动影响了

    使用老方法清除浮动

    <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>
    
    image-20211001105459776
  4. 通过.d-block 设置为区块,再通过 margin 左右 auto 方式.mx-auto 实现居中;

     <img src="/img/thumb.png" class="mx-auto d-block">
    
  5. 因为图片本身是内联块属性,所以,直接在父层用.text-center 也可以实现居中;

    <div class="text-center">
        <img src="img/thumb.png" class="img-thumbnail" alt="缩略图">
    </div>
    
  6. 使用 HTML5 新标签来实现响应式图片设置;

    <picture> 
        <source srcset="img/banner2.png" media="(max-width:800px)"> 
        <img src="img/banner.png" alt="大图">
    </picture>
    
  7. 使用 figurefigcaption 实现图文组合显示;

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

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

07表格样式

一.表格样式

  1. 使用.table 给表格设置一个基类,这是表格的基本样式;

    image-20211001111458520

    <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>
    
  2. 使用.table-dark 样式,启用颜色反转对比效果;

    image-20211001111505869

  3. 在使用.thead-light.thead-dark 实现浅黑或深灰色调的标头;

     <thead class="thead-light">
    
    image-20211001111806551
  4. 使用.table-striped 实现数据表的条纹状显示;

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

     <table class="table table-dark table-striped">
    
    image-20211001112034323
  6. 默认情况下,边框是不完全的,使用.table-bordered 设置表格边框;

     <table class="table table-bordered">
    
    image-20211001112202496
  7. 表格边框也可以作用域反转色调上;

     <table class="table table-bordered table-dark">
    
  8. 使用.table-borderless 设置无边框;

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

     <table class="table table-borderless table-dark">
    
  10. 使用.table-hover 实现一行悬停效果;

    初始状态下,整行表格是一个颜色,只有当你

     <table class="table table-hover">
    

    行悬停效果也可以作用于反转色调上;

    <table class="table table-hover table-dark">
    
  11. 使用.table-sm 实现紧缩型表格,反转色调依然支持;

      <table class="table table-sm">
    
  12. 使用.table-success 等语义化实现或、等效果,反转色调通用;

    <tr class="table-success"> <td class="table-info">男</td>
    

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

  13. 使用.table-responsive 实现溢出时出现底部滚动条;

     <table class="table table-responsive">
    

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

image-20211001113728624
  1. 使用.table-responsive-sm 实现只有小于 768px 溢出时出现底部滚动条;

     <table class="table table-responsive-sm">
    

08.边框和颜色

一.边框样式

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

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

  3. .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">
    

    image-20211001150058523

  4. 使用.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">
    

    image-20211001155642568

  5. 使用.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">
    
    image-20211001155919599

    注意这里的rounded-pill需要给他设置宽高才能看出这个效果:

    .rounded-pill {
        width: 200px;
        height: 100px;
    }
    

    image-20211001160101292

  6. 使用.rounded-sm.rounded-lg 实现圆角半径大小;

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

二.颜色样式

  1. 使用.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>
image-20211001160637419
  1. 使用.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>
    
  2. 使用.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>
    
    image-20211001162103858

    p-N ,这里的N默认是0,最大是5,6就会没有效果了。p-2:padding:0.5rem;

    mb-2:margin-bottom :0.5rem

09. 工具类【上】

  1. 使用.close 和&times 构建一个关闭按钮;
 <button type="button" class="close" aria-label="关闭"> 
     <span aria-hidden="true">&times;</span>
</button>
  1. 使用.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>
image-20211001163739167

解决方法:

1.传统的方式可以设置其不浮动:style ="clear:both"

2.bootstrap的方式:

​ 在外层包裹一个div 设置class 为 "clearfix"

  1. 使用.text-hide 来隐藏元素标签内容,但本身还存在保持 SEO 优化;

    <h1 class="text-hide" style="background:url('img/img1.png');"> 
        Bootstrap4.x
    </h1>
    
  2. 使用.overflow-auto 和.overflow-hidden 来设置区域显示方式;

     <div class="overflow-auto">...</div><div class="overflow-hidden">...</div>
    
  3. 使用.visible.invisible 来设置内容可见或不可见;

    <div class="visible">Bootstrap4.x</div>
    <div class="invisible">Bootstrap4.x</div>
    
  4. 使用.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> 
image-20211001165632107

PS:垂直对齐仅影响内联 inline、内联块 inline-block、内联表 inline-table、表格单元格 table cell 元素。

10工具类中

一.公共样式

  1. 使用.p-*来设置内边距(padding),范围在 0-5 之间和 auto;

    <span class="p-5">Bootstrap4.x</span>
    

    padding: 3rem !important;

  2. 使用.m-*来设置外边距(margin),范围在 0-5 之间和 auto;

     <span class="m-5">Bootstrap4.x</span>
    

    .m-5 {

    ​ margin: 3rem !important;

    }

  3. 使用.pt-mt-设置边缘的距离,这里的 t 可以是 top;

  4. 其它的还有 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;

    }

  5. 使用.px-*或 mx-*设置左右边缘的距离,这里的 x 表示(left、right);

    <span class="px-5">Bootstrap4.x</span> 
    <span class="mx-5">Bootstrap4.x</span>
    
    image-20211001171037200 image-20211001171104524
  6. 使用.py-或 my-设置上下边缘的距离,这里的 y 表示(top、bottom);

    <span class="py-5">Bootstrap4.x</span> 
    <span class="my-5">Bootstrap4.x</span>
    
  7. 使用.pt-*-5,*可以是 md、lg 等响应式的方式来设置边缘;

    就是设置在特定屏幕下面,这些屏幕的大小。

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

    image-20211001171256962
    <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>
    
  9. 使用.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>
    

    image-20211001171656240

  10. 使用.mw-.mh-设置 max-width 和 max-height;

     <div class="p-3 mw-100 mh-100 bg-info">max-100%</div>
    
  11. 使用.vw-和.vh-设置相对于窗口的大小;

    因为上下高度有比较多意外,所以我们可以给他设置一个父元素容器。

    <div class="p-3 vw-100 vh-100 bg-info">vw,vh 单位</div>
    
  12. 使用.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. 工具类【下】

一.公共样式

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

  2. none、inline、inline-block、block、table、table-row

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

  4. 也可以通过.d-md-*中的 md 设置响应式的媒体查询效果;

    这里的none代表消失啥也看不见。

     <div class="p-2 bg-info d-md-none">Bootstrap4.x</div>
    
  5. 使用.embed-responsive 实现嵌入响应式,比如<iframe>、<embed>等;

  6. 再使用.embed-responsive-16by9 实现响应式比例,还可以 21:9,4:3,1:1;

     <div class="embed-responsive embed-responsive-21by9">
         <iframe src="http://www.baidu.com"></iframe>
    </div>
    
  7. 使用.text-*设置文本的对齐方式,有 left、center、right;

  8. 也可以设置.text-md-*实现响应式的媒体查询效果;

    <div class="p-2 text-center">Bootstrap4.x</div>
    
  9. 使用.text-warp.text-nowarp 实现文本溢出时是否换行;

    <div class="p-2 text-nowrap text-center" style="width: 6rem;">Bootstrap 4.x</div>
    
  10. 使用.text-break 对于很长的字符串,且中间没有空格实现换行;

    <div class="p-2 text-break"> Bootstrap4.x...Bootstrap4.x</div>
    
  11. 使用.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>
```
  1. 使用.font-weight-bold 加粗、.font-weight-normal 正常、 .font-weight-light 纤细、.font-weight-italic 倾斜;

    image-20211001194757969
    <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>
    
  2. 使用.text-monospace 设置等宽字体;

    <div class="p-2 text-monospace">Bootstrap 4.x</div>
    
  3. 使用.text-reset 实现字体颜色的重置;和父元素的效果一样。

    <div class="text-muted"> Bootstrap 最新版本: 
        <a href="#" class="text-reset">V4.3</a>
    </div>
    
  4. 使用.text-decoration-none 删除超链接下划线;

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

12Flex弹性布局

一.Flex 样式

  1. 使用.d-flex.d-inline-flex 实现开启 flex 布局样式;

    <div class="d-flex">Flex 弹性布局</div>
    

    .d-flex {

    display: flex !important;

    }

  2. 这一对样式,也支持响应式的媒体查询:.d-*-flex; *可以是md或者是lg

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

image-20211001201415485
<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>
  1. .flex-row-reverse 让子元素水平方向的位置居右并从左到右显示(3,2,1);

    image-20211001201441304
    <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>
    
  2. 这一对样式,也支持响应式的媒体查询:.flex-*-row;

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

    image-20211001201552566
    <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>
    
  4. .flex-column-reverse 实现子元素垂直效果,并从上往下显示(3,2,1);

    image-20211001201606196
    <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>
    
  5. 这一对样式,也支持响应式的媒体查询:.flex-*-column;

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

    image-20211001202130344
    <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>
    
  7. 这五个内容对齐样式,也支持媒体查询:justify-content-*-start;

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

    image-20211001202817107

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

    <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;">
    
  9. 这五个项目对齐,也支持媒体查询:align-items-*-start;

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

    image-20211001203654606
    <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 样式

  1. 使用.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>
    
  2. 三个项目同时设置了.flex-fill,则它们等比例分割宽度,适合导航项目;

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

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

  5. 使用.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>
    
  6. 通过元素生成的 CSS,我们可以看出,其实.flex-fill 就 flex 族的简写形式;

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

    image-20211001205326705

    image-20211002083958133

    <div class="d-flex"> 
        <div class="p-2 w-100">项目 1</div>
        <div class="p-2 flex-shrink-0">项目 2</div>
    </div>
    
  8. 这一对样式,也支持响应式的媒体查询:.flex-*-grow|shrink-*

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

    image-20211002084334097
    <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>
    
  10. 对于垂直方向,也可以使用.mb-auto 和.mt-auto 来设置对象方向;

    image-20211002085008715
    <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>
    
  11. 使用.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>
    

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

    image-20211002085452743

    包裹的样式如下图所示:

    image-20211002085523248
  12. 使用.flex-warp-reverse 进行项目排序顺序的倒序;

    image-20211002085613738
  13. 这三个样式,也支持响应式的媒体查询:.flex-*-warp 等

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

    image-20211002085821320
    <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>
    
  15. .align-content-start(end、center、between、around、stretch)垂直对齐;

    image-20211002090702274 image-20211002090738323 image-20211002090820370
     <div class="d-flex flex-wrap align-content-end"
    style="height: 200px;">
    
  16. .align-content-*-start 等支持媒体响应式查询;

14.警告提示框

一.警告框样式

  1. 使用.alert 设置警告框基础样式,并使用.alert-success 设置警告框颜色;

    image-20211002091717579
    <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>
    
  2. 在使用了警告框的元素内部设置超链接.alert-link会显示加粗的样子;

    image-20211002091956377

    <div class="alert alert-success"> Bootstrap4.x 
        <a href="#" class="alert-link">V4.3</a>
    </div>
    
  3. 使用.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;}

二.警告框组件

  1. 在组件一栏,可以和浏览器实现交互功能,比如警告框的关闭效果;

    <div class="alert alert-warning alert-dismissible fade show"> 警告:请理解更新你的系统~ <button class="close" data-dismiss="alert">&times;</button>
    </div>
    
  2. 解释一下手册给的案例: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.徽章和面包屑导航

一.徽章样式

  1. 使用.badge 设置徽章基础样式,并使用.badge-success 等设置徽章颜色;

    image-20211002095251724
    <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>
    
  2. 使用.badge-pill 将徽章设置成椭圆胶囊式;

    <h3>Bootstrap
        <span class="badge badge-info badge-pill">4.x</span>
    </h3>
    
  3. 在超链接使用徽章,鼠标悬停时会有换色效果;

    <h3>Bootstrap <a href="#" class="badge badge-success badge-pill">4.x</a>
    </h3>
    
    image-20211002095517242

二.面包屑导航

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

    image-20211002100225966

    <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. 按钮和按钮组

一.按钮样式

  1. 使用.btn.btn-*实现按钮的预设样式;

image-20211002100923311

<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>
  1. .btn 不单单在<button>元素下使用,也可以在<a>、<input>下使用;

    <a href="#" class="btn btn-success">Bootstrap4.x</a>
    <input type="submit" class="btn btn-danger" value="Bootstrap4.x">
    
  2. 使用.btn .btn-outline-*可以实现按钮的轮廓效果;

    image-20211002101321222
    <button type="button" class="btn btn-outline-danger">Bootstrap4.x</button>
    <button type="button" class="btn btn-outline-warning">Bootstrap4.x</button>
    
  3. 使用.btn-lg .btn-sm 可以实现按钮尺寸的大和小;

    image-20211002102153289
    <button type="button" class="btn btn-lg btn-success">Bootstrap4.x</button>
    <button type="button" class="btn btn-sm btn-danger">Bootstrap4.x</button>
    
  4. 使用.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>
    
    image-20211002102248584
  5. 使用.active 启用按钮(默认),使用.disabled 禁用按钮,特别注意的禁用;

    image-20211002102545883
    <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外面

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

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

二.按钮组样式

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

    image-20211002103446066
    <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>
    
  2. 使用.btn-group .btn-group-toggle 实现全新方案的复选框和单选框;

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

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

  3. 使用.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>
    
  4. 使用.btn-toolbar 构建分页工具类;

    就是把他们整体管理起来。

    image-20211002103830655
    <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>
    
  5. 使用.btn-group-lg.btn-group-sm 实现大尺寸和小尺寸;

    <div class="btn-group btn-group-lg"> 
    <div class="btn-group btn-group-sm">
    
  6. 使用.btn-group-vertical 设置垂直按钮组;

    image-20211002103946238

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