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

初试Bootstrap前端框架

news 2026/3/31 12:07:09

文章目录

  • 一、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

别再手动改daemon.json了！1Panel面板里一键配置Docker国内镜像源（附最新可用源列表）

1Panel面板实战&#xff1a;3分钟搞定Docker国内镜像加速配置 刚部署完1Panel的新用户总会遇到一个经典问题——Docker拉取镜像慢得像蜗牛爬。传统解决方案是手动编辑daemon.json文件&#xff0c;但如今有了更优雅的选择。作为一款现代化服务器管理面板&#xff0c;1Panel将复杂…...

编程新知 2026/3/31 10:36:52

Kafka消费者组避坑指南：从位移提交到重平衡的实战经验

Kafka消费者组实战避坑指南&#xff1a;从位移管理到重平衡优化 在分布式消息系统中&#xff0c;Kafka消费者组的稳定性直接决定了数据处理的可靠性。我曾亲眼见证过一个电商大促场景下&#xff0c;由于消费者组配置不当导致百万级订单积压的故障。本文将分享七个关键场景的深度…...

编程新知 2026/3/31 10:30:44

S2-Pro数据库课程设计助手：从需求分析到SQL生成的全程辅助

S2-Pro数据库课程设计助手&#xff1a;从需求分析到SQL生成的全程辅助 1. 课程设计的痛点与解决方案 每到学期末&#xff0c;数据库课程设计就成了计算机专业学生的"必修课"。面对一个陌生的业务场景&#xff0c;从零开始梳理需求、设计E-R图、编写SQL语句&#xf…...

编程新知 2026/3/31 9:52:16

手把手教你用VSCode快速定位并修改RuoYi框架的页面标题和图标（避坑指南）

高效定制RuoYi前端界面&#xff1a;VSCode全局搜索实战指南 刚接触RuoYi框架的开发者常会遇到这样的困扰&#xff1a;想修改浏览器标签页标题或系统Logo&#xff0c;却不知从何下手。前后端分离的项目结构让配置文件散落在各处&#xff0c;而手动翻找无异于大海捞针。本文将带你…...

编程新知 2026/3/31 8:57:52

COSL超声相控阵列的声场分布与聚焦深度仿真

cosmol超声相控阵列声场分布和聚焦深度仿真 &#xff08;可根据需求修改&#xff09;超声相控阵列这玩意儿在工业检测和医疗领域用得贼多&#xff0c;核心就是通过控制不同阵元的发射时序实现声波聚焦。今天咱们用COMSOL搞个简单的二维仿真&#xff0c;看看怎么让声场在特定深度…...

编程新知 2026/3/31 8:45:48

Android BLE开发实战：从BlueDroid扫描流程到性能调优全解析（附代码示例）

Android BLE开发深度优化&#xff1a;从BlueDroid扫描机制到实战性能调优 1. 理解BLE扫描的核心机制 在Android蓝牙低功耗&#xff08;BLE&#xff09;开发中&#xff0c;扫描机制是连接设备的第一步&#xff0c;也是最容易出现性能瓶颈的环节。与传统的蓝牙扫描不同&#xff0…...

编程新知 2026/3/31 7:15:05

Nanobot技能扩展开发：自定义OpenClaw功能模块教程

Nanobot技能扩展开发&#xff1a;自定义OpenClaw功能模块教程 1. 引言 想给你的Nanobot智能助手添加一些个性化功能吗&#xff1f;比如让它帮你查天气、管理待办事项&#xff0c;或者连接你常用的办公软件&#xff1f;今天就来手把手教你如何为Nanobot开发自定义技能模块。 …...

编程新知 2026/3/31 6:26:40

知识科普短片，AI如何“看懂”并剪出逻辑？揭秘分段剪辑的内在逻辑链

傍晚&#xff0c;你面对电脑屏幕&#xff0c;刚刚录完一段长达2小时的行业知识分享。你的目标是将其剪成一部15分钟、节奏明快的知识科普短片。手动操作意味着你要反复聆听&#xff0c;识别核心论点&#xff0c;标记关键转折&#xff0c;再小心翼翼地将碎片串联——这个过程动辄…...

编程新知 2026/3/31 6:06:32

Qwen3-1.7B推理模式切换体验：思考模式与非思考模式效果对比

Qwen3-1.7B推理模式切换体验&#xff1a;思考模式与非思考模式效果对比 1. 引言&#xff1a;双模式推理的创新价值 在边缘计算和轻量化AI模型快速发展的今天&#xff0c;Qwen3-1.7B通过独特的动态双模式架构&#xff0c;为用户提供了灵活的推理选择。这款17亿参数的轻量级大语…...

编程新知 2026/3/31 6:04:32

SinricPro Business SDK：面向量产的ESP32物联网固件开发套件

1. SinricPro Business SDK 概述SinricPro Business SDK 是专为商业化物联网产品设计的嵌入式软件开发套件&#xff0c;其核心定位并非面向 hobbyist 的快速演示工具&#xff0c;而是面向量产级硬件产品的固件基础设施。与社区版 SinricPro SDK 不同&#xff0c;Business SDK 在…...

编程新知 2026/3/31 5:26:13