自己做网站写文章,网站内容及实现方式,专业柳州网站建设哪家便宜,汉中公司做网站day01_前端框架之Bootstrap的应用
本课目标
能够完成 Bootstrap 环境搭建能够理解 Bootstrap 的栅格布局能够根据 Bootstrap 相关文档使用Bootstrap组件能够根据 Bootstrap 重构主页和表单页
第1章 bootstrap简介
1.1 什么是bootstrap Bootstrap 是全球最受欢迎的前端组件库…day01_前端框架之Bootstrap的应用
本课目标
能够完成 Bootstrap 环境搭建能够理解 Bootstrap 的栅格布局能够根据 Bootstrap 相关文档使用Bootstrap组件能够根据 Bootstrap 重构主页和表单页
第1章 bootstrap简介
1.1 什么是bootstrap Bootstrap 是全球最受欢迎的前端组件库用于开发响应式布局、移动设备优先的 WEB 项目。 Bootstrap 是一套用于 HTML、CSS 和 JS 开发的开源工具集。 Bootstrap基于 HTML、CSS、JAVASCRIPT 的前端框架。 该框架已经预定义了一套CSS样式和与样式对应的JS代码。对应的样式有对应的特效 开发人员只需要编写HTML结构添加bootstrap固定的class样式就可以轻松完成指定效果的实现。 作用 Bootstrap 使得 Web 开发更加快捷高效。 BootStrap支持响应式开发解决了移动互联网前端开发问题。 Bootstrap英文官网: Bootstrap · The most popular HTML, CSS, and JS library in the world. Bootstrap4 中文文档参考: 简介 · Bootstrap
1.2 什么是响应式布局 响应式布局一个网站的展示能够兼容多个终端(手机、iPad、PC等)而不需要为每个终端单独做一个 展示版本。此概念专为解决移动互联网浏览而诞生的。 响应式布局使得网站仅适用一套样式就可以在不同分辨率下展示出不同的舒适效果大大降低了网站开 发维护成本并且能带给用户更好的体验性。 响应式布局会增加程序员负担以及代码量 未使用响应式开发 百度: 百度一下你就知道 无论如何缩小窗口在屏幕下都是不变的 百度针对不同的设备有不同的网页匹配: 手机端: 百度一下
第2章 bootstrap环境搭建
2.1 下载bootstrap 地址https://code.z01.com/v4/bootstrap-4.4.1-dist.zip 目录结构目录结构 · Bootstrap
第3章 bootstrap页面布局
3.1 基础入门 Container容器是窗口布局的最基本元素我们推荐所有样式都定义在.container或.container-fluid容器之中-- 这是启用整个栅格系统必不可少的前置条件它们分别对应选择一个响应式的、固定宽度的容器或者选择一个流式自适应浏览器或容器最大合法宽度的窗口意味着任何时候它的宽度总是100%。 Bootstrap原生带三种container宽度规范 .container, 居中适配不同的断的 max-width 尺寸。 .container-fluid, 全屏适配屏幕的 width: 100% 尺寸。
超小屏幕 576px小屏幕 ≥576px中等屏幕 ≥768px大屏幕 ≥992px超大屏幕 ≥1200px.container100%540px720px960px1140px.container-sm100%540px720px960px1140px.container-md100%100%720px960px1140px.container-lg100%100%100%960px1140px.container-xl100%100%100%100%1140px.container-fluid100%100%100%100%100% 课堂案例01.Bootstrap远程样式引入.html !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleBootstrap入门/title!-- 要使用bootstrap只需要通过link和scrip标签去引入样式和js脚本就可以了通过远程连接的方式引入样式这种方式的前期条件就是需要链接互联网因为样式是通过远程地址访问的--link relstylesheet hrefhttps://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css integritysha384-ggOyR0iXCbMQv3Xipma34MDdH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T crossoriginanonymousscript srchttps://code.jquery.com/jquery-3.3.1.slim.min.js integritysha384-q8i/X965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH8abtTE1Pi6jizo crossoriginanonymous/scriptscript srchttps://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js integritysha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1 crossoriginanonymous/scriptscript srchttps://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js integritysha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIMB07jRM crossoriginanonymous/script
/head
bodyhello Bootstrap入门
/body
/html 课堂案例02.Boostrap本地样式引入.html !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleBootstrap通过本地样式引入/title!-- 需要引入如下样式:引入js文件的时候需要注意先后顺序总共需要引入4个文件一个样式3个脚本--link relstylesheet hrefcss/bootstrap.min.cssscript srcjs/jquery-3.4.1.min.js/scriptscript srcjs/bootstrap.bundle.min.js/scriptscript srcjs/bootstrap.min.js/script
/head
bodyp classtext-warning hello Bootstrap/pp hello Bootstrap/p/body
/html 课堂案例03.container页面布局规范.html !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleContain 容器/titlelink relstylesheet hrefcss/bootstrap.min.cssscript srcjs/jquery-3.4.1.min.js/scriptscript srcjs/bootstrap.bundle.min.js/scriptscript srcjs/bootstrap.min.js/scriptstylediv{border: 1px solid red;}/style/head
body!-- classcontainer:可以根据浏览器的大小进行自适应和居中ps会设置padding属性为15--div classcontainerh2hello 酷狗/h2/divdiv classcontainer-fluidh2哈哈哈哈/h2/div
/body
/html
3.1 栅格系统 为了方便在布局容器中进行网页的布局操作。BootStrap提供了一套专门用于响应式开发布局的栅格系统。 栅格系统将一行分为12列通过设定元素占用的列数来布局元素在页面上的展示位置。 栅格特点 “行row”包含在 .container或 container-fluid100% 宽度中行使用的样式 课堂案例04.Bootstrap栅格系统1.html !DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleDocument/titlelink relstylesheet hrefcss/bootstrap.min.cssscript srcjs/jquery-3.4.1.min.js/scriptscript srcjs/bootstrap.bundle.min.js/scriptscript srcjs/bootstrap.min.js/scriptstylediv {border: 1px solid;}/style/headbodydiv classcontainerdiv classrowdiv classcol-11/divdiv classcol-12/divdiv classcol-13/divdiv classcol-14/divdiv classcol-15/divdiv classcol-16/divdiv classcol-17/divdiv classcol-18/divdiv classcol-19/divdiv classcol-110/divdiv classcol-111/divdiv classcol-112/div/divdiv classrowdiv classcol-55/divdiv classcol-55/divdiv classcol-22/div/div!-- 第一行4个格子第二行8个格子第三行6个格子多出来的6个格子跑到第二行去了--div classrowdiv classcol-44/divdiv classcol-98/divdiv classcol-26/div/div/divspan-----------/spandiv classcontainer!-- 嵌套布局--div classrowdiv classcol-44/divdiv classcol-8!-- 对于8个格子还可以划分为12份 --div classrowdiv classcol-33/divdiv classcol-99/div/div/div/div/divdiv classcontainerdiv classrowdiv classcol-44/divdiv classcol-8div classrowdiv classcol-11/divdiv classcol-12/divdiv classcol-13/divdiv classcol-14/divdiv classcol-15/divdiv classcol-16/divdiv classcol-17/divdiv classcol-18/divdiv classcol-19/divdiv classcol-110/divdiv classcol-111/divdiv classcol-112/div/div/div/div/div/body/html 课堂案例05.Bootstrap栅格系统2.html !DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleDocument/titlelink relstylesheet hrefcss/bootstrap.min.cssscript srcjs/jquery-3.4.1.min.js/scriptscript srcjs/bootstrap.bundle.min.js/scriptscript srcjs/bootstrap.min.js/scriptstylediv{border: 1px solid;}/style
/headbodydiv classcontainerdiv classrowdiv classcol-11/divdiv classcol-12/divdiv classcol-13/divdiv classcol-14/divdiv classcol-15/divdiv classcol-16/divdiv classcol-17/divdiv classcol-18/divdiv classcol-19/divdiv classcol-110/divdiv classcol-111/divdiv classcol-112/div/div/divdiv classcontainerdiv classrowdiv classcol-sm-66/divdiv classcol-sm-44/divdiv classcol-sm-22/div/div/div!-- 根据不同的屏幕大小适配不同的宽度最终显示不同的样式--div classcontainerdiv classrowdiv classcol-sm-1 col-md-31/divdiv classcol-sm-11 col-md-911/div/div/div/body/html 课堂案例06.Bootstrap栅格系统3.html !DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitle等宽布局/titlelink relstylesheet hrefcss/bootstrap.min.cssscript srcjs/jquery-3.4.1.min.js/scriptscript srcjs/bootstrap.bundle.min.js/scriptscript srcjs/bootstrap.min.js/scriptstylediv{border: 1px solid;}/style
/headbodydiv classcontainerdiv classrowdiv classcolcol/divdiv classcolcol/divdiv classcolcol/divdiv classcolcol/div/divdiv classrowdiv classcol-88/divdiv classcol-44/div/div!-- 等宽多行创建跨多个行的等宽列方法是插入.w-100要将列拆分为新行--div classrowdiv classcolcol/divdiv classcolcol/divdiv classw-100/divdiv classcolcol/divdiv classcolcol/divdiv classcolcol/div/div/div
/body/html
第4章 bootstrap公共样式内容 课堂案例07.Bootstrap的内容.html !DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitle内容/titlelink relstylesheet hrefcss/bootstrap.min.cssscript srcjs/jquery-3.4.1.min.js/scriptscript srcjs/bootstrap.bundle.min.js/scriptscript srcjs/bootstrap.min.js/scriptstyle/* img{width: 900px;height: 900px;} *//style
/headbody!-- 内容作为了解就可以了--p classh1h1. Bootstrap heading/pp classh2h2. Bootstrap heading/pp classh3h3. Bootstrap heading/pp classh4h4. Bootstrap heading/pp classh5h5. Bootstrap heading/pp classh6h6. Bootstrap heading/ph1 classdisplay-1Display 1/h1h1 classdisplay-2Display 2/h1h1 classdisplay-3Display 3/h1h1 classdisplay-4Display 4/h1ul classlist-inlineli classlist-inline-item列表之一/lili classlist-inline-item列表之二/lili classlist-inline-item列表之三/li/ulimg srcimg/1.jpg classimg-fluid altResponsive imagehrtable classtabletheadtrth scopecol#/thth scopecolFirst Name/thth scopecolLast Name/thth scopecolUsername/th/tr/theadtbodytrth scoperow1/thtdMark/tdtdOtto/tdtdmdo/td/trtrth scoperow2/thtdJacob/tdtdThornton/tdtdfat/td/trtrth scoperow3/thtdLarry/tdtdthe Bird/tdtdtwitter/td/tr/tbody/table
/body/html 课堂案例08.Bootstrap的公共样式.html !DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitle公共样式/titlelink relstylesheet hrefcss/bootstrap.min.cssscript srcjs/jquery-3.4.1.min.js/scriptscript srcjs/bootstrap.bundle.min.js/scriptscript srcjs/bootstrap.min.js/script/headbodyspan classborder1111/spanspan classborder-top2222/spanspan classborder-right3333/spanspan classborder-bottom44444/spanspan classborder-left55555/spanspan classborder border-primary111111/spanspan classborder border-secondary1111111/spanspan classborder border-success1111111/spanspan classborder border-danger11111111/spanspan classborder border-warning11111111/spanspan classborder border-info11111111/spanspan classborder border-light1111111/spanspan classborder border-dark1111111111/spanspan classborder border-white1111111111/spanp classtext-primary.text-primary/pp classtext-secondary.text-secondary/pp classtext-success.text-success/pp classtext-danger.text-danger/pp classtext-warning.text-warning/pp classtext-info.text-info/pp classtext-light bg-dark.text-light/pp classtext-dark.text-dark/pp classtext-body.text-body/pp classtext-muted.text-muted/pp classtext-white bg-dark.text-white/pp classtext-black-50.text-black-50/pp classtext-white-50 bg-dark.text-white-50/phrpa href# classtext-primaryPrimary link/a/ppa href# classtext-secondarySecondary link/a/ppa href# classtext-successSuccess link/a/ppa href# classtext-dangerDanger link/a/ppa href# classtext-warningWarning link/a/ppa href# classtext-infoInfo link/a/ppa href# classtext-light bg-darkLight link/a/ppa href# classtext-darkDark link/a/ppa href# classtext-mutedMuted link/a/ppa href# classtext-white bg-darkWhite link/a/phrdiv classp-3 mb-2 bg-primary text-white.bg-primary/divdiv classp-3 mb-2 bg-secondary text-white.bg-secondary/divdiv classp-3 mb-2 bg-success text-white.bg-success/divdiv classp-3 mb-2 bg-danger text-white.bg-danger/divdiv classp-3 mb-2 bg-warning text-dark.bg-warning/divdiv classp-3 mb-2 bg-info text-white.bg-info/divdiv classp-3 mb-2 bg-light text-dark.bg-light/divdiv classp-3 mb-2 bg-dark text-white.bg-dark/divdiv classp-3 mb-2 bg-white text-dark.bg-white/divdiv classp-3 mb-2 bg-transparent text-dark.bg-transparent/div
/body/html
第5章 bootstrap常用组件
5.1 按钮的样式 课堂案例09.按钮组件.html !DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleDocument/titlelink relstylesheet hrefcss/bootstrap.min.cssscript srcjs/jquery-3.4.1.min.js/scriptscript srcjs/bootstrap.bundle.min.js/scriptscript srcjs/bootstrap.min.js/script/headbodybutton typebutton classbtn btn-primaryPrimary/buttonbutton typebutton classbtn btn-secondarySecondary/buttonbutton typebutton classbtn btn-successSuccess/buttonbutton typebutton classbtn btn-dangerDanger/buttonbutton typebutton classbtn btn-warningWarning/buttonbutton typebutton classbtn btn-infoInfo/buttonbutton typebutton classbtn btn-lightLight/buttonbutton typebutton classbtn btn-darkDark/buttonbutton typebutton classbtn btn-linkLink/buttonhrbutton typebutton classbtn btn-outline-primaryPrimary/buttonbutton typebutton classbtn btn-outline-secondarySecondary/buttonbutton typebutton classbtn btn-outline-successSuccess/buttonbutton typebutton classbtn btn-outline-dangerDanger/buttonbutton typebutton classbtn btn-outline-warningWarning/buttonbutton typebutton classbtn btn-outline-infoInfo/buttonbutton typebutton classbtn btn-outline-lightLight/buttonbutton typebutton classbtn btn-outline-darkDark/buttonbutton typebutton classbtn btn-primary btn-lg btn-blockBlock level button/buttonbutton typebutton classbtn btn-secondary btn-lg btn-blockBlock level button/button!-- 启用状态.btn样式定义的按钮默认就是启用状态背景较深、边框较暗、带内阴影如果你一定要使按钮固定为启用状态、不需要点击反馈可以增加.active样式并包括aria-pressedtrue 属性则状态显示为启用状态。--a href# classbtn btn-primary btn-lg active rolebutton aria-pressedtruePrimary link/aa href# classbtn btn-secondary btn-lg active rolebutton aria-pressedtrueLink/ahrbutton typebutton classbtn btn-lg btn-primary disabledPrimary button/buttonbutton typebutton classbtn btn-secondary btn-lg disabledButton/button
/body/html
5.2 轮播图 课堂案例10.轮播图.html !DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleDocument/titlelink relstylesheet hrefcss/bootstrap.min.cssscript srcjs/jquery-3.4.1.min.js/scriptscript srcjs/bootstrap.bundle.min.js/scriptscript srcjs/bootstrap.min.js/script/headbodydiv idcarouselExampleCaptions classcarousel slide data-ridecarousel!-- 可以根据具体的轮播图进行选择 --ol classcarousel-indicatorsli data-target#carouselExampleCaptions data-slide-to0 classactive/lili data-target#carouselExampleCaptions data-slide-to1/lili data-target#carouselExampleCaptions data-slide-to2/li/ol!-- 轮播的图片active:在轮播中最先显示的图片--div classcarousel-innerdiv classcarousel-item data-interval1500img srcimg/1.jpg width500px height500px classd-block w-100 alt.../divdiv classcarousel-item data-interval1500img srcimg/2.jpg width500px height500px classd-block w-100 alt.../divdiv classcarousel-item active data-interval1500img srcimg/3.jpg width500px height500px classd-block w-100 alt.../diva classcarousel-control-prev href#carouselExampleCaptions rolebutton data-slideprevspan classcarousel-control-prev-icon aria-hiddentrue/spanspan classsr-onlyPrevious/span/aa classcarousel-control-next href#carouselExampleCaptions rolebutton data-slidenextspan classcarousel-control-next-icon aria-hiddentrue/spanspan classsr-onlyNext/span/a/div/div/body/html
5.3 导航条 课堂案例11.导航栏.html !DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleDocument/titlelink relstylesheet hrefcss/bootstrap.min.cssscript srcjs/jquery-3.4.1.min.js/scriptscript srcjs/bootstrap.bundle.min.js/scriptscript srcjs/bootstrap.min.js/script/headbodynav classnavbar navbar-expand-lg navbar-light bg-lighta classnavbar-brand href#Navbar/a!-- 屏幕尺寸较小的时候会把导航项收缩到这个折叠菜单中--button classnavbar-toggler typebutton data-togglecollapse data-target#navbarSupportedContentaria-controlsnavbarSupportedContent aria-expandedfalse aria-labelToggle navigationspan classnavbar-toggler-icon/span/buttondiv classcollapse navbar-collapse idnavbarSupportedContentul classnavbar-nav mr-auto!-- active被默认选中--li classnav-item active a classnav-link href#Home span classsr-only(current)/span/a/lili classnav-itema classnav-link href#Link/a/li!-- dropdown下拉菜单dropdown-menu用于下拉菜单项--li classnav-item dropdowna classnav-link dropdown-toggle href# idnavbarDropdown rolebuttondata-toggledropdown aria-haspopuptrue aria-expandedfalseDropdown/adiv classdropdown-menu aria-labelledbynavbarDropdowna classdropdown-item href#Action/aa classdropdown-item href#Another action/adiv classdropdown-divider/diva classdropdown-item href#Something else here/a/div/li!-- disable是超链接失去点击效果--li classnav-itema classnav-link disabled href#Disabled/a/li/ul!-- --form classform-inline my-2 my-lg-0input classform-control mr-sm-2 typesearch placeholderSearch aria-labelSearchbutton classbtn btn-outline-success my-2 my-sm-0 typesubmitSearch/button/form/div/nav/body/html
5.4 表单样式最重要的 课堂案例12.表单组件1.html !DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitle12.表单组件1.html/titlelink relstylesheet hrefcss/bootstrap.min.cssscript srcjs/jquery-3.4.1.min.js/scriptscript srcjs/bootstrap.bundle.min.js/scriptscript srcjs/bootstrap.min.js/script/headbody!-- Bootstrap提供了一些表单控件样式、布局选项以及用来创建广泛多样化的的表单的自定义组件以下是示例和使用指南。 --div classcontainerform action!-- 文本框定义外层的div样式 classform-group输入项样式 classform-controlplaceholderHTML5规范定义的属性可以在文本框中显示提示信息small给提示信息的--div classform-grouplabel forexampleInputUserName用户名/labelinput typetext classform-control idexampleInputUserName placeholder请输入用户名/divdiv classform-grouplabel forexampleInputPwd密码/labelinput typetext classform-control idexampleInputPwd placeholder请输入用户名/divhr!-- radio:单选框样式外层的div样式 classform-check输入项样式 classform-check-inputdisabled表示不可选状态checked默认选中--div classform-checkinput classform-check-input typeradio nameexampleRadios idexampleRadios1 valueoption1checkedlabel classform-check-label forexampleRadios1男/label/divdiv classform-checkinput classform-check-input typeradio nameexampleRadios idexampleRadios2 valueoption2label classform-check-label forexampleRadios2女/label/divdiv classform-check disabledinput classform-check-input typeradio nameexampleRadios idexampleRadios3 valueoption3disabledlabel classform-check-label forexampleRadios3其他/label/divhr!-- checkbox复选框外层的div样式 classform-check输入项样式 classform-check-inputdisabled表示不可选状态checked默认选中--div classform-checkinput classform-check-input typecheckbox value iddefaultCheck1label classform-check-label fordefaultCheck1打篮球/label/divdiv classform-checkinput classform-check-input typecheckbox value iddefaultCheck2label classform-check-label fordefaultCheck2排球/label/divdiv classform-checkinput classform-check-input typecheckbox value iddefaultCheck2 checkedlabel classform-check-label fordefaultCheck2乒乓球/label/divhr!-- 下拉菜单外层的div样式 classform-groupselect的样式 classcustom-select 会显示上下箭头select的样式 classform-control 会显示正常的箭头selected 默认选中--div classform-groupselect classcustom-select option selectedOpen this select menu/optionoption value1One/optionoption value2Two/optionoption value3Three/option/selectselect classform-control option selected请选择/optionoption value1One/optionoption value2Two/optionoption value3Three/option/select/div!-- 文本域classform-group--div classform-grouplabel forexampleFormControlTextarea1Example textarea/labeltextarea classform-control idexampleFormControlTextarea1 rows3/textarea/divhrinput typefile namefilenamehr!-- 文件上传项--div classform-grouplabel forexampleFormControlFile1上传/labelinput typefile classform-control-file idexampleFormControlFile1/divhrdiv classcustom-fileinput typefile classcustom-file-input idvalidatedCustomFile requiredlabel classcustom-file-label forvalidatedCustomFile请选择文件/label/divhrbutton typesubmit classbtn btn-primary提交/button/form/div
/body/html 课堂案例13.表单组件2.html !DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitle表单校验/titlelink relstylesheet hrefcss/bootstrap.min.cssscript srcjs/jquery-3.4.1.min.js/scriptscript srcjs/bootstrap.bundle.min.js/scriptscript srcjs/bootstrap.min.js/script/headbody!-- 表单校验当用户填写完输入向后需要判断用户输入的内容是否满足要求required代表必填项如果不填提交会有提示.is-valid 通过校验规则.is-invalid:没有通过校验规则valid-feedback :通过校验规则后的提示信息invalid-feedback没有通过校验规则的提示信息--form div classform-rowdiv classcol-md-4 mb-3label forvalidationCustom01用户名/labelinput typetext classform-control is-valid idvalidationCustom01 placeholder请输入用户名 valuerequireddiv classvalid-feedback满足要求/div/divdiv classcol-md-4 mb-3label forvalidationCustom02密码/labelinput typepassword classform-control is-invalid idvalidationCustom02 placeholderLast name valueOttorequireddiv classinvalid-feedback密码输入不符合要求/div/divdiv classcol-md-4 mb-3label forvalidationCustomUsernameUsername/labeldiv classinput-groupdiv classinput-group-prependspan classinput-group-text idinputGroupPrepend/span/divinput typetext classform-control idvalidationCustomUsername placeholderUsernamearia-describedbyinputGroupPrepend requireddiv classinvalid-feedbackPlease choose a username./div/div/div/divdiv classform-rowdiv classcol-md-6 mb-3label forvalidationCustom03City/labelinput typetext classform-control idvalidationCustom03 placeholderCity requireddiv classinvalid-feedbackPlease provide a valid city./div/divdiv classcol-md-3 mb-3label forvalidationCustom04State/labelinput typetext classform-control idvalidationCustom04 placeholderState requireddiv classinvalid-feedbackPlease provide a valid state./div/divdiv classcol-md-3 mb-3label forvalidationCustom05Zip/labelinput typetext classform-control idvalidationCustom05 placeholderZip requireddiv classinvalid-feedbackPlease provide a valid zip./div/div/divdiv classform-groupdiv classform-checkinput classform-check-input typecheckbox value idinvalidCheck requiredlabel classform-check-label forinvalidCheckAgree to terms and conditions/labeldiv classinvalid-feedbackYou must agree before submitting./div/div/divbutton classbtn btn-primary typesubmitSubmit form/button/form/body/html
第6章 bootstrap综合案例 课堂案例14.注册页面开发.html !DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleDocument/titlelink relstylesheet hrefcss/bootstrap.min.cssscript srcjs/jquery-3.4.1.min.js/scriptscript srcjs/bootstrap.bundle.min.js/scriptscript srcjs/bootstrap.min.js/scriptstyle.text {font-size: 30px;text-align: center;}body {background-image: url(img/bg.jpg)}.form {width: 550px;height: 400px;border: 1px solid rgb(145, 14, 14);background-color: rgba(221, 199, 126, 0.88);margin: 120px auto;}.center_btn {text-align: center;}/stylescript/* 需求1判断两次输入的密码是否相同需求2判断邮箱格式是否满足规范卡住了需求3判断用户注册的手机号是否是未注册过的*/function checkForm() {// console.log(提交表单);//判断需求1和需求2都满足的时候才提交return checkPassword()checkEmail();}/* 判断两次输入的密码是否相同 */function checkPassword() {const pwdObj1 document.querySelector(#password)const pwdObj2 document.querySelector(#rePassword)// console.log(pwdObj1.value)// console.log(pwdObj2.value)//两次输入的密码一样if(pwdObj1.valuepwdObj2.value){return true;}else{//两次输入的密码不一样,加入提示pwdObj2.setAttribute(class,form-control is-invalid)// pwdObj2.setAttribute(class,is-invalid)return false;}}const rg /^[\w]{3,6}qq.com$/function checkEmail(){// const emailObj document.querySelector(#emailText)// console.log(emailObj.value)/* 如何判断邮箱地址是否满足条件111qq.com具体要求数字和字母开始 字母 . .com结尾这个需要判断的字符串是变化的不是固定的需要使用正则表达式*/console.log(emailObj.value)emailObj.addEventListener(blur,function(){console.log(hh)})// if(rg.test(emailObj.value)){// return true;// }else{// return false;// }}/* 判断用户注册的手机号是否是未注册过的给文本框绑定以恶搞blur事件*/window.addEventListener(load,function(){const phonenumberObj document.querySelector(#phonenumber1)phonenumberObj.addEventListener(blur,function(){/* 判断1手机号的长度是否是11位*/if(phonenumberObj.value.length ! 11){console.log(手机号不满足要求)phonenumberObj.setAttribute(class,form-control is-invalid)}else{phonenumberObj.setAttribute(class,form-control is-valid)}/* 判断2 手机号是否满足规范要求是否都是和整数 可以遍历字符串判断每一个整数是否是0~9的区间并且第一位不是0是1*//* 判断3 需要请求后端服务器判断这个手机号在后台的数据库是否存在然后服务端再把结果发回来*/})const emailObj document.querySelector(#emailText)emailObj.addEventListener(blur,function(){// console.log(haha)if(rg.test(emailObj.value)){console.log(格式正确)emailObj.setAttribute(class,form-control is-valid)}else {console.log(格式错误)emailObj.setAttribute(class,form-control is-invalid)}})})/script
/headbody!-- onsubit:提交form表单如果onsubmit指定的函数返回true就会正常提交返回false就不会提交--!-- form classform onsubmitreturn checkForm(); --form classform !-- offset-sm-2:向右偏移两个格子--div classalert alert-primary text新用户注册/divdiv classform-group rowlabel forusername classcol-sm-2 offset-sm-2 col-form-label手机号码/labeldiv classcol-sm-6input nameusername typetext classform-control idphonenumber1 placeholder请输入手机号 requiredsmall idpasswordHelpInline classform-text text-muted手机号必须是未注册过的./small/div/divdiv classform-group rowlabel forpassword classcol-sm-2 offset-sm-2 col-form-label密码/labeldiv classcol-sm-6input namepwd typepassword classform-control idpassword placeholder请输入密码 requiredsmall idpasswordHelpInline classform-text text-muted密码必须是6-16位/small/div/divdiv classform-group rowlabel forrePassword classcol-sm-2 offset-sm-2 col-form-label确认密码/labeldiv classcol-sm-6input namerePwd typepassword classform-control idrePassword placeholder请输入重复密码 requireddiv classinvalid-feedback两次密码不一致/div/div/divdiv classform-group rowlabel foremailText classcol-sm-2 offset-sm-2 col-form-label邮箱/labeldiv classcol-sm-6input nametext typeemail classform-control idemailText placeholder请输入邮箱 requireddiv classinvalid-feedback邮箱不符合格式/div/div/divdiv classform-group row!-- --div classcol-sm-4 offset-sm-4 center_btnbutton typesubmit classbtn btn-primary确定/button/div/div/form
/body/html
