Bootstrap4知识(1)

最新推荐文章于 2023-07-19 15:12:25 发布
最新推荐文章于 2023-07-19 15:12:25 发布
阅读量1.2k 收藏 4
点赞数
分类专栏： Bootstrap 文章标签： jquery css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/airar/article/details/120441575
版权

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.创建第一个 Bootstrap 4 页面

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.容器类

Bootstrap 4 需要一个容器元素来包裹网站的内容

我们可以使用以下两个容器类：

.container 类用于固定宽度并支持响应式布局的容器

.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器

 4.Bootstrap4 网格系统

ootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的

增加，系统会自动分为最多 12 列

我们也可以根据自己的需要，定义列数：

 Bootstrap 4 的网格系统是响应式的，列会根据屏幕大小自动重新排列

网格类

Bootstrap 4 网格系统有以下 5 个类:

1、.col-   针对所有设备

2、.col-sm-   平板-屏幕宽度等于或大于 576px

3、.col-md-   桌面显示器---屏幕宽度等于或大于 768px

4、.col-lg-   大桌面显示器---屏幕宽度等于或大于 992px

5、.col-xl-   大桌面显示器---屏幕宽度等于或大于 992px

网格系统规则

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>
airar
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Bootstrap4 安装使用
shengyin714959的博客
08-16 312
我们可以通过以下两种方式来安装 Bootstrap4：使用 Bootstrap 4 CDN。从官网下载 Bootstrap 4。
bootstrap4--概述与页面创建
zxn200125的博客
12-13 3151
bootstrap4基本概述以及一个简单网页的创建
bootstrap4-snippets:适用于Atom编辑器的Handy Bootstrap 4片段
05-06
Atom编辑器的Bootstrap 4片段 这是Atom的Bootstrap 4代码片段包。 这些代码片段以bs4-*为前缀 安装 转到Atom>首选项...，然后在“程序包”选项卡中搜索Bootstrap 4片段。 发展 $ cd ~/.atom/packages $ git clone https://github.com/calvintychan/bootstrap4-snippets.git $ apm install $ apm link 变更记录 0.2.2-修复了丢失的前导. 某些文件中的错误，导致片段无法正确加载 贡献 叉吧！ 创建功能分支：git checkout -b my-new-feature 提交更改：git commit -m'添加一些功能' 推送到分支：git push origin my-new-feature 提交拉取请求 :grinning_face_with_smiling_eyes: 执照
Bootstrap 4 CDN
qq_42449963的博客
09-23 1110
如果大家在学习bootstrap4的时候不想下载相应的jar包，那就去使用bootstrap的cdn，上菜： <!-- 新 Bootstrap4 核心 CSS 文件 --> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <!-- jQuery文件。务必在bootstrap.min.js 之前引入 --> &l
Bootstrap基本模板
weixin_44197120的博客
01-27 606
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3个met
BootStrap4的用法
hefrankeleyn的博客
05-25 3297
一、Container BootStrap4 同样需要一个containing 元素包裹正文内容。 .container 提供了一个固定的宽；.container-fluid提供了一个易变的宽。 二、网格系统 BootStrap的网格系统是基于flexbox，允许至多12个纵列。如果不想单独使用12个纵列，可以将多个纵列组合在一起成为更宽的列。 网格系统是反映敏感的，列将自动的安排，根据...
Bootstrap4 教程
12-14
在开始学习Bootstrap4教程之前，你需要掌握HTML、CSS和JavaScript的基础知识。HTML用于构建网页结构，CSS负责样式设计，而JavaScript则是实现交互功能的关键。如果你对这些基础知识不熟悉，建议先学习相关教程，以便...
bootstrap4案例
12-10
这个“bootstrap4案例”集合提供了一个实用的示例，适用于那些已经掌握了基础的Bootstrap知识，想要进一步实践和提升技能的开发者，同时也非常适合教师作为教学材料。 在Bootstrap 4中，有以下几个核心知识点： 1....
bootstrap基础知识学习笔记
09-01
Bootstrap 基础知识学习笔记主要涵盖了以下几个核心概念： 1. **引入 Bootstrap**：在 HTML 文件中，你需要引入 Bootstrap 的 CSS 和 JavaScript 文件。这通常包括 jQuery（因为 Bootstrap 的某些组件依赖于它）。...
AxureRP8 Bootstrap4
11-10
1. **安装与导入**: 首先，你需要下载`Bootstrap4_for_AxureRP8.rplib` 文件。然后在AxureRP8中，通过“资源”面板的“管理库”选项导入这个资源库。这样，你就可以在设计时访问到Bootstrap4的元素。 2. **组件使用...
黑色全屏个人主页bootstrap4模板
06-06
1. **响应式设计**：Bootstrap 4 的网格系统允许开发者创建在不同设备上自适应的布局，从手机到桌面，确保在各种屏幕尺寸上提供良好的用户体验。 2. **预定义组件**：包括导航栏、按钮、表单、模态框、卡片、轮播图...
新的Bootstrap国内高速CDN
爱分享
05-14 1523
【代码】新的Bootstrap国内高速CDN。
使用BootStrap制作网页页面
m0_65725031的博客
05-05 9068
今天主要是大家使用BootStrap制作网页页面，在上一篇文章中我们的网页制作就使BootStrap，但是由于涉及的不是很多，也没有和大家讲解，今天主要是教大家BootStrap 5,该版本是最新的相对4来说更加简单，方便我们使用。 BootStrap的基本使用 在百度上面搜索BootStrap的官网，去到官网，官网上有各种我们需要在页面上使用的代码。 我们只需要将代码复制，放置到页面上使用，大家根据需求去对代码进行更改。 BootStrap上手是非常简单的。 BootStrap实操 将我...
Bootstrap
qq_63845026的博客
04-03 1024
目录: 准备工作: <i class="bi bi-search">瘦素图标 <i class="bi bi-cart4 text-danger"></i>购物车图标 <i class="bi bi-cart4" style="color:deeppink ;"></i> <style> .list-group,.media{ margin-top: 30p...
教你快速安装Bootstrap
最新发布
passerby的博客
07-19 1938
Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作，基于HTML、CSS、JavaScript开发的简洁、直观、强悍的前端开发框架，它会使Web开发更加快捷Bootstrap框架的优点开发方便快捷兼容处理移动设备优先使用广泛。
CSS框架——Bootstrap4
仙女的博客
10-24 1601
一、Bootstrap介绍 Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。 Bootstrap4 目前是 Bootstrap 的最新版本，是一套用于 HTML、CSS 和 JS 开发的开源工具集。利用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery 的强大的插件系统...
Bootstrap4(一)
weixin_55685975的博客
04-22 359
Bootstrap 4是什么？ Bootstrap 4 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。 Bootstrap 4 目前是 Bootstrap 的最新版本，是一套用于HTML、CSS 和 JS 开发的开源工具集，利用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预售组件、基于 jQuery 的强大的插件系统，能够快速为你的想法开发出原型或者构建整个 app。 Bootstrap 4安装使用 我们可以通过以下两种方式来安装 Bootstrap
Bootstrap4——学习总结
m0_63348818的博客
11-20 1377
关于bootstrap的学习 Bootstrap 要求使用 HTML5 文件类型，所以需要添加 HTML5 doctype 声明。 为了让 Bootstrap 开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的 head 之中添加 viewport meta 标签， <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> Bootstrap 4 需要一个容器元素来
如何下载特定版本的bootstrap.min.css、bootstrap.min.js、jquery-3.5.1.min.js
Lucky小黄人的博客
02-17 4769
有时我们可能想要下载bootstrap.min.css、bootstrap.min.js、jquery-3.5.1.min.js，但是只知道网址，如何获得对应的css/js文件呢？其实很简单， 比如：输入如下url后，获得的是css文本，而非文件下载 https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min....
Bootstrap 4入门与布局指南
《Bootstrap4 Cookbook》是一本专注于前端编程的实用指南，专为开发人员提供Bootstrap 4框架的深入理解和应用技巧。...无论是初次接触Bootstrap的新手，还是经验丰富的开发者，都能从中收获有价值的知识和技能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值