Bootstrap全部知识点总结

最新推荐文章于 2024-04-27 23:07:09 发布

网络部-陈泽宇

最新推荐文章于 2024-04-27 23:07:09 发布

阅读量2.1k

点赞数 3

文章标签： bootstrap 前端 html

本文链接：https://blog.csdn.net/weixin_60941411/article/details/126980163

版权

1.安装

使用bootstrap库CDN

2.创建

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

<meta name="viewport" content="width=device-width,initial-scale=1">
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.

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

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

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

3.平板和桌面端

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3 col-md-6">
    </div>
    <div class="col-sm-9 col-md-6">
    </div>
  </div>
</div>


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

5.文字排版

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

创建字号更小颜色更浅的文本：<small></small>标签

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

文本底部的虚线边框：<abbr></abbr>

引用：

<blockquote class='blockquote'>
    //内容
    <footer class='bloakquote-footer'>从哪里被引用</footer>
</blockquote>

6.表格

基础表格：.table类

条纹表格：.table-striped类

带边框表格：.table-bordered类

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

<table class="table table-dark"></table>

无边框表格：.table-borderless

<table class='table table-borderless'></table>

7.图像形状

圆角图片：.rounded类

<img src="" class='rounded'>

椭圆图片：.rounded-circle

<img src="" class="rounded-circle">

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

<img src="" class="img-thumbnail">

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

<img src="paris.jpg" class="float-start"> 
<img src="cinqueterre.jpg" class="float-end">

8.信息提示框

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

.alert-warning:设置警告信息

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

.alert-danger:失败的操作

.alert-primary:首选

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

<a href="#" class="alert-link">//alert-link:将链接的颜色与提示框颜色匹配

关闭提示框

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

<div class="alert alert-success alert-dismissible">
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    <strong>成功的提示信息</strong>
</div>

提示框动画：

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

<div class='alert alert-warning alert-dismissible fade show'>
    <button class="btn-close" data-bs-dismiss="alert"></button>
    <strong>警告提示框</strong>
</div>

9.按钮(可用于<a>、<button>、<input>)

<button type="button" class="btn">基本按钮</button>
<button type="button" class="btn btn-default">默认按钮</button>
<button type="button" class="btn btn-danger">表示危险的按钮</button>
<input type="button" class="btn btn-info" value="输入框按钮">
<a href="#" class="btn btn-info" role="button">链接按钮</a>

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

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

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

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

<button type="button" class="btn btn-outline-primary">主要按钮</button>
<button type="button" class="btn btn-outline-secondary">次要按钮</button>
<button type="button" class="btn btn-outline-dark">黑色</button>

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

块级按钮
<div class="d-grid">
    <button type="button" class="btn btn-primary btn-block">按钮      </button>
</div>

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

<div class="d-grid gap-3">
    <button type="button" class="btn btn-primary btn-block">块级按钮</button>
    <button type="button" class="btn btn-primary btn-block">块级按钮</button>
    <button type="button" class="btn btn-primary btn-block">块级按钮</button>
</div>

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

<button type="button" class="btn btn-primary active">可点击的按钮</button>
<button type="button" class="btn btn-primary" disabled>禁止点击的按钮</button>
<a href="#" class="btn btn-primary disabled">禁止点击的链接</button>

加载按钮：spinner-border类

<button class="btn btn-primary">
    <span class="spinner-border spainner-border-sm"></span>
    Loading...
</button>

10.样式颜色

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

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

<div class="btn-group">
     <button class="btn btn-warning">按钮1</button>
     <button class="btn btn-success">按钮2</button>
     <button class="btn btn-primary">按钮1</button>
</div>

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

<div class="btn-group btn-group-lg">...</div>:大号按钮组
<div class="btn-group btn-group">...</div>:默认按钮组
<div class="btn-group btn-group-sm">...</div>:小号按钮组

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

<div class="btn-group-vertical">
    <button type="button" class="btn-primary">按钮1</button>
    <button type="button" class="btn-primary">按钮2</button>
</div>

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

<div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">可以下拉</button>
    <ul class="dropdown-menu">//dropdown-menu:下拉菜单
        <li><a class="dropdown-item" href="#">内容1</a></li>
        <li><a class="dropdown-item" href="#">内容2</a></li>
        <li><a class="dropdown-item" href="#">内容3</a></li>
    </ul>
</div>

12.徽章（badges)

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

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

<div>大傻子<span class="badge bg-secondary text-primary">11</span></div>

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

<span class="badge rounded-pill bg-primary">药丸蓝色徽章</span>

13.进度条

进度条步骤：

1.添加一个带有.progress类的<div>

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

<div class="progress">
    <div class="progress-bar" style="width:70%"></div>
</div>

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

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

<div class="progress">
    <div class="progress-bar progress-bar-striped" style="width:80%"></div>
</div>

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

<div class="progress">
    <div class="progress-bar progress-bar-striped progress-bar-animated" style="width:50%"></div>
</div>

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

<div class="spinner-border"></div>

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

<div class="spinner-grow"></div>

15.分页

创建分页：

ul元素添加.pagination类，

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

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

<ul class="pagination">
    <li class="page-item">
        <a class="page-link" href="#">分页1</a>
    </li>   
    <li class="page-item">
        <a class="page-link" href="#">分页2</a>
    </li>   
    <li class="page-item">
        <a class="page-link" href="#">分页3</a>
    </li>   
</ul>

高亮显示：.active类

<ul class="pagination">
  <li class="page-item"><a class="page-link">previous</a></li>
  <li class="page-item active"><a class="page-link">1</a></li>

16.列表组

要创建列表组，可以在 <ul> 元素上添加 .list-group 类, 在 <li> 元素上添加 .list-group-item 类

<ul class="list-group">
    <li class="list-item">第一</li>
    <li class="list-item">第二</li>
</ul>

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

<ul class="list-group">
    <li class="list-item active">active类是激活列表项</li>
    <li class="list-group-item">第三项</li>
</ul>

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

<ul class="list-group">
    <li class="list-item disabled">disabled类是禁用</li>
    <li class="list-group-item">第二项</li>
</ul>

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

<ul class="list-group list-group-horizontal"></ul>

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

<div class="card">
    <div class="card-header">头部</div>
    <div class="card-body">内容</div> 
    <div class="card-footer">底部</div>
</div>

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

18 .下拉菜单.dropdown

<ul class="dropdown-menu">
    <li><a class="dropdown-item">1</a></li>
</ul>

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

控制内容的隐藏与显示，需要在 <a> 或 <button> 元素上添加 data-bs-toggle="collapse" 属性。 data-target="#id" 属性是对应折叠的内容 (<div id="demo">)。<a> 元素上你可以使用 href 属性来代替 data-bs-target 属性

<a href="#demo" class="btn btn-primary" data-bs-toggle="collapse">内容</a>
<div id="demo" class="collapse">内容</div>

20.导航.nav类

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

<ul class="nav">
    <li class="nav-item">
        <a class="nav-link" href="#">导航栏1</a>
    </li>
        <li class="nav-item">
        <a class="nav-link" href="#">导航栏2</a>
    </li>
</ul>

21.导航栏

水平导航栏：

//删除 .navbar-expand-xxl|xl|lg|md|sm 类会变成垂直导航栏
<nav class="navbar navbar-expend-sm bg-primary">
    <ul class="navbar-nav">
        <li class="nav-item">
            <a class="nav-link" href="#">导航1</a>
        </li>
        <li class="nav-item">
            <a class="nav-item" href="#">导航2</a>
        </li>
</nav>

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

折叠导航栏：

<nav class="navbar bg-dark navbar-dark">
    //nav-brand:logo栏
    <a class="nav-brand">导航logo栏</a>
    //折叠按钮
    <button class="navbar-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#折叠id">
        //按钮样式
        <span class="navbar-toggle-icon"></span>
    </button>
//被折叠的内容
<div class="collapse navbar-collapse1" id="折叠id">
    <ul class="navbar-nav">
        <li class="nav-item">
            <a class="nav-link">折叠1</a>
        </li>
        <li class="nav-item">
            <a class="nav-link">折叠2</a>
        </li>
    </ul>
</div>

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

1、品牌LOGO（.navbar-brand ）

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

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

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

5、表单（.form-inline）

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

<nav class="navbar navbar-expand-md bg-light nav-light">
   <ul class="navbar-nav">
     <li class="nav-item active">
        <a href="#" class="nav-link ">菜单</a>
     </li> 
   </ul>
</nav>

导航菜单可用样式：

.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代码

<div class="nav nav-pills"  id="nav">
    <a class="nav-link active"></选项一</a>
        <a class="nav-link active"></选项二</a>
            <a class="nav-link active"></选项三</a>
</div>
<div class="">

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）

<form>
    <div  class="row">
        <div class="col">
            <input type="text"(输入的是文本) class="form-control" placeholder="Enter email">
        </div>
        < <div class="col">
        <input type="password"(输入的是密码) class="form-control" placeholder="Enter password" name="pswd">
      </div>
</form>

31.文本框

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

<label for="comment">请输入评论：</label>
      <textarea class="form-control" rows="2" id="comment" name="text">
      </textarea>

禁止/只读表单：

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

取色器：

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

纯文本输入

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

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

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

<label for="sel1" class="form-label">单选下拉菜单：</label>
    <select class="form-select" id="sel1" name="sellist1">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
    </select>

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

33.复选框：

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

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

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

单选框：

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

34.选择区间

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

选择区间：<input type="range" class="form-range" >

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

35.输入框组

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

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

<div class="input-group mb-3">
            <span class="input-group-text">@</span>
            <input type="text" class="form-control" placeholder="Username">
        </div>

36.输入框组标签

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

<label class="demo">这里输入邮箱</label>
<div class="input-group">
    <input type="text" class="form-control" placeholder="Email" 
id="demo" name="email">
    <span class="input-group-text">@runoob.com</span>
</div>

37.表单浮动标签

表单标签浮动效果：

<div class="form-floating"> 
    <input type="text" class="form-contorl" placeholder="Enter email" >
    <label>Email</label>
</div>

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

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

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

form-select类是浮动样式结果

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

<div class="form-floating">
    <select class="form-select">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
    </select>
</div>

38.表单验证

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

<form class=was-validated">
    <div class="form-group">
        <label for="biaodan1">表单1</label>
        <input type="text" class="form-control" id="biaodan1">
        <div class="valid-feedback">验证成功</div>
        <div class="invalid-feedback">请输入用户名</div>
    </div>
    <div class="form-group">
        <label for="biaodan2">表单2</label>
        <input class="password" class="form-control" id="biaodan2">
        <div class="valid-feedback">验证成功</div>
        <div class="invalid-feedback">请输入密码</div>
    </div>
</