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

初试Bootstrap前端框架

news 2025/11/15 6:11:07

文章目录

一、Bootstrap概述
二、Bootstrap实例
- 1、创建网页
- 2、编写代码
- 3、代码说明
- 4、浏览网页，查看结果
- 5、登录按钮事件处理
- 6、浏览网页，查看结果
三、实战小结

一、Bootstrap概述

大家好，今天我们将一起学习一个非常流行的前端框架——Bootstrap。Bootstrap是一个用于快速开发响应式和移动优先网页的框架。它提供了丰富的CSS类和JavaScript插件，帮助我们简化布局、导航、表单、按钮等常见组件的创建。Bootstrap的核心特点包括易用性、灵活性和广泛的社区支持，这使得开发者能够高效地构建美观且功能强大的网站。

二、Bootstrap实例

1、创建网页

首先，我们将创建一个名为bootstrap_demo.html的网页文件。

2、编写代码

接下来，我们需要导入Bootstrap框架的样式和JavaScript文件，然后编写页面代码。

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>演示Bootstrap</title><!-- 导入Bootstrap框架的CSS --><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous"><!-- 导入Bootstrap框架的JS --><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</head>
<body><div class="container mt-5"><div class="row justify-content-center"><div class="col-md-6"><div class="card"><div class="card-header"><h3 class="text-center">用户登录</h3></div><div class="card-body"><form action="#" method="post"><div class="mb-3 row"><label for="username" class="col-sm-3 col-form-label">账号</label><div class="col-sm-9"><input type="text" class="form-control" id="username" placeholder="请输入用户名" required></div></div><div class="mb-3 row"><label for="password" class="col-sm-3 col-form-label">密码</label><div class="col-sm-9"><input type="password" class="form-control" id="password" placeholder="请输入密码" required></div></div><div class="d-grid gap-2"><button type="submit" class="btn btn-primary btn-block">登录</button></div></form></div></div></div></div></div>
</body>
</html>

3、代码说明

container mt-5：创建一个容器，并增加顶部外边距。
row justify-content-center：创建一个行，并使列居中对齐。
col-md-6：创建一个中等屏幕及以上宽度为6列的列。
card：创建一个卡片组件，用于包裹表单。
card-header：创建卡片的头部，包含标题。
text-center：设置标题居中对齐。
card-body：创建卡片的主体，包含表单内容。
form：创建一个表单，使用POST方法提交。
mb-3 row：创建一个行，并增加底部外边距。
col-sm-3 col-form-label：创建一个标签，设置标签宽度为3列。
col-sm-9：创建一个列，宽度为9列，用于包含输入框。
form-control：应用Bootstrap样式的文本输入框。
d-grid gap-2：创建一个网格布局，子元素占满整行，子元素之间添加间距。
btn btn-primary btn-block：创建一个按钮，设置按钮样式，并使其占满整行。

4、浏览网页，查看结果

不输入用户名和密码，单击【登录】按钮。
输入用户名但不输入密码，单击【登录】按钮。

5、登录按钮事件处理

导入jQuery库。
设置登录按钮的id属性为btnLogin。
编写脚本代码，处理登录按钮的单击事件。

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>演示Bootstrap</title><!-- 导入Bootstrap框架的CSS --><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous"><!-- 导入Bootstrap框架的JS --><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script><!-- 导入jQuery库 --><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> 
</head>
<body><div class="container mt-5"><div class="row justify-content-center"><div class="col-md-6"><div class="card"><div class="card-header"><h3 class="text-center">用户登录</h3></div><div class="card-body"><form action="#" method="post"><div class="mb-3 row"><label for="username" class="col-sm-3 col-form-label">账号</label><div class="col-sm-9"><input type="text" class="form-control" id="username" placeholder="请输入用户名" required></div></div><div class="mb-3 row"><label for="password" class="col-sm-3 col-form-label">密码</label><div class="col-sm-9"><input type="password" class="form-control" id="password" placeholder="请输入密码" required></div></div><div class="d-grid gap-2"><button id='btnLogin' type="submit" class="btn btn-primary btn-block">登录</button></div></form></div></div></div></div></div><script>$(document).ready(function() {// 编写登录按钮单击事件处理代码$('#btnLogin').click(function(){// 获取用户名和密码数据let username = $('#username').val();let password = $('#password').val();// 判断用户是否登录成功if (username == '无心剑' && password == '903213') {alert('恭喜，[' + username + ']，登录成功~');} else {alert('遗憾，[' + username + ']，登录失败~');}});});</script>
</body>
</html>

6、浏览网页，查看结果

输入正确的用户名和密码，单击【登录】按钮。
输入错误的用户名或密码，单击【登录】按钮。

三、实战小结

通过今天的学习，希望大家能够对Bootstrap有一个基本的了解，并能够运用它来快速开发响应式网页。

初试Bootstrap前端框架

文章目录一、Bootstrap概述二、Bootstrap实例1、创建网页2、编写代码3、代码说明4、浏览网页，查看结果5、登录按钮事件处理6、浏览网页，查看结果三、实战小结一、Bootstrap概述大家好，今天我们将一起学习一个非常流行的前端框架——Boot…...

编程日记 2024/9/26 11:59:04

mysql数据库：超键、候选键、主键与外键

mysql数据库：超键、候选键、主键与外键 1、超键（Superkey）2、候选键（Candidate Key）3、主键（Primary Key）4、外键（Foreign Key） 💖The Begin💖点点…...

编程日记 2024/9/26 11:58:03

音频转MP3格式困难？如何轻松实现wav转mp3？

格式多样化为我们带来了灵活性和创意的无限可能，但同时，不同格式间的转换也成为了不少用户面临的难题。尤其是当你手握珍贵的WAV音频文件，却希望它们能在更多设备上流畅播放或节省存储空间时，wav转mp3的需求便应运而生。WAV以其无…...

编程日记 2024/9/26 11:57:02

基于vue框架的大连盐业有限公司生产管理系统的设计与实现3hk5y（程序+源码+数据库+调试部署+开发环境）系统界面在最后面。

系统程序文件列表项目功能：计划员,工艺员,生产建模,生产计划,生产信息,生产监视,工艺质量,盐政信息开题报告内容一、引言随着信息技术的飞速发展和市场竞争的日益激烈，传统盐业企业如大连盐业有限公司正面临着转型升级的迫切需求。传统管理模式下…...

编程日记 2024/9/26 11:53:58

《深入理解JAVA虚拟机（第2版）》- 第13章 - 学习笔记【终章】

第13章线程安全与锁优化 13.1 概述面向过程的编程思想将数据和过程独立分开，数据是问题空间中的客体，程序代码是用来处理数据的，这种站在计算机角度来抽象和解决问题的思维方式，称为面向对象的编程思想。面向对象的编程思想…...

编程日记 2024/9/26 11:52:57

网络工程师学习笔记——网络互连与互联网（三）

TCP三次握手建立TCP连接是通过三次握手实现的，采用三报文握手主要是为了防止已失效的连接请求报文突然又传送到了，因而产生错误主动发起TCP连接建立的称为客户端被动等待的为TCP服务器，二者之间需要交换三个TCP报文段首先是客户端主动…...

编程日记 2024/9/26 11:49:53

【Tomcat】常见面试题整理共34题

文章目录 1. 简述什么是Tomcat？2. Tomcat的缺省端口是多少，怎么修改？3. 简述Tomcat 目录结构及作用4. 简述Tomcat有几种部署方式？5. 简述Tomcat容器是如何创建servlet类实例？6. Tomcat有哪几种Connector运行模式&#…...

编程日记 2024/9/26 11:48:50

到时间没回家又不接电话？如何迅速确定孩子的位置？

当孩子未按时回家且无法通过电话联系时，家长往往会感到焦虑。此时，如何迅速确定孩子的位置成为许多家长迫切需要解决的问题。利用智能手机定位技术是最常见的方法之一。大多数智能手机都内置GPS定位功能，通过“查找设备”应用，家…...

编程日记 2024/9/26 11:46:48

接口自动化--commons内容详解-02

上篇文章主要讲解了接口自动化主要架构框架，这篇文庄主要讲解commons中的内容 1. requests_utils.py 首先讲解这个工具类，主要是因为在接口自动化中，基本都有的接口都是发送请求，获取响应结果，唯一不同的是&#xff0…...

编程日记 2024/9/26 11:45:47

WanFangAi论文写作研究生论文写作神器在线生成真实数据，标注参考文献位置，表格公式代码流程图查重20以内，研究生论文写作技巧

WanFangAi是一个专业的学术论文辅助平台，它提供了一系列工具来帮助用户提升论文写作的效率和质量。以下是WanFangAi的一些核心功能:1.主题探索与文献搜索:用户可以输入关键词和研究领域，WanFangAi会迅速推荐合适的论文主题并提供相关的文献搜索服务。系统…...

编程日记 2024/9/26 11:44:46

cv2.waitkey(30) 按键盘无效

cv2.imshow("detection", color_image) # 窗口显示，显示名为 Capture_Videok cv2.waitKey(100) & 0xFF # 每帧数据延时 1ms，延时不能为 0，否则读取的结果会是静态帧 if k ord(s): # 键盘按一下s, 保存当前照片和机械臂位姿…...

编程日记 2024/9/26 11:39:40

【洛谷】P10417 [蓝桥杯 2023 国 A] 第 K 小的和的题解

【洛谷】P10417 [蓝桥杯 2023 国 A] 第 K 小的和的题解题目传送门题解 CSP-S1 补全程序，致敬全 A 的答案，和神奇的预言家。写一下这篇的题解说不定能加 CSP 2024 的 RP 首先看到 k k k 这么大的一个常数，就想到了二分。然后写一个判…...

编程日记 2024/9/26 11:35:36

Ubuntu24.04 安装ssh开启22端口及允许root用户远程登录

1、安装openssh-server插件开启22端口访问 # 安装ssh会默认启动服务并开启22端口 apt update apt install openssh-server 2、开启root用户远程访问激活root用户，设置root用户登录密码 hunterlocalhost:/$ sudo passwd root New password: Retype new password…...

编程日记 2024/9/26 11:33:34

STM32基础学习笔记-DHT11单总线协议面试基础题7

第七章、DHT11: 单总线协!议常见问题 1、DHT11是什么 ？有什么特性 ？ 2、单总线协议是什么 ？原理 ？DHT11的单总线协议的组成 ？ ## 1、DHT11定义单总线协议是一种用于在多个设备之间进行通信的协议，所有…...

编程日记 2024/9/26 11:31:32

Redisson分布式锁的概念和使用

Redisson分布式锁的概念和使用一简介1.1 什么是分布式锁？1.2 Redisson分布式锁的原理1.3 Redisson分布式锁的优势1.4 Redisson分布式锁的应用场景二案例2.1 锁竞争案例2.2 看门狗案例2.3 参考文章前言这是我在这个网站整理的笔记,有错误的地方请指出&#xff…...

编程日记 2024/9/26 11:30:31

uniapp小程序持续获取用户位置信息，后台位置获取

做一个小程序持续获取用户位置信息的功能，即使小程序切换到后台也能继续获取，getLocation这个api只有小程序在前台才能获取位置，所以不用这个先申请一个腾讯地图key 在uniapp项目配置源码视图里加上这个代码先获取权限，再开启…...

编程日记 2024/9/26 11:29:30

优化算法（五）—梯度下降算法（附MATLAB程序）

梯度下降算法（Gradient Descent）是一种常用的优化算法，用于寻找函数的局部最小值。它通过沿着函数梯度的反方向迭代地调整变量，以逐步找到最优解。梯度下降广泛应用于机器学习和深度学习中，特别是在训练模型时优化损失…...

编程日记 2024/9/26 11:28:29

TypeScript 设计模式之【单例模式】

文章目录 **单例模式**: 独一无二的特工我们为什么需要这样的特工?单例模式的秘密：如何培养这样的特工?特工的利与害代码实现单例模式的主要优点单例模式的主要缺点单例模式的适用场景总结单例模式: 独一无二的特工单例模式就像是一个秘密组织里的特殊特工。这…...

编程日记 2024/9/26 11:23:23

UDP与TCP那个传输更快

UDP（用户数据报协议）和 TCP（传输控制协议）是互联网协议栈中常用的两种传输层协议。它们在设计和应用上存在一些显著的差异，导致在传输速度和可靠性等方面表现不同。以下是它们之间的比较，特别是关于传输速度…...

编程日记 2024/9/26 11:22:21

如何把PDF样本册转换为网址链接

随着互联网的普及，将纸质或PDF格式的样本册转化为网址链接，以便于在线浏览和分享，变得越来越重要。本文将为您详细讲解如何将PDF样本册转换为网址链接，让您轻松实现线上展示和分享。一、了解PDF样本册与网址链接 1. PDF样本册…...

编程日记 2024/9/26 11:21:20

disk.sh #!/bin/bashcd /run/sr-mount/e54f0646-ae11-0457-b64f-eba4673b824c # 全部虚拟机物理磁盘文件存储 a$(ls -l | awk {print $NF} | cut -d. -f1) # 使用中的虚拟机物理磁盘文件 b$(xe vm-disk-list --multiple | grep uuid | awk {print $NF})printf "%s\n"…...

编程新知 2025/7/18 2:39:54

【笔记】WSL 中 Rust 安装与测试完整记录

#工作记录 WSL 中 Rust 安装与测试完整记录 1. 运行环境系统：Ubuntu 24.04 LTS (WSL2)架构：x86_64 (GNU/Linux)Rust 版本：rustc 1.87.0 (2025-05-09)Cargo 版本：cargo 1.87.0 (2025-05-06) 2. 安装 Rust 2.1 使用 Rust 官方安…...

编程新知 2025/11/12 15:21:51

JavaScript 数据类型详解

JavaScript 数据类型详解 JavaScript 数据类型分为原始类型（Primitive） 和对象类型（Object） 两大类，共 8 种（ES11）： 一、原始类型（7种） 1. undefined 定…...

编程新知 2025/10/30 21:24:32

MySQL：分区的基本使用

目录一、什么是分区二、有什么作用三、分类四、创建分区五、删除分区一、什么是分区 MySQL 分区（Partitioning）是一种将单张表的数据逻辑上拆分成多个物理部分的技术。这些物理部分（分区）可以独立存储、管理和优化，…...

编程新知 2025/11/13 17:07:10

安卓基础（Java 和 Gradle 版本）

1. 设置项目的 JDK 版本方法1：通过 Project Structure File → Project Structure... (或按 CtrlAltShiftS) 左侧选择 SDK Location 在 Gradle Settings 部分，设置 Gradle JDK 方法2：通过 Settings File → Settings... (或 CtrlAltS)…...

编程新知 2025/7/10 0:32:50