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

初试Bootstrap前端框架

news 2026/5/18 7:51:35

文章目录

  • 一、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、浏览网页&#xff0c;查看结果5、登录按钮事件处理6、浏览网页&#xff0c;查看结果 三、实战小结 一、Bootstrap概述 大家好&#xff0c;今天我们将一起学习一个非常流行的前端框架——Boot…...

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

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

mysql数据库&#xff1a;超键、候选键、主键与外键 1、超键&#xff08;Superkey&#xff09;2、候选键&#xff08;Candidate Key&#xff09;3、主键&#xff08;Primary Key&#xff09;4、外键&#xff08;Foreign Key&#xff09; &#x1f496;The Begin&#x1f496;点点…...

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

cv2.waitkey(30) 按键盘无效

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

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

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

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

编程日记 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用户&#xff0c;设置root用户登录密码 hunterlocalhost:/$ sudo passwd root New password: Retype new password…...

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

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

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

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

Redisson分布式锁的概念和使用

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

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

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

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

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

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

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

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

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

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

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

UDP与TCP那个传输更快

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

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

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

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

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

用PCA给高维数据‘瘦身’：从鸢尾花数据集到人脸图像，实战对比降维效果与可视化技巧

用PCA给高维数据‘瘦身’&#xff1a;从鸢尾花数据集到人脸图像&#xff0c;实战对比降维效果与可视化技巧 当面对成百上千维的数据时&#xff0c;我们常会陷入"维度灾难"的困境——计算资源吃紧、模型训练缓慢&#xff0c;更糟的是噪声干扰导致分析结果失真。主成分…...

编程新知 2026/5/17 9:59:23

AI智能体生态的包管理器：agenticmarket-cli 设计与实践

1. 项目概述&#xff1a;一个面向AI智能体生态的命令行工具如果你和我一样&#xff0c;长期在AI智能体&#xff08;Agent&#xff09;这个领域里折腾&#xff0c;那你肯定经历过这样的场景&#xff1a;为了测试一个最新的开源智能体框架&#xff0c;你需要先找到它的GitHub仓库…...

编程新知 2026/5/17 9:40:46

Arm Cortex-X2/X3架构解析与性能优化实践

1. Arm Cortex-X2/X3集群架构概述在Armv9架构的高性能计算领域&#xff0c;Cortex-X2和X3代表了当前最先进的CPU设计理念。作为DynamIQ共享单元(DSU)的核心组件&#xff0c;它们通过可配置的缓存层次结构和智能一致性协议&#xff0c;为现代异构计算提供了灵活的解决方案。1.1 …...

编程新知 2026/5/17 8:28:10

DLSS Swapper终极指南：免费开源的游戏DLSS智能管理工具

DLSS Swapper终极指南&#xff1a;免费开源的游戏DLSS智能管理工具 【免费下载链接】dlss-swapper 项目地址: https://gitcode.com/GitHub_Trending/dl/dlss-swapper DLSS Swapper是一款革命性的免费开源工具&#xff0c;专为PC游戏玩家设计&#xff0c;能够智能管理、…...

编程新知 2026/5/17 8:00:18

Path of Building：3个步骤从Build小白到规划大师的完整指南

Path of Building&#xff1a;3个步骤从Build小白到规划大师的完整指南 【免费下载链接】PathOfBuilding Offline build planner for Path of Exile. 项目地址: https://gitcode.com/GitHub_Trending/pa/PathOfBuilding Path of Building作为流放之路玩家最信赖的Build规…...

编程新知 2026/5/17 7:21:30

Blitz.js全栈开发框架：零API理念与Next.js深度集成实战

1. 项目概述&#xff1a;一个颠覆性的全栈开发框架如果你和我一样&#xff0c;在过去的几年里&#xff0c;一直在React生态圈里打转&#xff0c;从Create React App到Next.js&#xff0c;再到尝试自己搭建一套包含身份验证、数据层、API路由的完整应用&#xff0c;那你一定对那…...

编程新知 2026/5/17 7:18:00

Arduino nRF52 BLE开发：GATT服务与特征值配置实战详解

1. 项目概述如果你正在用Arduino和nRF52系列芯片&#xff08;比如nRF52832或nRF52840&#xff09;做蓝牙低功耗&#xff08;BLE&#xff09;开发&#xff0c;那你肯定绕不开GATT&#xff08;通用属性配置文件&#xff09;这一关。GATT是BLE通信的“语言规则”&#xff0c;它定义…...

编程新知 2026/5/17 4:44:54

MedAgentBench：大模型临床决策能力评估基准详解与应用

1. 项目概述&#xff1a;当大模型成为医疗决策的“实习生” 最近在医疗AI的圈子里&#xff0c;一个名为“MedAgentBench”的开源项目引起了不小的讨论。这个由斯坦福机器学习组&#xff08;Stanford ML Group&#xff09;发布的项目&#xff0c;其核心目标非常明确&#xff1a;…...

编程新知 2026/5/17 4:20:16

Arm Neoverse-V2/V3缓存与内存参数优化指南

1. Arm Neoverse-V2/V3集群架构概述Arm Neoverse系列处理器作为数据中心和基础设施领域的重要计算引擎&#xff0c;其V2/V3代架构在缓存子系统和内存管理方面进行了显著优化。作为从业多年的系统架构师&#xff0c;我认为理解这些处理器的参数配置对性能调优至关重要。Neoverse…...

编程新知 2026/5/17 3:27:43

ElevenLabs希伯来文语音合成：从API调用失败到99.2%自然度达标的7步生产级优化流程

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;ElevenLabs希伯来文语音合成&#xff1a;从API调用失败到99.2%自然度达标的7步生产级优化流程 ElevenLabs 官方虽未明确标注希伯来语&#xff08;he-IL&#xff09;为“fully supported”&#xff0c;但…...

编程新知 2026/5/17 0:32:43