Bootstrap教程

最新推荐文章于 2024-04-30 15:44:23 发布

青春、往昔浮流年〞

最新推荐文章于 2024-04-30 15:44:23 发布

阅读量1.5k

点赞数 1

文章标签： bootstrap 前端 html

本文链接：https://blog.csdn.net/xss125/article/details/131376976

版权

1.安装

使用两种方式下载：

使用 Bootstrap5 CDN。
从官网 getbootstrap.com 下载 Bootstrap 5。

2.容器

bootstraps需要用容器来包裹网站的内容。

2.1容器的类别

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

2.1.1 .container类

用于创建固定宽度的类
宽度 (max-width) 会根据屏幕宽度同比例放大或缩小。

	超级小屏幕<576px	小屏幕≥576px	中等屏幕≥768px	大屏幕≥992px	特大屏幕≥1200px	超级大屏幕≥1400px
max-width	100%	540px	720px	960px	1140px	1320px

2.1.2 .container-fluid类

用于创建全屏尺寸的容器，容器始终跨越整个屏幕的宽度。

2.2 容器的边距

默认情况下，容器都有填充左右内边距，顶部和底部没有填充内边距。Bootstrap 提供了一些间距类用于填充边距。比如 .pt-5 就是用于填充顶部内边距：

2.3 容器的颜色

Bootstrap 也提供了一些边框（border）和颜色（bg-dark、bg-primary等）类用于设置容器的样式：

2.4响应式容器

你可以使用 .container-sm|md|lg|xl 类来创建响应式容器。

容器的 max-width 属性值会根据屏幕的大小来改变。

3.网格系统

Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多 12 列。
我们也可以根据自己的需要，定义列数。
Bootstrap 5 的网格系统是响应式的，列会根据屏幕大小自动重新排列。
请确保每一行中列的总和等于或小于 12。

3.1 网格类

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

col- 针对所有设备。
col-sm- 平板屏幕宽度等于或大于 576px。
col-md- 桌面显示器屏幕宽度等于或大于 768px。
col-lg- 大桌面显示器 - 屏幕宽度等于或大于 992px。
col-xl- 特大桌面显示器屏幕宽度等于或大于 1200px。
col-xxl- 超大桌面显示器 - 屏幕宽度等于或大于 1400px。

3.2 网格系统规则

Bootstrap5 网格系统规则:

网格每一行需要放在设置了 .container (固定宽度) 或 .container-fluid (全屏宽度) 类的容器中，这样就可以自动设置一些外边距与内边距。
使用行来创建水平的列组。
内容需要放置在列中，并且只有列可以是行的直接子节点。
预定义的类如 .row 和 .col-sm-4 可用于快速制作网格布局。
列通过填充创建列内容之间的间隙。这个间隙是通过 .rows 类上的负边距设置第一行和最后一列的偏移。
网格列是通过跨越指定的 12 个列来创建。例如，设置三个相等的列，需要使用三个 .col-sm-4 来设置。
Bootstrap 5 和 Bootstrap 4 使用 flexbox（弹性盒子）而不是浮动。 Flexbox 的一大优势是，没有指定宽度的网格列将自动设置为等宽与等高列。如果您想了解有关 Flexbox 的更多信息，可以网上查阅相关的资料。

3.3 bootstrap 网络的基本结构

 <!-- 第一个例子：控制列的宽度及在不同的设备上如何显示 -->
<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>

3.3.1 创建相等宽度的列，Bootstrap 自动布局

<div class="row">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
</div>

3.3.2 等宽响应式列

以下实例演示了在平板及更大屏幕上创建不等宽度的响应式列。在移动设备上，即屏幕宽度小于 576px 时，两个列将会上下堆叠排版:

<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>

3.3.3 设置某一列宽度

如果只设置一列的宽度，其他列会自动均分剩下的宽度。以下实例将列宽度为 25%、50%、25%：

<div class="row">
  <div class="col">col</div>
  <div class="col-6">col-6</div>
  <div class="col">col</div>
</div>

3.3.4嵌套列

以下实例创建两列布局，其中一列内嵌套着另外两列：

<div class="row">
  <div class="col-8">
    .col-8
    <div class="row">
      <div class="col-6">.col-6</div>
      <div class="col-6">.col-6</div>
    </div>
  </div>
  <div class="col-4">.col-4</div>
</div>

3.3.5 偏移列

偏移列通过 offset-- 类来设置。第一个星号( * )可以是 sm、md、lg、xl，表示屏幕设备类型，第二个星号( * )可以是 1 到 11 的数字。

为了在大屏幕显示器上使用偏移，请使用 .offset-md-* 类。这些类会把一个列的左外边距（margin）增加 * 列，其中 * 范围是从 1 到 11。

例如：.offset-md-4 是把.col-md-4 往右移了四列格。

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
<div class="row">
  <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
  <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
</div>
<div class="row">
  <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
</div>

4.文字排版

4.1 Bootstrap 5 默认设置

Bootstrap 5 默认的 font-size 为 16px, line-height 为 1.5。
默认的 font-family 为 “Helvetica Neue”, Helvetica, Arial, sans-serif。
此外，所有的 < p > 元素 margin-top: 0 、 margin-bottom: 1rem (16px)。

4.2 < h1 > - < h6 >

Bootstrap 中定义了所有的 HTML 标题（h1 到 h6）的样式。你也可以使用 .h1 到 .h6 类来设置元素的样式：

<div class="container">
  <p class="h1">h1 Bootstrap 标题</p>
  <p class="h2">h2 Bootstrap 标题</p>
  <p class="h3">h3 Bootstrap 标题</p>
  <p class="h4">h4 Bootstrap 标题 </p>
  <p class="h5">h5 Bootstrap 标题</p>
  <p class="h6">h6 Bootstrap 标题</p>
</div>

4.3 Display 标题类

Bootstrap 还提供了四个 Display 类来控制标题的样式: .display-1, .display-2, .display-3, .display-4。

<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>

< small >	在 Bootstrap 5 中 HTML < small > 元素用于创建字号更小的颜色更浅的文本:
< mark >	Bootstrap 5 定义 < mark > 标签及 .mark 类为黄色背景及有一定的内边距:
< abbr >	Bootstrap 5 定义 HTML < abbr > 元素的样式为显示在文本底部的一条虚线边框:
< blockquote >	对于引用的内容可以在 < blockquote > 上添加 .blockquote 类 :
< dl >	Bootstrap 5 定义 HTML < dl > 元素的样式如下:
< code >	Bootstrap 5 定义 HTML < code > 元素的样式如下:
< pre >	Bootstrap 5 定义 HTML < pre > 元素的样式如下:
< kbd >	Bootstrap 5 定义 HTML < kbd > 元素的样式如下:

5.颜色

Bootstrap 5 提供了一些有代表意义的颜色类：.text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-white, .text-dark, .text-body (默认颜色，为黑色) and .text-light:

<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-body">默认颜色，为黑色。</p>
  <p class="text-light">浅灰色文本（白色背景上看不清楚）。</p>
  <p class="text-white">白色文本（白色背景上看不清楚）。</p>
</div>

可以设置文本颜色透明度为 50% ，使用 .text-black-50 或 .text-white-50 类:

<p class="text-black-50">透明度为 50% 的黑色文本，背景为白色。</p>
<p class="text-white-50 bg-dark">透明度为 50% 的白色文本，背景为黑色。</p>

实例

<div class="container">
  <h2>文本颜色</h2>
  <p>鼠标移动到链接。</p>
  <a href="#" class="text-muted">柔和的链接。</a>
  <a href="#" class="text-primary">主要链接。</a>
  <a href="#" class="text-success">成功链接。</a>
  <a href="#" class="text-info">信息文本链接。</a>
  <a href="#" class="text-warning">警告链接。</a>
  <a href="#" class="text-danger">危险链接。</a>
  <a href="#" class="text-secondary">副标题链接。</a>
  <a href="#" class="text-dark">深灰色链接。</a>
  <a href="#" class="text-light">浅灰色链接。</a>
</div>

5.2 背景颜色

提供背景颜色的类有: .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark 和 .bg-light。
注意背景颜色不会设置文本的颜色，在一些实例中你需要与 .text-* 类一起使用。

<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>

6.表格

6.1基础表格

Bootstrap5 通过 .table 类来设置基础表格的样式，实例如下:

<table class="table">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
</table>

6.2 条纹表格

通过添加 .table-striped 类，您将在内的行上看到条纹

<table class="table table-striped">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
</table>

6.3 带边框的表格

.table-bordered 类可以为表格添加边框

<table class="table table-bordered">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
</table>

6.4鼠标悬停状态表格

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

 <table class="table table-hover">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
</table>

6.5 黑色背景表格

.table-dark 类可以为表格添加黑色背景：

6.6 黑色条纹表格

联合使用 .table-dark 和 .table-striped 类可以创建黑色的条纹表格：

6.7 鼠标悬停效果 - 黑色背景表格

联合使用 .table-dark 和 .table-hover 类可以设置黑色背景表格的鼠标悬停效果：

6.8 无边框表格

.table-borderless 类可以设置一个无边框的表格：

6.9 指定意义的颜色类

通过指定意义的颜色类可以为表格的行或者单元格设置颜色：

类名	描述
.table-primary	蓝色: 指定这是一个重要的操作
.table-success	绿色: 指定这是一个允许执行的操作
.table-danger	红色: 指定这是可以危险的操作
.table-info	浅蓝色: 表示内容已变更
.table-warning	橘色: 表示需要注意的操作
.table-active	灰色: 用于鼠标悬停效果
.table-secondary	灰色: 表示内容不怎么重要
.table-light	浅灰色，可以是表格行的背景
.table-dark	深灰色，可以是表格行的背景

6.10 表头颜色

我们也可以设置表头的颜色，例如 .table-dark 类用于给表头添加黑色背景， .table-light 类用于给表头添加灰色背景:

<table class="table">
    <thead class="table-dark">
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>

青春、往昔浮流年〞

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap教程

提供背景颜色的类有: .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark 和 .bg-light。Bootstrap 还提供了四个 Display 类来控制标题的样式: .display-1, .display-2, .display-3, .display-4。注意背景颜色不会设置文本的颜色，在一些实例中你需要与 .text-* 类一起使用。
复制链接

扫一扫