Bootstrap

发表于 2019-12-08 更新于 2024-01-10 分类于 Python > Python教程 > Python基础本文字数： 7.2k 阅读时长 ≈ 24 分钟

概述

Bootstrap 是一种开源的前端框架，用于开发响应式布局、移动设备优先的网页和 Web 应用。它包含了预先制作的 CSS 样式表、HTML 和 JavaScript 组件，这些都是为了快速、有效地进行网页设计而设计的。
Bootstrap 提供了一个基本的结构，包括网格系统、链接样式、背景、排版规则等，让开发者可以使用这些规则和组件快速设计页面。它还提供了一些动态组件，如模态框、下拉菜单和轮播图，这些都可以通过 JavaScript 插件实现。
Bootstrap 的目标是简化 Web 开发者的工作，提供一个统一、现代的界面开发环境，同时确保跨浏览器和设备的兼容性。因此，它广受前端开发者的欢迎，并被广泛用于各种 Web 开发项目中。

屏幕尺寸（宽度）

Bootstrap 框架使用了一套响应式网格系统，它基于不同的屏幕尺寸或者说是视口（viewport）宽度来定义了几个断点（breakpoint）。这些断点被用于媒体查询（media queries），允许开发者为不同的屏幕尺寸制定不同的样式。截止到Bootstrap 的最新版本（Bootstrap 5），以下是它定义的屏幕尺寸规格：

超小屏幕设备（Extra small devices, xs） - 屏幕宽度小于 576px。这通常指的是小型智能手机。
小屏幕设备（Small devices, sm） - 屏幕宽度大于等于 576px。这适用于大多数智能手机。
中等屏幕设备（Medium devices, md） - 屏幕宽度大于等于 768px。这适用于平板电脑和小型桌面显示器。
大屏幕设备（Large devices, lg） - 屏幕宽度大于等于 992px。这适用于桌面显示器。
超大屏幕设备（Extra large devices, xl） - 屏幕宽度大于等于 1200px。这是为了适应大的桌面显示器。
超超大屏幕设备（Extra extra large devices, xxl） - 屏幕宽度大于等于 1400px。这适用于更大的桌面显示器。

Breakpoint	Class infix	Dimensions
Extra small	None	<576px
Small	`sm`	≥576px
Medium	`md`	≥768px
Large	`lg`	≥992px
Extra large	`xl`	≥1200px
Extra extra large	`xxl`	≥1400px

响应式布局

Bootstrap 的响应式布局是一种能够自动调整以适应不同屏幕尺寸和分辨率的网页设计方法。这意味着无论用户是通过手机、平板、笔记本电脑或者是桌面电脑访问网站，网页都能提供良好的浏览体验。Bootstrap 框架通过以下几种方式实现响应式设计：

网格系统（Grid System）: Bootstrap 包括一个基于行和列的网格系统，这个系统可以适应不同的屏幕尺寸。开发者可以使用预定义的类，例如 .col-sm-4, .col-md-8, .col-lg-2 等来设置元素在不同屏幕尺寸下占据的列数。每一类对应不同的断点尺寸。
布局容器（Containers）: 在Bootstrap中，container 类用于包装网站的内容。有两种类型的容器：.container 提供了一个固定宽度的容器，而 .container-fluid 则创建了一个占满整个屏幕宽度的容器。
媒体查询（Media Queries）: Bootstrap 使用了 CSS3 中的媒体查询来应对不同的媒体类型和条件。框架中的媒体查询基于上述的断点来应用不同的 CSS 样式规则。
响应式工具（Responsive Utilities）: Bootstrap 提供了一系列的工具类，比如显示和隐藏内容的类（如 .d-none, .d-sm-block, .d-md-none 等），用于在不同的屏幕尺寸上控制内容的可见性。
灵活的图片（Responsive Images）: 使用 .img-fluid 类可以使图片成为响应式的，即图片能够在其父元素中缩放而不超过其原始尺寸。
预定义组件（Predefined Components）: Bootstrap 还提供了一系列预定义的响应式组件，如导航栏、面板、模态对话框等，它们都是设计为在不同的设备上看起来和运行得都很好。

要创建一个响应式布局，开发者通常会开始于对移动设备的布局设计，然后逐渐增加媒体查询来适配更大的屏幕尺寸，这个方法被称为“移动优先”（Mobile First）设计。Bootstrap 的网格系统和类都是以这种移动优先的方式来创建的。

媒体查询

简介

媒体查询（Media Queries）是 CSS3 的一个功能，它允许内容的呈现根据媒体类型（比如屏幕）和特定的条件（比如屏幕宽度）来定制。Bootstrap 使用媒体查询来应用不同的样式规则以适应不同屏幕尺寸的设备。

在 JavaScript 中，你可以通过 navigator.userAgent 获取用户代理字符串，进而来推断设备类型

var userAgent = navigator.userAgent;

if (userAgent.match(/Android/i)) {
    // 安卓设备
} else if (userAgent.match(/webOS/i)) {
    // webOS设备
} else if (userAgent.match(/iPhone/i)) {
    // 苹果手机
} else if (userAgent.match(/iPad/i)) {
    // iPad
} else if (userAgent.match(/iPod/i)) {
    // iPod
} else if (userAgent.match(/BlackBerry/i)) {
    // 黑莓手机
} else if (userAgent.match(/Windows Phone/i)) {
    // Windows Phone
} else {
    // 可能是桌面浏览器
}

移动设备优先
1
<meta name="viewport" content="width=device-width, initial-scale=1.0">
这个标签对于移动设备特别重要，因为它可以确保你的网页在小屏幕上也能正确显示。这个viewport元标签有几个关键部分：
- name="viewport"：这表明这个meta标签是关于视口（viewport）的设置。
- content="width=device-width"：这指示浏览器将页面的宽度设置为跟随设备屏幕的宽度，这意味着页面的宽度会自适应移动设备的屏幕宽度。
- initial-scale=1.0：这指定了页面初始加载时的缩放级别。设置为1.0意味着页面以1:1的比例显示，没有任何缩放。这能确保用户看到的页面是按照设计师的意图在设备上以正确的尺寸呈现的。

语法
1
2
3
@media not|only mediatype and (expressions) {
CSS-Code;
}
- not: 可选关键字，用来排除某些特定的媒体类型。
- only: 可选关键字，用来防止旧浏览器不支持媒体查询的情况。
- mediatype: 媒体类型，比如 screen, print 等。
- and: 逻辑操作符，用来将多个媒体特性连接到一起。
- expressions: 包含媒体特性和值的表达式，比如 (min-width: 600px)。

使用方式

@import规则
- @import 可以用来在一个CSS文件中导入另一个CSS文件，并且可以结合媒体查询来指定导入样式的条件。例如：
  1
  @import url("responsive.css") screen and (min-width: 768px);
- 这条规则意味着只有当媒体类型是屏幕，并且屏幕宽度至少为768像素时，才会导入 responsive.css 文件。
@media规则
- @media 规则是在CSS文件内部使用媒体查询的方式。你可以直接在CSS中包含 @media 规则来应对不同的媒体类型和条件。例如：
  1
  2
  3
  4
  5
  @media (min-width: 768px) {
  .some-class {
  font-size: 1.5rem;
  }
  }
- 在这里，.some-class 的样式只会在视口宽度至少为768像素时被应用。
标签
- <link> 标签通常在HTML文档的 <head> 部分使用，可以将外部样式表链接到HTML文件。结合媒体属性，可以根据不同的媒体类型和条件来加载不同的样式表。例如：
  1
  <link rel="stylesheet" href="path/to/bootstrap.min.css" media="(min-width: 768px)">
- 这个 link 元素将加载Bootstrap的CSS文件，但是只有在视口宽度至少为768像素时样式才会生效。

响应式工具类

Bootstrap 还提供了一系列响应式工具类，使得响应式设计更加容易。例如，你可以使用以下这些工具类直接在HTML元素上:

<div class="d-none d-sm-block">...</div> <!-- 在小型设备以上显示 -->
<div class="d-none d-md-block">...</div> <!-- 在中型设备以上显示 -->
<div class="d-none d-lg-block">...</div> <!-- 在大型设备以上显示 -->
<div class="d-none d-xl-block">...</div> <!-- 在超大型设备以上显示 -->

在上面的 HTML 示例中，每个 <div> 元素都使用了不同的 Bootstrap 工具类来控制它们的显示。随着设备尺寸的增加，每个 <div> 会根据设置在特定断点或更大尺寸的设备上显示。

JavaScript中的媒体查询
- JavaScript 提供了 window.matchMedia() 方法，允许你根据媒体查询来检测和实施条件逻辑。这可以用于动态更改样式或触发与视口尺寸相关的各种操作。
  1
  2
  3
  4
  5
  if (window.matchMedia("(min-width: 768px)").matches) {
  // 视口至少为768px宽时执行的代码
  } else {
  // 视口小于768px宽时执行的代码
  }

综合示例

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Responsive Design Example</title>
        <style>
            body {
                margin: 0;
                padding: 0;
                font-family: 'Arial', sans-serif;
            }

            header,
            nav,
            article,
            aside,
            footer {
                padding: 20px;
                border: 1px solid #ddd;
                margin: 10px 0;
            }

            nav ul {
                list-style-type: none;
                padding: 0;
            }

            nav ul li {
                padding: 5px 0;
            }

            /* Mobile First */
            .container {
                display: block;
            }

            nav,
            article,
            aside {
                width: 100%;
            }

            /* Tablet Layout: 768px */
            @media screen and (min-width: 768px) {
                .container {
                    display: flex;
                    flex-wrap: wrap;
                }

                nav,
                aside {
                    flex: 1;
                }

                article {
                    flex: 3;
                }
            }

            /* Desktop Layout: 992px */
            @media screen and (min-width: 992px) {

                header,
                footer {
                    text-align: center;
                }

                nav,
                article,
                aside {
                    height: 200px;
                }

                nav,
                aside {
                    order: 1;
                }

                article {
                    order: 2;
                }

                aside {
                    order: 3;
                }
            }
        </style>
    </head>
    <body>
        <header>Responsive Design Header</header>
        <div class="container">
            <nav>
                <ul>
                    <li><a href="#">Menu Item 1</a></li>
                    <li><a href="#">Menu Item 2</a></li>
                    <li><a href="#">Menu Item 3</a></li>
                    <li><a href="#">Menu Item 4</a></li>
                </ul>
            </nav>
            <article>
                <h1>Main Content Area</h1>
                <p>This area might contain the page's main article, text, or relevant information. It will be displayed more
                    prominently on larger screens.</p>
            </article>
            <aside>
                <h3>Sidebar Area</h3>
                <p>This is the sidebar area. It might contain additional navigation links, social media links, or other less
                    important information.</p>
            </aside>
        </div>
        <footer>Responsive Design Footer</footer>
    </body>
</html>

我们使用了flexbox 布局来创建灵活的布局。flexbox 允许我们在不同屏幕尺寸上容易地重新排列元素。
.container 类最初被设置为块级元素。为了适应不同的屏幕尺寸，我们在媒体查询中将其变为弹性容器（display: flex;）。
在平板设备的媒体查询中（最小宽度为768px），导航（nav）、文章（article）和侧边栏（aside）都被赋予了弹性属性，让它们能够按比例分配空间。
在桌面设备的媒体查询中（最小宽度为992px），我们设置了更具体的样式，比如内容区域的顺序、高度以及文本对齐方式，从而在更宽的屏幕上提供更加定制的布局。

viewport（了解）

“viewport” 标签用于控制布局在移动设备上的响应方式。

当你在使用 Bootstrap 开发响应式网站时，你将在 HTML 文档的 <head> 部分包含一个特定的 viewport <meta> 标签，就像这样：

1	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

或

1	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2, minimum-scale=0.5, user-scalable=yes">

这个标签的意义如下：
- width=device-width：将布局视口的宽度设置为设备的物理宽度。
- initial-scale=1：设置页面初始加载时的缩放比例为 1，这意味着页面内容的显示大小正好与设备屏幕的大小相符。
- shrink-to-fit=no：在 iOS 9 和一些旧的浏览器中，这个属性被用来禁用对页面内容的自动缩放，以适应视口宽度。
- maximum-scale：定义用户能够将页面放大到的最大比例。例如，maximum-scale=2.0允许用户最多放大到原始尺寸的两倍。
- minimum-scale：定义用户能够将页面缩小到的最小比例。例如，minimum-scale=0.5允许用户最多缩小到原始尺寸的一半。
- user-scalable：决定用户是否可以缩放页面。设置为user-scalable=no时，将禁用缩放功能；设置为user-scalable=yes时，允许缩放。
但是要注意，禁用用户缩放（user-scalable=no）或限制用户缩放的范围（通过maximum-scale或minimum-scale）可能会对访问网站的用户体验产生负面影响，尤其是对于视力不佳的用户。因此，这种做法需要谨慎，并且在某些情况下，如无障碍性考虑，最好允许用户自由缩放页面。
现代的移动浏览器通常默认允许用户缩放，即使没有指定maximum-scale、minimum-scale和user-scalable这些参数。此外，某些浏览器（例如iOS Safari）有时会忽略这些限制，因为它们可能会破坏无障碍性需求。

尺寸及单位（回顾）

em（元素的字体大小）：这是一个相对单位，通常用于定义字体大小、间距（padding/margin）、宽度等样式属性。它基于其所在元素的字体大小，确保样式大小的一致性，并能够根据父元素的字体大小比例进行调整。
rem（根元素的字体大小）: 主要用于字体大小、间距(padding/margin)等，以确保一致性和可缩放性。
%（百分比）: 通常用于宽度和高度的设置，使元素相对于其父元素的尺寸进行缩放。
px（像素）: 在 Bootstrap 中尽量少用固定单位，以免破坏响应式效果。
vw（视口宽度）: 相等于视口宽度的1%。
vh（视口高度）: 相等于视口高度的1%。

布局容器

容器（Container）:
- .container: 这是一个固定宽度的容器，其最大宽度会随着视口（viewport）或屏幕尺寸的变化而变化。在不同的断点下，容器会有最大宽度的设置，以确保内容不会在大屏幕上过于宽阔，从而失去可读性。
- 这些断点对应于响应式设计中的屏幕尺寸，如 sm、md、lg、xl 和最新版本的 Bootstrap 中可能包含的 xxl。
流体容器（Container Fluid）:
- .container-fluid: 这是一个宽度为 100% 的容器，会占据所有可用的宽度，不管视口大小如何都会填满整个屏幕宽度。
- 流体容器对于想要边缘对齐或者在不同设备上都使用全宽度的布局设计很有用。

为了更具体地文档化，下面是 Bootstrap 框架中容器类的一些示例，以及它们是如何响应不同屏幕尺寸的：

<!-- 固定容器，适用于所有尺寸 -->
<div class="container">
    <!-- 内容 -->
</div>

<!-- 流体容器，宽度始终是100% -->
<div class="container-fluid">
    <!-- 内容 -->
</div>

<!-- 响应式容器，宽度随不同断点变化 -->
<div class="container-sm">...</div> <!-- 在 sm 及以上断点上为固定宽度容器 -->
<div class="container-md">...</div> <!-- 在 md 及以上断点上为固定宽度容器 -->
<div class="container-lg">...</div> <!-- 在 lg 及以上断点上为固定宽度容器 -->
<div class="container-xl">...</div> <!-- 在 xl 及以上断点上为固定宽度容器 -->
<div class="container-xxl">...</div> <!-- 在 xxl 及以上断点上为固定宽度容器 -->

在 Bootstrap 4 及之前的版本中，只有 .container 和 .container-fluid 类。从 Bootstrap 5 开始，引入了基于断点的容器宽度类，如 .container-xxl，提供更多灵活性。
选择哪种容器取决于你的布局需求和设计目标。固定宽度的容器提供了更加传统的布局方式，其中内容有最大宽度限制，而流体容器则允许内容在任何设备上都能延伸到屏幕边缘。

栅格系统

简介

Bootstrap 的栅格系统是一种通过行（rows）和列（columns）来构建响应式布局的强大工具。它使用一系列容器、行和列来布局和对齐内容。其核心思想在于将页面划分为最多12列的网格，你可以使用预设的格栅类来定义元素的宽度，元素的宽度会随着屏幕或视口（viewport）大小的变化而响应式地调整。
核心概念
- 容器（Container）: 栅格系统需要在 .container 或 .container-fluid 类中使用。这些容器是用来包裹网站内容的。
- 行（Row）: .row 类用于创建一行，用以包含列。行必须位于容器内。
- 列（Column）: 列通过 .col- 前缀来定义，并且后面可以接一个数字来指定在12列栅格系统中占据的列数。比如，.col-6 表示元素占据了12列中的6列宽度。列应该位于行内。
响应式断点

Bootstrap 栅格系统提供了一系列的响应式断点，允许你根据不同屏幕尺寸设定不同的列宽。以下是断点的类前缀：
- .col-: 超小设备（小于 576px）
- .col-sm-: 小型设备（≥576px）
- .col-md-: 中型设备（≥768px）
- .col-lg-: 大型设备（≥992px）
- .col-xl-: 超大设备（≥1200px）
- .col-xxl-: 特大设备（≥1400px）

使用示例

<div class="container">
    <div class="row">
        <div class="col-sm-4">.col-sm-4</div>
        <div class="col-sm-4">.col-sm-4</div>
        <div class="col-sm-4">.col-sm-4</div>
    </div>
</div>

在上述示例中，.col-sm-4 表示每个列在小型设备及以上的屏幕上占据四分之一（即4/12）的宽度。

嵌套列

栅格系统允许嵌套列，即在一个列内部再创建一个新的 .row 和多个 .col-：

<div class="container">
    <div class="row">
        <div class="col-sm-6">
            <div class="row">
                <div class="col-sm-6">.col-sm-6</div>
                <div class="col-sm-6">.col-sm-6</div>
            </div>
        </div>
        <div class="col-sm-6">.col-sm-6</div>
    </div>
</div>

偏移列

你可以使用 .offset- 类来偏移列：

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

在这个例子中，第二个 .col-md-4 被偏移了4列宽度。

列排序

Bootstrap 的栅格系统还允许你通过 .order- 类来控制列的顺序。

<div class="row">
    <div class="col-md-4 order-md-2">第一列，但会在中型设备上显示为第二列.</div>
    <div class="col-md-4 order-md-1">第二列，但会在中型设备上显示为第一列.</div>
</div>

全局 CSS 样式

Bootstrap 提供了一系列全局的 CSS 样式，这些样式是用于整个项目的基础样式，包括排版、表格、表单、按钮等。全局样式旨在提供一致的基础设计，同时确保跨浏览器的兼容性。

归一化样式（Normalize）: Bootstrap 包含了 Normalize.css，一个归一化样式表，它提供跨浏览器的一致性。
排版（Typography）: 提供了标题、段落、列表、代码块等的默认样式。这包括 h1 到 h6 的标题、p 的段落标签、mark、small、以及其他内联元素样式。
代码（Code）: 预格式化的代码块、变量、用户输入内容等的样式。
表格（Tables）: 样式化表格的基础样式，包括带有条纹、边框、悬停状态等样式的表格设计。
表单（Forms）: 包含了表单控件如输入框、选择列表、复选框、单选按钮等的样式。
按钮（Buttons）: 样式化按钮，提供不同尺寸和颜色。
图片（Images）: 图片样式，如响应式图片、图片圆角等。
响应式工具（Responsive utilities）: 类和 mixin，用于快速的为元素添加响应式特性。
助手类（Helper classes）: 提供边距、填充、对齐等快速样式更改的工具类。
可重用组件（Reusable components）: 如警告框（alerts）、徽章（badges）、面包屑（breadcrumbs）、卡片（cards）、导航条（navbar）等。

Bootstrap 的全局样式是使用 Sass 预处理器构建的，这意味着它们可以很容易地自定义，并且你可以在构建过程中只包含你需要的样式。这也意味着你可以通过覆盖 Sass 变量或者使用 Bootstrap 的 class 名称来调整样式。例如：

1
2
3

<p class="text-primary">这个段落文字将显示为主题颜色。</p>
<p class="mt-3 mb-2">这个段落有上边距（mt-3）和下边距（mb-2）。</p>
<img src="image.jpg" class="img-fluid" alt="响应式图片">

组件

Bootstrap 提供了一系列可复用、预定义的组件，这些组件可以通过添加特定的类和属性到你的 HTML 元素中来使用。这些组件包括了导航栏、下拉菜单、按钮、卡片、模态窗口等等，它们都是以模块化的方式设计的，可以轻松地集成到你的Web项目中。

导航栏（Navs & Navbar）: 用于创建导航菜单，包括水平导航栏和垂直选项卡/标签。
下拉菜单（Dropdowns）: 为按钮或链接添加下拉菜单的功能。
按钮组（Button groups）: 将一系列按钮组合在一起的容器。
输入组（Input groups）: 将文本输入、自定义选择、自定义文件输入等元素与按钮或文本一起使用。
卡片（Cards）: 灵活的内容容器，可以包含图片、文本、链接、列表等。
模态窗口（Modals）: 浮层窗口，可以包含文本、表单、任何种类的内容。
折叠内容（Collapse）: 用于切换内容显示/隐藏的组件，通常与导航菜单和折叠面板结合使用。
轮播图（Carousel）: 用于创建幻灯片切换效果的组件。
警告（Alerts）: 用于显示各种类型的警告消息和通知。
徽章（Badges）: 用于给列表项或按钮添加数字或状态标记。
进度条（Progress bars）: 用于展示任务进度。
分页（Pagination）: 用于生成分页链接。
提示工具（Tooltips）和弹出框（Popovers）: 为元素添加小的浮动框提示或弹出框内容。
面包屑（Breadcrumbs）: 用于显示当前页面在导航层级中的位置。
列表组（List group）: 用于显示一系列内容项，可以是静态的或者可交云的。
Jumbotron：用于增加内容的重要性并添加更多的注意力。
表格（Tables）: 提供了带有条纹、边框、悬停状态等样式的表格设计。

每个组件都有它自己的模块化构建和选项，可以通过类、HTML5 数据属性等来定制。这些组件大多都需要 JavaScript 插件来提供额外的功能（如模态窗口的显示/隐藏），Bootstrap 提供了一个自定义的 jQuery 插件来处理这些交互。

<div class="alert alert-warning alert-dismissible fade show" role="alert">
    <strong>注意!</strong> 这是一个警告警告您注意一些重要信息。
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>
</div>

在这个示例中，我们创建了一个带有关闭按钮的可关闭警告框。这个警告框使用了 alert-warning 类来设置其样式，以及 alert-dismissible 和 fade show 类来允许警告框被关闭，并拥有一个平滑的渐隐效果。按钮元素使用了 data-dismiss="alert" 属性来指定点击按钮时应该关闭警告框。

可视化布局工具

Bootstrap 可视化布局工具是指那些帮助开发者通过图形用户界面（GUI）来快速设计和构建布局和响应式网格系统的应用程序或在线工具。这些工具通常允许用户拖放布局组件，并实时查看其效果。使用这些工具，即使没有深厚的前端开发技能，开发者和设计师也能够创建出符合Bootstrap标准的页面布局。
以下是一些流行的Bootstrap可视化布局工具：
1. Bootstrap Studio: 一个强大的桌面应用程序，它拥有大量内置的组件，允许你拖放来构建响应式网页。它还包括一个实时预览功能，你可以在其中查看你的设计在不同设备和屏幕尺寸上的表现。
2. Pingendo: 提供简单的拖放界面来创建响应式网页。它支持Bootstrap 4，并且可以直接在你的浏览器中工作。
3. LayoutIt: 一个在线布局工具，它提供了一个基于Bootstrap的界面构建器，允许你使用网格系统和基本的Bootstrap组件来创建页面布局。
4. Brix.io: 另一个Bootstrap布局构建工具，它提供了一个可视化的界面和一系列的自定义组件，你可以通过它们来构建更复杂的网页设计。
5. Mobirise: 是一个离线网页制作软件，它提供了基于Bootstrap的现代化网页模板和组件，你可以通过拖放来自定义这些模板。
使用这些工具时，你通常可以从一个干净的画布开始，或者选择一个现有的模板来进行修改。通过拖放布局组件（如容器、行和列），你可以很容易地定义网页的结构。大多数工具还允许你编辑组件的细节，比如颜色、字体、间距等，以及导入自定义的CSS样式。
除了上述商业和在线工具外，还有许多其他的免费和开源工具可用，它们在功能和易用性方面可能各不相同。在选择合适的Bootstrap可视化布局工具时，你可能需要考虑你的具体需求、技术栈以及预算。

使用 Bootstrap

注册界面

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Registration Form with Mobile Verification</title>
        <!-- 引入Bootstrap CSS -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
        <!-- 可选的Bootstrap JavaScript插件 -->
        <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
        <!-- 自定义CSS -->
        <style>
            body {
                background-color: #f7f7f7;
                font-family: 'Arial', sans-serif;
            }

            .registration-container {
                margin-top: 50px;
                background: #fff;
                box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
                border-radius: 5px;
                padding: 20px;
            }

            .btn-success {
                background-color: #28a745;
                border: none;
                border-radius: 3px;
                padding: 10px 15px;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="col-md-6 mx-auto registration-container">
                    <h3 class="text-center mb-3">注册</h3>
                    <!-- 注册表单开始 -->
                    <form>
                        <div class="form-group">
                            <label for="mobileNumber">手机号</label>
                            <input type="tel" class="form-control" id="mobileNumber" placeholder="输入手机号" required>
                        </div>
                        <div class="form-row">
                            <div class="col-7">
                                <div class="form-group">
                                    <label for="verificationCode">验证码</label>
                                    <input type="text" class="form-control" id="verificationCode" placeholder="验证码"
                                        required>
                                </div>
                            </div>
                            <div class="col-5">
                                <label>&nbsp;</label>
                                <button type="button" class="btn btn-primary w-100">获取验证码</button>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="password">设置密码</label>
                            <input type="password" class="form-control" id="password" placeholder="设置登录密码" required>
                        </div>

                        <div class="form-group">
                            <label for="confirmPassword">确认密码</label>
                            <input type="password" class="form-control" id="confirmPassword" placeholder="再次输入密码" required>
                        </div>

                        <button type="submit" class="btn btn-success w-100">完成注册</button>
                    </form>
                    <!-- 注册表单结束 -->
                </div>
            </div>
        </div>
    </body>
</html>

这个注册表单现在包含以下部分：
1. 手机号输入: 用户输入他们的手机号。
2. 验证码部分: 包括一个输入字段用于用户输入收到的验证码和一个按钮用于获取验证码。
3. 设置密码: 用户创建他们的密码。
4. 确认密码: 用户再次输入密码以确认。
请注意，此表单的HTML仅用于展示目的，不包含后端逻辑处理验证码发送和验证。实际的验证码实现将需要一个服务器端的API来发送验证码到用户手机并验证用户输入的验证码是否正确。您可能还需要考虑引入前端JavaScript来处理异步请求和更新界面状态。

登录界面

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Mobile Number Login Form</title>
        <!-- 引入Bootstrap CSS -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
        <!-- 可选的Bootstrap JavaScript插件 -->
        <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
        <!-- 自定义CSS -->
        <style>
            body {
                background-color: #f7f7f7;
                font-family: 'Arial', sans-serif;
            }

            .login-container {
                margin-top: 50px;
                background: #fff;
                box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
                border-radius: 5px;
                padding: 20px;
            }

            .btn-primary {
                background-color: #007bff;
                border: none;
                border-radius: 3px;
                padding: 10px 15px;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="col-md-6 mx-auto login-container">
                    <h3 class="text-center mb-3">登录</h3>
                    <!-- 登录表单开始 -->
                    <form>
                        <div class="form-group">
                            <label for="loginMobileNumber">手机号</label>
                            <input type="tel" class="form-control" id="loginMobileNumber" placeholder="输入手机号" required>
                        </div>
                        <div class="form-group">
                            <label for="loginPassword">密码</label>
                            <input type="password" class="form-control" id="loginPassword" placeholder="输入密码" required>
                        </div>

                        <button type="submit" class="btn btn-primary w-100">登录</button>
                    </form>
                    <!-- 登录表单结束 -->
                </div>
            </div>
        </div>
    </body>
</html>

这个登录界面提供了以下功能：
1. 手机号输入: 用户输入他们注册时使用的手机号。
2. 密码输入: 用户输入他们的密码。
3. 登录按钮: 用于提交表单的按钮。
此登录表单的HTML代码是为了展示目的，并没有包含实际的登录逻辑。为了处理登录请求，你需要一个服务器端处理程序来验证用户的手机号和密码是否匹配。通常，你还会在客户端使用JavaScript来实现对登录过程的进一步控制，如异步提交表单、处理错误信息显示等。

概述