jQuery+Bootstrap Web开发案例教程（在线实训版）

jQuery+Bootstrap 2021.6jQuery+Bootstrap第1章jQuery基础jQuery简介下载并使用jQueryjQuery的“$”DEMO使用VSCode编写第一个包含jQuery页面DEMO第1章jQuery基础

第1章jQuery基础jQuery简介目前jQuery主要提供如下功能：访问页面框架的局部修改页面的表现（Presentation）更改页面的内容响应事件为页面添加动画与服务器异步交互简化常用的JavaScript操作第1章

jQuery基础下载并使用jQuery引入jquery文件：<scriptsrc="jquery-3.6.0.min.js"></script>第1章jQuery基础jQuery的“$”选择器功能函数前缀window.onload创建DOM元素扩展jQuery冲突问题第1章jQuery基础DEMO第1章jQuery基础使用VSCode编写第一个包含jQuery页面创建基础的HTML文档使用JavaScript的方式有嵌入式和链接式，两种基本方式:嵌入式是直接在<script>标签内部写JavaScript代码链接式是使用script标签的src属性，链接一个js文件编写jQuery引入jquery的文件：<scriptsrc="jquery-3.6.0.min.js"></script>第1章jQuery基础DEMO第1章jQuery基础jQuery简介下载并使用jQueryjQuery的“$”DEMO使用VSCode编写第一个包含jQuery页面DEMO请看第2章——

HTML、CSS和JS基础知识jQuery+Bootstrap 2021.6jQuery+Bootstrap主讲：温谦第2章

HTML、CSS和JS基础知识

ES6的特性箭头函数剩余运算符与剩余参数展开运算符数组的解构赋值对象解构赋值模块DEMOHTML5新增的语义化标记DEMOCSS3引入的常用新特性DEMO新的布局方式——弹性盒子（flexbox）DEMO（顶部导航栏）新的布局方式——网格布局（Grid）DEMO（计算器）第2章

HTML、CSS和JS基础知识

第2章

HTML、CSS和JS基础知识ES6的新特性let关键字let与var主要有三点不同：用var和let声明的变量的作用域不同let具有“覆盖”的性质let声明不能提升const关键字for...of循环字符串模板参数默认值类与继承第2章

HTML、CSS和JS基础知识箭头函数剩余运算符与剩余参数展开运算符数组的解构赋值对象解构赋值模块第2章

HTML、CSS和JS基础知识DEMO第2章

HTML、CSS和JS基础知识HTML5新增的语义化标记<header>描述文档的头部区域<nav>定义导航链接的部分<article>定义独立的内容<section>定义文档中的节，通常包含一组内容及其标题<aside>定义页面主区域内容之外的内容（比如侧边栏）<footer>描述文档的底部区域，页脚通常包含版权信息和联系信息第2章

HTML、CSS和JS基础知识DEMO第2章

HTML、CSS和JS基础知识CSS3引入的常用新特性CSS3新增的常用样式属性新长度单位新颜色：透明度box-sizingcontent-boxborder-boxinherit圆角、阴影、渐变第2章

HTML、CSS和JS基础知识DEMO第2章

HTML、CSS和JS基础知识新的布局方式——弹性盒子（flexbox）pc端移动端第2章

HTML、CSS和JS基础知识DEMO第2章

HTML、CSS和JS基础知识新的布局方式——网格布局（Grid）第2章

HTML、CSS和JS基础知识DEMO第2章

HTML、CSS和JS基础知识

ES6的特性箭头函数剩余运算符与剩余参数展开运算符数组的解构赋值对象解构赋值模块DEMOHTML5新增的语义化标记DEMOCSS3引入的常用新特性DEMO新的布局方式——弹性盒子（flexbox）DEMO（顶部导航栏）新的布局方式——网格布局（Grid）DEMO（计算器）请看第3章——

jQuery选择器与管理结果集jQuery+Bootstrap

2021.6jQuery+Bootstrap主讲：温谦第3章jQuery选择器与管理结果集属性选择器包含选择器DEMO位置选择器DEMO过滤选择器遍历DOMDEMO管理结果集DEMOjQuery链DEMO第3章jQuery选择器与管理结果集

第3章jQuery选择器与管理结果集选择器属性选择器包含选择器选择器说明*所有标记E所有名称为E的标记EF所有名称为F的标记，并且是E标记的子标记（包括孙、重孙等）E>F所有名称为F的标记，并且是E标记的子标记（不包括孙标记）E+F所有名称为F的标记，并且该标记紧接着前面的E标记E~F所有名称为F的标记，并且该标记前面有一个E标记第3章jQuery选择器与管理结果集选择器说明E:has(F)所有名称为E的标记，并且该标记包含F标记E.C所有名称为E的标记，属性类别为C，如果去掉E，就是属性选择器.CE#I所有名称为E的标记，id为I，如果去掉E，就是id选择器#IE[A]所有名称为E的标记，并且设置了属性AE[A=V]所有名称为E的标记，并且属性A的值等于VE[A^=V]所有名称为E的标记，并且属性A的值以V开头E[A$=V]所有名称为E的标记，并且属性A的值以V结尾E[A*=V]所有名称为E的标记，并且属性A的值中包含V第3章jQuery选择器与管理结果集DEMO第3章jQuery选择器与管理结果集位置选择器:first:last:first-child:last-child:only-child:nth-child(n):nth-child(odd|even):nth-child(nX+Y):odd或:even:eq(n):gt(n):lt(n)第3章jQuery选择器与管理结果集DEMO第3章jQuery选择器与管理结果集过滤选择器选择器说明:animated所有处于动画中的元素:button所有按钮，包括input[type=button]、input[type=submit]、input[type=reset]和<button>标记:checkbox所有多选项，等同于input[type=checkbox]:contains(foo)选择所有包含了文本“foo”的元素:disabled页面中被禁用了的元素:enabled页面中没有被禁用的元素:file上传文件的元素，等同于input[type=file]:header选中所有标题元素，例如<h1>~<h6>:hidden页面中被隐藏了的元素:image图片提交按钮，等同于input[type=image]第3章jQuery选择器与管理结果集选择器说明:input表单元素，包括<input>、<select>、<textarea>、<button>:not(filter)反向选择:parent选择所有拥有子元素（包括文本）的元素，空元素将被排除:password密码框，等同于input[type=password]:radio单选项，等同于input[type=radio]:reset重置按钮，包括input[type=reset]和button[type=reset]:selected下拉菜单中被选中的项:submit提交按钮，包括input[type=submit]和button[type=submit]:text文本输入框，等同于input[type=text]:visible页面中的所有可见元素第3章jQuery选择器与管理结果集DEMO第3章jQuery选择器与管理结果集反向过滤器input:not(:radio)表示<input>标记中所有的非radio元素反向过滤也可以链式使用，例如：$(":input:not(:checkbox):not(:radio)").addClass("myClass");第3章jQuery选择器与管理结果集遍历DOMchildren()parent()和parents()siblings()方法说明closest()返回被选元素的第一个祖先元素。next()返回被选元素的下一个同级元素，该方法只返回一个元素。nextAll()返回被选元素的所有跟随的同级元素。nextUntil()返回介于两个给定参数之间的所有跟随的同级元素。offsetParent()获得被定位的最近祖先元素。parentsUntil()获得当前匹配元素集合中每个元素的祖先元素，直到（但不包括）被选择器、DOM节点或jQuery对象匹配的元素。prev()返回被选元素的前一个同级元素，该方法只返回一个元素。prevAll()获得当前匹配元素集合中每个元素的前面的同级元素，使用选择器进行筛选是可选的。prevUntil()获得当前匹配元素集合中每个元素的前面的同级元素，但不包括被选择器、DOM节点或jQuery对象匹配的元素。第3章jQuery选择器与管理结果集DEMO第3章jQuery选择器与管理结果集管理结果集获取选中元素的个数提取元素添加、删除、过滤find()查找each()遍历第3章jQuery选择器与管理结果集DEMO第3章jQuery选择器与管理结果集jQuery链$("div").addClass("myClass1").filter(function(index){returnindex==1||$(this).attr("id")=="fourth";}).addClass("myClass2");第3章jQuery选择器与管理结果集DEMO第3章jQuery选择器与管理结果集属性选择器包含选择器DEMO位置选择器DEMO过滤选择器遍历DOMDEMO管理结果集DEMOjQuery链DEMO请看第4章——

jQuery控制DOMjQuery+Bootstrap

2021.6jQuery+Bootstrap主讲：温谦第4章jQuery控制DOM

网页中的DOM模型框架DOM模型中的节点标记的属性DEMO元素的样式DEMO页面的元素DEMO表单元素的值DEMO元素的尺寸DEMO元素的位置DEMO第4章jQuery控制DOM

第4章jQuery控制DOM网页中的DOM模型框架<html><head><title>DOMPage</title></head><body><h2><ahref="#tom">标题1</a></h2><p>段落1</p><ulid="myUl"><li>JavaScript</li><li>DOM</li><li>CSS</li></ul></body></html>第4章jQuery控制DOMDOM模型中的节点元素节点文本节点属性节点<atitle="CSS"href="">Artech’sBlog</a>第4章jQuery控制DOM标记的属性获取属性的值attr(name)设置属性的值attr(name,value)删除属性$("button").removeAttr("disabled")第4章jQuery控制DOMDEMO第4章jQuery控制DOM元素的样式添加、删除CSS类添加：addClass(names)删除：removeClass(names)动态切换toggleClass(name)直接获取、设置样式获取：css(name)设置：css(name,value)设置元素的多种样式：css(properties)例如：$("p").css({color:"#ff0011",background:"blue"});某个元素是否存在某个css类名：hasClass(name)或者is(name)第4章jQuery控制DOMDEMO第4章jQuery控制DOM页面的元素直接获取、编辑内容获取：html()和text()设置：html(content)和text(content)添加元素append()和appendTo()prepend()和prependTo()before()和insertBefore()after()和insertAfter()删除元素removeChild()remove()克隆元素clone()和clone(true)第4章jQuery控制DOMDEMO第4章jQuery控制DOM表单元素的值获取表单元素的值$("[name=radioGroup]:checked").val()设置表单元素的值$("input[type=text]").val(text);第4章jQuery控制DOMDEMO第4章jQuery控制DOM元素的尺寸width()和height()方法设置或返回元素的宽度和高度（不包括内边距、边框或外边距）innerWidth()和innerHeight()方法返回元素的宽度和高度（包括内边距）outerWidth()和outerHeight()方法返回元素的宽度和高度（包括内边距和边框）第4章jQuery控制DOMDEMO第4章jQuery控制DOM元素的位置offset()方法返回或设置匹配元素相对于文档的偏移（位置），即元素相对于浏览器左上角的位置返回的对象包含两个属性：top和left，以像素计。position()方法返回匹配元素相对于祖先元素的位置（有定位的祖先元素）scrollTop()方法返回或设置匹配元素的滚动条的垂直位置第4章jQuery控制DOMDEMO第4章jQuery控制DOM

网页中的DOM模型框架DOM模型中的节点标记的属性DEMO元素的样式DEMO页面的元素DEMO表单元素的值DEMO元素的尺寸DEMO元素的位置DEMO请看第5章——

jQuery事件jQuery+Bootstrap

2021.6jQuery+Bootstrap主讲：温谦第5章jQuery事件

事件与事件流事件监听DEMOJavaScript的事件监听DEMO移除事件监听事件对象DEMO事件的触发（只列出了常用的几个）DEMO事件的动态交替DEMO事件委托DEMODEMO（快餐在线）第5章jQuery事件

第5章jQuery事件事件与事件流冒泡阶段捕获阶段第5章jQuery事件事件监听bind()方法bind(eventType,[data],Listener)其中eventType为事件的类型：（只列出了几个）blurfocuskeyupscrollclickone()方法该方法绑定的事件触发了一次之后会自动删除，不再生效。第5章jQuery事件DEMO第5章jQuery事件JavaScript的事件监听简单的行内写法<ponclick="alert('我被点击了');">ClickMe</p>设置事件监听函数添加监听事件：addEventListener()删除监听事件：removeEventListener()监听函数的格式：[object].addEventListener("event_name",fnHandler,bCapture);第5章jQuery事件DEMO第5章jQuery事件移除事件监听$("p").bind("click",myFunc);$("p").unbind("click",myFunc);事件对象altKeyctrlKeykeyCodepageX,pageYrelatedTargetscreenX,screenYshiftKeytargettypewhichstopPropagation()preventDefault()第5章jQuery事件DEMO第5章jQuery事件事件的触发（只列出了常用的几个）blurchangeclickfocusselectsubmithover第5章jQuery事件DEMO第5章jQuery事件事件的动态交替hover事件的交替hover(over,out)方法接收两个参数，均为函数。click事件的交替第5章jQuery事件DEMO第5章jQuery事件事件委托语法：$(selector).on(event,childSelector,function)取消事件委托：$(selector).off(event,childSelector)第5章jQuery事件DEMO第5章jQuery事件动手练习：快餐在线第5章jQuery事件DEMO第5章jQuery事件

事件与事件流事件监听DEMOJavaScript的事件监听DEMO移除事件监听事件对象DEMO事件的触发（只列出了常用的几个）DEMO事件的动态交替DEMO事件委托DEMODEMO（快餐在线）请看第6章——

jQuery的功能函数jQuery+Bootstrap

2021.6jQuery+Bootstrap主讲：温谦第6章jQuery的功能函数

处理JavaScript对象DEMO获取外部代码$.data()方法$.extend()方法DEMO类型检测判断数据类型的工具方法DEMO第6章jQuery的功能函数

第6章jQuery的功能函数处理JavaScript对象$.each()遍历$.each(object,fn);数据过滤$.grep(array,fn,[invert])数组的转化$.map(array,fn)数组元素的查找$.inArray(value,array)第6章jQuery的功能函数DEMO第6章jQuery的功能函数获取外部代码$.getScript(url,[callback])$.data()方法在指定的元素上存取键值对的数据$.extend()方法$.extend(target,object1[,objectN])$.extend(true,target,object1[,objectN])第6章jQuery的功能函数DEMO第6章jQuery的功能函数类型检测JavaScript中的数据类型分别为：字符串布尔值对象数字nullundefinedsymbol其中对象类型分别为：复合类型包括函数日期正则两个常用的判断数据类型方法：$.type()和typeof第6章jQuery的功能函数判断数据类型的工具方法判断数据类型的工具方法说明$.isFunction()判断是否是函数类型$.isNumeric()判断是否是数字类型$.isArray()判断是否是数组$.isWindow()判断是否是window类型$.isEmptyObject()判断是否是空对象类型$.isPlainObject()判断是否是对象自变量类型（通过{}或者newObject()方式创建出来的对象）$.isXMLDoc()判断是否位于XML文档中第6章jQuery的功能函数DEMO第6章jQuery的功能函数

处理JavaScript对象DEMO获取外部代码$.data()方法$.extend()方法DEMO类型检测判断数据类型的工具方法DEMO请看第7章——

jQuery与AjaxjQuery+Bootstrap

2021.6jQuery+Bootstrap主讲：温谦第7章jQuery与Ajax认识AjaxAjax的好处Ajax的组成部分获取异步数据DEMOGET与POSTDEMO控制AjaxDEMO全局设定Ajax——$.ajaxSetup(options)DEMOAjax事件DEMODEMO模拟百度的数据加载jQuery制作自动提示的文本框第7章jQuery与Ajax

第7章jQuery与Ajax认识Ajax第7章jQuery与AjaxAjax的好处减轻服务器的负担，加快浏览速度。带来更好的用户体验。基于标准化并被广泛支持的技术，不需要下载插件或小程序。进一步促进页面呈现与数据分离。第7章jQuery与AjaxAjax的组成部分技术角色JavaScriptJavaScript是通用的脚本语言，用来嵌入在某种应用之中。Ajax应用程序是使用JavaScript编写的。CSSCSS为Web页面元素提供了可视化样式的定义方法。Ajax应用中，用户界面的样式可以通过CSS独立修改。DOM通过JavaScript修改DOM，Ajax应用程序可以在运行时改变用户界面，或者局部更新页面中的某个节点。XMLHttpRequest对象XMLHttpRequest对象允许web程序员从web服务器以后台的方式获取数据。数据的格式通常是JSON、XML，或者是文本。第7章jQuery与Ajax

第7章jQuery与Ajax获取异步数据传统方法jQuery的load()方法load(url,[data],[callback])第7章jQuery与AjaxDEMO第7章jQuery与AjaxGET与POST$.get(url,[data],[callback])$.post(url,[data],[callback],[type])第7章jQuery与AjaxDEMO第7章jQuery与Ajax控制Ajax设置Ajax的细节——$.ajax(options)名称类型说明async布尔值如果设置为true则为异步请求（默认值），false为同步请求beforeSend函数发送请求前调用的函数，通常用来修改XMLHttpRequest，该函数接收一个唯一的参数，即XMLHttpRequestcache布尔值如果设置为false，则强制页面不进行缓存complete函数请求完成时的回调函数（如果设置了success或者error，则在它们执行完之后才执行）contentType字符串请求类型，默认为表单的application/x-www-form-urlencodeddata对象/字符串发送给服务器的数据，可以是对象的形式，也可以是url地址的形式error函数请求失败时调用的函数，该函数接受三个参数，第一个参数为XMLHttpRequest，第二个参数为相关的错误信息textStatus，第三个参数为可选参数，表示异常对象global布尔值如果设置为true，则允许触发全局函数，默认为true第7章jQuery与Ajax名称类型说明dataType字符串希望服务器返回的数据类型，如果不设置则根据MIME类型返回responseText或者responseXML。常用的有如下几种值：1.“xml”：返回XML值2.“htm”：返回文本值，可以包含标记3.“script”：返回JavaScript脚本4.“json”：返回JSON5.“text”：返回纯文本值ifModified布尔值如果设置为true，则只有当返回结果相对于上次改变时才算成功，默认为falsepassword字符串密码processData布尔值如果设置为false，将阻止数据被自动转化为URL编码，通常在发送DOM元素时使用，默认为truesuccess函数如果请求成功则调用该函数，该函数接收两个参数，第一个参数为服务器返回的数据data，第二个参数为服务器的状态textStatustimeout数值设置超时的时间，单位为毫秒type字符串请求方式，例如GET、POST等，如果不设置，默认为GETurl字符串请求服务器的地址username字符串用户名第7章jQuery与Ajax第7章jQuery与AjaxDEMO第7章jQuery与Ajax全局设定Ajax——$.ajaxSetup(options)第7章jQuery与AjaxDEMO第7章jQuery与AjaxAjax事件对于.ajax()而言，事件分别为：beforeSendsuccesserrorcomplete类似.ajaxSetup()与$.ajax()的关系，jQuery还提供了6个全局事件：ajaxStartajaxSendajaxSuccessajaxErrorajaxCompleteajaxStop第7章jQuery与AjaxDEMO第7章jQuery与Ajax实例：模拟百度的数据加载第7章jQuery与AjaxDEMO第7章jQuery与Ajax实例：jQuery制作自动提示的文本框第7章jQuery与AjaxDEMO第7章jQuery与Ajax认识AjaxAjax的好处Ajax的组成部分获取异步数据DEMOGET与POSTDEMO控制AjaxDEMO全局设定Ajax——$.ajaxSetup(options)DEMOAjax事件DEMODEMO模拟百度的数据加载jQuery制作自动提示的文本框请看第8章——

jQuery制作动画与特效jQuery+Bootstrap

2021.6jQuery+Bootstrap主讲：温谦第8章jQuery制作动画与特效元素的显示和隐藏DEMO渐入渐出的特效DEMO幻灯片效果DEMO自定义动画DEMO第8章jQuery制作动画与特效

第8章jQuery制作动画与特效元素的显示和隐藏show()和hide()toggle()第8章jQuery制作动画与特效DEMO第8章jQuery制作动画与特效渐入渐出的特效再探show()、hide()和toggle()show(duration,[callback]);hide(duration,[callback]);toggle(duration,[callback])fadeIn()和fadeOut()fadeIn(duration,[callback])fadeout(duration,[callback])自定义变幻透明度fadeTo(duration,opacity,callback)第8章jQuery制作动画与特效DEMO第8章jQuery制作动画与特效幻灯片效果slideUp(duration,[callback])slideDown(duration,[callback])第8章jQuery制作动画与特效DEMO第8章jQuery制作动画与特效自定义动画animate(params,[duration],[easing],[callback])第8章jQuery制作动画与特效DEMO第8章jQuery制作动画与特效元素的显示和隐藏DEMO渐入渐出的特效DEMO幻灯片效果DEMO自定义动画DEMO请看第9章——

jQuery插件jQuery+Bootstrap

2021.6jQuery+Bootstrap主讲：温谦第9章jQuery插件

模拟加入购物车拖拽方法draggable()可接收的参数DEMO拖入购物车DEMODEMO模拟框提示——izModal插件流行的Tab菜单轮播图第9章jQuery插件

第9章jQuery插件模拟加入购物车鼠标拖拽——draggable()第9章jQuery插件拖拽方法draggable()可接收的参数常用的如下表所示：参数说明helper被拖拽的对象，默认为original，即运行draggable()的选择器本身。如果设置为clone，则以复制的形式拖拽handle触发拖拽的对象，通常为块中的一个子元素start当拖拽启动时的回调函数，该函数接收两个参数，第一个参数为event事件，其target属性指代被拖拽的元素；第二个参数为拖拽相关的对象。stop当拖拽结束时的回调函数，参数与start的完全相同drag在拖动过程中时时运行的函数，参数与start的完全相同axis控制拖拽的方向，可以为“x”或者“y”containment限制拖拽的区域，可以为“parent”、“document”、指定的元素、指定坐标的对象grid每次对象移动的步长，例如grid:[100,80]表示水平方向上每次移动100个像素，竖直方向为80个像素opacity拖拽过程中对象的透明度，范围0.0~1.0revert如果为true，则对象在拖拽结束后会自动返回原处，默认为false第9章jQuery插件DEMO第9章jQuery插件拖入购物车——droppable()来实现接收容器参数说明accept如果是字符串则表示允许接收的jQuery选择器，如果是函数则对页面中的所有droppable()对象执行，返回true者可以接收activeClass当可接收对象被拖拽时，容器的CSS样式风格hoverClass当可接收对象进入容器时，容器的CSS样式风格tolerance定义拖拽到什么状态算是进入了该容器，可选的有“fit”、“intersect”、“pointer”和“touch”active当可接收对象开始被拖拽时，调用的函数deactive当可接收对象不再被拖拽时，调用的函数over当可接收对象被拖拽到容器上方时，调用的函数out当可接收对象被拖拽出容器时，调用的函数drop当可接收对象被拖拽真正进入容器时，调用的函数。第9章jQuery插件DEMO第9章jQuery插件模态框提示——iziModal插件下载并引入js和css文件第9章jQuery插件DEMO第9章jQuery插件流行的Tab菜单第9章jQuery插件DEMO第9章jQuery插件轮播图第9章jQuery插件DEMO第9章jQuery插件

模拟加入购物车拖拽方法draggable()可接收的参数DEMO拖入购物车DEMODEMO模拟框提示——izModal插件流行的Tab菜单轮播图请看第10章——

综合案例——网页留言本jQuery+Bootstrap

2021.6jQuery+Bootstrap主讲：温谦第10章

综合案例——网页留言本

基本留言本改为Ajax方式留言本对表单数据进行验证DEMO（网页留言本）第10章

综合案例——网页留言本

第10章

综合案例——网页留言本基本留言本第10章

综合案例——网页留言本改为Ajax方式留言本第10章

综合案例——网页留言本对表单数据进行验证第10章

综合案例——网页留言本DEMO第10章

综合案例——网页留言本

基本留言本改为Ajax方式留言本对表单数据进行验证DEMO（网页留言本）请看第11章——

bootstrap基础jQuery+Bootstrap

2021.06jQuery+Bootstrap主讲：温谦第11章

Bootstrap基础Bootstrap是一个前端CSS框架Bootstrap版本简介Bootstrap的特点在网页中引入BootstrapBootstrap的常用样式标题类文本类列表类图片类表格类图标库Icons第11章

Bootstrap基础

第11章

Bootstrap基础Bootstrap是一个前端CSS框架包含了基本的元素样式重置、页面排版、图标库、栅格布局、表单样式、工具类、组件库等代码块快速构建移动优先的响应式页面简化Web前端开发的工作，提高效率第11章

Bootstrap基础Bootstrap版本简介首个版本于2011.8发布，由Twitter公司的两位设计师主导开发v2可选的响应式布局v3默认为“移动设备优先”的方式响应v4迁移到sass、flexbox，引入工具类v5删除对旧浏览器的支持，不依赖jQuery第11章

Bootstrap基础Bootstrap的特点1.响应式设计2.工具类优先3.丰富的组件4.学习曲线平缓5.CSS预编译6.易与其他框架结合使用第11章

Bootstrap基础在网页中引入Bootstrap<!doctypehtml><!–html5声明--><htmllang="zh-CN"><head><!--必须的meta标签--><metacharset="utf-8"><metaname="viewport"content="width=device-width,initial-scale=1"><!--Bootstrap的CSS文件--><linkrel="stylesheet"href="../dist/css/bootstrap.min.css"><title>Hello,Bootstrap!</title></head><body><h1>Hello,Bootstrap!</h1><!--Bootstrap所需的JS文件--><scriptsrc="../dist/js/bootstrap.bundle.min.js"></script></body></html>第11章

Bootstrap基础Bootstrap的常用样式——标题类常规标题h1~h6<h1>h1一级标题</h1><h2>h2二级标题</h2>副标题small<h2>二级标题<smallclass="text-muted">副标题</small></h2>突出标题display1~display6<h1class="display-1">Display1</h1><h1class="display-2">Display2</h1>第11章

Bootstrap基础Bootstrap的常用样式——文本类突出段落lead<pclass="lead">从常规段落中脱颖而出</p>内联文本<del></del><u></u><strong></strong><em></em><abbr></abbr><blockquote></blockquote>第11章

Bootstrap基础Bootstrap的常用样式——列表类移除默认样式<ulclass="list-unstyled"><li>HTML5</li><li>CSS3</li></ul>内联列表<ulclass="list-inline"><liclass="list-inline-item">Bootstrap</li><liclass="list-inline-item">Tailwind</li></ul>第11章

Bootstrap基础Bootstrap的常用样式——图片类响应式图片<img

src="1.jpg"

class="img-fluid">.img-fluid{max-width:100%;height:auto;}缩略图样式<img

src="1.jpg"

class="img-thumbnail">第11章

Bootstrap基础Bootstrap的常用样式——表格类基础表格样式<table

class="table">...</table>斑马纹效果<table

class="table

table-striped">...</table>增加边框<table

class="table

table-stripedtable-bordered">...</table>第11章

Bootstrap基础Bootstrap的常用样式——表格类响应式表格<divclass="table-responsive"><tableclass="tabletable-stripedtable-bordered">...</table></div>第11章

Bootstrap基础图标库Icons基础用法<i

class="bi-chat-dots"></i>设置颜色<i

class="bi-chat-dots-filltext-primary"></i>基础用法<i

class="bi-chat-dots-fillfs-2"></i>带图标的按钮<buttonclass="btnbtn-primary">

按钮<iclass="bi-chat-dots-fill"></i></button>第11章

Bootstrap基础Bootstrap是一个前端CSS框架Bootstrap版本简介Bootstrap的特点在网页中引入BootstrapBootstrap的常用样式标题类文本类列表类图片类表格类图标库Icons请看第12章——

CSS原子化与工具类jQuery+Bootstrap

2021.06jQuery+Bootstrap主讲：温谦第12章CSS原子化与工具类组件vs原子化原子化与工具类的优势工具类的使用工具类的规则响应式工具类颜色工具类尺寸工具类——font-size尺寸工具类——padding和margin尺寸工具类——width和height布局工具类——display布局工具类——flexbox运用工具类制作导航栏其他工具类——文本工具类其他工具类——浮动和定位其他工具类——边框、圆角、阴影DEMO（创建嵌套的留言组件）第12章CSS原子化与工具类

第12章CSS原子化与工具类组件vs原子化第12章CSS原子化与工具类原子化与工具类的优势解决类命名的困难组件往往需要语义化命名便于响应式设计可以直接运用响应式工具类CSS文件小工具类是全局共用的，几乎不用添加自定义的CSS类维护更容易修改局部的HTML，增加或删除工具类，不影响其他代码第12章CSS原子化与工具类工具类的使用（card.html）<divclass="rounded-topborderw-25position-relative"><imgsrc="images/1.jpg"class="img-fluidrounded-top"alt="..."><divclass="p-3"><ahref="#"class="fs-5text-darkd-blockmb-3text-decoration-nonestretched-link">户外风景摄影课程</a><divclass="d-flexjustify-content-betweenalign-items-baseline"><spanclass="text-danger">￥99.00</span><smallclass="text-secondary">39人学过</small></div></div>第12章CSS原子化与工具类工具类的规则一个CSS样式类只做一件事，通常只包含一个属性.{属性缩写}-{值}.p-0{

padding：0}.pt-1{

padding-top：0.25rem}.pb-2{padding-bottom：0.5rem}.m-3{

margin：1rem}.d-flex{display:flex}.fw-bold{font-weight:bold}第12章CSS原子化与工具类响应式工具类.{属性缩写}-{断点}-{值}<divclass="p-1p-md-2p-xl-4">……<div>第12章CSS原子化与工具类颜色工具类.text-{color}/*设置文本颜色*/.bg-{color}/*设置背景颜色*/.link-{color}/*设置链接颜色*/第12章CSS原子化与工具类尺寸工具类——font-size.fs-1/*2.5rem*/.fs-2/*2rem*/.fs-3/*1.75rem*/.fs-4/*1.5rem*/.fs-5/*1.25rem*/.fs-6/*1rem*/第12章CSS原子化与工具类尺寸工具类——padding和margin{property}{sides}-{size}{property}{sides}-{breakpoint}-{size}p,表示paddingm,表示margint，表示margin-top或padding-topb，表示margin-bottom或padding-bottoms，start的缩写，表示margin-left或padding-lefte，end的缩写，表示margin-right或padding-rightx，同时设置*-left和*-righty，同时设置*-top和*-bottom无，用于在元素的四周设置margin或padding0，表示消除margin或padding1，表示.25rem2，表示.5rem3，表示1rem4，表示1.5rem5，表示3remauto，表示margin:auto第12章CSS原子化与工具类尺寸工具类——width和height.w-{value}和.h-{value}.w-25{width:25%!important;}.w-50{width:50%!important;}.w-75{width:75%!important;}.w-100{width:100%!important;}.w-auto{width:auto!important;}.mw-100{max-width:100%!important;}.mh-100{max-height:100%!important;}第12章CSS原子化与工具类布局工具类——display.d-{value}.d-{breakpoint}-{value}noneinlineinline-blockblockgridflextable...第12章CSS原子化与工具类布局工具类——flexbox设为弹性盒子布局（display）.d-{flex|inline-flex}设置布局方向（flex-direction）.flex-{row|row-reverse|column|column-reverse}设置对齐方式（justify-content和align-items）.justify-content-{start|end|center|between|around|evenly}.align-items-{start|end|center|baseline|stretch}设置弹性（flex-grow和flex-shrink）.flex-{grow|shrink}-{0|1}设置间距.g-{0|1|2|3|4|5}设置顺序.order-{0|1|2|3|4|5|first|last}第12章CSS原子化与工具类运用工具类制作导航栏（nav-pc.html）第12章CSS原子化与工具类其他工具类——文本工具类CSS属性工具类text-align.text-{start|center|end}text-wrap.text-{wrap|nowrap}text-decoration.text-decoration-{none|underline|line-through}text-transform.text-{lowercase|uppercase|capitalize}word-wrap和word-break.text-breakfont-weight.fw-{normal|light|lighter|bold|bolder}font-style.fst-{normal|italic}第12章CSS原子化与工具类其他工具类——浮动和定位.float-{start|end|none}.float-{breakpoint}-{start|end|none}.clearfix,

清除浮动.position-{static|relative|absolute|fixed|sticky}第12章CSS原子化与工具类其他工具类——浮动和定位.float-{start|end|none}.float-{breakpoint}-{start|end|none}.clearfix,

清除浮动.position-{static|relative|absolute|fixed|sticky}第12章CSS原子化与工具类其他工具类——边框、圆角、阴影边框.border，所有边框设为1px

solid

#dee2e6.border-{top|end|bottom|start}，设置单个边框.border-{color}，设置边框颜色圆角.rounded-{size}.rounded-{top|end|bottom|start}阴影.shadow.shadow-{none|sm|lg}第12章CSS原子化与工具类动手练习：创建嵌套的留言组件(media-3.html)第12章CSS原子化与工具类组件vs原子化原子化与工具类的优势工具类的使用工具类的规则响应式工具类颜色工具类尺寸工具类——font-size尺寸工具类——padding和margin尺寸工具类——width和height布局工具类——display布局工具类——flexbox运用工具类制作导航栏其他工具类——文本工具类其他工具类——浮动和定位其他工具类——边框、圆角、阴影DEMO（创建嵌套的留言组件）请看第13章——

Bootstrap的栅格布局jQuery+Bootstrap

2021.06jQuery+Bootstrap主讲：温谦第13章Bootstrap的栅格布局栅格布局理念上手案例屏幕分辨率——高分屏响应式断点常规用法常规用法举例产品列表页设置行间距和列间距边框对齐高级用法——栅格嵌套流式布局列宽设定（整行等宽列、部分等宽列和自动宽度列）列的偏移（偏移类和工具类）第13章Bootstrap的栅格布局

第13章Bootstrap的栅格布局栅格布局理念第13章Bootstrap的栅格布局上手案例hands-on-5.html第13章Bootstrap的栅格布局屏幕分辨率——高分屏物理分辨率由设备上的物理像素决定逻辑分辨率将若干物理像素合起来当作一个像素看待第13章Bootstrap的栅格布局响应式断点断点CSS类中缀宽度特小无<576px小sm≥576px中md≥768px大lg≥992px特大xl≥1200px超大xxl≥1400px第13章

Bootstrap的栅格布局常规用法<divclass="container"><divclass="row"><divclass="col-{断点名}-{12份中占所占份数}"></div></div></div>第13章

Bootstrap的栅格布局常规用法举例产品列表页（layout-1.html）"col-6

col-md-4

col-lg-3

col-xl-2"

第13章Bootstrap的栅格布局设置行间距和列间距“gx-*”设置水平间距。“gy-*”设置垂直间距。“g-*”同时设置相同的水平间距和垂直间距。例如：class="row

g-5"

第13章Bootstrap的栅格布局边框对齐列间隔以padding方式分布在卡片两边行间隔以margin方式出现在卡片的上侧设置边框需要嵌套一层div

第13章

Bootstrap的栅格布局高级用法——栅格嵌套第13章

Bootstrap的栅格布局高级用法——流式布局.container，默认容器在不同的设备上，都会有一个自动预设的最大宽度。.container-fluid，流式容器不考虑任何断点，在所有设备上都是从左往右一直顶到浏览器窗口的左右两端。.container-{断点}，响应式容器上两种容器的结合，也就是指定一个断点，小于该断点时按照流式容器处理，大于或等于指定断点以后，按照默认容器处理。第13章

Bootstrap的栅格布局高级用法——列宽设定整行等宽列（col）第13章Bootstrap的栅格布局高级用法——列宽设定部分等宽列第13章Bootstrap的栅格布局高级用法——列宽设定自动宽度列（.col-{断点}-auto）

<div

class="container

bg-info">

<div

class="row">

<div

class="col

col-lg-2">Left</div>

<div

class="col

col-md-auto">自动宽度</div>

<div

class="col

col-lg-2">Right</div>

</div>

</div>第13章

Bootstrap的栅格布局高级用法——列的偏移偏移类（.offset-{断点}-{偏移量}）

<div

class="row">

<div

class="col-md-4">...</div>

<div

class="col-md-4

offset-md-4">...</div>

</div>第13章

Bootstrap的栅格布局高级用法——列的偏移工具类（.mx-auto,.ms-auto,.me-auto）

<div

class="row">

<div

class="col-md-4">...</div>

<div

class="col-md-4

ms-auto">...</div>

</div>第13章Bootstrap的栅格布局栅格布局理念上手案例屏幕分辨率——高分屏响应式断点常规用法常规用法举例产品列表页设置行间距和列间距边框对齐高级用法——栅格嵌套流式布局列宽设定（整行等宽列、部分等宽列和自动宽度列）列的偏移（偏移类和工具类）请看第14章——

bootstrap表单样式jQuery+Bootstrap

2021.06jQuery+Bootstrap主讲：温谦第14章Bootstrap的表单样式表单控件样式输入框（常规用法）输入框（不同状态）输入框（大小）选择框单选框与复选框——设置开关样式行内布局滑动输入输入组表单布局内联表单水平表单复制表单表单验证样式利用HTML5的表单验证利用第三方表单验证插件第14章Bootstrap的表单样式

第14章Bootstrap的表单样式表单控件样式输入框——常规用法

<div

class="mb-3">

<label

for="email"

class="form-label">邮箱</label>

<input

type="email"

class="form-control"

id="email"

placeholder="name@">

<div

class="form-text">您的邮箱不会被公开。</div>

</div>第14章Bootstrap的表单样式表单控件样式输入框——不同状态<input

type="email"

class="form-control"

id="email1"

disabled><input

type="email"

class="form-control"

id="email2"

readonly><input

type="email"

class="form-control-plaintext"

id="email3"readonly>第14章Bootstrap的表单样式表单控件样式输入框——大小<input

type="email"

class="form-control-sm"

id="email1"><input

type="email"

class="form-control"

id="email2"><input

type="email"

class="form-control-lg"

id="email3">第14章Bootstrap的表单样式表单控件样式选择框

<label

for="single"

class="form-label">申请的职位</label>

<select

class="form-select"

id="single">

<option

selected>--请选择--</option>

</select>第14章Bootstrap的表单样式表单控件样式单选框与复选框——常规用法<div

class="form-check">

<input

class="form-check-input"

type="checkbox"

id="checkbox">

<label

class="form-check-label"

for="checkbox">

Default

checkbox

</label></div>第14章Bootstrap的表单样式表单控件样式单选框与复选框——设置开关样式<div

class="form-check

form-switch">

<input

class="form-check-input"

type="checkbox"

id="checked">

<label

class="form-check-label"

for="checked">新消息通知</label></div>第14章Bootstrap的表单样式表单控件样式单选框与复选框——行内布局<div

class="form-check

form-check-inline">

<input

class="form-check-input"

type="checkbox">

<label

class="form-check-label"

for="inline1">足球</label></div>第14章Bootstrap的表单样式表单控件样式滑动输入<input

type="range"

class="form-range"

min="0"

max="5"

step="1">第14章Bootstrap的表单样式表单控件样式输入组<div

class="input-group

mb-3">

<input

type="text"

class="form-control">

<button

class="btn

btn-primary"

type="button">搜索</button></div>第14章Bootstrap的表单样式表单控件样式——使用总结控件类型Bootstrap类text/file/color等类型的input、textarea.form-control,.form-control-{sm|lg},.form-control-colorselect.form-select,.form-select-{sm|lg}radio、checkboxdiv.form-check

input.form-check-input

label.form-check-label

.form-switch,form-check-inlinerange.form-range输入组.input-group,input-group-textlabel.form-label提示文字.form-text第14章Bootstrap的表单样式表单布局内联表单输入框和按钮都在一行中，例如网站页头中的搜索表单。水平表单输入项少，每个输入项占满一行，一个一个从上往下排列，例如网站常用的登录注册表单。复制表单输入项非常多，通常创建复杂对象时需要使用，例如某教务系统录入个人信息表单。都使用栅格系统来布局第14章Bootstrap的表单样式表单布局——内联表单<form

class="row

g-3

align-items-center">

<div

class="col-auto">

<input>

</div>

<div

class="col-auto">

<input>

</div>

<div

class="col-auto">

<button>

</div></form>第14章