BootStrap入门学习PPT.ppt

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,2,*,BootStrap,入门学习,Part 2,1,2,Bootstrap,简介,什么是,Bootstrap,？,Bootstrap,是由,Twitter,的,Mark Otto,和,Jacob Thornton,两位设计师开发的。,Bootstrap,是,2011,年八月在,GitHub,上发布的开源产品。,Bootstrap,是一个用于快速开发,Web,应用程序和网站的前端框架。,Bootstrap,是基于,HTML,、,CSS,、,JAVASCRIPT,的。,Bootstrap,简洁灵活，使得,Web开发更加快捷。,Bootstrap,可以构建出非常优雅的前端界面，而且占用资源非常小。,为什么使用,Bootstrap,？,移动设备优先。框架包含了贯穿于整个库的移动设备优先的样式。,浏览器支持。所有的主流浏览器都支持。,容易上手。只要你具备,HTML,、,CSS,、,JS,基础知识，就可以开始学习。,响应式设计。,Bootstrap,的响应式,CSS,能够自适应于台式机、平板电脑和手机,2,7/15/2025,Bootstrap,环境安装,Bootstrap,下载,下载的中文地址：,为,Bootstrap,专门构建了自己的免费,CDN,加速服务。基于国内云厂商的,CDN,服务，访问速度更快加速效果更明显、没有速度和带宽限制、永久免费。,Bootstrap,中文网还对大量的前端开源工具库提供了,CDN,加速服务，请进入,BootCDN(,),主页查看更多可用的工具库。,什么是,CDN,加速服务？,CDN,的全称是,Content Delivery Network,，即内容分发网络。其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定。,4,7/15/2025,Bootstrap,基本模板,Bootstrap,模板注意事项,Bootstrap,模板必须是基于,HTML5,文件的。因此,DTD,类型定义必须是,HTML5,的。,Bootstrap,文件当字符集设置，也要遵循,HTML5,的规范。,设置,IE,浏览器兼容模式,(X-UA-Compatible),。,设置模板，适用于所有平台,(,viewport,),。,引入,bootstrap,的,CSS,主文件,(bootstrap.min.css),。,引入,jQuery,插件的主文件,(jQuery),引入,bootstrap,的,JS,主文件,(bootstrap.min.js),5,7/15/2025,全局,CSS,样式,概述,HTML5,文档类型,Bootstrap,使用到的某些,HTML,元素和,CSS,属性需要将页面设置为,HTML5,文档类型。在你项目中的每个页面都要参照下面的格式进行设置。,移动设备优先,Bootstrap,是移动设备优先的。针对移动设备的样式融合进了框架的每个角落，而不是增加一个额外的文件。为了确保适当的绘制和触屏缩放，需要在,之中添加,viewport,元数据标签。,6,7/15/2025,全局,CSS,样式,概述,禁用移动设备上的缩放功能,在移动设备浏览器上，通过为视口（,viewport,）设置,meta,属性为,user-scalable=no,可以禁用其缩放（,zooming,）功能。这样禁用缩放功能后，用户只能滚动屏幕，就能让你的网站看上去更像原生应用的感觉。,布局容器,Bootstrap,需要为页面内容和栅格系统包裹一个,.container,容器。我们提供了两个作此用处的类。注意，由于,padding,等属性的原因，这两种 容器类不能互相嵌套。,.container,类用于固定宽度并支持响应式布局的容器。,.container-fluid,类用于,100%,宽度，占据全部视口（,viewport,）的容器。,7,7/15/2025,CSS,全局样式,排版,标题,HTML,中的所有标题标签，,到,均可使用。另外，还提供了,.h1,到,.h6,类，为的是给内联（,inline,）属性的文本赋予标题的样式。,在标题内还可以包含,标签或赋予,.small,类的元素，可以用来标记副标题。,页面主体,Bootstrap,将全局,font-size,设置为,14px,，,line-height,设置为,1.428,。这些属性直接赋予,元素和所有段落元素。另外，,（段落）元素还被设置了等于,1/2,行高（即,10px,）的底部外边距（,margin,）。,8,7/15/2025,CSS,全局样式,排版,内联文本元素,被删除的文本：,HTML5,删除文本,、,XHTML,删除文本,插入的文件：,插入文本,下划线的文本：,下划线文本,小号文本：,或,.small,着重文本：,斜体文本：,文本对齐,class=“text-left”,文本左对齐,class=“text-right”,文本右对齐,class=“text-center”,文本中对齐,class=“text-justify”,文本两端对齐,class=“text-nowrap”,禁止文本换行,9,7/15/2025,CSS,全局样式,排版,改变大小写,class=“text-lowercase”,转成小写,class=“text-uppercase”,转成大写,class=“text-capitalize”,首字母大写,无序列表,顺序无关紧要的一组元素,有序列表,顺序至关重要的一组元素,无样式列表,内联列表,通过设置,display:inline-block;,并添加少量的内补（,padding,），将所有元素放置于同一行。,10,7/15/2025,CSS,全局样式,表格,表格全局类样式,描述：为任意,标签添加,.table,类可以为其赋予基本的样式,少量的内补（,padding,）和水平方向的分隔线。,举例：,.,条纹状表格,表格隔行变色,描述：通过,.table-striped,类可以给,之内的每一行增加斑马条纹样式。,举例：,.,带边框的表格,描述：添加,.table-bordered,类为表格和其中的每个单元格增加边框。,举例：,.,11,7/15/2025,CSS,全局样式,表格,鼠标悬停,通过添加,.table-hover,类可以让,中的每一行对鼠标悬停状态作出响应。,.,紧缩表格,通过添加,.table-condensed,类可以让表格更加紧凑，单元格中的内补（,padding,）均会减半。,.,状态类,通过这些状态类可以为,行或单元格,设置颜色。,.active,鼠标悬停在行或单元格上时所设置的颜色,.success,标识成功或积极的动作,.info,标识普通的提示信息或动作,.warning,标识警告或需要用户注意,.danger,标识危险或潜在的带来负面影响的动作,12,7/15/2025,CSS,全局样式,表格,响应式表格,将任何,.table,元素包裹在,.table-responsive,元素内，即可创建响应式表格，其会在小屏幕设备上（小于,768px,）水平滚动。当屏幕大于,768px,宽度时，水平滚动条消失。,垂直方向的内容截断：响应式表格使用了,overflow-y:hidden,属性，这样就能将超出表格底部和顶部的内容截断。,13,7/15/2025,CSS,全局样式,表单,表单样式概述,单独的表单控件会被自动赋予一些全局样式。所有设置了,.form-control,类的,、,和,元素都将被默认设置宽度属性为,width:100%;,。将,label,元素和前面提到的控件包裹在,.form-group,中可以获得最好的排列。,基本实例,placeholder,属性,描述：提供可描述输入字段预期值的提示信息,说明：该提示会在输入字段为空时显示，并会在字段获得焦点时消失是,HTML5,新属性。,placeholder,属性适用于以下的,类型：,text,search,url,tel,email,以及,password,。,14,7/15/2025,CSS,全局样式,表单,基本实例,不要将,表单组,直接和,输入框组,混合使用。建议将输入框组嵌套到表单组中使用。,15,7/15/2025,CSS,全局样式,表单,.form-group,表单组样式,.form-control,表单元素样式,.check,复选框选项,.help-block,帮助内容,16,CSS,全局样式,表单,内联表单,为,元素添加,.form-inline,类可使其,内容左对齐,并且表现为,inline-block,级别的控件。只适用于视口（,viewport,）至少在,768px,宽度时（视口宽度再小的话就会使表单折叠）。,17,7/15/2025,CSS,全局样式,表单,内联表单,对于内联表单，可以通过为,label,设置,.sr-only,类将其隐藏。,18,7/15/2025,CSS,全局样式,表单,水平排列的表单,通过为表单添加,.form-horizontal,类，并联合使用,Bootstrap,预置的栅格类，可以将,label,标签和控件组水平并排布局。这样做将改变,.form-group,的行为，使其表现为栅格系统中的行（,row,），因此就无需再额外添加,.row,了。,19,7/15/2025,CSS,全局样式,表单,20,7/15/2025,CSS,全局样式,表单,文本区域,支持多行文本的表单控件。可根据需要改变,rows,属性。,举例：,21,7/15/2025,CSS,全局样式,表单,单选项和复选框,.checkbox,控制复选框的样式。,举例：,音乐,.radio,可以控制单选项的样式。,举例：,.disabled,可以控制单选或复选文本是否禁用。,举例：,画画,22,7/15/2025,CSS,全局样式,表单,块元素的复选框和单选项,23,7/15/2025,CSS,全局样式,表单,内联的单选或复选框,通过将,.checkbox-inline,或,.radio-inline,类应用到一系列的多选框（,checkbox,）或单选框（,radio,）控件上，可以使这些控件排列在一行。,24,7/15/2025,CSS,全局样式,表单,下拉列表,通过给,标记添加,.form-control,样式来实现效果。,对于标记了,multiple,属性的,控件来说，也可添加该样式,.form-control,。,25,7/15/2025,CSS,全局样式,按钮,可作为按钮使用的标签或元素,为,、,或,元素添加按钮类（,button class,）即可使用,Bootstrap,提供的样式。,虽然按钮类可以应用到,和,元素上，但是，导航和导航条组件只支持,元素。,如果,元素被作为按钮使用，那么，务必为其设置,role=“button”,属性。,兼容性：,强烈建议尽可能使用,元素,来获得在各个浏览器上获得相匹配的绘制效果。,26,7/15/2025,CSS,全局样式,按钮,预定义样式,默认样式：,default,首选项：,primary,成功：,success,一般信息：,info,警告：,warning,危险：,Danger,链接：,Link,按钮激活和禁用状态,激活状态,(.active),：,禁用状态：,27,7/15/2025,CSS,全局样式,按钮,按钮尺寸,使用,.btn-lg,、,.btn-sm,或,.btn-xs,就可以获得不同尺寸的按钮。,Large button(,大按钮,),：,.btn-lg,Small button(,小按钮,),：,.btn-sm,Extra samll button(,超小按钮,),：,.btn-xs,通过给按钮添加,.btn-block,类可以将其拉伸至父元素,100%,的宽度，而且按钮也变为了块级（,block,）元素。,28,7/15/2025,CSS,全局样式,图片,响应式图片,在,Bootstrap,版本,3,中，通过为图片添加,.img-responsive,类可以让图片支持响应式布局。其实质是为图片设置了,max-width:100%;,、,height:auto;和,display:block;,属性，从而让图片在其父元素中更好的缩放。,如果需要让使用了,.img-responsive,类的图片水平居中，请使用,.center-block,类，不要用,.text-center,。,举例：,图片形状,圆角图片：,圆形图片：,边框圆角：,注意：,Internet Explorer 8,不支持,CSS3,中的圆角属性。,29,7/15/2025,CSS,全局样式,辅助类,文本颜色类,柔和的：,.,首选项：,.,成功：,.,信息：,.,警告：,.,危险：,.,背景颜色类,30,7/15/2025,CSS,全局样式,辅助类,三角符号,通过使用三角符号可以指示某个元素具有下拉菜单的功能。注意，向上弹出式菜单中的三角符号是反方向的。,联系我们,快速浮动类,通过添加一个类，可以将任意元素向左,(,.pull-left,),或向右浮动,(,.pull-right,),。,注意：不能用在导航条组件中，导航条组件要使用,.navbar-left,或,.navbar-right,。,让内容块在网页居中,为任意元素设置,display:block,属性并通过,margin,属性让其中的内容居中。,.,注意：一定要指定,width,，否则看不到效果。,31,7/15/2025,CSS,全局样式,辅助类,清除浮动,通过为父元素添加,.clearfix,类可以很容易地清除浮动（,float,）。,显示和隐藏内容,.show,和,.hidden,类可以强制任意元素显示或隐藏,(,对于屏幕阅读器也能起效,),。,.,.,32,7/15/2025,CSS,全局样式,浮动和清除,33,7/15/2025,CSS,全局样式,栅格系统,栅格系统介绍,Bootstrap,提供了一套响应式、移动设备优先的,流式栅格系统,，随着屏幕或视口（,viewport,）尺寸的增加，系统会自动分为,最多,12,列,。,栅格系统用于通过一系列的行（,row,）与列（,column,）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。,行（,row,）必须包含在,.container,（固定宽度）或,.container-fluid,（,100%,宽度）中，以便为其赋予合适的排列（,aligment,）和内补（,padding,）。,通过行（,row,）在水平方向创建一组列（,column,）。,你的内容应当放置于列（,column,）内，并且，只有列（,column,）可以作为行（,row,）的直接子元素。,栅格系统中的列是通过指定,1,到,12,的值来表示其跨越的范围。例如，三个等宽的列可以使用三个,.col-xs-4,来创建。,如果一行（,row,）中包含了的列（,column,）大于,12,，多余的列（,column,）所在的元素将被作为一个整体另起一行排列。34,7/15/2025,CSS,全局样式,栅格系统,栅格参数,通过下表可以详细查看,Bootstrap,的栅格系统是如何在多种屏幕设备上工作的。,样式名称,含义,分辨率,.container,最大宽度,列间隔,col-xs-*,超小屏幕、手机,768px,自动,30px,col-sm-*,小屏幕、平板,768px,750px,30px,col-md-*,中等屏幕 桌面显示器,992px,970px,30px,col-lg-*,大屏幕、大桌面显示器,1200px,1170px,30px,35,CSS,全局样式,栅格系统,36,7/15/2025,CSS,全局样式,栅格系统,实例：流式布局容器将最外面的布局元素,.container,修改为,.container-fluid,，就可以将固定宽度的栅格布局转换为,100%,宽度的布局。,37,7/15/2025,CSS,全局样式,栅格系统,列偏移,使用,.col-md-offset-*,类可以将列向右侧偏移。这些类实际是通过使用*选择器为当前元素增加了左侧的边距（,margin,）。例如，,.col-md-offset-4,类将,.col-md-4,元素向右侧偏移了,4,个列（,column,）的宽度。,38,7/15/2025,CSS,全局样式,栅格系统,列嵌套,为了使用内置的栅格系统将内容再次嵌套，可以通过添加一个新的,.row元素和一系列,.col-sm-*,元素到已经存在的,.col-sm-*,元素内。被嵌套的行（,row,）所包含的列（,column,）的个数不能超过,12,（其实，没有要求你必须占满,12,列）。,39,7/15/2025,Bootstrap,组件,Boostrap,组件概述,无数可复用的组件，包括字体图标、下拉菜单、导航、警告框、弹出框等更多功能。,40,7/15/2025,Boostrap,组件,字体图标,概述,包括,250,多个来自,Glyphicon Halflings,的字体图标。,Glyphicons,Halflings,一般是收费的，但是他们的作者允许,Bootstrap,免费使用。为了表示感谢，希望你在使用时尽量为,Glyphicons,添加一个友情链接。,41,7/15/2025,Boostrap,组件,字体图标,如何使用字体图标,出于性能的考虑，所有图标都需要一个,基类,和,对应每个图标的类,。把下面的代码放在任何地方都可以正常使用。注意，为了设置正确的内补（,padding,），,务必在图标和文本之间添加一个,空格,。,不要和其他组件混合使用,图标类不能和其它组件直接联合使用,。它们不能在同一个元素上与其他类共同存在。应该创建一个嵌套的,标签，并将图标类应用到这个,标签上。,只对内容为空的元素起作用,图标类只能应用在,不包含任何文本内容,或子元素的元素上。,42,7/15/2025,Boostrap,组件,字体图标,43,7/15/2025,Boostrap,组件,下拉菜单,描述,用于显示链接列表的可切换、有上下文的菜单。,将下拉菜单触发器和下拉菜单都包裹在,.dropdown,里。,通过为下拉菜单的父元素设置,.dropup,类，可以让菜单向上弹出（默认是向下弹出的）。,44,7/15/2025,Boostrap,组件,下拉菜单,对齐,默认情况下，下拉菜单自动沿着父元素的上沿和左侧被定位为,100%,宽度。,为,.dropdown-menu,添加,.dropdown-menu-right,类可以让菜单右对齐。,为,.dropdown-menu,添加,.dropdown-menu-left,类可以让菜单右对齐。,注意：要调整下拉菜单的宽度，否则看不到效果。,举例：,分割线,为下拉菜单添加一条分割线，用于将多个链接分组。,举例：,禁用的菜单项,为下拉菜单中的,元素添加,.disabled,类，从而禁用相应的菜单项。,实例：,45,7/15/2025,Boostrap,组件,按钮组,描述,通过按钮组容器,.btn-group,把一组按钮放在同一行里。,按钮组中，除第一个和最后一个按钮外，中间按钮没有圆角,。,46,7/15/2025,Boostrap,组件,按钮组,按钮工具栏,把一组,组合进一个,中就可以做成更复杂的组件。,47,7/15/2025,Boostrap,组件,按钮组,尺寸,只要给,.btn-group,加上,.btn-group-*,类，就省去为按钮组中的每个按钮都赋予尺寸类了，如果包含了多个按钮组时也适用。,.btn-group-lg,：应用于大型按钮组。,.btn-group,：应用于一般按钮组。,.btn-group-sm,：应用于小型按钮组。,.btn-group-xs,：应用于超小型按钮组。,48,7/15/2025,Boostrap,组件,按钮组,嵌套,想要把下拉菜单混合到一系列按钮中，只须把,.btn-group,放入另一个,.btn-group,中。,49,7/15/2025,Boostrap,组件,按钮组,垂直排列,让一组按钮垂直堆叠排列显示而不是水平排列。分列式按钮下拉菜单不支持这种方式。,.btn-group-vertical,不能和,.btn-group,一起使用，样式可能有差异。,50,7/15/2025,Boostrap,组件,按钮式下拉菜单,描述,把任意一个按钮放入,.btn-group,中，然后加入适当的菜单标签，就可以让按钮作为菜单的触发器了。按钮式下拉菜单依赖下拉菜单插件，因此需要将此插件包含在你所使用的,Bootstrap,版本中。,.dropdown-toggle,可以优化按钮组样式。,单按钮下拉菜单,只要改变一些基本的标记，就能把按钮变成下拉菜单的开关。,517/15/2025,Boostrap,组件,按钮式下拉菜单,分裂式按钮下拉菜单,相似地，分裂式按钮下拉菜单也需要同样的改变一些标记，但只是多一个分开的按钮。,52,7/15/2025,Boostrap,组件,按钮式下拉菜单,按钮尺寸,按钮式下拉菜单适用所有尺寸的按钮。,.btn-lg,：应用于大型按钮。,.btn-sm,：应用于小型按钮。,.btn-xs,：应用于超小型按钮。,向上弹出式菜单,给父元素添加,.dropup,类就能使触发的下拉菜单朝上方打开。,53,7/15/2025,Boostrap,组件,输入框组,描述,通过在文本输入框,前面、后面或是两边加上文字或按钮，可以实现对表单控件的扩展。为,.input-group,赋予,.input-group-addon,类，可以给,.form-control,的前面或后面添加额外的元素。,只支持文本输入框,，不能用于,和,元素。,尺寸,为,.input-group,添加相应的尺寸类，其内部包含的元素将自动调整自身的尺寸。尺寸类包括：,.input-group-lg,和,.input-group-sm,54,7/15/2025,Boostrap,组件,输入框组,作为额外元素的按钮,为输入框组添加按钮需要额外添加一层嵌套，不是,.input-group-addon,，而是添加,.input-group-btn,来包裹按钮元素。由于不同浏览器的默认样式无法被统一的重新赋值，所以才需要这样做。,55,7/15/2025,Boostrap,组件,输入框组,作为额外元素的按钮式下拉菜单,56,7/15/2025,Boostrap,组件,标签页,概述,Bootstrap,中的导航组件都依赖同一个,.nav,类，,.active,状态类也是共用的。,普通标签页,(,选项卡,),注意,.nav-tabs,类依赖,.nav,基类，用在,元素上。,.active,是状态类样式，用在,元素上。,57,7/15/2025,Boostrap,组件,标签页,胶囊式标签页,HTML,标记相同，但使用,.nav-pills,类：,胶囊是标签页也是可以垂直方向堆叠排列的。只需添加,.nav-stacked,类。,两端对齐,在大于,768px,的屏幕上，通过,.nav-justified,类可以很容易的让标签页或胶囊式标签呈现出同等宽度。在小屏幕上，导航链接呈现堆叠样式。,58,7/15/2025,Boostrap,组件,标签页,禁用的链接,对任何导航组件（标签页、胶囊式标签页），都可以添加,.disabled,类，从而实现链接为灰色且没有鼠标悬停效果。,链接功能不受到影响,。这个类只改变,的外观，不改变功能。可以自己写,JavaScript,禁用这里的链接。,59,7/15/2025,Boostrap,组件,标签页,带下拉菜单的标签页,607/15/2025,Boostrap,组件,导航条,默认导航条,导航条是在您的应用或网站中作为导航页头的响应式基础组件。它们在,移动设备上可以折叠,（并且可开可关），且在视口（,viewport,）宽度增加时逐渐变为水平展开模式。,61,7/15/2025,Boostrap,组件,导航条,品牌图标,将导航条内放置品牌标志的地方替换为,元素即可展示自己的品牌图标。由于,.navbar-brand,已经被设置了内补（,padding,）和高度（,height,），你需要根据自己的情况添加一些,CSS,代码从而覆盖默认设置。,62,7/15/2025,Boostrap,组件,导航条,表单,将表单放置于,.navbar-form,之内可以呈现很好的垂直对齐，并在较窄的视口（,viewport,）中呈现折叠状态。使用对齐选项可以规定其在导航条上出现的位置。,使用,.navbar-left,或,.navbar-right,可以实现表单左对齐或右对齐。,63,7/15/2025,Boostrap,组件,导航条,按钮,对于不包含在,中的,元素，加上,.navbar-btn,后，可以让它在导航条里垂直居中。,64,7/15/2025,Boostrap,组件,导航条,文本,把文本包裹在,.navbar-text,中时，为了有正确的行距和颜色，通常使用,标签。,65,7/15/2025,Boostrap,组件,导航条,导航条定位,添加,.navbar-fixed-top,类可以让导航条固定在顶部。,添加,.navbar-fixed-bottom,类可以让导航条固定在底部。,还可包含一个,.container,或,.container-fluid,容器，从而让导航条居中，并在两侧添加内补（,padding,）。,添加,.navbar-inverse,可以实现反色导航条,66,7/15/2025,Bootstrap,组件,路径导航,路径导航,在一个带有层次的导航结构中标明当前页面的位置。,各路径间的分隔符已经自动通过,CSS,的,:before,和,content,属性添加了。,给,或,添加,breakcrumb,可以实现“面包屑”效果。,67,7/15/2025,Bootstrap,组件,分页,默认分页,将分页类,.pagination,添加到,标记上，可以实现分页效果。,添加,.disabled,类可以实现禁用状态。,添加,.active,类可以实现激活状态。,给,添加,.pagination-lg,或,.pagination-sm,可以控制分页大小。,68,7/15/2025,Bootstrap,组件,分页,翻页效果,给,添加,.pager,类，可以实现“上一页”和“下一页”效果。,给,添加,.previous,和,.next,可以实现两端对齐。,69,7/15/2025,Bootstrap,组件,标签,概述,通过类样式,.label,和,.label-primary,可以实现标签的效果和样式。,70,7/15/2025,Bootstrap,组件,徽章,概述,给链接、导航等元素嵌套,元素，可以很醒目的展示新的或未读的信息条目。,71,7/15/2025,Boostrap,组件,缩略图,缩略图概述,通过缩略图组件扩展,Bootstrap,的 栅格系统，可以很容易地展示栅格样式的图像、视频、文本等内容。使用,.thumbnail,可以实现缩略图效果。,72,7/15/2025,Boostrap,组件,警告框,警告框描述,警告框组件通过提供一些灵活的预定义消息，为常见的用户动作提供反馈消息。,将任意文本和一个可选的关闭按钮组合在一起就能组成一个警告框，,.alert,类是必须要设置的，另外我们还提供了有特殊意义的,4,个类（例如，,.alert-success,、,.alert-info,、,.alert-warning,、,.alert-danger,），代表不同的警告信息。,可关闭的警告框,为警告框添加一个可选的,.alert-dismissible,类和一个关闭按钮。,警告框中的链接,用,.alert-link,工具类，可以为链接设置与当前警告框相符的颜色。,73,7/15/2025,解决,IE,低版本不支持,HTML5,元素的方法,html5shiv,的特点,html5shiv,的最大特点是让那些个不认,HTML5,的,IE,浏览器认出,HTML5,元素，并依照最基本的处理方法处理,HTML5,元素,块化（,display:block),。这样就阻止了脑残的,IE,对我们前端人员的残害。,html5shiv,的使用方法,html5shiv,的运用方法非常简略，默许只需要将,html5shiv,按下面方法放在页面的,head,内即可。,74,7/15/2025,解决,IE,低版本不支持,HTML5,元素的方法,html5shiv,的原理,html5shiv,的原理是使用,createElement,方法，这包含,document.createElement,和,document.createDocumentFragment,，对当前页面的,HTML5,元素进行动态的调整，并且为这些元素提供最基本的样式。,html5shiv,官方给的建议,使用,min,版本的,js,（压缩过的）以节省带宽和提高加载速度；,必须在,body,元素之前加载；,可以在页面的,CSS,之前或者之后加载，但从性能性能上出发，,CSS,先于,html5shiv,加载会更优。,75,7/15/2025,