Bootstrap全部知识点总结

1.安装

使用bootstrap库CDN

2.创建

bootstrap对移动设置友好，可以触屏缩放

width=device-width:宽度是设备屏幕宽度
initial-scale=1 表示初始的缩放比例

容器：需要容器来包裹网站内容

.container类：固定宽度并支持响应式布局的容器
.container-fluid类：用于100%宽度，占据全部视图的容器

3.容器

固定宽度的响应式页面，宽度随屏幕宽度同比例放大缩小: .container

100%宽度，全屏幕尺寸容器: .container-fluid

内边距： pt-n（1<=n<=5）

背景颜色： bg-color

文本颜色： text-color

4.网格系统：

bootstrap 5的网格系统是响应式的，列会跟着屏幕大小自动重新排序，每一行中列的总和等于或小于 12

网格系统有6个类：

.col-:针对所有设备

.col-sm-:平板

.col-md- 桌面显示器

.col-lg- 大桌面显示器

.col-xl- 特大桌面显示器

.col-xxl- 超大桌面显示器

网格系统基本结构：

1.创建一行，然后添加所需要的列，同一行的数字相加为12.

//创建一行
    
添加需要的列
    
添加需要的列
    
添加需要的列
    //设备：sm、md、lg、xl        数字相同为等宽，不相同为不等宽响应式，数字相加为12      需要几列就创建几个col

2.创建相等宽度的列，自动布局

//创建一行
    

    

    

    //不在每个 col 上添加数字，让 bootstrap 自动处理布局，同一行的每个列宽度相等，两个 "col" ，每个就为 50% 的宽度。三个 "col"每个就为 33.33% 的宽度，四个 "col"每个就为 25% 的宽度，以此类推

3.平板和桌面端

​
在桌面设备的显示器上两个列的宽度各占 50%，如果在平板端则左边的宽度为 25%，右边的宽度为 75%, 在移动手机等小型设备上会堆叠显示。

5.文字排版

控制标题样式：.display-1 .display-2 .display-3等

创建字号更小颜色更浅的文本：标签

黄色背景且有一定内边距：.mark类和标签

文本底部的虚线边框：

引用：

    //内容
    
从哪里被引用

6.表格

基础表格：.table类

条纹表格：.table-striped类

带边框表格：.table-bordered类

鼠标悬停表格（表格每一行添加鼠标悬停灰色背景效果）：.table-hover类

无边框表格：.table-borderless

7.图像形状

圆角图片：.rounded类

椭圆图片：.rounded-circle

缩略图（图片有边框）：.img-thumbnail

图片对齐方式：.float-start左对齐 .float-end右对齐

8.信息提示框

.alert-success:指定操作成功提示信息

.alert-warning:设置警告信息

.alert-info:请注意这个信息

.alert-danger:失败的操作

.alert-primary:首选

提示框中在链接的标签上添加 alert-link 类来设置匹配提示框颜色的链接:

//alert-link:将链接的颜色与提示框颜色匹配

关闭提示框

在提示框的div中添加 .alert-dismissible，然后在关闭按钮的链接上添加class="btn-close"和data-bs-dismiss="alert"类来设置提示框的关闭操作

    
    成功的提示信息

提示框动画：

设置提示框在关闭时的淡出和淡入效果：.fade和.show类

    
    警告提示框

9.按钮(可用于、、)

基本按钮 默认按钮 表示危险的按钮 链接按钮

type="button":规定按钮的类型，包括"button","reset",“sumbit”

sumbit:该按钮是提交按钮
button:该按钮是可点击的按钮
reset:该按钮是重置按钮（清除表单数据）

class="btn":为按钮添加基本样式，不同的class对应的按钮是不同的样式

按钮设置边框：btn-outline-样式颜色

主要按钮
次要按钮
黑色

块级按钮：在button中添加.btn-block类可以设置块级元素，.d-grid类设置在父级元素中

块级按钮

    按钮      

多个块级元素(使用.gap-*类来设置)

    块级按钮
    块级按钮
    块级按钮

激活和禁用的按钮：.active类是可用的，disabled属性是禁用不可点击，注意元素不支持disabled属性，那就要disabled类

可点击的按钮
禁止点击的按钮
禁止点击的链接

加载按钮：spinner-border类

    
    Loading...

10.样式颜色

Bootstrap默认为很多组件都提供了5种颜色的样式，这5种颜色分别是：
primary（重点蓝）、success（成功绿）、info（信息蓝）、warning（警告橙）、
danger（危险红）。
定义规则是：组件名称-颜色类型，如btn-primary、alert-info。

11.按钮组（将按钮放在同一行上）：在div元素上添加.btn-group类来创建按钮组

     按钮1
     按钮2
     按钮1

在div元素中，我们可以使用 .btn-group-lg|sm|xs 类来设置按钮组的大小

...
:大号按钮组
...
:默认按钮组
...
:小号按钮组

垂直的按钮组： .btn-group-vertical 类

    按钮1
    按钮2

内嵌按钮组及下拉菜单：在div元素上添加.btn-group类，button元素中添加.dropdown-toggle类(下拉)**,在button元素上添加 **data-bs-toggle="collapse" 属性（控制内容的隐藏与显示）

    可以下拉
    
//dropdown-menu:下拉菜单
        
内容1
        
内容2
        
内容3
    

12.徽章（badges)

徽章（Badges）主要用于突出显示新的或未读的项。。如需使用徽章，只需要将 .badge 类加上带有指定意义的颜色类 (如 .bg-secondary) 添加到 元素上即可。 徽章可以根据父元素的大小的变化而变化

使用徽章只需要给元素添加一个.badge类，背景颜色和文本颜色自行添加

大傻子11

药丸形状徽章：.badge(徽章类) .rounded-pill(药丸形状)

药丸蓝色徽章

13.进度条

进度条步骤：

1.添加一个带有.progress类的

2.在div内，添加另一个带有.progress-bar的空的div，在这个div中添加一个带有百分比表示宽度的style属性

进度条高度通过css的height属性来修改

可以通过 .progress-bar-striped 类来设置条纹进度条

使用 .progress-bar-animated 类可以为进度条添加动画

14.加载中效果：.spinner-border

闪烁的加载效果：.spinner-grow类

15.分页

创建分页：

ul元素添加.pagination类，

li元素上添加.page-item类，

li的a标签上添加.page-link类

    

        分页1
    
   
    

        分页2
    
   
    

        分页3
    
   

高亮显示：.active类

  
previous
  
1

16.列表组

要创建列表组，可以在

元素上添加 .list-group 类, 在
• 元素上添加 .list-group-item 类

  
      
  第一
      
  第二
  

  激活列表项：通过添加 .active 类来设置激活状态的列表项

  
      
  active类是激活列表项
      
  第三项
  

  禁用的列表项：.disabled 类用于设置禁用的列表项

  
      
  disabled类是禁用
      
  第二项
  

  水平列表组:我们可以将 .list-group-horizontal 类添加到 .list-group 类后面来创建水平列表组

  ​
  

  17.卡片：.card和.card-body类

  
      
  头部
      
  内容
   
      
  底部
  

  给 img 添加 .card-img-top（图片在文字上方） 或 .card-img-bottom（图片在文字下方 来设置图片卡片)

  18 .下拉菜单.dropdown

  
      
  1
  

  19.折叠 .collapse用于指定一个折叠元素

  控制内容的隐藏与显示，需要在 或 元素上添加 data-bs-toggle="collapse" 属性。 data-target="#id" 属性是对应折叠的内容 (

  )。 元素上你可以使用 href 属性来代替 data-bs-target 属性

  内容
  内容

  20.导航.nav类

  在

  元素上添加 .nav类，在每个
  • 选项上添加 .nav-item 类，在每个链接上添加 .nav-link 类:

    
        
    
            导航栏1
        
            
    
            导航栏2
        
    

    21.导航栏

    水平导航栏：

    //删除 .navbar-expand-xxl|xl|lg|md|sm 类会变成垂直导航栏
    
        
    
            
    
                导航1
            
            
    
                导航2
            
    

    给nav标签添加.justify-content-center类可以创建居中对齐的导航栏，其他保持不变

    折叠导航栏：

    
        //nav-brand:logo栏
        导航logo栏
        //折叠按钮
        

  //按钮样式 //被折叠的内容

  • 折叠1
  • 折叠2

  导航栏容器可以包含以下几个常用组成：

  1、品牌LOGO（.navbar-brand ）

  2、导航菜单（.navbar-nav）

  3、导航文本（.navbar-text）

  4、折叠导航按钮（.navbar-toggle）

  5、表单（.form-inline）

  6.导航菜单一般使用ul、li来定义

  
     
  
       
  
          菜单
       
   
     
  

  导航菜单可用样式：

  .navbar-nav	应用于ul标签
  .nav-item 、 .active	应用于li标签
  .nav-link 、 .disabled	应用于a标签

  导航组成解释：

  nav标签：在创建一个导航栏时，你需要把它放在nav标签里

  .navbar类：该类创建一个标准的导航栏

  navbar-expand-lg ：该类用于设置响应式折叠断点，比方说，就用navbar-expand-lg，那么当屏幕尺寸小到 lg 断点时，菜单就会被折叠，而如果使用其它类似的，比方说navbar-expand-md，那么只有当屏幕尺寸小于 md 断点时，菜单才会被折叠。删除该类，那么导航栏将变为垂直排列。

  navbar-brand ：该类用于装饰你的网站名字，或者说商标。

  navbar-toggler ：该类修饰button按钮，如果不加该类，那么你的button按钮会很难看

  data-toggle="collapse" ：可以看到在button按钮中有这么一个属性，该属性用于设置button的行为，即单击一次打开导航栏，再单击一个关闭导航栏，如果不设置该属性，那么你的button按钮即使被点击了也将毫无反应。

  data-target="#navbarSupportedContent" ：该属性用于设置button按钮需要打开的导航栏，它的值为一个id，你会发现该id刚好是下面的导航栏的id，所以button按钮才能打开它。如果不设置该值，那么你的button按钮将形同虚设。

  navbar-toggler-icon : 这个设置的其实就是按钮里面的那三条杠，没有它的话，按钮就只是一个普通的按钮了，很丑。

  collapse ：该类定义了导航栏在屏幕尺寸小于断点的初始状态下是否会被隐藏。什么意思呢，对于屏幕尺寸大于断点的情况，该类没什么用，对于屏幕尺寸小于断点的情况，如果加上这个类，那么初始状态下导航栏是被折叠的状态，如果不加该类，那么初始状态下导航栏是未被折叠的状态，当然不管加不加该类，都不影响导航栏之后因为单击按钮而被隐藏或者显示这一功能，因为按钮不会被隐藏。

  navbar-collapse：该类定义了导航栏在屏幕尺寸大于断点的初始状态下是否会被隐藏。如果不加该类，那么在大于断点的情况下，导航栏会被隐藏，但小于断点的情况不受影响。另外，如果不加该类，那么在大于断点的情况下，导航栏就真的被隐藏了，因为这时按钮也会被隐藏，所以无法通过任何行为来显示导航栏。 ———————————————— 版权声明：本文为CSDN博主「二十七º」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。 原文链接：详细说明基于 Bootstrap4 编写 一个响应式导航栏_二十七º的博客-CSDN博客_bootstrap4响应式导航

  22.轮播

  类	描述
  .carousel	创建一个轮播
  .carousel-indicators	为轮播添加一个指示符，就是轮播图底下的一个个小点，轮播的过程可以显示目前是第几张图。
  .carousel-inner	添加要切换的图片
  .carousel-item	指定每个图片的内容
  .carousel-control-prev	添加左侧的按钮，点击会返回上一张。
  .carousel-control-next	添加右侧按钮，点击会切换到下一张。
  .carousel-control-prev-icon	与 .carousel-control-prev 一起使用，设置左侧的按钮
  .carousel-control-next-icon	与 .carousel-control-next 一起使用，设置右侧的按钮
  .slide	切换图片的过渡和动画效果，如果你不需要这样的效果，可以删除这个类。

  23.模态框（modal）

  模态框是覆盖在父窗体上的子窗体

  24.提示框

  通过向元素添加 data-bs-toggle="tooltip" 来来创建提示框

  记得引入js代码

  25。弹出框

  通过向元素添加 data-bs-toggle="popover" 来来创建弹出框

  记得引入js代码

  26.滚动监听（scollspy）

  记得引入js代码

  27.浮动与清除浮动

  元素往右浮动使用.float-end类，向左浮动使用.float-start类，.clearfix类清除浮动

  设置元素居中对齐：.mx-auto类

  28.间距

  间距设置语法如下:

  {property}{sides}-{size} 

  property 代表属性，包含：

  • m - 用来设置 margin

  • p - 用来设置 padding

  sides 主要指方向：

  • t - 用来设置 margin-top 或 padding-top

  • b - 用来设置 margin-bottom 或 padding-bottom

  • l - 用来设置 margin-left 或 padding-left

  • r - 用来设置 margin-right 或 padding-right

  • x - 用来设置 *-left 和 *-right

  • y - 用来设置 *-top 和 *-bottom

  • blank - 用来设置元素在四个方向的 margin 或 padding

  size 指的是边距的大小：

  • 0 - 设置 margin 或 padding 为 0

  • 1 - 设置 margin 或 padding 为 $spacer * .25

  • 2 - 设置 margin 或 padding 为 $spacer * .5

  • 3 - 设置 margin 或 padding 为 $spacer

  • 4 - 设置margin 或 padding 为 $spacer * 1.5

  • 5 - 设置 margin 或 padding 为 $spacer * 3

  • auto - 设置 margin 为 auto

  29.弹性盒子

  设置弹性盒子： 使用 d-flex 类创建一个弹性盒子容器

  创建显示在同一行上的弹性盒子容器可以使用 d-inline-flex 类

  水平方向：

  .flex-row 可以设置弹性盒子元素水平显示

  .flex-row-reverse 类用于设置右对齐显示，即与 .flex-row 方向相反。

  垂直方向：

  .flex-column 类用于设置弹性子元素垂直方向显示

  .flex-column-reverse 用于翻转子元素

  等宽：

  .flex-fill类强制设置各个弹性盒子的宽度一样

  扩展：

  .flex-grow-1:用于设置元素剩下的使用空间，其他子元素只设置了它们所需要的空间，使用该属性的子元素获取剩余空间

  排序：

  .order 类可以设置弹性子元素的排序，从 .order-1 到 .order-12，数字越低权重越高( .order-1 排在 .order-2 之前)

  30。表单（.form-control）

  表单布局：堆叠表单（垂直）、内联表单（水平）

  .form-label 类来确保标签元素有一定的内边距。

  .form-control类是表单

  内联表单：表单元素并排显示（使用.row和.col）

  
      
  
          
  
              
          
          < 
  
          
        
  

  31.文本框

  使用 textarea 标签创建文本框提交表单，使用 .form-control 类渲染文本框 textareas 标签

  请输入评论：
              

  禁止/只读表单：

  使用 disabled/readonly 属性设置输入框禁用/只读

  取色器：

  使用 .form-control-color 类可以创建一个取色器

  纯文本输入

  使用 .form-control-plaintext 类可以删除输入框的边框

  32.下拉菜单（.form-select）

  下拉菜单 元素可以使用 .form-select 类来渲染

  单选下拉菜单：
      

      1     2     3     4  

  在select中multiple属性设置多选下拉菜单

  33.复选框：

  class="form-check-input“渲染复选框的样式

  type="checkbox"：设置复选框，设置小方块

  checked 属性用于设置默认选中的选项

  单选框：

  type="radio"：设置单选框的样式，设置小圆块

  34.选择区间

  要设置一个选择区间可以在 input 元素中添加 type="range" 并使用 .form-range 类

  选择区间：

  step设置步长值，默认步长为1，即默认情况下step=10

  35.输入框组

  使用 .input-group 类来向表单输入框中添加更多的样式，如图标、文本或者按钮。

  .input-group-text 类来设置文本的样式，是固定的样式。

  
              @
              
          

  36.输入框组标签

  在输入框组通过在输入框组外围的 label 来设置标签，标签的 for 属性需要与输入框组的 id 对应，点击标签后可以聚焦输入框

  这里输入邮箱
  
      
      @runoob.com
  

  37.表单浮动标签

  表单标签浮动效果：

   
      
      Email
  

  .form-floating类给div添加浮动样式

  .form-contorl类给input添加表单样式

  元素必须在 元素之后，并且每个 元素都需要 placeholder 属性

  form-select类是浮动样式结果

  可以在选择菜单上使用浮动标签，它将始终显示在选择菜单的左上角，不会有点击浮动效果

  
      
          1
          2
          3
          4
      
  

  38.表单验证

  给form元素添加.was-validated类，input输入字段将出现绿色（有效）或红色（无效）边框效果，用于说明表单是否需要输入内容，.valid-feedback或.invalid-feedback类提示用户缺少什么信息。

  
      
  
          表单1
          
          
  验证成功
          
  请输入用户名
      
      
  
          表单2
          
          
  验证成功
          
  请输入密码