<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Bootstrap Example</title> <!-- 引入 Bootstrap CSS --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css"></head><body><div class="container mt-5&qu...
Bootstrap 提供了一系列的排版样式，使得文本和排版元素能够具备一致、美观的外观。以下是 Bootstrap 排版的一些常见类和样式：1. 字体样式 文字颜色： 使用类似 text-primary、text-danger 的类可以设置文字的颜色。 <p class="text-primary">这是蓝色文字。</p> <p class="text-danger">这是红色文字。</p> 字体大小： 使用类似 display-1、h1 的类可以设置文字的大小。 <p class="display-1">特大号文字</p> <h1>大标题</h1>2. 对齐和行高 文本对齐： 使用类似 text-left、text-center、text-right、text-justify 的类可以设置文本的对齐方式。 <p class="text-left">左对齐文本</p> &...
Bootstrap 的网格系统是其核心组件之一，用于创建响应式布局。网格系统基于容器、行和列的概念，让开发者可以轻松地构建各种设备上适应的网页布局。1. 容器（Container）在 Bootstrap 中，容器用于包裹网页的内容，分为两种类型：.container 和 .container-fluid。 .container： 固定宽度的容器，根据屏幕宽度自动调整大小，适合于响应式设计。 <div class="container"> <!-- 网页内容放在这里 --> </div> .container-fluid： 充满整个视口的容器，会占据整个屏幕的宽度。 <div class="container-fluid"> <!-- 网页内容放在这里 --> </div>2. 行（Row）在容器内，使用行来创建水平的块。每一行可以包含 12 个列，这是网格系统的基础。<div class="container"> <...
安装 Bootstrap 可以通过两种主要的方法：使用 CDN（内容分发网络）引入 Bootstrap 的 CSS 和 JavaScript 文件，或者通过 npm 安装并使用本地文件。方法一：使用 CDN1. 在 HTML 文件的 <head> 部分引入 Bootstrap 的 CSS 文件： <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">2. 在 HTML 文件的 <body> 结尾部分引入 Bootstrap 的 JavaScript 文件： <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/@...
Bootstrap 是一个流行的开源前端框架，用于快速构建响应式和移动设备优先的网站和Web应用。以下是一个简单的 Bootstrap 教程，帮助你入门：步骤 1：引入 Bootstrap在你的 HTML 文件中引入 Bootstrap。你可以选择下载并本地引入，也可以通过 CDN 引入。以下是使用 CDN 的示例：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <tit...
在 Bootstrap 4 中，有一系列实用工具类（Utility classes），它们提供了一些快速且灵活的样式设置，用于处理布局和样式。以下是一些常见的 Bootstrap 4 实用工具类：1. 文本颜色（Text Color）： - .text-primary - .text-secondary - .text-success - .text-danger - .text-warning - .text-info - .text-light - .text-dark - .text-muted - .text-white 例如： <p class="text-primary">这是主要文本颜色。</p>2. 背景颜色（Background Color）： - .bg-primary - .bg-secondary - .bg-success - .bg-danger - .bg-warning - .bg-info - .bg-light - .bg-da...
在 Bootstrap 4 中，多媒体对象（Media Object）是一种用于排列图像、视频和文本的灵活布局。以下是一个简单的例子，演示如何创建一个基本的多媒体对象：<!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><bod...
在 Bootstrap 4 中，滚动监听（Scrollspy）是一种用于根据页面滚动位置自动更新导航链接状态的组件。以下是一个简单的例子，演示如何创建一个基本的滚动监听：<!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><bod...
在 Bootstrap 4 中，弹出框（Popover）是一种可用于显示额外信息的组件。以下是一个简单的例子，演示如何创建一个基本的弹出框：<!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 cla...
在 Bootstrap 4 中，你可以使用提示框（Tooltip）组件来创建浮动的提示信息。以下是一个简单的例子，演示如何创建一个基本的提示框：<!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...
在 Bootstrap 4 中，模态框（Modal）是一个用于显示弹出窗口的组件。以下是一个简单的例子，演示如何创建一个基本的模态框：<!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=...
在 Bootstrap 4 中，你可以使用轮播（Carousel）组件来创建滑动图片的效果。以下是一个简单的轮播例子：<!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="con...
在 Bootstrap 4 中，表单控件（Form Controls）是用于创建各种输入元素的样式的组件。以下是一个包含不同类型表单控件的简单例子：<!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><di...
在 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...
在 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><...
在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...
在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...
在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...
在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="...
在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...
最新文章