初试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有一个基本的了解,并能够运用它来快速开发响应式网页。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/880332.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

在虚幻引擎中实时显示帧率

引擎自带了显示帧率的功能 但是只能在编辑器中显示 , 在游戏发布后就没有了 , 所以我们要自己做一个 创建一个控件蓝图 创建画布和文本 , 修改文本 文本绑定函数 , 点击创建绑定 添加一个名为 FPS 的变量 格式化文本 用大括号把变量包起来 {FPS Int} FPS 然后转到事件图表…

【论文串烧】多媒体推荐中的模态平衡学习 | 音视频语音识别中丢失导致的模态偏差对丢失视频帧鲁棒性的影响

文章目录 一、多媒体推荐中的模态平衡学习1.1 研究背景1.2 解决问题1.3 实施方案1.4 文章摘要1.5 文章重点1.6 文章图示图 1&#xff1a;不同模型变体在 AmazonClothing 数据集上的初步研究图 2&#xff1a;CKD模型架构的说明图 3&#xff1a;在 Amazon-Clothing 数据集上训练过…

Android 内核开发之—— repo 使用教程

前言 repo 是一个用于管理多个 Git 仓库的工具&#xff0c;特别适用于管理大型项目如 Android 的源码。它是由 Google 开发的&#xff0c;用于解决多个 Git 仓库的同步、管理和代码审查等问题。因此&#xff0c;做 Android 内核开发&#xff0c;首先要了解 repo 是什么&#x…

企业级-pdf预览-前后端

作者&#xff1a;fyupeng 技术专栏&#xff1a;☞ https://github.com/fyupeng 项目地址&#xff1a;☞ https://github.com/fyupeng/distributed-blog-system-api 留给读者 本文 一、介绍 对于PDF预览&#xff0c;有很多开发者都遇到过头疼的难题&#xff0c;今天给大家介绍…

数据库的全透明加密和半透明加密主要是针对数据存储安全的不同处理方式

数据库的全透明加密和半透明加密主要是针对数据存储安全的不同处理方式。 全透明加密&#xff08;也称作无损加密或自动加密&#xff09;就像是给文字戴上了一层无形的面具。在用户看来&#xff0c;他们在数据库中输入的是明文&#xff08;比如姓名、密码&#xff09;&#xf…

科研绘图系列:R语言多个AUC曲线图(multiple AUC curves)

文章目录 介绍加载R包导入数据数据预处理画图输出结果组图系统信息介绍 多个ROC曲线在同一张图上可以直观地展示和比较不同模型或方法的性能。这种图通常被称为ROC曲线图,它通过比较不同模型的ROC曲线下的面积(AUC)大小来比较模型的优劣。AUC值越大,模型的诊断或预测效果越…

《C++编程魔法:构建绿色主题的奇幻游戏世界》

在游戏开发的浩瀚宇宙中&#xff0c;色彩扮演着至关重要的角色。它不仅能营造氛围、激发情感&#xff0c;还能为玩家带来沉浸式的体验。想象一下&#xff0c;一个以绿色为主色调的游戏场景&#xff0c;充满生机与活力&#xff0c;仿佛让人置身于神秘的自然世界。本文将带你深入…

[vulnhub] pWnOS v2.0

https://www.vulnhub.com/entry/pwnos-20-pre-release,34/ 主机发现端口扫描 探测存活主机&#xff0c;150为靶机 nmap -sP 192.168.75.0/24 // Starting Nmap 7.93 ( https://nmap.org ) at 2024-09-24 12:44 CST Nmap scan report for 192.168.75.1 Host is up (0.00013s lat…

介绍 Agent Q:迎接下一代 AI 自动化助手

引言 在科技领域&#xff0c;随着人工智能的不断进步&#xff0c;自动化工具日益成为提升效率的重要手段。今天&#xff0c;我将向大家介绍一款名为 Agent Q 的 AI 自动化助手。这款工具不仅能够完成复杂的任务&#xff0c;还支持交互式命令行操作&#xff0c;使得用户体验更为…

Linux相关概念和重要知识点(8)(操作系统、进程的概念)

1.操作系统&#xff08;OS&#xff09; &#xff08;1&#xff09;基本结构的认识 任何计算机系统都包含一个基本的程序集合&#xff0c;用于实现计算机最基本最底层的操作&#xff0c;这个软件称为操作系统。操作系统大部分使用C语言编写&#xff0c;少量使用汇编语言。 从…

利用低代码快速搭建电商小程序之商品列表页

目标&#xff1a; 搭建商城的一个商品列表页面&#xff08;先做静态页&#xff09; 开发环境&#xff1a; 访问白码低代码平台&#xff1a;https://www.bnocode.com/ 白码的新自定义页功能&#xff08;使用vue框架&#xff09; 前期准备&#xff1a; 需要先准备商品数据表…

云手机的海外原生IP有什么用?

在全球数字化进程不断加快的背景下&#xff0c;企业对网络的依赖程度日益加深。云手机作为一项创新的工具&#xff0c;正逐步成为企业优化网络结构和全球业务拓展的必备。尤其是云手机所具备的海外原生IP功能&#xff0c;为企业进入国际市场提供了独特的竞争优势。 什么是海外原…

封装一个vue3的文件上传组件(拖拽或点击选择文件)

1. 效果 选择文件后: 2. 代码 <template><divclass"drop-zone c-normal":class"{borderOutline: outline,}"dragover.preventdrop.prevent"handleDrop"click"chooseFiles"><div v-if"files.length < 1"…

并查集 (Union-Find) :从基础到优化

并查集 (Union-Find) 并查集是一种树形数据结构&#xff0c;主要用于处理不相交集合&#xff08;Disjoint Set&#xff09;的合并和查询问题。它特别适用于解决有关连通性的问题&#xff0c;比如在图论中判断两点是否在同一个连通分量中。并查集可以高效地支持以下两种操作&am…

2024年数字化转型与管理国际学术会议(DTM 2024)

目录 重要信息 大会简介 大会组委 征稿主题 论文出版 会议议程 参会方式 重要信息 大会官网&#xff1a;www.icemme.org&#xff08;点击了解大会&#xff0c;投稿等详细信息&#xff09; 大会时间&#xff1a;2024年11月22-24日 大会地点&#xff1a;中国-大连 大会…

Qwen2-VL论文阅读笔记

第1章介绍 论文亮点&#xff1a; 1、 the Naive Dynamic Resolution mechanism 2、Multimodal Rotary Position Embedding (M-RoPE) 2D Rotary Position Embedding 3、统一图片和视频的处理范式、增i强视觉感知能力 4、LVLMs的scaling laws&#xff1a;2B、8B、72B 5、 dynamic…

【Mybatis】常见面试题汇总 共56题

文章目录 1. 介绍下MyBatis?2. MyBatis 框架的应用场景?3. MyBatis 有哪些优点?4. MyBatis 有哪些缺点?5. MyBatis 用到了哪些设计模式&#xff1f;6. MyBatis常用注解有哪些&#xff1f;7. MyBatis 有哪些核心组件?8. MyBatis编程步骤是什么样的&#xff1f;9. MyBatis 和…

c#中的功能优势

装箱和拆箱 性能消耗的直接体现 int iterations 10000000; // 进行一千万次迭代Stopwatch stopwatch new Stopwatch();// 非装箱测试stopwatch.Start();for (int i 0; i < iterations; i){int x i; // 纯值类型操作&#xff0c;无装箱}stopwatch.Stop();Console.Writ…

Cloudflare为网站添加AI审计 可检查AI爬虫何时抓取和抓取频次以及直接屏蔽爬虫

网络服务提供商 Cloudflare 宣布即日起为所有网站 (包括免费托管的网站) 带来 AI 审计功能&#xff0c;该功能目前处于测试阶段&#xff0c;可以分析 AI 公司的爬虫和抓爬数据。新的 AI 审计工具 (Cloudflare AI Audit) 主要提供 AI 公司的爬虫何时到网站来抓取数据、抓取的数据…

【Rust练习】16.模式

文章题目来自&#xff1a;https://practice-zh.course.rs/pattern-match/patterns.html 1 &#x1f31f;&#x1f31f; 使用 | 可以匹配多个值, 而使用 … 可以匹配一个闭区间的数值序列 fn main() {} fn match_number(n: i32) {match n {// 匹配一个单独的值1 > println!(…