1.Bootstrap简介
Bootstrap 是全球最受欢迎的前端组件库,用于开发响应式布局、移动设备优先的 WEB 项目。
Bootstrap4 目前是 Bootstrap 的最新版本,是一套用于 HTML、CSS 和 JS 开发的开源工具集。利用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery 的强大的插件系统,能够快速为你的想法开发出原型或者构建整个 app 。
Sass-CSS扩展语言
Mixin--包含一段合法Sass代码,类似于C语言的宏定义。调用Mixin时,解释器会将Mixin扩展成它所包含的完整的Sass代码,因此可以有效地减少代码重复,从而写出更加干净的代码。CSS不支持Mixin,因此重复和类似的代码必须挨个书写。
2.Bootstrap4安装使用
我们可以通过以下两种方式来安装 Bootstrap4。
1.使用 Bootstrap 4 CDN。
CDN的全称是Content Delivery Network,即内容分发网络.
国内推荐使用 Staticfile CDN 上的库:
<!-- 新 Bootstrap4 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单,包含了 popper.min.js -->
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
注意:popper.min.js 用于设置弹窗、提示、下拉菜单,目前 bootstrap.bundle.min.js 已经包含了 popper.min.js。
此外,你还可以使用以下的 CDN 服务:
国内推荐使用 : Staticfile CDN
国际推荐使用:cdnjs - The #1 free and open source CDN built to make life easier for developers
2.从官网 getbootstrap.com 下载 Bootstrap 4
你可以去官网 Bootstrap · The most popular HTML, CSS, and JS library in the world. 下载 Bootstrap4 资源库。
此外你还可以通过包的管理工具 npm、 gem、 composer 等来安装:
npm install bootstrap@4.0.0-beta.2
gem 'bootstrap', '~> 4.0.0.beta2'
composer require twbs/bootstrap:4.0.0-beta.2
3.创建第一个Bootsrap4页面
1.添加HTML5 doctype
Bootstrap要求使用HTML5文件类型,所以需要添加 HTML5 doctype 声明。
HTML5 doctype 在文档头部声明,并设置对应编码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
</html>
2.移动设备优先
为了让 Bootstrap 开发的网站对移动设备友好,确保适当的绘制和触屏缩放,需要在网页的 head 之中添加 viewport meta 标签,如下所示:
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
width=device-width 表示宽度是设备屏幕的宽度。
initial-scale=1表示初始的缩放比例。
shrink-to-fit=no 自动适应手机屏幕的宽度。
3.容器类
Bootstrap4需要一个容器元素来包裹网站的内容
.container 类用于固定宽度并支持响应式布局的容器
.container-fluid类用与100%宽度,占据全部视口(viewport)的容器
4.Bootstrap提供了一套响应式,移动设备优先的流失网格系统,随着屏幕或视口(viewport)
尺寸的增加,系统会自动分为最多12列
我们也可以根据自己的需要,定义列数:
Bootstrap4 的网格是系统响应式的,列会根据屏幕大小自动重新排列。
网格类
Bootstrap4网格系统有以下5个类:
1、col- 针对所有设备
2、col-md-平板-屏幕宽度等于或大于576px
3、col-md- 桌面显示器 - 屏幕宽度等于或大于768px
4、col-lg- 大桌面显示器-屏幕开源都等于或大于992px
5、col-xl-超大桌面显示器-屏幕宽度等于或大于1200px
网格系统规则
Bootstrap4 网格系统规则:
1、网格每一行需要放在设置了 .container (固定宽度) 或 .container-fluid (全屏宽度) 类的容器中,这样就可以自动设置一些外边距与内边距。
2、使用行来创建水平的列组。
3、内容需要放置在列中,并且只有列可以是行的直接子节点。
4、预定义的类如 .row 和 .col-sm-4 可用于快速制作网格布局。
5、列通过填充创建列内容之间的间隙。 这个间隙是通过 .rows 类上的负边距设置第一行和最后一列的偏移。
6、网格列是通过跨越指定的 12 个列来创建。 例如,设置三个相等的列,需要使用三个 .col-sm-4 来设置。
7、Bootstrap 3 和 Bootstrap 4 最大的区别在于 Bootstrap 4 现在使用 flexbox(弹性盒子) 而不是浮动。 Flexbox 的一大优势是,没有指定宽度的网格列将自动设置为等宽与等高列 。
下表总结了 Bootstrap 网格系统如何在不同设备上工作的:
5.Bootstrap 4网络的基本结构
1.以下代码为 Bootstrap 4 网格的基本结构:
<!-- 第一个例子:控制列的宽度及在不同的设备上如何显示 -->
<div class="row">
<div class="col-*-*"></div>
</div>
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<!-- 第二个例子:让 Bootstrap 者自动处理布局 -->
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
第一个例子:创建一行(<div class="row">)。然后, 添加需要的列( .col-*-* 类中设置)。 第一个星
号 (*) 表示响应的设备: sm, md, lg 或 xl, 第二个星号 (*) 表示一个数字, 同一行的数字相加为 12
第二个例子: 不在每个 col 上添加数字,让 bootstrap 自动处理布局,同一行的每个列宽度相等:
两个 "col" ,每个就为 50% 的宽度。三个 "col"每个就为 33.33% 的宽度,四个 "col"每个就为 25%
的宽度,以此类推。同样,你可以使用 .col-sm|md|lg|xl 来设置列的响应规则
例如:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<title>实例</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>相等宽度的列,Bootstrap 自动布局</h1>
<p>创建三个相等宽度的列! 尝试在 class="row" 的 div 中添加新的 class="col" div,会显示四个等宽的列。</p>
<div class="row">
<div class="col" style="background-color: blue;">.col</div>
<div class="col" style="background-color:blueviolet;">.col</div>
<div class="col" style="background-color:cadetblue;">.col</div>
</div><br>
<h1>等宽响应式列</h1>
<p>重置浏览器大小查效果。</p>
<p> 在移动设备上,即屏幕宽度小于 576px 时,四个列将会上下堆叠排版</p>
<div class="row">
<div class="col-sm-3" style="background-color: blue;">.col-sm-3</div>
<div class="col-sm-3" style="background-color:blueviolet;">.col-sm-3</div>
<div class="col-sm-3" style="background-color:cadetblue;">.col-sm-3</div>
<div class="col-sm-3" style="background-color:brown;">.col-sm-3</div>
</div>
</div>
</body>
</html>
2.偏移列
偏移列通过 offset-*-* 类来设置。第一个星号( * )可以是 sm、md、lg、xl,表示屏幕设备类型,第二个星号( * )可以是 1 到 11 的数字。
为了在大屏幕显示器上使用偏移,请使用 .offset-md-* 类。这些类会把一个列的左外边距(margin)增加 * 列,其中 * 范围是从 1 到 11。
例如:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<title>实例</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>偏移列</h1>
<p>.offset-md-4 是把.col-md-4 往右移了四列格</p>
<div class="container-fluid">
<div class="row">
<div class="col-md-4 bg-success">.ccol-md-4</div>
<div class="col-md-4 offset-md-4 bg-warning">.col-md-4 offset-md-4</div>
</div>
<div class="row">
<div class="col-md-3 offset-md-3 bg-success">.col-md-3 offset-md-3</div>
<div class="col-md-3 offset-md-3 bg-warning">.col-md-3 offset-md-3</div>
</div>
<div class="row">
<div class="col-md-6 offset-md-3 bg-success">.col-md-3 offset-md-6</div>
</div>
</div>
</div>
</body>
</html>
6.Bootstrap4 文字排版
Bootstrap 4 默认设置
Bootstrap 4 默认的 font-size 为 16px, line-height 为 1.5。
默认的 font-family 为 "Helvetica Neue", Helvetica, Arial, sans-serif
此外,所有的 <p> 元素 margin-top: 0 、 margin-bottom: 1rem (16px)
<h1> - <h6>
Bootstrap 中定义了所有的 HTML 标题(h1 到 h6)的样式
Display 标题类
Bootstrap 还提供了四个 Display 类来控制标题的样式: .display-1, .display-2, .display-3, .display-4
例如:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<title>Display标题</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>Display标题</h1>
<p>Display标题可以输出更大更粗的字体样式</p>
<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>
</div>
</body>
</html>
<small>
在 Bootstrap 4 中 HTML <small> 元素用于创建字号更小的颜色更浅的文本
例如:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<title>small</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>更小文本标题</h1>
<p>small元素用于字号更小的颜色更浅的文本</p>
<h1>h1标题 <small>副标题</small></h1>
<h2>h2标题 <small>副标题</small></h2>
<h3>h3标题 <small>副标题</small></h3>
<h4>h4标题 <small>副标题</small></h4>
<h5>h5标题 <small>副标题</small></h5>
<h6>h6标题 <small>副标题</small></h6>
</div>
</body>
</html>
<mark>
Bootstrap 4 定义 <mark> 为黄色背景及有一定的内边距
例如:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<title>mark</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>高亮文本题</h1>
<p>h1标题<mark>副标题</mark></p>
</div>
</body>
</html>
<abbr>
Bootstrap 4 定义 HTML <abbr> 元素的样式为显示在文本底部的一条虚线边框.
例如:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<title>abbr</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container"></div>
<h1>abbr</h1>
<p>abbr元素的样式为显示在文本底部的一条虚线边框</p>
<p>abbr<abbr title="World Health Organization">元素的样式为显示在文本底部的一条</abbr>虚线边框.</p>
</body>
</html>
<code>
Bootstrap 4 定义 HTML <code> 元素的样式如下:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>代码片段</h1>
<p>可以将一些代码元素放到 code 元素里面:</p>
<p>以下 HTML 元素: <code>span</code>, <code>section</code>, 和 <code>div</code> 用于定义部分文档内容。</p>
</div>
</body>
</html>
下表提供了 Bootstrap4 更多排版类的实例:
类名 | 描述 |
.font-weight-bold | 加粗文本 |
.font-weight-normal | 普通文本 |
.font-weight-light | 更细的文本 |
.font-italic | 斜体文本 |
.lead | 让段落更突出 |
.small | 指定更小文本 (为父元素的 85% ) |
.text-left | 左对齐 |
.text-center | 居中 |
.text-right | 右对齐 |
.text-justify | 设定文本对齐,段落中超出屏幕部分文字自动换行 |
.text-nowrap | 段落中超出屏幕部分不换行 |
.text-lowercase | 设定文本小写 |
.text-uppercase | 设定文本大写 |
.text-capitalize | 设定单词首字母大写 |
.initialism | 显示在 <abbr> 元素中的文本以小号字体展示,且可以将小写字母转换为大写字母 |
.list-unstyled | 移除默认的列表样式,列表项中左对齐 ( <ul> 和 <ol> 中)。 这个类仅适用于直接子列表项 (如果需要移除嵌套的列表项,你需要在嵌套的列表中使用该样式) |
.list-inline | 将所有列表项放置同一行 |
.pre-scrollable | 使 <pre> 元素可滚动,代码块区域最大高度为340px,一旦超出这个高度,就会在Y轴出现滚动条 |
例如:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>Bootstrap 实例</h1>
<p class="font-weight-bold">加粗文本</p>
<p class="font-weight-normal text-right">普通文本</p>
<p class="font-weight-light text-left">更细的文本</p>
<p class="font-italic text-center">斜体文本</p>
</div>
</body>
</html>
7.Bootstrap4 颜色
Bootstrap 4 提供了一些有代表意义的颜色类:
.text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-white, .text-dark and .text-light
例如:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>代表指定意义的文本颜色</h2>
<p class="text-muted">柔和的文本</p>
<p class="text-primary">重要的文本</p>
<p class="text-success">执行成功的文本</p>
<p class="text-info">代表一些提示信息的文本</p>
<p class="text-warning">警告文本</p>
<p class="text-danger">危险操作文本</p>
<p class="text-secondary">副标题</p>
<p class="text-dark">深灰色文字</p>
<p class="text-light ">浅灰色文本(白色背景上看不清楚)</p>
<p class="text-white ">白色文本(白色背景上看不清楚)</p>
</div>
<div class="container">
<h2>文本颜色</h2>
<p>鼠标移动到链接。</p>
<a href="#" class="text-muted">链接1</a>
<a href="#" class="text-primary">链接2</a>
<a href="#" class="text-success">链接3</a>
<a href="#" class="text-info">链接4</a>
<a href="#" class="text-warning">警告链接5</a>
<a href="#" class="text-danger">链接6</a>
<a href="#" class="text-secondary">链接7</a>
<a href="#" class="text-dark">链接8</a>
<a href="#" class="text-light">链接9</a>
</div>
<div class="container">
<h2>背景颜色</h2>
<p class="bg-primary text-white">重要的背景颜色。</p>
<p class="bg-success text-white">执行成功背景颜色。</p>
<p class="bg-info text-white">信息提示背景颜色。</p>
<p class="bg-warning text-white">警告背景颜色</p>
<p class="bg-danger text-white">危险背景颜色。</p>
<p class="bg-secondary text-white">副标题背景颜色。</p>
<p class="bg-dark text-white">深灰背景颜色。</p>
<p class="bg-light text-dark">浅灰背景颜色。</p>
</div>
</body>
</html>
8.Bootstrap4 表格
Bootstrap4 通过 .table 类来设置基础表格的样式
通过添加 .table-striped 类,您将在 <tbody> 内的行上看到条纹
.table-bordered 类可以为表格添加边框
.table-hover 类可以为表格的每一行添加鼠标悬停效果(灰色背景)
通过指定意义的颜色类可以为表格的行或者单元格设置颜色
例如:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>基础表格</h2>
<p>.table 类来设置基础表格的样式</p>
<table class="table">
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>男</td>
<td>20</td>
</tr>
<tr>
<td>赵丽</td>
<td>女</td>
<td>18</td>
</tr>
</tbody>
</table>
<h2>基础表格</h2>
<p>.table-striped 类,来设置条纹表格</p>
<table class="table table-striped">
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>男</td>
<td>20</td>
</tr>
<tr>
<td>赵丽</td>
<td>女</td>
<td>18</td>
</tr>
<tr>
<td>王五</td>
<td>男</td>
<td>18</td>
</tr>
</tbody>
</table>
<h2>带边框表格</h2>
<p>.table-bordered 类可以为表格添加边框</p>
<table class="table table-bordered">
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>男</td>
<td>20</td>
</tr>
<tr>
<td>赵丽</td>
<td>女</td>
<td>18</td>
</tr>
<tr>
<td>王五</td>
<td>男</td>
<td>18</td>
</tr>
</tbody>
</table>
<h2>鼠标悬停状态表格</h2>
<p>.table-hover 类可以为表格的每一行添加鼠标悬停效果(灰色背景)</p>
<table class="table table-hover">
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>男</td>
<td>20</td>
</tr>
<tr>
<td>赵丽</td>
<td>女</td>
<td>18</td>
</tr>
<tr>
<td>王五</td>
<td>男</td>
<td>18</td>
</tr>
</tbody>
</table>
<h2>指定意义的颜色类</h2>
<p>通过指定意义的颜色类可以为表格的行或者单元格设置颜色:.table-muted, .table-primary, .table-success, .table-info,
.table-warning, .table-danger, .table-secondary, .table-white, .table-dark and .table-light
</p>
<table class="table">
<thead>
<tr class="table-primary">
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr class="table-success">
<th>张三</th>
<th>18</th>
<th>男</th>
</tr>
<tr class="table-danger">
<th>李四</th>
<th>20</th>
<th>男</th>
</tr>
<tr class="table-info">
<th>王五</th>
<th>22</th>
<th>男</th>
</tr>
</tbody>
</table>
</div>
</body>
</html>
9.Bootstrap4 图像形状
.rounded 类可以让图片显示圆角效果
.rounded-circle 类可以设置椭圆形图片
.img-thumbnail 类用于设置图片缩略图(图片有边框)
.float-right 类来设置图片右对齐,使用 .float-left 类设置图片左对齐
.img-fluid 类来设置响应式图片
图像有各种各样的尺寸,我们需要根据屏幕的大小自动适应
我们可以通过在 <img> 标签中添加 .img-fluid 类来设置响应式图片
.img-fluid 类设置了 max-width: 100%; 、 height: auto; :
例如:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<title>实例</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>圆角图片</h2>
<p>.rounded 类可以让图片显示圆角效果</p>
<img src="../img/1.jpg" class="rounded" alt="Cinque Terre" width="400" height="300">
<h2>椭圆图片</h2>
<p>.rounded-circle类设置椭圆形图片</p>
<img src="../img/1.jpg" class="rounded-circle" alt="Cinque Terre" width="400" height="300">
<h2>图片对齐方式</h2>
<p>.float-right类设置右对齐 .float-left类设置右对齐</p>
<img src="../img/1.jpg" class="float-right" alt="Cinque Terre" width="200" height="100">
<img src="../img/1.jpg" class="float-left" alt="Cinque Terre" width="200" height="100">
<h2>响应式图片</h2>
<p>.img-fluid类可以设置响应式图片,重置浏览器查看大小效果</p>
<img src="../img/1.jpg" class="img-fluid">
</div>
</body>
</html>
10.Bootstrap4 信息提示框
提示框可以使用 .alert 类, 后面加上 .alert-success, .alert-info, .alert-warning, .alert-danger, .alert-
primary, .alert-secondary, .alert-light 或 .alert-dark 类来实现
提示框中在链接的标签上添加 alert-link 类来设置匹配提示框颜色的链接
关闭提示框
我们可以在提示框中的 div 中添加 .alert-dismissible 类,然后在关闭按钮的链接上添
加 class="close" 和 data-dismiss="alert" 类来设置提示框的关闭操作
提示框动画
.fade 和 .show 类用于设置提示框在关闭时的淡出和淡入效果
例如:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>提示框</h2>
<p>提示框可以使用 .alert类, 后面加上指定特定意义的颜色类来实现:</p>
<div class="alert alert-success">
<strong>yes</strong>成功
</div>
<div class="alert alert-success">
<strong>no</strong> 失败
</div>
<p>提示框中在链接的标签上添加 alert-link类来设置匹配提示框颜色的链接</p>
<div class="alert alert-success">
<strong>成功</strong>你应该认真阅读<a href="#" class="alert">信息</a>
</div>
<h2>关闭提示框</h2>
<p>1.在提示框中的 div 中添加 .alert-dismissible 类,<br>
2.在关闭按钮的链接上添加 class="close" 和 data-dismiss="alert" 类来设置提示框的关闭操作
</p>
<div class="alert alert-success alert-dismissible" >
<button type="button" class="close" data-dismiss="alert">yes</button>
<strong>no</strong> 失败
</div>
<h2>提示框动画</h2>
<p>.fade 和 .show 类用于设置提示框在关闭时的淡出和淡入效果 </p>
<div class="alert alert-success alert-dismissible fade show" >
<button type="button" class="close" data-dismiss="alert">yes</button>
<strong>no</strong> 失败
</div>
</div>
</body>
</html>
11.Bootstrap4 按钮
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>按钮样式</h2>
<button type="button" class="btn">基本按钮</button>
<button type="button" class="btn btn-primary">主要按钮</button>
<button type="button" class="btn btn-secondary">次要按钮</button>
<button type="button" class="btn btn-success">成功</button>
<button type="button" class="btn btn-info">信息</button>
<button type="button" class="btn btn-warning">警告</button>
<button type="button" class="btn btn-danger">危险</button>
<button type="button" class="btn btn-dark">黑色</button>
<button type="button" class="btn btn-light">浅色</button>
<button type="button" class="btn btn-link">链接</button>
<h2>按钮元素</h2>
<p>按钮类可用于 a button 或 input 元素上</p>
<h2>按钮元素</h2>
<a href="#" class="btn btn-info" role="button">链接按钮</a>
<button type="button" class="btn btn-info">按钮</button>
<input type="button" class="btn btn-success" value="输入框按钮">
<input type="submit" class="btn btn-info" value="提交按钮">
<h2>设置按钮边框</h2>
<button type="button" class="btn btn-outline-primary">按钮1</button>
<button type="button" class="btn btn-outline-secondary">按钮2</button>
<h2>不同大小的按钮</h2>
<button type="button" class="btn btn-primary btn-lg">大号按钮</button>
<button type="button" class="btn btn-primary">默认按钮</button>
<button type="button" class="btn btn-primary btn-sm">小号按钮</button>
<h2>块级按钮</h2>
<p>添加 .btn-block类可以设置块级按钮</p>
<button type="button" class="btn btn-primary btn-block">按钮1</button>
<button type="button" class="btn btn-success btn-block">按钮2</button>
<h2>大的块级按钮</h2>
<button type="button" class="btn btn-primary btn-lg btn-block">按钮1</button>
<button type="button" class="btn btn-success btn-lg btn-block">按钮2</button>
<h2>小的块级按钮</h2>
<button type="button" class="btn btn-primary btn-sm btn-block">按钮1</button>
<button type="button" class="btn btn-success btn-sm btn-block">按钮2</button>
<h2>激活和禁用按钮</h2>
<h3>按钮可设置为激活或者禁止点击的状态<br>
.active 类可以设置按钮是可用的<br>
.disabled 属性可以设置按钮是不可点击的 <br>
注意 a 元素不支持 disabled 属性,你可以通过添加 .disabled 类来禁止链接的点击
</h3>
<button type="button" class="btn btn-primary ">按钮1</button>
<button type="button" class="btn btn-success active">按钮2</button>
<button type="button" class="btn btn-success disabled">按钮3</button>
<a href="#" class="btn btn-primary disabled">按钮4</a>
</div>
</body>
</html>
12.Bootstrap4 按钮组
Bootstrap 4 中允许我们将按钮放在同一行上
可以在 <div> 元素上添加 .btn-group 类来创建按钮组
可以使用 .btn-group-vertical 类来创建垂直的按钮组
内嵌按钮组及下拉菜单
垂直按钮组及下拉菜单
例如:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>按钮组</h2>
<p> .btn-group 类用于创建按钮组:</p>
<div class="btn-group">
<button type="button" class="btn btn-primary">按钮1</button>
<button type="button" class="btn btn-primary">按钮2</button>
<button type="button" class="btn btn-primary">按钮3</button>
</div>
<h2>按钮组大小</h2>
<p> .btn-group-xs/lg 类用于创建按钮组大小</p>
<h3>小按钮</h3>
<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-primary">按钮1</button>
<button type="button" class="btn btn-primary">按钮2</button>
<button type="button" class="btn btn-primary">按钮3</button>
</div>
<h3>默认按钮</h3>
<div class="btn-group btn-group">
<button type="button" class="btn btn-primary">按钮1</button>
<button type="button" class="btn btn-primary">按钮2</button>
<button type="button" class="btn btn-primary">按钮3</button>
</div>
<h3>大按钮</h3>
<div class="btn-group btn-group-lg">
<button type="button" class="btn btn-primary">按钮1</button>
<button type="button" class="btn btn-primary">按钮2</button>
<button type="button" class="btn btn-primary">按钮3</button>
</div>
<h2>垂直按钮</h2>
<p>.btn-group-vertical类来创建垂直按钮</p>
<div class="btn-group-vertical">
<button type="button" class="btn btn-primary">按钮1</button>
<button type="button" class="btn btn-primary">按钮2</button>
<button type="button" class="btn btn-primary">按钮3</button>
</div>
<h2>内嵌按钮组</h2>
<p>按钮组设置下拉菜单</p>
<div class="btn-group">
<button type="button" class="btn btn-primary">按钮1</button>
<button type="button" class="btn btn-primary">按钮2</button>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">按钮3</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">按钮</a>
<a class="dropdown-item" href="#">按钮</a>
</div>
</div>
</div>
<h2>垂直按钮组及下拉菜单</h2>
<div class="btn-group-vertical">
<button type="button" class="btn btn-primary">按钮1</button>
<button type="button" class="btn btn-primary">按钮2</button>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
按钮3
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">按钮</a>
<a class="dropdown-item" href="#">按钮</a>
</div>
</div>
</div>
</div>
</body>
</html>
13.Bootstrap4 徽章(Badges)
徽章(Badges)主要用于突出显示新的或未读的项。如需使用徽章,只需要将 .badge 类加上带有
指定意义的颜色类 (如 .badge-secondary) 添加到 <span> 元素上即可。 徽章可以根据父元素的大
小的变化而变化
各种颜色类型的徽章
使用 .badge-pill 类来设置药丸形状徽章
徽章插入到元素内
例如:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>徽章</h2>
<h1>测试标题<span class="badge badge-secondary">1</span></h1>
<h2>测试标题<span class="badge badge-secondary">2</span></h2>
<h3>测试标题<span class="badge badge-secondary">3</span></h3>
</div>
<h2>各种颜色类型的徽章</h2>
<span class="badge badge-secondary">1</span>
<span class="badge badge-primary">2</span>
<span class="badge badge-success">3</span>
<span class="badge badge-danger">4</span>
<span class="badge badge-warning">5</span>
<h2>药丸形状徽章</h2>
<p>使用 .badge-pill 类来设置药丸形状徽章</p>
<span class="badge badge-secondary badge-pill">1</span>
<span class="badge badge-primary badge-pill">2</span>
<span class="badge badge-success badge-pill">3</span>
<h2>徽章嵌入到按钮内</h2>
<button type="button" class="btn btn-primary">按钮1<span class="badge badge-light">3</span></button>
<button type="button" class="btn btn-danger">按钮2<span class="badge badge-light">6</span></button>
</body>
</html>