BootStrap学习

介绍

Bootstrap 是一个用于快速开发网页和Web应用的前端框架。以下是关于 Bootstrap 的详细介绍：

响应式设计：Bootstrap 提供了一系列的栅格系统、预定义样式和组件，可以轻松创建响应式的布局，确保网站在不同设备上都能有良好的显示效果。
CSS 框架：
- 包含了重置样式（Normalize.css），使得不同浏览器中的默认样式更加一致。
- 提供了大量的实用类（Utilities），如文本对齐、浮动、显示隐藏等，可以直接应用于HTML元素。
- 内置了丰富的组件样式，例如按钮、表单、导航栏、卡片等，开箱即用。
JavaScript 插件：Bootstrap 自带多个基于jQuery的插件，如模态框（Modal）、下拉菜单（Dropdown）、轮播图（Carousel）等交互组件，简化了复杂功能的实现过程。
Sass 支持：除了传统的CSS文件，Bootstrap 还提供了Sass版本，允许开发者自定义主题颜色、间距单位等变量，方便进行个性化定制。
文档与社区支持：官方维护着详细的文档，包含使用指南、示例代码以及API说明；同时拥有庞大的社区资源，遇到问题时很容易找到解决方案或灵感。

下载与使用

BootStrap可以下载源码来使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./dist/css/bootstrap.min.css">
    <title>Document</title>
</head>
<body>
    <h1>Hello World!</h1>

    <script src="./dist/js/bootstrap.min.js"></script>
    <script src="./js/jquery-3.7.1.min.js"></script>
</body>
</html>

也可以使用CDN加速服务

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
  </body>
</html>

布局容器和栅格网格系统

1.布局容器

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

1
2
3

<div class="container">
    ...
</div>

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

1
2
3

<div class="container-fluid">
...
</div>

2.栅格网格系统

BootStrap的栅格网格系统是一个用于构建响应式布局的强大工具。它基于12列的布局，允许开发者根据屏幕的大小调整列的宽度。栅格系统主要由以下几个部分组成：

容器（Container）：.container类用于固定宽度的容器，.container-fluid类用于全宽的容器。
行（Row）：.row类用于创建一行，行内可以包含多个列。
列（Column）：.col-*类用于创建列，其中*可以是数字（表示列的宽度），也可以是断点（如sm、md、lg、xl），用于指定不同屏幕尺寸下的列宽。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 栅格系统示例</title>
    <link rel="stylesheet" href="./dist/css/bootstrap.min.css">

</head>
<body>
    <div class="container">
        <h1 class="mt-5">Bootstrap 栅格系统示例</h1>
        <div class="row">
            <div class="col-sm-12 col-md-6 col-lg-4 bg-primary text-white p-3">
                第一列：在小屏幕上占12列，在中等屏幕上占6列，在大屏幕上占4列。
            </div>
            <div class="col-sm-12 col-md-6 col-lg-4 bg-secondary text-white p-3">
                第二列：在小屏幕上占12列，在中等屏幕上占6列，在大屏幕上占4列。
            </div>
            <div class="col-sm-12 col-md-12 col-lg-4 bg-success text-white p-3">
                第三列：在小屏幕上占12列，在中等屏幕上占12列，在大屏幕上占4列。
            </div>
            <div class="col-sm-12 col-md-2 col-lg-4 bg-success text-white p-3">
                第四列：在小屏幕上占12列，在中等屏幕上偏移，占12列，在大屏幕上占4列。
            </div>
        </div>
    </div>
    <script src="./dist/js/bootstrap.min.js"></script>
    <script src="./js/jquery-3.7.1.min.js"></script>
</body>
</html>

1.列组合

列组合是指在同一行中组合不同宽度的列，以创建复杂的布局。Bootstrap 的栅格系统允许你在一行中使用多个列，并且这些列的宽度总和不应超过12列（除非使用偏移或其他布局技巧）。列总数大于12，会自动将这一整块换到下一行上

2.列偏移

列偏移用于在列的左侧添加空白空间，从而实现列的偏移效果。Bootstrap 提供了 offset-{breakpoint}-{number} 类来实现这一点，其中 {breakpoint} 是屏幕尺寸断点（如 sm、md、lg 等），{number} 是要偏移的列数。

例如：

1
2
3

<div class="col-sm-12 col-md-2 col-lg-12 offset-lg-1 bg-success text-white p-3">
            第四列：在小屏幕上占12列，在中等屏幕上占12列，在大屏幕上占1列,偏移1列。
</div>

3.列排序

列排序在Bootstrap栅格系统中是指改变列的显示顺序，而不仅仅改变列的方向。可以使用order类来调整列的顺序。

使用order类进行列排序

Bootstrap提供了order类，允许在不同断点下灵活调整列的顺序。order类的格式为order-{size}-{value}

{size} 是断点（如 sm, md, lg 等），如果不指定断点，则适用于所有屏幕尺寸。
{value} 是顺序值，范围为 0 到 12，默认情况下，没有设置 order 的列会按照 HTML 中的顺序排列，即 order-0。

<div class="col-sm-12 col-md-6 col-lg-1 bg-primary text-white p-2 order-2 order-md-1">
          第一列：在小屏幕上占12列，在中等屏幕上占6列，在大屏幕上占4列。
</div>

4.列嵌套

列嵌套是指在一个列内部再创建一个新的 .row 和 .col-* 结构，从而实现更复杂的布局。Bootstrap的栅格系统是基于12列的网格，允许你在任意列内再次使用完整的12列网格系统

复杂布局：有些设计需要在某些列中包含多个子列，以实现更复杂的布局。
响应式设计：嵌套可以帮助你更好地控制不同屏幕尺寸下的内容排列。
灵活性：通过嵌套，你可以更灵活地调整和组织页面内容。

<div class="container">
        <h1 class="mt-5">Bootstrap 栅格系统示例</h1>
        <div class="row">
            <div class="col-sm-12 col-md-6 col-lg-1 bg-primary text-white p-2">
                第一列：在小屏幕上占12列，在中等屏幕上占6列，在大屏幕上占4列。
            </div>
            <div class="col-sm-12 col-md-6 col-lg-1 bg-secondary text-white p-2 order-1">
                第二列：在小屏幕上占12列，在中等屏幕上占6列，在大屏幕上占4列。
                <!-- 嵌套的行 -->
                <div class="row">
                    <div class="col-6 bg-info text-white p-2">
                        子列1：在所有屏幕上占6列。
                    </div>
                    <div class="col-6 bg-warning text-white p-2">
                        子列2：在所有屏幕上占6列。
                    </div>
                </div>
            </div>
            <div class="col-sm-12 col-md-12 col-lg-1 bg-success text-white p-2">
                第三列：在小屏幕上占12列，在中等屏幕上占12列，在大屏幕上占4列。
            </div>
            <div class="col-sm-10 col-md-12 col-lg-1 bg-success text-white p-2">
                第四列：在小屏幕上占12列，在中等屏幕上偏移，占12列，在大屏幕上占4列。
            </div>
        </div>
    </div>

常用样式

1.排版

1.1 标题

Bootstrap和普通的HTML页面一样，定义标题都是使用标签<h1>到<h6>,只不过Bootstrap覆盖了其默认的样式，使其在所有浏览器下显示的效果都一样。为了让非标题和标题使用相同的样式，还特意定义了.h1~.h6六个类名。同时后面可以紧跟着一行小的副标题<samll></small>或使用.small

1 2	<h1>BootStrap heading <small>副标题</small></h1> <div class ="h1">BootStrap标题<span class="small">副标题</span></div>

1.2段落

段落是排版中另一个重要元素。通过.lead来突出强调内容，其作用就是增大文本字号，加粗文本，而且对行高、margin也做相应的处理。如下

<small>:小号字体

<b><strong>：加粗

<i><em>:斜体

1	<p class="lead"><small>以后的</small><b>你</b>会<i>感谢</i>现在<em>努力</em>的<strong>自己</strong></p>

1.3强调

在Bootstrap中，强调颜色（Contextual Colors）用于提供视觉上的强调和区分不同类型的内容。Bootstrap 提供了六个主要的强调颜色类，这些类可以应用于文本、背景等元素。以下是这六个强调颜色及其对应的类：

六个强调色

Primary（主要色）
- 文本类：text-primary
- 背景类：bg-primary
- 边框类：border-primary
Secondary（次要色）
- 文本类：text-secondary
- 背景类：bg-secondary
- 边框类：border-secondary
Success（成功色）
- 文本类：text-success
- 背景类：bg-success
- 边框类：border-success
Danger（危险色）
- 文本类：text-danger
- 背景类：bg-danger
- 边框类：border-danger
Warning（警告色）
- 文本类：text-warning
- 背景类：bg-warning
- 边框类：border-warning
Info（信息色）
- 文本类：text-info
- 背景类：bg-info
- 边框类：border-info

1.4对齐

style = "text-align: right":HTML样式自带

class = "text-left"：左对齐

class = "text-right"：右对齐

class = "text-center"：居中对齐

class = "text-justify"：两边对齐

1.5列表

在HTML中，列表结构主要有三种

无序列表（<ul></ul>）

有序列表（<ol></ol>）

定义列表（<dl><dt>...</dt> <dd>...</dd></dl>）

（1）去点列表

class ="list-unstyled"

<ul class="list-unstyled">
    <li>首页</li>
    <li>java学院</li>
    <li>在线课堂</li>
</ul>

（2）内联列表

class=”list-inline”,把垂直列表换成水平列表，而且去掉项目符号，保持水平显示。

<ul class="list-inline">
    <li>首页</li>
    <li>java学院</li>
    <li>在线课堂</li>
</ul>