Bootstrap4 表单
在 Bootstrap 4 中,表单(Form)是一个灵活的组件,用于创建各种输入和提交表单的样式。以下是一个简单的例子,演示如何创建一个基本的表单:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <title>Bootstrap 4 表单</title></head><body><div...
Bootstrap4 导航栏
在 Bootstrap 4 中,导航栏(Navbar)是一个灵活的组件,允许你轻松创建导航和菜单。以下是一个基本的 Bootstrap 4 导航栏的例子:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <title>Bootstrap 4 导航栏</title></head><body><...
Bootstrap4 导航
在Bootstrap 4中,导航(Navbar)是一个用于创建导航栏的组件。以下是一个简单的例子,演示如何创建一个基本的导航栏:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <title>Bootstrap 4 导航</title></head><body><nav class=&quo...
Bootstrap4 折叠板
在Bootstrap 4中,折叠板(Collapse)是一种用于显示和隐藏内容的组件。以下是一个简单的例子,演示如何创建一个基本的折叠板:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <title>Bootstrap 4 折叠板</title></head><body><div clas...
Bootstrap4 下拉菜单
在Bootstrap 4中,你可以使用下拉菜单(Dropdown)来创建具有下拉选项的菜单。以下是一个简单的例子,演示如何创建一个基本的下拉菜单:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <title>Bootstrap 4 下拉菜单</title></head><body><div...
Bootstrap4 卡片
在Bootstrap 4中,卡片(Card)是一种用于展示信息的灵活容器。以下是一个简单的例子,演示如何创建一个基本的卡片:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <title>Bootstrap 4 卡片</title></head><body><div class="...
Bootstrap4 列表组
在Bootstrap 4中,列表组(List Group)是一种用于显示列表信息的灵活组件。以下是一个简单的例子,演示如何创建一个基本的列表组:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <title>Bootstrap 4 列表组</title></head><body><div c...
Bootstrap4 分页
在Bootstrap 4中,你可以使用分页(Pagination)来将内容划分为多个页面。以下是一个简单的例子,演示如何创建基本的分页:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <title>Bootstrap 4 分页</title></head><body><div class=...
Bootstrap4 进度条
在Bootstrap 4中,你可以使用进度条(Progress Bar)来展示任务的完成进度。以下是一个简单的例子,演示如何创建一个基本的进度条:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <title>Bootstrap 4 进度条</title></head><body><div ...
Bootstrap4 徽章
在Bootstrap 4中,徽章(Badge)是用来在元素上显示一些额外的信息或数字的小组件。以下是一个简单的例子,演示如何使用徽章:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <title>Bootstrap 4 徽章</title></head><body><div class=&...
Bootstrap4 按钮组
在Bootstrap 4中,按钮组是一种将一组按钮放在同一行或同一列的方式。以下是一个简单的例子,演示如何创建一个水平的按钮组:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <title>Bootstrap 4 按钮组</title></head><body><div class=&qu...
Bootstrap4 按钮
在 Bootstrap 4 中,按钮是非常重要和常用的组件之一。Bootstrap 提供了多种按钮样式和大小,同时还支持按钮组、工具栏等功能。以下是一些常用的 Bootstrap 4 按钮类和用法:1. 基本按钮样式: 使用 .btn 类可以创建基本按钮。可以结合其他类,如 .btn-primary、.btn-secondary 等,来应用不同的颜色和样式。 <button type="button" class="btn btn-primary">Primary Button</button> <button type="button" class="btn btn-secondary">Secondary Button</button>2. 按钮大小: 使用 .btn-lg、.btn-sm、.btn-xs 等类可以调整按钮的大小。 <button type="button" class="btn bt...
Bootstrap4 信息提示框
在 Bootstrap 4 中,你可以使用信息提示框(Tooltip)来在用户与元素交互时显示简短的提示信息。Bootstrap 提供了 JavaScript 插件和 CSS 类,可以轻松地添加和定制信息提示框。以下是创建和使用 Bootstrap 4 信息提示框的基本步骤:1. 引入 Bootstrap 样式和脚本: 在你的 HTML 文件中引入 Bootstrap 的样式文件和 JavaScript 脚本。确保按照正确的顺序引入这些文件: <!-- 引入 Bootstrap 样式文件 --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.6.0/css/bootstrap.min.css"> <!-- 引入 Bootstrap JavaScript 和 Popper.js(用于处理弹出框定位) --> <script src="https://code.jquery....
Bootstrap4 超大屏幕
在 Bootstrap 4 中,你可以使用预定义的响应式类来处理超大屏幕(extra-large screens)。以下是一些常用的响应式类:1. 容器(Container): 使用 .container-xl 类可以创建一个适用于超大屏幕的固定宽度容器: <div class="container-xl"> <!-- 页面内容 --> </div> 如果你想要一个全宽度的容器,可以使用 .container-fluid: <div class="container-fluid"> <!-- 页面内容 --> </div>2. 栅格系统: 在栅格系统中,你可以使用 .col-xl-* 类来定义在超大屏幕上的列宽。例如,下面的代码将在超大屏幕上占据四分之一的宽度: <div class="col-xl-3"> <!-- 列内容 --> </div>3. 显示和隐藏...
Bootstrap4 图片设置
在 Bootstrap 4 中,你可以使用预定义的类来设置图片的样式、大小、形状等。以下是一些常见的 Bootstrap 4 图片类:1. 响应式图片: 使用 .img-fluid 类可以创建响应式图片,使得图片在不同屏幕尺寸下自动调整大小: <img src="your-image.jpg" class="img-fluid" alt="Responsive Image">2. 图片形状: 使用以下类可以设置图片的形状: - .rounded:圆角图片。 - .rounded-circle:圆形图片。 - .rounded-pill:圆柱形图片。 - .rounded-0:无圆角图片。 示例: <img src="your-image.jpg" class="rounded" alt="Rounded Image">3. 图片边框: 使用 .rounded 类可以为图片添加边框,你可以使用 .borde...
Bootstrap4 表格设置
在 Bootstrap 4 中,表格设置主要通过预定义的表格类来实现。Bootstrap 提供了一系列的类,用于设置表格的样式、边框、背景色等。以下是 Bootstrap 4 中常用的表格类:1. 基本表格: 使用 .table 类可以将一个普通的 HTML 表格变成基本样式的 Bootstrap 表格: <table class="table"> <!-- 表格内容 --> </table>2. 表格样式: Bootstrap 提供了一些表格样式的类,用于设置表头、表格边框等: - .table-striped:交替的斑马纹样式。 - .table-bordered:带有边框的表格。 - .table-hover:鼠标悬停时高亮的行。 - .table-dark:深色背景的表格。 示例: <table class="table table-striped table-bordered table-hover"> <!-- 表格内容 --...
Bootstrap4 颜色设置
在 Bootstrap 4 中,颜色设置主要通过预定义的颜色类来实现。Bootstrap 提供了一系列的颜色类,用于设置背景颜色、文本颜色等,使得页面元素具有一致的外观。以下是 Bootstrap 4 中常用的颜色类:1. 背景颜色: - .bg-primary - .bg-secondary - .bg-success - .bg-danger - .bg-warning - .bg-info - .bg-light - .bg-dark - .bg-white 示例: <div class="bg-primary text-white">This is a primary background.</div> 上述例子中,bg-primary 类设置了背景颜色为主题色,text-white 类设置了文本颜色为白色。2. 文本颜色: - .text-primary - .text-secondary - .text-success - .text-danger - .text...
Bootstrap4 排版
在 Bootstrap 4 中,排版系统用于设置文本样式、字体、行高以及其他与文字相关的样式。Bootstrap 提供了一系列的类,可以用于设置文本的外观和排版。以下是 Bootstrap 4 中常用的排版类:1. 文本颜色: 使用以下类可以设置文本的颜色: - .text-primary - .text-secondary - .text-success - .text-danger - .text-warning - .text-info - .text-light - .text-dark - .text-muted - .text-white 示例: <p class="text-primary">This is a primary text.</p>2. 字体样式: 使用以下类可以设置文本的字体样式: - .font-weight-bold:设置文本为粗体。 - .font-weight-normal:设置文本为常规字体。 - .font-italic:设置文本为斜...
Bootstrap4 网格系统
Bootstrap 4 的网格系统是一种用于创建响应式布局的强大工具,可以让页面在不同屏幕尺寸上自适应。网格系统由行(Row)和列(Column)组成,你可以使用预定义的 CSS 类来定义网格布局。以下是 Bootstrap 4 网格系统的基本概念:1. 行(Row): 行是列的容器,用于包裹列以确保正确的布局。使用 .row 类来创建行: <div class="row"> <!-- 列将放置在这里 --> </div>2. 列(Column): 列是网格系统的基本单位,用于放置内容。Bootstrap 4 的列使用 12 栅格系统,即一行被分为 12 列。你可以使用 .col-* 类定义列的宽度,其中 * 表示占据的列数。 <div class="row"> <div class="col-md-6"> <!-- 占据6列的列 --> </div> <div class=...
Bootstrap4 页面创建
创建一个基本的 Bootstrap 4 页面通常需要以下步骤:1. 引入 Bootstrap 样式文件: 在 HTML 文件的 <head> 部分引入 Bootstrap 的样式文件。你可以选择使用 CDN(内容分发网络)或者将 Bootstrap 下载到本地并引入。 使用 CDN 的示例: <!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="https://stackpath.bootstrapcdn.com/bootstrap/4.6.0/css/bootstrap.min.css&q...