初试Bootstrap前端框架
文章目录
- 一、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…...
mysql数据库：超键、候选键、主键与外键
mysql数据库：超键、候选键、主键与外键 1、超键（Superkey）2、候选键（Candidate Key）3、主键（Primary Key）4、外键（Foreign Key） 💖The Begin💖点点…...
音频转MP3格式困难？如何轻松实现wav转mp3？
格式多样化为我们带来了灵活性和创意的无限可能，但同时，不同格式间的转换也成为了不少用户面临的难题。尤其是当你手握珍贵的WAV音频文件，却希望它们能在更多设备上流畅播放或节省存储空间时，wav转mp3的需求便应运而生。WAV以其无…...
基于vue框架的大连盐业有限公司生产管理系统的设计与实现3hk5y（程序+源码+数据库+调试部署+开发环境）系统界面在最后面。
系统程序文件列表 项目功能：计划员,工艺员,生产建模,生产计划,生产信息,生产监视,工艺质量,盐政信息 开题报告内容 一、引言 随着信息技术的飞速发展和市场竞争的日益激烈，传统盐业企业如大连盐业有限公司正面临着转型升级的迫切需求。传统管理模式下…...
《深入理解JAVA虚拟机（第2版）》- 第13章 - 学习笔记【终章】
第13章 线程安全与锁优化 13.1 概述 面向过程的编程思想 将数据和过程独立分开，数据是问题空间中的客体，程序代码是用来处理数据的，这种站在计算机角度来抽象和解决问题的思维方式，称为面向对象的编程思想。 面向对象的编程思想…...
网络工程师学习笔记——网络互连与互联网（三）
TCP三次握手 建立TCP连接是通过三次握手实现的，采用三报文握手主要是为了防止已失效的连接请求报文突然又传送到了，因而产生错误 主动发起TCP连接建立的称为客户端 被动等待的为TCP服务器，二者之间需要交换三个TCP报文段 首先是客户端主动…...
【Tomcat】常见面试题整理 共34题
文章目录 1. 简述什么是Tomcat？2. Tomcat的缺省端口是多少，怎么修改？3. 简述Tomcat 目录结构及作用4. 简述Tomcat有几种部署方式？5. 简述Tomcat容器是如何创建servlet类实例？6. Tomcat有哪几种Connector运行模式&#…...
到时间没回家又不接电话？如何迅速确定孩子的位置？
当孩子未按时回家且无法通过电话联系时，家长往往会感到焦虑。此时，如何迅速确定孩子的位置成为许多家长迫切需要解决的问题。 利用智能手机定位技术是最常见的方法之一。大多数智能手机都内置GPS定位功能，通过“查找设备”应用，家…...
接口自动化--commons内容详解-02
上篇文章主要讲解了接口自动化主要架构框架，这篇文庄主要讲解commons中的内容 1. requests_utils.py 首先讲解这个工具类，主要是因为在接口自动化中，基本都有的接口都是发送请求，获取响应结果，唯一不同的是࿰…...
WanFangAi论文写作研究生论文写作神器在线生成真实数据，标注参考文献位置，表格公式代码流程图查重20以内，研究生论文写作技巧
WanFangAi是一个专业的学术论文辅助平台，它提供了一系列工具来帮助用户提升论文写作的效率和质量。以下是WanFangAi的一些核心功能:1.主题探索与文献搜索:用户可以输入关键词和研究领域，WanFangAi会迅速推荐合适的论文主题并提供相关的文献搜索服务。系统…...
 按键盘无效)
cv2.waitkey(30) 按键盘无效
cv2.imshow("detection", color_image) # 窗口显示，显示名为 Capture_Videok cv2.waitKey(100) & 0xFF # 每帧数据延时 1ms，延时不能为 0，否则读取的结果会是静态帧 if k ord(s): # 键盘按一下s, 保存当前照片和机械臂位姿…...
【洛谷】P10417 [蓝桥杯 2023 国 A] 第 K 小的和 的题解
【洛谷】P10417 [蓝桥杯 2023 国 A] 第 K 小的和 的题解 题目传送门 题解 CSP-S1 补全程序，致敬全 A 的答案，和神奇的预言家。 写一下这篇的题解说不定能加 CSP 2024 的 RP 首先看到 k k k 这么大的一个常数，就想到了二分。然后写一个判…...
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…...
STM32基础学习笔记-DHT11单总线协议面试基础题7
第七章、DHT11: 单总线协!议 常见问题 1、DHT11是什么 ？有什么特性 ？ 2、单总线协议是什么 ？原理 ？DHT11的单总线协议的组成 ？ ## 1、DHT11定义 单总线协议是一种用于在多个设备之间进行通信的协议，所有…...
Redisson分布式锁的概念和使用
Redisson分布式锁的概念和使用 一 简介1.1 什么是分布式锁？1.2 Redisson分布式锁的原理1.3 Redisson分布式锁的优势1.4 Redisson分布式锁的应用场景 二 案例2.1 锁竞争案例2.2 看门狗案例2.3 参考文章 前言 这是我在这个网站整理的笔记,有错误的地方请指出ÿ…...
uniapp小程序持续获取用户位置信息，后台位置获取
做一个小程序持续获取用户位置信息的功能，即使小程序切换到后台也能继续获取，getLocation这个api只有小程序在前台才能获取位置，所以不用这个 先申请一个腾讯地图key 在uniapp项目配置源码视图里加上这个代码 先获取权限，再开启…...
优化算法（五）—梯度下降算法（附MATLAB程序）
梯度下降算法（Gradient Descent）是一种常用的优化算法，用于寻找函数的局部最小值。它通过沿着函数梯度的反方向迭代地调整变量，以逐步找到最优解。梯度下降广泛应用于机器学习和深度学习中，特别是在训练模型时优化损失…...
TypeScript 设计模式之【单例模式】
文章目录 **单例模式**: 独一无二的特工我们为什么需要这样的特工?单例模式的秘密：如何培养这样的特工?特工的利与害代码实现单例模式的主要优点单例模式的主要缺点单例模式的适用场景总结 单例模式: 独一无二的特工 单例模式就像是一个秘密组织里的特殊特工。这…...
UDP与TCP那个传输更快
UDP（用户数据报协议）和 TCP（传输控制协议）是互联网协议栈中常用的两种传输层协议。它们在设计和应用上存在一些显著的差异，导致在传输速度和可靠性等方面表现不同。以下是它们之间的比较，特别是关于传输速度…...
如何把PDF样本册转换为网址链接
随着互联网的普及，将纸质或PDF格式的样本册转化为网址链接，以便于在线浏览和分享，变得越来越重要。本文将为您详细讲解如何将PDF样本册转换为网址链接，让您轻松实现线上展示和分享。 一、了解PDF样本册与网址链接 1. PDF样本册…...
Linux应用开发之网络套接字编程(实例篇)
服务端与客户端单连接 服务端代码 #include <sys/socket.h> #include <sys/types.h> #include <netinet/in.h> #include <stdio.h> #include <stdlib.h> #include <string.h> #include <arpa/inet.h> #include <pthread.h> …...
零门槛NAS搭建：WinNAS如何让普通电脑秒变私有云？
一、核心优势：专为Windows用户设计的极简NAS WinNAS由深圳耘想存储科技开发，是一款收费低廉但功能全面的Windows NAS工具，主打“无学习成本部署” 。与其他NAS软件相比，其优势在于： 无需硬件改造：将任意W…...
从WWDC看苹果产品发展的规律
WWDC 是苹果公司一年一度面向全球开发者的盛会，其主题演讲展现了苹果在产品设计、技术路线、用户体验和生态系统构建上的核心理念与演进脉络。我们借助 ChatGPT Deep Research 工具，对过去十年 WWDC 主题演讲内容进行了系统化分析，形成了这份…...
ETLCloud可能遇到的问题有哪些？常见坑位解析
数据集成平台ETLCloud，主要用于支持数据的抽取（Extract）、转换（Transform）和加载（Load）过程。提供了一个简洁直观的界面，以便用户可以在不同的数据源之间轻松地进行数据迁移和转换。…...
【配置 YOLOX 用于按目录分类的图片数据集】
现在的图标点选越来越多，如何一步解决，采用 YOLOX 目标检测模式则可以轻松解决 要在 YOLOX 中使用按目录分类的图片数据集（每个目录代表一个类别，目录下是该类别的所有图片），你需要进行以下配置步骤&#x…...
Spring AI 入门：Java 开发者的生成式 AI 实践之路
一、Spring AI 简介 在人工智能技术快速迭代的今天，Spring AI 作为 Spring 生态系统的新生力量，正在成为 Java 开发者拥抱生成式 AI 的最佳选择。该框架通过模块化设计实现了与主流 AI 服务（如 OpenAI、Anthropic）的无缝对接&…...
数据库分批入库
今天在工作中，遇到一个问题，就是分批查询的时候，由于批次过大导致出现了一些问题，一下是问题描述和解决方案： 示例： // 假设已有数据列表 dataList 和 PreparedStatement pstmt int batchSize 1000; // …...
CMake控制VS2022项目文件分组
我们可以通过 CMake 控制源文件的组织结构，使它们在 VS 解决方案资源管理器中以“组”（Filter）的形式进行分类展示。 🎯 目标 通过 CMake 脚本将 .cpp、.h 等源文件分组显示在 Visual Studio 2022 的解决方案资源管理器中。 ✅ 支持的方法汇总（共4种） 方法描述是否推荐…...
AspectJ 在 Android 中的完整使用指南
一、环境配置（Gradle 7.0 适配） 1. 项目级 build.gradle // 注意：沪江插件已停更，推荐官方兼容方案 buildscript {dependencies {classpath org.aspectj:aspectjtools:1.9.9.1 // AspectJ 工具} } 2. 模块级 build.gradle plu…...
MySQL账号权限管理指南：安全创建账户与精细授权技巧
在MySQL数据库管理中，合理创建用户账号并分配精确权限是保障数据安全的核心环节。直接使用root账号进行所有操作不仅危险且难以审计操作行为。今天我们来全面解析MySQL账号创建与权限分配的专业方法。 一、为何需要创建独立账号？ 最小权限原则…...