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

【前端】Bootstrap：快速开始

news 2025/9/21 0:19:31

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

深入浅出Asp.Net Core MVC应用开发系列-AspNetCore中的日志记录

ASP.NET Core 是一个跨平台的开源框架&#xff0c;用于在 Windows、macOS 或 Linux 上生成基于云的新式 Web 应用。 ASP.NET Core 中的日志记录 .NET 通过 ILogger API 支持高性能结构化日志记录&#xff0c;以帮助监视应用程序行为和诊断问题。 可以通过配置不同的记录提供程…...

编程新知 2025/9/19 1:42:30

springboot 百货中心供应链管理系统小程序

一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;百货中心供应链管理系统被用户普遍使用&#xff0c;为方…...

编程新知 2025/9/17 8:08:37

【HarmonyOS 5.0】DevEco Testing：鸿蒙应用质量保障的终极武器

——全方位测试解决方案与代码实战 一、工具定位与核心能力 DevEco Testing是HarmonyOS官方推出的​​一体化测试平台​​&#xff0c;覆盖应用全生命周期测试需求&#xff0c;主要提供五大核心能力&#xff1a; ​​测试类型​​​​检测目标​​​​关键指标​​功能体验基…...

编程新知 2025/9/20 10:41:06

dedecms 织梦自定义表单留言增加ajax验证码功能

增加ajax功能模块&#xff0c;用户不点击提交按钮&#xff0c;只要输入框失去焦点&#xff0c;就会提前提示验证码是否正确。 一&#xff0c;模板上增加验证码 <input name"vdcode"id"vdcode" placeholder"请输入验证码" type"text&quo…...

编程新知 2025/9/14 12:35:23

Nginx server_name 配置说明

Nginx 是一个高性能的反向代理和负载均衡服务器&#xff0c;其核心配置之一是 server 块中的 server_name 指令。server_name 决定了 Nginx 如何根据客户端请求的 Host 头匹配对应的虚拟主机&#xff08;Virtual Host&#xff09;。 1. 简介 Nginx 使用 server_name 指令来确定…...

编程新知 2025/9/6 16:47:17

【Go】3、Go语言进阶与依赖管理

前言 本系列文章参考自稀土掘金上的 【字节内部课】公开课&#xff0c;做自我学习总结整理。 Go语言并发编程 Go语言原生支持并发编程&#xff0c;它的核心机制是 Goroutine 协程、Channel 通道&#xff0c;并基于CSP&#xff08;Communicating Sequential Processes&#xff0…...

编程新知 2025/7/11 5:22:11

【单片机期末】单片机系统设计

主要内容&#xff1a;系统状态机&#xff0c;系统时基&#xff0c;系统需求分析&#xff0c;系统构建&#xff0c;系统状态流图 一、题目要求 二、绘制系统状态流图 题目&#xff1a;根据上述描述绘制系统状态流图&#xff0c;注明状态转移条件及方向。 三、利用定时器产生时…...

编程新知 2025/9/7 11:36:19

《基于Apache Flink的流处理》笔记

思维导图 1-3 章 4-7章 8-11 章 参考资料 源码&#xff1a; https://github.com/streaming-with-flink 博客 https://flink.apache.org/bloghttps://www.ververica.com/blog 聚会及会议 https://flink-forward.orghttps://www.meetup.com/topics/apache-flink https://n…...

编程新知 2025/9/14 7:52:42

什么？连接服务器也能可视化显示界面？：基于X11 Forwarding + CentOS + MobaXterm实战指南

文章目录 什么是X11？环境准备实战步骤1️⃣ 服务器端配置（CentOS）2️⃣ 客户端配置（MobaXterm）3️⃣ 验证X11 Forwarding4️⃣ 运行自定义GUI程序(Python示例)5️⃣ 成功效果![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/55aefaea8a9f477e86d065227851fe3d.pn…...

编程新知 2025/7/24 7:13:48

学习STC51单片机32（芯片为STC89C52RCRC）OLED显示屏2

每日一言 今天的每一份坚持&#xff0c;都是在为未来积攒底气。 案例&#xff1a;OLED显示一个A 这边观察到一个点&#xff0c;怎么雪花了就是都是乱七八糟的占满了屏幕。。 解释 &#xff1a; 如果代码里信号切换太快&#xff08;比如 SDA 刚变&#xff0c;SCL 立刻变&#…...

编程新知 2025/9/7 8:51:23