毕设做系统与网站,服务号 订阅号,个人信用信息服务平台,wordpress 绑定二级域名文章目录 一、Bootstrap概述二、Bootstrap实例1、创建网页2、编写代码3、代码说明4、浏览网页#xff0c;查看结果5、登录按钮事件处理6、浏览网页#xff0c;查看结果 三、实战小结 一、Bootstrap概述
大家好#xff0c;今天我们将一起学习一个非常流行的前端框架——Boot… 文章目录 一、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
headmeta charsetutf-8title演示Bootstrap/title!-- 导入Bootstrap框架的CSS --link hrefhttps://cdn.jsdelivr.net/npm/bootstrap5.3.3/dist/css/bootstrap.min.css relstylesheet integritysha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hWALEwIH crossoriginanonymous!-- 导入Bootstrap框架的JS --script srchttps://cdn.jsdelivr.net/npm/bootstrap5.3.3/dist/js/bootstrap.bundle.min.js integritysha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz crossoriginanonymous/script
/head
bodydiv classcontainer mt-5div classrow justify-content-centerdiv classcol-md-6div classcarddiv classcard-headerh3 classtext-center用户登录/h3/divdiv classcard-bodyform action# methodpostdiv classmb-3 rowlabel forusername classcol-sm-3 col-form-label账号/labeldiv classcol-sm-9input typetext classform-control idusername placeholder请输入用户名 required/div/divdiv classmb-3 rowlabel forpassword classcol-sm-3 col-form-label密码/labeldiv classcol-sm-9input typepassword classform-control idpassword placeholder请输入密码 required/div/divdiv classd-grid gap-2button typesubmit classbtn btn-primary btn-block登录/button/div/form/div/div/div/div/div
/body
/html3、代码说明
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
headmeta charsetutf-8title演示Bootstrap/title!-- 导入Bootstrap框架的CSS --link hrefhttps://cdn.jsdelivr.net/npm/bootstrap5.3.3/dist/css/bootstrap.min.css relstylesheet integritysha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hWALEwIH crossoriginanonymous!-- 导入Bootstrap框架的JS --script srchttps://cdn.jsdelivr.net/npm/bootstrap5.3.3/dist/js/bootstrap.bundle.min.js integritysha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz crossoriginanonymous/script!-- 导入jQuery库 --script srchttps://code.jquery.com/jquery-3.6.0.min.js/script
/head
bodydiv classcontainer mt-5div classrow justify-content-centerdiv classcol-md-6div classcarddiv classcard-headerh3 classtext-center用户登录/h3/divdiv classcard-bodyform action# methodpostdiv classmb-3 rowlabel forusername classcol-sm-3 col-form-label账号/labeldiv classcol-sm-9input typetext classform-control idusername placeholder请输入用户名 required/div/divdiv classmb-3 rowlabel forpassword classcol-sm-3 col-form-label密码/labeldiv classcol-sm-9input typepassword classform-control idpassword placeholder请输入密码 required/div/divdiv classd-grid gap-2button idbtnLogin typesubmit classbtn btn-primary btn-block登录/button/div/form/div/div/div/div/divscript$(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
/html6、浏览网页查看结果 输入正确的用户名和密码单击【登录】按钮。 输入错误的用户名或密码单击【登录】按钮。 三、实战小结
通过今天的学习希望大家能够对Bootstrap有一个基本的了解并能够运用它来快速开发响应式网页。
