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

【前端】Bootstrap：快速开始

news 2025/7/8 4:27:12

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

eNSP-Cloud(实现本地电脑与eNSP内设备之间通信)

说明&#xff1a; 想象一下&#xff0c;你正在用eNSP搭建一个虚拟的网络世界&#xff0c;里面有虚拟的路由器、交换机、电脑&#xff08;PC&#xff09;等等。这些设备都在你的电脑里面“运行”&#xff0c;它们之间可以互相通信&#xff0c;就像一个封闭的小王国。 但是&#…...

编程新知 2025/7/7 11:50:28

JavaSec-RCE

简介 RCE(Remote Code Execution)&#xff0c;可以分为:命令注入(Command Injection)、代码注入(Code Injection) 代码注入 1.漏洞场景&#xff1a;Groovy代码注入 Groovy是一种基于JVM的动态语言&#xff0c;语法简洁&#xff0c;支持闭包、动态类型和Java互操作性&#xff0c…...

编程新知 2025/7/5 21:02:11

OpenLayers 可视化之热力图

注&#xff1a;当前使用的是 ol 5.3.0 版本&#xff0c;天地图使用的key请到天地图官网申请&#xff0c;并替换为自己的key 热力图&#xff08;Heatmap&#xff09;又叫热点图&#xff0c;是一种通过特殊高亮显示事物密度分布、变化趋势的数据可视化技术。采用颜色的深浅来显示…...

编程新知 2025/7/6 21:38:30

CTF show Web 红包题第六弹

提示 1.不是SQL注入 2.需要找关键源码 思路 进入页面发现是一个登录框&#xff0c;很难让人不联想到SQL注入&#xff0c;但提示都说了不是SQL注入&#xff0c;所以就不往这方面想了 ​ 先查看一下网页源码&#xff0c;发现一段JavaScript代码&#xff0c;有一个关键类ctfs…...

编程新知 2025/7/8 1:18:05

转转集团旗下首家二手多品类循环仓店“超级转转”开业

6月9日&#xff0c;国内领先的循环经济企业转转集团旗下首家二手多品类循环仓店“超级转转”正式开业。 转转集团创始人兼CEO黄炜、转转循环时尚发起人朱珠、转转集团COO兼红布林CEO胡伟琨、王府井集团副总裁祝捷等出席了开业剪彩仪式。 据「TMT星球」了解&#xff0c;“超级…...

编程新知 2025/7/7 6:52:27

剑指offer20_链表中环的入口节点

链表中环的入口节点 给定一个链表&#xff0c;若其中包含环&#xff0c;则输出环的入口节点。 若其中不包含环&#xff0c;则输出null。 数据范围 节点 val 值取值范围 [ 1 , 1000 ] [1,1000] [1,1000]。 节点 val 值各不相同。 链表长度 [ 0 , 500 ] [0,500] [0,500]。 …...

编程新知 2025/7/6 0:48:46

什么是Ansible Jinja2

理解 Ansible Jinja2 模板 Ansible 是一款功能强大的开源自动化工具&#xff0c;可让您无缝地管理和配置系统。Ansible 的一大亮点是它使用 Jinja2 模板&#xff0c;允许您根据变量数据动态生成文件、配置设置和脚本。本文将向您介绍 Ansible 中的 Jinja2 模板&#xff0c;并通…...

编程新知 2025/7/3 14:45:13

使用 SymPy 进行向量和矩阵的高级操作

在科学计算和工程领域&#xff0c;向量和矩阵操作是解决问题的核心技能之一。Python 的 SymPy 库提供了强大的符号计算功能&#xff0c;能够高效地处理向量和矩阵的各种操作。本文将深入探讨如何使用 SymPy 进行向量和矩阵的创建、合并以及维度拓展等操作&#xff0c;并通过具体…...

编程新知 2025/7/6 21:40:59

【数据分析】R版IntelliGenes用于生物标志物发现的可解释机器学习

禁止商业或二改转载&#xff0c;仅供自学使用&#xff0c;侵权必究&#xff0c;如需截取部分内容请后台联系作者! 文章目录 介绍流程步骤1. 输入数据2. 特征选择3. 模型训练4. I-Genes 评分计算5. 输出结果 IntelliGenesR 安装包1. 特征选择2. 模型训练和评估3. I-Genes 评分计…...

编程新知 2025/7/7 0:36:17

Hive 存储格式深度解析：从 TextFile 到 ORC，如何选对数据存储方案？

在大数据处理领域&#xff0c;Hive 作为 Hadoop 生态中重要的数据仓库工具&#xff0c;其存储格式的选择直接影响数据存储成本、查询效率和计算资源消耗。面对 TextFile、SequenceFile、Parquet、RCFile、ORC 等多种存储格式&#xff0c;很多开发者常常陷入选择困境。本文将从底…...

编程新知 2025/6/23 2:50:47