当前位置： 首页 > news >正文

【前端】Bootstrap：快速开始

news 2025/12/27 1:19:35

Bootstrap 是一个功能强大且易于使用的前端框架，专门用于创建响应式和移动优先的网页。学习Bootstrap不仅可以帮助你快速构建现代网页，还可以提升你对前端开发流程的理解。本教程将从基础概念开始，逐步引导你掌握Bootstrap，并通过实践项目巩固所学知识。

什么是Bootstrap

Bootstrap 是由 Twitter 团队开发的一个前端框架，主要用于加快网页的开发速度。它包括了大量的CSS和JavaScript组件，如按钮、表单、导航栏、卡片等。Bootstrap 的最大特点是提供了响应式设计的支持，通过简单的类名，你可以创建适用于不同设备屏幕尺寸的网站。

  • 官方资源：Bootstrap官网

安装Bootstrap

要开始使用Bootstrap，你可以选择以下方式之一进行安装：

使用CDN引入

最简单的方式是通过CDN在HTML中引入Bootstrap的CSS和JavaScript文件。只需在HTML文件的<head>和<body>中添加如下代码：

<head><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><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</body>

本地安装

你也可以下载Bootstrap的源文件或使用npm进行安装：

  • 下载源文件：Bootstrap下载

  • 使用npm安装：

    npm install bootstrap

创建基本的HTML结构

创建一个HTML文件，并添加基本的Bootstrap结构：

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>我的Bootstrap页面</title><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body><div class="container"><h1 class="mt-5">欢迎使用Bootstrap!</h1><p class="lead">这是一个简单的Bootstrap示例页面。</p><button class="btn btn-primary">点击我</button>
</div><script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.0.7/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

使用Bootstrap组件

Bootstrap提供了大量的组件，下面是一些常见的组件及其用法：

  1. 按钮：
<button class="btn btn-success">成功按钮</button>
<button class="btn btn-danger">失败按钮</button>
  1. 导航条：
<nav class="navbar navbar-expand-lg navbar-light bg-light"><a class="navbar-brand" href="#">我的网站</a><button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="切换导航"><span class="navbar-toggler-icon"></span></button><div class="collapse navbar-collapse" id="navbarNav"><ul class="navbar-nav"><li class="nav-item active"><a class="nav-link" href="#">首页 <span class="sr-only">(当前)</span></a></li><li class="nav-item"><a class="nav-link" href="#">特性</a></li><li class="nav-item"><a class="nav-link" href="#">定价</a></li></ul></div>
</nav>
  1. 卡片：
<div class="card" style="width: 18rem;"><div class="card-body"><h5 class="card-title">卡片标题</h5><p class="card-text">一些快速示例文本，用于展示卡片内容的填充。</p><a href="#" class="btn btn-primary">去某处</a></div>
</div>

自定义样式

你可以通过自己的CSS文件来定制Bootstrap样式。在HTML文件中，添加你的CSS文件链接：

<link rel="stylesheet" href="styles.css">

在styles.css中添加自定义样式：

body {background-color: #f8f9fa;
}

总结

通过以上步骤，你已经创建了一个基本的Bootstrap页面，并了解了一些常用组件。Bootstrap使得前端开发变得更加高效与便捷。继续学习和实践，你会在使用中越来越得心应手！

相关文章：

【前端】Bootstrap：快速开始

Bootstrap 是一个功能强大且易于使用的前端框架&#xff0c;专门用于创建响应式和移动优先的网页。学习Bootstrap不仅可以帮助你快速构建现代网页&#xff0c;还可以提升你对前端开发流程的理解。本教程将从基础概念开始&#xff0c;逐步引导你掌握Bootstrap&#xff0c;并通过…...

编程日记 2024/10/15 21:18:41

文献阅读（222） VVQ协议死锁

题目&#xff1a;VVQ: Virtualizing Virtual Channel for Cost-Efficient Protocol Deadlock Avoidance时间&#xff1a;2023会议&#xff1a;HPCA研究机构&#xff1a;KAIST request-reply协议死锁如下图所示&#xff0c;每个node收到request之后发送reply&#xff0c;但是想…...

编程日记 2024/10/15 21:17:40

Node.js管理工具NVM

nvm&#xff08;Node Version Manager&#xff09;是一个用于管理多个 Node.js 版本的工具。以下是 nvm 的使用方法和一些常见命令&#xff1a; 一、安装 nvm 下载 nvm&#xff1a; 地址&#xff1a;https://github.com/coreybutler/nvm-windows/releases访问 nvm 的 GitHub 仓…...

编程日记 2024/10/15 21:16:38

云原生后端

云原生后端&#xff08;Cloud-Native Backend&#xff09;是指在云计算环境中&#xff0c;利用云原生技术&#xff08;如容器、微服务、服务网格等&#xff09;构建和部署后端应用程序的一种方法。以下是对云原生后端的详细讲解&#xff1a; 1. 定义 云原生是一种设计和构建应…...

编程日记 2024/10/15 21:15:37

充电宝哪个品牌值得买？2024年五款靠谱充电宝推荐

哪个品牌充电宝值得买&#xff1f;用过这么多款充电宝&#xff0c;个人还是觉得充电快、小巧便携的充电宝使用会更加的方便&#xff01;在当今快节奏的生活中&#xff0c;手机已成为我们不可或缺的伙伴。然而&#xff0c;随着智能手机功能的日益强大&#xff0c;电池续航问题也…...

编程日记 2024/10/15 21:14:36

YOLOv11对比YOLOV8网络结构变化分析，帮助你真正的理解和学习yolo框架

本文在大佬的文章YOLOv11 | 一文带你深入理解ultralytics最新作品yolov11的创新 | 训练、推理、验证、导出 &#xff08;附网络结构图&#xff09;基础上做了一些补充。 一、YOLOv11和YOLOv8对比 二、YOLOv11的网络结构图 下面的图片为YOLOv11的网络结构图。 三、YOLOv11…...

编程日记 2024/10/15 21:12:34

弃用RestTemplate，RestClient真香！

在Spring框架的发展历程中&#xff0c;RestTemplate作为发起HTTP请求的同步API&#xff0c;曾经扮演着举足轻重的角色。然而&#xff0c;随着技术的不断进步和微服务架构的普及&#xff0c;RestTemplate的局限性逐渐显现&#xff0c;尤其是在处理高并发和异步请求时。因此&…...

编程日记 2024/10/15 21:11:32

electron-vite_10electron-updater软件更新

网很多electron-updater更新文章&#xff0c;这里只简单写一下演示代码&#xff1b; 为什么选择 electron-updater插件可以自动更新应用程序,同时支持多个平台;比官方要强; 官方的autoUpdater仅支持macOS 和 Windows 自动更新; 注意是自动&#xff0c;直接更新那种; 脚手架中是…...

编程日记 2024/10/15 21:09:30

React native之全局变量存储AsyncStorage

AsyncStorage是React native中对变量&#xff0c;对象进行全局存储&#xff0c;读取的异步使用对象。以key值进行存储。但是只能存储字符串数据&#xff0c;想存储对象&#xff0c;可把对象JSON进行序列化存储&#xff0c;读取的时候再转成JSON对象。 AsyncStorage.getItem()-…...

编程日记 2024/10/15 21:08:29

获取vue实例

需要注意的是&#xff0c;无论通过哪种方式获取元素&#xff0c;如果元素为 vue 组件&#xff0c;则需要在子组件中使用 defineExpose 进行暴露。 在父组件中&#xff0c;我们静态绑定 childRef&#xff1a; 在子组件中&#xff0c;我们需要通过defineExpose函数&#xff0c;手…...

编程日记 2024/10/15 21:06:25

基于Python实现电影推荐系统

电影推荐系统 标签&#xff1a;Tensorflow、矩阵分解、Surprise、PySpark 1、用Tensorflow实现矩阵分解 1.1、定义one_batch模块 import numpy as np import pandas as pddef read_and_process(filename, sep ::):col_names [user, item, rate, timestamp]df pd.read_cs…...

编程日记 2024/10/15 21:05:24

【linux】进程理解

&#x1f525;个人主页&#xff1a;Quitecoder &#x1f525;专栏&#xff1a;linux笔记仓 目录 01.进程的基本概念进程的组成部分进程的特性进程的状态 02.PCBPCB的组成部分task_structtask_struct 的主要组成部分 03.进程属性查看进程 04.通过系统调用创建进程-fork初识工作…...

编程日记 2024/10/15 21:04:22

文件IO练习1

题目一&#xff1a; 1、使用fread和fwrite完成两个文件的拷贝&#xff0c;要求源文件和目标文件由外界输入 实现代码&#xff1a; #define LEN_BUF 256int main(int argc, const char *argv[]) {if(argc ! 3){fprintf(stderr,"程序入参输入有误\n");return -1;}FILE…...

编程日记 2024/10/15 21:03:21

c++ std::future 和 std::promise 的实现工作原理简介

为了便于理解 std::future 和 std::promise 的实现工作原理&#xff0c;我们可以创建一个简化的版本。这包括共享状态、Promise 设置值、Future 获取值的核心机制。我们的示例代码将实现 SimplePromise 和 SimpleFuture 两个类&#xff0c;二者通过一个共享状态实现线程间的通信…...

编程日记 2024/10/15 20:59:18

MATLAB(Octave)混电动力能耗评估

&#x1f3af;要点 处理电动和混动汽车能耗的后向和前向算法模型(simulink)&#xff0c;以及图形函数、后处理函数等实现。构建储能元数据信息&#xff1a;电池标称特性、电池标识符等以及静止、恒定电流和恒定电压等特征阶段。使用电流脉冲或要识别的等效电路模型类型配置阻抗…...

编程日记 2024/10/15 20:58:17

opencv学习：人脸识别器特征提取BPHFaceRecognizer_create算法的使用

BPHFaceRecognizer_create算法 在OpenCV中&#xff0c;cv2.face.LBPHFaceRecognizer_create()函数用于创建一个局部二值模式直方图&#xff08;Local Binary Patterns Histograms&#xff0c;简称LBPH&#xff09;人脸识别器。LBPH是一种用于人脸识别的特征提取方法&#xff0…...

编程日记 2024/10/15 20:55:14

HTML+CSS总结【量大管饱】

文章目录 前言HTML总结语义化标签常用标签H5新的语义元素H5的媒体标签\<embed> 元素&#xff08;少用&#xff09;\<object>元素&#xff08;少用&#xff09;\<audio>\<video> 元素包含关系iframe元素嵌入flash内容常用表单inputselect CSS总结权重样…...

编程日记 2024/10/15 20:54:13

Android开发之Broadcast Receive（广播机制）其实开发如此简单

什么是BroadcastReceiver BroadcastReceiver&#xff08;广播接收器&#xff09;用于响应来自其他应用程序或者系统的广播消息。这些消息有时被称为事件或者意图。本质上来讲BroadcastReceiver是一个全局的监听器&#xff0c;隶属于Android四大组件之一。 使用场景 1、 不同…...

编程日记 2024/10/15 20:53:11

Chromium 中chrome.cookies扩展接口c++实现分析

chrome.cookies 使用 chrome.cookies API 查询和修改 Cookie&#xff0c;并在 Cookie 发生更改时收到通知。 更多参考官网定义&#xff1a;chrome.cookies | API | Chrome for Developers (google.cn) 本文以加载一个清理cookies功能扩展为例 https://github.com/Google…...

编程日记 2024/10/15 20:52:10

excel筛选多个单元格内容

通常情况下&#xff0c;excel单元格筛选时&#xff0c;只筛选一个条件&#xff0c;如果要筛选多个条件&#xff0c;可以如下操作&#xff1a; 字符串中间用空格分隔就行。...

编程日记 2024/10/15 20:51:09

挑战杯推荐项目

“人工智能”创意赛 - 智能艺术创作助手&#xff1a;借助大模型技术&#xff0c;开发能根据用户输入的主题、风格等要求&#xff0c;生成绘画、音乐、文学作品等多种形式艺术创作灵感或初稿的应用&#xff0c;帮助艺术家和创意爱好者激发创意、提高创作效率。 ​ - 个性化梦境…...

编程新知 2025/11/6 5:46:16

python/java环境配置

环境变量放一起 python&#xff1a; 1.首先下载Python Python下载地址&#xff1a;Download Python | Python.org downloads ---windows -- 64 2.安装Python 下面两个&#xff0c;然后自定义&#xff0c;全选 可以把前4个选上 3.环境配置 1&#xff09;搜高级系统设置 2…...

编程新知 2025/12/15 13:15:32

AtCoder 第409​场初级竞赛 A~E题解

A Conflict 【题目链接】 原题链接&#xff1a;A - Conflict 【考点】 枚举 【题目大意】 找到是否有两人都想要的物品。 【解析】 遍历两端字符串&#xff0c;只有在同时为 o 时输出 Yes 并结束程序&#xff0c;否则输出 No。 【难度】 GESP三级 【代码参考】 #i…...

编程新知 2025/12/16 4:45:38

HBuilderX安装（uni-app和小程序开发）

下载HBuilderX 访问官方网站&#xff1a;https://www.dcloud.io/hbuilderx.html 根据您的操作系统选择合适版本&#xff1a; Windows版&#xff08;推荐下载标准版&#xff09; Windows系统安装步骤 运行安装程序&#xff1a; 双击下载的.exe安装文件 如果出现安全提示&…...

编程新知 2025/12/15 13:32:19

土地利用/土地覆盖遥感解译与基于CLUE模型未来变化情景预测；从基础到高级，涵盖ArcGIS数据处理、ENVI遥感解译与CLUE模型情景模拟等

&#x1f50d; 土地利用/土地覆盖数据是生态、环境和气象等诸多领域模型的关键输入参数。通过遥感影像解译技术&#xff0c;可以精准获取历史或当前任何一个区域的土地利用/土地覆盖情况。这些数据不仅能够用于评估区域生态环境的变化趋势&#xff0c;还能有效评价重大生态工程…...

编程新知 2025/9/12 15:10:44

华为云Flexus+DeepSeek征文｜DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建

华为云FlexusDeepSeek征文&#xff5c;DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建 前言 如今大模型其性能出色&#xff0c;华为云 ModelArts Studio_MaaS大模型即服务平台华为云内置了大模型&#xff0c;能助力我们轻松驾驭 DeepSeek-V3/R1&#xff0c;本文中将分享如何…...

编程新知 2025/12/9 6:34:50

C# 求圆面积的程序（Program to find area of a circle）

给定半径r&#xff0c;求圆的面积。圆的面积应精确到小数点后5位。 例子&#xff1a; 输入&#xff1a;r 5 输出&#xff1a;78.53982 解释&#xff1a;由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982&#xff0c;因为我们只保留小数点后 5 位数字。 输…...

编程新知 2025/12/7 16:18:19

【LeetCode】3309. 连接二进制表示可形成的最大数值（递归|回溯|位运算）

LeetCode 3309. 连接二进制表示可形成的最大数值&#xff08;中等&#xff09; 题目描述解题思路Java代码 题目描述 题目链接&#xff1a;LeetCode 3309. 连接二进制表示可形成的最大数值&#xff08;中等&#xff09; 给你一个长度为 3 的整数数组 nums。 现以某种顺序 连接…...

编程新知 2025/7/5 18:01:05

Rust 开发环境搭建

环境搭建 1、开发工具RustRover 或者vs code 2、Cygwin64 安装 https://cygwin.com/install.html 在工具终端执行&#xff1a; rustup toolchain install stable-x86_64-pc-windows-gnu rustup default stable-x86_64-pc-windows-gnu ​ 2、Hello World fn main() { println…...

编程新知 2025/12/24 20:39:02

手机平板能效生态设计指令EU 2023/1670标准解读

手机平板能效生态设计指令EU 2023/1670标准解读 以下是针对欧盟《手机和平板电脑生态设计法规》(EU) 2023/1670 的核心解读&#xff0c;综合法规核心要求、最新修正及企业合规要点&#xff1a; 一、法规背景与目标 生效与强制时间 发布于2023年8月31日&#xff08;OJ公报&…...

编程新知 2025/12/22 18:09:39