前端学习-Bootstrap

最新推荐文章于 2023-07-10 11:42:09 发布

a听闻

最新推荐文章于 2023-07-10 11:42:09 发布

阅读量834

点赞数 1

分类专栏： Web前端文章标签： bootstrap 前端

本文链接：https://blog.csdn.net/LuKeliyy/article/details/113394628

版权

Web前端专栏收录该内容

16 篇文章 2 订阅

订阅专栏

一、什么是Bootstrap

Bootstrap 是全球最受欢迎的前端开源工具库，它支持 Sass 变量和 mixin、响应式栅格系统、自带大量组件和众多强大的 JavaScript 插件。基于 Bootstrap 提供的强大功能，能够让你快速设计并自定义你的网站。

参考地址:

官网： https://getbootstrap.com/

中文网: https://www.bootcss.com/

菜鸟教程: https://www.runoob.com/bootstrap4/bootstrap4-tutorial.html

二、Bootstrap环境搭建

2.1 引入资源文件

jQuery的资源文件：https://jquery.com/
Bootstrap的资源文件
下载的资料包中有很多文件：https://v4.bootcss.com/docs/getting-started/contents/，这里说明了每种文件包含的内容有哪些，根据不同的情况，选择引入不同的文件

2.2 书写页面基础结构

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Bootstrap的布局</title>
    <!-- 引入Bootstrap所有样式 -->
    <link rel="stylesheet" href="./lib/bootstrap-4.5.0-dist/css/bootstrap.min.css" />
</head>
<body>

<!-- 导入jQuery脚本 -->
<script type="text/javascript" src="./lib/jquery-3.5.1/jquery-3.5.1.min.js"></script>
<!-- 导入Bootstrap（包含 Popper） -->
<script type="text/javascript" src="./lib/bootstrap-4.5.0-dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

三、 Bootstrap的布局

参考链接：https://v4.bootcss.com/docs/layout/grid/

3.1 布局容器

在使用栅格系统时，容器是必需的

容器类样式名	特小 <576px	小屏幕≥576px	中等屏幕 ≥768px	大屏幕≥992px	特大 ≥1200px
`.container`	100%	540px	720px	960px	1140px
`.container-sm`	100%	540px	720px	960px	1140px
`.container-md`	100%	100%	720px	960px	1140px
`.container-lg`	100%	100%	100%	960px	1140px
`.container-xl`	100%	100%	100%	100%	1140px
`.container-fluid`	100%	100%	100%	100%	100%

说明

100%表示宽度充满整个页面，否则宽度为指定的宽度，左右两侧留有等距的间距

示例

<style type="text/css">
    div[class^="container"] {
        background-color: #bdfff3;
        height: 100px;
        margin-bottom: 20px;
    }
</style>
...
<div class="container"></div>
<div class="container-sm"></div>
<div class="container-md"></div>
<div class="container-lg"></div>
<div class="container-xl"></div>
<div class="container-fluid"></div>

3.2 栅格系统

每一行都会分为12列，本身是将容器分为12列。
row：表明当前的元素占满一行。
col：表明当前元素占几列。
- col-数字：数字表明当前元素在一行中占几列，如果没有数字，默认会平分一行的空间。
- col-后面的数字，在一行中相加最多12，超过的会换到下一行。

3.2.1 Equal-width：等宽

<style type="text/css">
    div[class^="col"] {
        background-color: #bdfff3;
        height: 50px;
        border: 1px solid #4ac29a;
        color: #27785e;
    }
</style>
...
<div class="container">
    <div class="row">
        <div class="col">内容</div>
        <div class="col">内容</div>
        <div class="col">内容</div>
    </div>
    <div class="row">
        <div class="col">内容</div>
        <div class="col">内容</div>
        <div class="col">内容</div>
        <div class="col">内容</div>
        <div class="col">内容</div>
    </div>
</div>

3.2.2 Setting one column width：指定列的宽度

...
<div class="container">
    <div class="row">
        <div class="col">内容</div>
        <div class="col-7">内容</div>
        <div class="col">内容</div>
    </div>
    <div class="row">
        <div class="col">内容</div>
        <div class="col-4">内容</div>
        <div class="col-4">内容</div>
        <div class="col">内容</div>
        <div class="col">内容</div>
    </div>
</div>

3.2.3 Variable width conten：可变宽度

使用auto，可以是当前列，根据内容宽度来调整列的大小

...
<div class="container">
    <div class="row">
        <div class="col">内容</div>
        <div class="col">内容</div>
        <div class="col">内容</div>
    </div>
    <div class="row">
        <div class="col">内容</div>
        <div class="col">内容</div>
        <div class="col-auto">内容</div>
        <div class="col">内容</div>
        <div class="col">内容</div>
    </div>
</div>

3.2.4 Responsive classes：响应式宽度

响应式的尺寸：sm , md , lg, xl

...
<div class="container">
    <div class="row">
        <div class="col">内容</div>
        <div class="col-sm-7">内容</div>
        <div class="col">内容</div>
    </div>
    <div class="row">
        <div class="col">内容</div>
        <div class="col-md-4">内容</div>
        <div class="col-md-auto">内容</div>
        <div class="col">内容</div>
        <div class="col">内容</div>
    </div>
</div>

3.2.5 Mix and match：多个响应式宽度

一列上可以设置多个响应式宽度，以便适应在不同的媒体下，页面布局方式不同

<div class="container">
    <div class="row">
        <div class="col">内容</div>
        <div class="col-sm-7 col-md-auto">内容</div>
        <div class="col">内容</div>
    </div>
    <div class="row">
        <div class="col">内容</div>
        <div class="col-md-4 col-lg-8">内容</div>
        <div class="col-md-auto">内容</div>
        <div class="col">内容</div>
        <div class="col">内容</div>
    </div>
</div>

3.2.6 Row columns：行列类

使用row-cols-*快速构建列数(最大为6)

注意：只能用等宽模式，不能使用指定列宽度

<div class="container">
    <div class="row row-cols-3">
        <div class="col">内容</div>
        <div class="col">内容</div>
        <div class="col">内容</div>
        <div class="col">内容</div>
        <div class="col">内容</div>
    </div>
</div>

3.2.7 No gutters：没有间距

使用no-gutters可以去掉每列中的内间距

<div class="container">
    <div class="row no-gutters">
        <div class="col">内容</div>
        <div class="col-sm-7 col-md-auto">内容</div>
        <div class="col">内容</div>
    </div>
    <div class="row">
        <div class="col">内容</div>
        <div class="col-md-4 col-lg-8">内容</div>
        <div class="col-md-auto">内容</div>
        <div class="col">内容</div>
        <div class="col">内容</div>
    </div>
</div>

3.2.8 Offsetting columns：列偏移

使用offset-{...}-*可以设置偏移的距离
因为存在多个响应式的形式，因此可能需要重置偏移量，输入offset-{...}-0即可

<div class="container">
    <div class="row no-gutters">
        <div class="col">内容</div>
        <div class="offset-1 col-sm-3 col-md-auto">内容</div>
        <div class="col">内容</div>
    </div>
    <div class="row">
        <div class="col">内容</div>
        <div class="offset-md-2 col-md-4 offset-lg-0 col-lg-8">内容</div>
        <div class="col-md-auto">内容</div>
        <div class="col">内容</div>
        <div class="col">内容</div>
    </div>
</div>

3.2.9 Margin utilities：距离美

使用mr-auto、ml-auto、mr-{...}-auto、ml-{...}-auto可以让两个相邻的列产生距离

<div class="container">
    <div class="row row-cols-3">
        <div class="col">内容</div>
        <div class="col">内容</div>
        <div class="col">内容</div>
        <div class="col">内容</div>
        <div class="col ml-auto">内容</div>
    </div>
</div>

3.2.10 Nesting ：嵌套栅格

<div class="container">
    <div class="row row-cols-3">
        <div class="col">内容</div>
        <div class="col">
            <div class="row">
                <div class="col-3">嵌套内容</div>
                <div class="col-3">嵌套内容</div>
            </div>
        </div>
        <div class="col">内容</div>
        <div class="col">内容</div>
        <div class="col ml-auto">内容</div>
    </div>
</div>

四、 Bootstrap工具类

4.1 flex布局

参考链接: https://v4.bootcss.com/docs/utilities/flex/

其在原本flex布局的基础上，添加了响应式的模式，可以在不同的媒体上，展现不同的flex布局

案例模板：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>工具类-flex布局</title>
    <!-- 引入Bootstrap所有样式 -->
    <link rel="stylesheet" href="./lib/bootstrap-4.5.0-dist/css/bootstrap.min.css" />
    <style type="text/css">
        .box{
            border: 1px solid red;
        }
        .box div{
            width: 50px;
            height: 50px;
            background-color: #ffad39;
            text-align: center;
            border: 1px solid #a84200;
            margin: 1px;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>10</div>
        <div>11</div>
    </div>
</div>
<!-- 导入jQuery脚本 -->
<script type="text/javascript" src="./lib/jquery-3.5.1/jquery-3.5.1.min.js"></script>
<!-- 导入Bootstrap（包含 Popper） -->
<script type="text/javascript" src="./lib/bootstrap-4.5.0-dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

4.1.1 启用弹性行为

使用d-flex将元素转为flex布局

使用d-inline-flex将元素转为inline-flex布局（行弹性布局元素：行级元素，但是具有弹性布局的特性，其内部的元素同样的会转为块级元素）

使用d-{...}-flex、d-{...}-inline-flex来设置响应的弹性布局

4.1.2 方向

使用flex-row（默认值），设置主轴为水平方向，从左至右排布

使用flex-row-reverse，设置主轴为水平方向，从右至左排布

使用flex-column，设置主轴为垂直方向，从上至下排布

使用flex-column-reverse，设置主轴为垂直方向，从下至上排布

同样可以使用flex-{...}-row等等响应的形式

4.1.3 主轴排版方式

使用justify-content-start（默认值），设置内容沿主轴起始点开始

使用justify-content-end，设置内容沿主轴结束点开始

使用justify-content-center，设置内容处于主轴中心点

使用justify-content-between，设置内容在主轴上两端对齐，元素等距

使用justify-content-around，设置内容在主轴上等距并且元素距离两边存在间隔

同样可以使用justify-content-{...}-start等等响应的形式

4.1.4 交叉轴排列方式

使用align-items-stretch（默认值），设置内容充满交叉轴

使用align-items-start，设置内容沿交叉轴起始点开始

使用align-items-end，设置内容沿交叉轴结束点开始

使用align-items-center，设置内容处于交叉轴中心点

同样可以使用align-items-{...}-start等等响应的形式

4.1.5 子项调整

使用align-self-stretch（默认值）,单独设置一个子项内容充满整个交叉轴

使用align-self-start，单独设置一个子项内容处于交叉轴起始点

使用align-self-end，单独设置一个子项内容处于交叉轴结束点

使用align-self-center，单独设置一个子项内容处于交叉轴中心点

同样可以使用align-selft-{...}-start等等响应的形式

...
.box div:nth-of-type(2){
    height: 100px;
}
.box div:nth-of-type(4){
    height: 120px;
}
.box div:nth-of-type(6){
    height: 70px;
}

4.1.6 充满

使用flex-fill，可以将元素强制占满剩余的主轴空间，如果同级中存在多个，那么各自按照比例划分剩余主轴空间

同样可以使用flex-{...}-fill等等响应的形式

4.1.7 成长与收缩

使用flex-grow-1可以将元素强制占满剩余的主轴空间（效果与flex-fill一样），如果同级存在多个（包括flex-fill），那么各自按照比例划分剩余主轴空间

使用flex-grow-0去除强制占领

使用给flex-grow-1额外添加w-100可以让同级中没有flex-shrink-0的元素强制换行，以获取更大的空间，可以使用flex-shrink-1让出空间

同样可以使用flex-{...}-{grow|shrink}-{0|1}响应的形式

4.1.8 换行处理方式

使用flex-nowrap（默认值），设置内容即便超出了主轴区域，也不换行

使用flex-wrap，设置内容在超出主轴后，自动换行

使用flex-wrap-reverse，设置内容在超出主轴后，自动换行，但是行的顺序颠倒

同样可以使用flex-{...}-wrap等等响应的形式

4.1.9 多行处理方式

使用align-content-stretch（默认值），设置多条主轴时，整体充满交叉轴

使用align-content-start，设置多条主轴时，整体处于交叉轴起始点

使用align-content-end，设置多条主轴时，整体处于交叉轴结束点

使用align-content-center，设置多条主轴时，整体处于交叉轴中心点

使用align-content-between，设置多条主轴时，整体在交叉轴上两端对齐

使用align-content-around，设置多条主轴时，整体处于交叉轴等距并且元素距离两边存在间隔

4.2 颜色

参考链接: https://v4.bootcss.com/docs/utilities/colors/

text-名称：设置文本颜色
- primary：主色调位蓝色
- secondary：次要颜色，偏灰色
- success：成功为绿色
- danger：危险为红色
- warning：警告为偏黄色
- info：提示信息，偏淡蓝色
- light：亮白色
- dark：偏黑色
- body：偏黑色，比dark更黑
- muted：偏亮灰色
- white：白色
- black-50：黑色半透明
- white-50：白色半透明
bg-名称：设置背景颜色
- primary：主色调位蓝色
- secondary：次要颜色，偏灰色
- success：成功为绿色
- danger：危险为红色
- warning：警告为偏黄色
- info：提示信息，偏淡蓝色
- light：亮白色
- dark：偏黑色
- white：白色
- transparent：透明

示例

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

4.3 间距

参考链接: https://v4.bootcss.com/docs/utilities/spacing/

属性：
- m：对应margin
- p：对应padding
边：
- t、b、l、r：分别对应 top、bottom、left、right。
- x：对应 left 和 right。
- y：对应 top 和 bottom。
- 如果是空白，那么代表同时设置四个边
尺寸：（$spacer默认值为1rem）
- 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自动

示例

<div class="container">
    <nav>
        <a href="#" class="d-inline-block text-muted py-4 mx-4">首页</a>
        <a href="#" class="d-inline-block text-muted py-4 mx-4">歌单</a>
        <a href="#" class="d-inline-block text-muted py-4 mx-4">歌手</a>
        <a href="#" class="d-inline-block text-muted py-4 mx-4">VIP</a>
        <a href="#" class="d-inline-block text-muted py-4 mx-4">音乐盒</a>
        <a href="#" class="d-inline-block text-muted py-4 mx-4">客户端</a>
    </nav>
</div>

4.4 文本对齐

参考链接： https://v4.bootcss.com/docs/utilities/text/

text-center
text-left
text-right
text-justify
左中右对齐还有响应的样式，例如text-xl-center

演示

<p class="bg-primary text-light text-center py-2">大家好，我就是我</p>

五、 Bootstrap页面内容

5.1 表格内容

参考页: https://v4.bootcss.com/docs/content/tables/

5.1.1 表格主题

table：亮色主题

table-dark：暗色调主题（不常用）

table-其他颜色：其它与背景颜色一样的颜色（不常用）

5.1.2 表格头部样式

仅在表格主题为亮色色生效

thead-light：浅灰色表头

thead-dark：深灰色表头

5.1.3 表格风格样式

table-bordered：表格带有边框
table-hover：鼠标在表格上移动时，经过的表格行会有交互效果。
table-striped：斑马线效果，实际上是隔行变色。

5.1.4 响应式表格

table-responsive：在所有视口都执行响应性
table-responsive-{...}：在指定的视口范围，执行响应性

5.1.4 示例

<table class="table table-striped table-bordered table-responsive-sm table-hover w-100">
    <thead class="thead-dark">
        <tr>
            <th>学号</th>
            <th>姓名</th>
            <th>语文</th>
            <th>数学</th>
            <th>英语</th>
            <th>自然</th>
            <th>社会</th>
            <th>总分</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>诸葛亮</td>
            <td>101</td>
            <td>97</td>
            <td>50</td>
            <td>169</td>
            <td>75</td>
            <td>492</td>
        </tr>
        <tr>
            <td>2</td>
            <td>曹操</td>
            <td>117</td>
            <td>103</td>
            <td>89</td>
            <td>166</td>
            <td>84</td>
            <td>559</td>
        </tr>
        <tr>
            <td>3</td>
            <td>刘备</td>
            <td>118</td>
            <td>121</td>
            <td>90</td>
            <td>146</td>
            <td>89</td>
            <td>564</td>
        </tr>
        <tr>
            <td>4</td>
            <td>不知火舞</td>
            <td>111</td>
            <td>108</td>
            <td>94</td>
            <td>180</td>
            <td>79</td>
            <td>572</td>
        </tr>
        <tr>
            <td>5</td>
            <td>东皇太一</td>
            <td>108</td>
            <td>114</td>
            <td>81</td>
            <td>160</td>
            <td>93</td>
            <td>556</td>
        </tr>
        <tr>
            <td>6</td>
            <td>李白</td>
            <td>116</td>
            <td>95</td>
            <td>92</td>
            <td>163</td>
            <td>87</td>
            <td>556</td>
        </tr>
    </tbody>
</table>

5.2 图片内容

参考链接: https://v4.bootcss.com/docs/content/images/

img-fluid ，图片撑满容器
img-thumbnail , 简单修饰图片，有1px的外边框。可以在后续实现圆角等操作

示例

<img src="./img/bg-change.jpg" class="img-fluid img-thumbnail" alt />

六、 Bootstrap组件

6.1 导航条组件

参考链接: https://v4.bootcss.com/docs/components/navbar/

navbar：主样式
navbar-expand-lg：在大尺寸的屏幕上展开横向菜单。
navbar-brand：设置导航条第一个位置的品牌图标或者LOGO。
navbar-collapse：用来包裹横向菜单，方便设置展开和隐藏。
navbar-nav：用来设置导航条的横向菜单。

示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>演示导航条的使用</title>
		<!-- 导入需要的样式文件 -->
		<link rel="stylesheet" type="text/css" href="../lib/bootstrap/css/bootstrap.css" />
	</head>
	<body>
		
		<nav class="navbar navbar-expand-md navbar-light bg-light" >
			<a class="navbar-brand" href="javascript:;">首页</a>
			<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navtoggler"
			 aria-controls="navtoggler" aria-expanded="false" aria-label="Toggle navigation">
			    <span class="navbar-toggler-icon"></span>
			  </button>
			<div class="collapse navbar-collapse" id="navtoggler">
				<ul class="navbar-nav">
					<li class="nav-item"><a class="nav-link" href="">主要产品</a></li>
					<li class="nav-item"><a class="nav-link"  href="">公司介绍</a></li>
				</ul>
			</div>
		</nav>
		
		<!-- 导入jqueryjs库 -->
		<script src="../lib/jquery/jquery-3.4.1.js"></script>
		<!-- 导入bootstrap的库 -->
		<script src="../lib/bootstrap/js/bootstrap.js"></script>
	</body>
</html>

6.2 面包屑导航组件

参考链接：https://v4.bootcss.com/docs/components/breadcrumb/

通常用于界面主内容区域的二级导航

breadcrumb ：导航栏
breadcrumb-item：导航项
active：用于表示该项激活（表现出的效果是，文本为灰色）

<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="#">所有商品</a></li>
        <li class="breadcrumb-item"><a href="#">笔记本电脑</a></li>
        <li class="breadcrumb-item active" aria-current="page">ASUS华硕</li>
    </ol>
</nav>

6.3 卡片组件

参考链接： https://v4.bootcss.com/docs/components/card/

card：主样式
card-header：卡片的标题栏
card-body：卡片的主体内容
card-footer：卡片底部的提示信息
card-title：卡片主标题
card-subtitle：卡片副标题
card-link：卡片连接

示例：https://vans.com.cn/

<div class="container">
    <div class="card">
        <img src="./img/shop.jpg" class="card-img-top" alt />
        <div class="card-body">
            <h3 class="card-title">VANS SKATEBOARDING</h3>
            <h5 class="card-subtitle">呈现 ALRIGHT, OK</h5>
        </div>
        <div class="card-footer">
            <a href="#" class="card-link stretched-link">由著名制片人 Greg Hunt 执导</a>
        </div>
    </div>
    <div class="card my-3">
        <div class="card-header">VANS SKATEBOARDING</div>
        <div class="card-body">
            <img src="./img/shop.jpg" class="card-img-top" alt />
            <h3 class="card-title">VANS SKATEBOARDING</h3>
            <h5 class="card-subtitle">呈现 ALRIGHT, OK</h5>
            <a href="#" class="card-link">由著名制片人 Greg Hunt 执导</a>
        </div>
    </div>
</div>

6.4 表单组件

参考链接：https://v4.bootcss.com/docs/components/forms/

6.4.1 基本样式

form-group：每个label和input需要包含在一组中
form-control：设置表单相关控件的样式；其中文本框需要使用form-control-file样式

<div class="container">
    <form>
        <div class="form-group">
            <label for="email">邮箱地址</label>
            <input
                type="text"
                class="form-control"
                placeholder="name@example.com"
                id="email"
            />
            <span class="form-text text-muted">我们绝不会与其他任何人共享您的电子邮件</span>
        </div>
        <div class="form-group">
            <label for="love">您的喜好</label>
            <select class="form-control" id="love">
                <option>唱</option>
                <option>跳</option>
                <option>RAP</option>
                <option>篮球</option>
            </select>
        </div>
        <div class="form-group">
            <label for="advice">您的建议</label>
            <textarea
                class="form-control"
                id="advice"
                placeholder="输入您对我们的一些建议"
            ></textarea>
        </div>
    </form>
</div>

6.4.2 复选框与单选框

form-check：复选框或单选框组合基本样式
form-check-input：复选框或单选框排版样式
form-check-label：指示文本排版样式
form-check-inline：复选框或单选框组合由block调整为flex-inline

<div class="form-group">
    <label>您的喜好</label>
    <div class="form-check form-check-inline">
        <label class="form-check-label">
            <input class="form-check-input" name="love1" type="checkbox" value="1" />
            <span>唱</span>
        </label>
    </div>
    <div class="form-check form-check-inline">
        <label class="form-check-label">
            <input class="form-check-input" name="love1" type="checkbox" value="2" />
            <span>跳</span>
        </label>
    </div>
    <div class="form-check form-check-inline">
        <label class="form-check-label">
            <input class="form-check-input" name="love2" type="radio" value="3" />
            <span>RAP</span>
        </label>
    </div>
    <div class="form-check form-check-inline">
        <label class="form-check-label">
            <input class="form-check-input" name="love2" type="radio" value="4" />
            <span>篮球</span>
        </label>
    </div>
</div>

6.4.3 表单网格

form-row：设定表单网格布局
btn-颜色名称：设置实心按钮的颜色；btn-outline-颜色名称：设置空心（边线）按钮的颜色

<form>
    <div class="form-row">
        <div class="form-group col">
            <label for="email">邮箱地址</label>
            <input
                   type="text"
                   class="form-control"
                   placeholder="name@example.com"
                   id="email"
                   />
            <span class="form-text text-muted">我们绝不会与其他任何人共享您的电子邮件</span>
        </div>
        <div class="form-group col">
            <label for="pwd">密码</label>
            <input
                   type="password"
                   class="form-control"
                   placeholder="请输入密码"
                   id="pwd"
                   />
        </div>
    </div>
</form>

6.4.4 内联表单

form-inline：可以将表单内容排列在一条水平线上

<form class="form-inline">
    <div class="form-group">
        <label class="mr-2" for="email">邮箱地址</label>
        <input
               type="text"
               class="form-control"
               placeholder="name@example.com"
               id="email"
               />
    </div>
    <div class="form-group mx-2">
        <label class="mr-2" for="pwd">密码</label>
        <input
               type="password"
               class="form-control"
               placeholder="请输入密码"
               id="pwd"
               />
    </div>
</form>

6.5 按钮组件

参考链接：https://v4.bootcss.com/docs/components/buttons/

btn：按钮的主样式
btn-颜色名称：设置实心按钮的颜色；btn-outline-颜色名称：设置空心（边线）按钮的颜色
btn-sm：设置按钮为小按钮；btn-lg设置按钮为大按钮
btn-block：设置按钮变为块级元素，独占一行
active：设置后，按钮变现为激活样式
disabled：设置后，按钮表现为禁用样式

示例

<form class="form-inline">
    <div class="form-group">
        <label class="mr-2" for="email">邮箱地址</label>
        <input
               type="text"
               class="form-control"
               placeholder="name@example.com"
               id="email"
               />
    </div>
    <div class="form-group mx-2">
        <label class="mr-2" for="pwd">密码</label>
        <input
               type="password"
               class="form-control"
               placeholder="请输入密码"
               id="pwd"
               />
    </div>
    <span class="btn btn-primary mr-2">登录</span>
        <span class="btn btn-outline-info">重置</span>
</form>

6.6 输入框组

参考链接: https://v4.bootcss.com/docs/components/input-group/

input-group：输入框组的主样式
input-group-prepend ：输入框前面的内容
input-group-append：输入框后面的内容
input-group-text：输入框组追加的文本样式

<div class="container">
    <form>
        <div class="input-group">
            <div class="input-group-prepend">
                <span class="input-group-text">邮箱地址</span>
            </div>
            <input type="text" class="form-control" placeholder="name@example.com" />
            <div class="input-group-append">
                <span class="input-group-text">@example.com</span>
            </div>
        </div>
    </form>
</div>

6.7 模态框组件

参考链接:https://v4.bootcss.com/docs/components/modal/

modal 表示模态框内容开始
modal-dialog 表示当前是一个对话框
modal-content 整个模态框的包括内容
modal-header 标题
modal-body 显示内容
modal-footer 按钮或者提示区域
modal-title 模态框标题

6.7.1 静态模态框

静态模态框的意思是：内容已经定死，并且整个结构已经提前书写到了HTML中，等待显示
如果希望点击某个元素，打开某个模态框，需要给该元素添加data-toggle="modal"同时还需要添加data-target="模态框的选择器"(这里可以不用是id，只要是选择器能够选中对应的模态框即可)

<div class="container">
    <form class="form-inline">
        <div class="form-group">
            <label class="mr-2" for="email">邮箱地址</label>
            <input
                    type="text"
                    class="form-control"
                    placeholder="name@example.com"
                    id="email"
            />
        </div>
        <div class="form-group mx-2">
            <label class="mr-2" for="pwd">密码</label>
            <input
                    type="password"
                    class="form-control"
                    placeholder="请输入密码"
                    id="pwd"
            />
        </div>
        <span class="btn btn-primary mr-2" data-toggle="modal" data-target=".static-modal">登录</span>
        <span class="btn btn-outline-info">重置</span>
    </form>
    <!-- 静态模态框 -->
    <div class="modal fade static-modal" tabindex="-1" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <!-- 模态框头部 -->
                <div class="modal-header">
                    <!-- 模态框的标题 -->
                    <h5 class="modal-title">登录操作提示</h5>
                    <!-- 右侧的X -->
                    <button type="button" class="close" data-dismiss="modal">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <!-- 模态框核心内容 -->
                <div class="modal-body">
                    <p class="text-success">账号密码输入正确，登录成功！</p>
                </div>
                <!-- 模态框底部 -->
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary">确定</button>
                </div>
            </div>
        </div>
    </div>
</div>

6.7.2 静态背景

模态框默认点击阴影是可以关闭的，我们可以给模态框添加data-backdrop="static"，使其禁用

...
<!-- 静态模态框 -->
<div class="modal fade static-modal" data-backdrop="static" tabindex="-1" role="dialog">
    ...
</div>

6.7.3 长内容模态框

当模态框内容过长时，其滚动时为单独的滚动，而不会造成页面滚动
我们可以给模态框添加modal-dialog-scrollable启动滚动模式，这样滚动条就不再是页面，而是模态框中了

...
<!-- 静态模态框 -->
<div class="modal fade static-modal" data-backdrop="static" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-dialog-scrollable">
        <div class="modal-content">
            <!-- 模态框头部 -->
            <div class="modal-header">
                <!-- 模态框的标题 -->
                <h5 class="modal-title">登录操作提示</h5>
                <!-- 右侧的X -->
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <!-- 模态框核心内容 -->
            <div class="modal-body">
                <p>协议，网络协议的简称，网络协议是通信计算机双方必须共同遵从的一组约定。如怎么样建立连接、怎么样互相识别等。只有遵守这个约定，计算机之间才能相互通信交流。它的三要素是：语法、语义、时序。</p>
                <p>为了使数据在网络上从源到达目的，网络通信的参与方必须遵循相同的规则，这套规则称为协议（protocol），它最终体现为在网络上传输的数据包的格式。</p>
                <p>协议往往分成几个层次进行定义，分层定义是为了使某一层协议的改变不影响其他层次的协议。</p>
                <p>1969年12月，美国国防部高级计划研究署的分组交换网ARPANET投入运行，从此计算机网络发展进入新纪元。ARPANET当时仅有4个结点，分别在美国国防部、原子能委员会、麻省理工学院和加利福利亚。这4台计算机之间进行数据通信仅有传送数据的通路是不够的，还必须遵守一些事先约定好的规则，由这些规则明确所交换数据的格式及有关同步问题。人与人之间交谈需要使用同一种语言，如果语言不同则需要翻译，否则两人之间无法沟通。计算机之间的通信过程和人与人之间的交谈过程非常相似，前者由计算机控制，后者由参加交谈的人控制。</p>
                <p>计算机通信网是由许多具有信息交换和处理能力的节点互连而成的。要使整个网络有条不紊地工作, 就要求每个节点必须遵守一些事先约定好的有关数据格式及时序等的规则。 这些为实现网络数据交换而建立的规则、约定或标准就称为网络协议。协议是通信双方为了实现通信而设计的约定或通话规则。</p>
                <p>协议总是指某一层的协议。准确地说，它是在同等层之间的实体通信时，有关通信规则和约定的集合就是该层协议，例如物理层协议、传输层协议、应用层协议。</p>
                <p>网络协议，也可简称协议，通常由三要素组成：</p>
                <p>(1)语法：即数据与控制信息的结构或格式；</p>
                <p>(2)语义：即需要发出何种控制信息，完成何种动作以及做出何种响应；</p>
                <p>(3)时序（同步），即事件实现顺序的详细说明。</p>
            </div>
            <!-- 模态框底部 -->
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">确定</button>
            </div>
        </div>
    </div>
</div>

6.7.4 模态框垂直居中

我们可以使用modal-dialog-centered设置模态框居中显示

<!-- 静态模态框 -->
<div class="modal fade static-modal" data-backdrop="static" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-dialog-scrollable modal-dialog-centered">
        ...
    </div>
</div>

a听闻

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
前端学习-Bootstrap

一、什么是BootstrapBootstrap 是全球最受欢迎的前端开源工具库，它支持 Sass 变量和 mixin、响应式栅格系统、自带大量组件和众多强大的 JavaScript 插件。基于 Bootstrap 提供的强大功能，能够让你快速设计并自定义你的网站。参考地址:官网： https://getbootstrap.com/中文网: https://www.bootcss.com/菜鸟教程: https://www.runoob.com/bootstrap4/bootstrap4-tut
复制链接

扫一扫