ch01-Bootstrap简述介绍的课件.pptVIP

第1章Bootstrap介绍Bootstrap概述Bootstrap特点Bootstrap结构开发工具：Hbuilder等等搭建环境，创建第一个页面教学内容重点Bootstrap特点难点Bootstrap结构重点、难点一．Bootstrap概述概述Bootstrap是由Twitter（推特）公司(全球最大的微博)的两名技术工程师研发的一个基于HTML、CSS、JavaScript的开源框架。该框架代码简洁、视觉优美，可用于快速、简单地构建基于PC及移动端设备的Web页面需求。bootstrap简洁灵活，使得开发更加快捷，可以让一个非前端工程师快速写出简洁美观的页面。Bootstrap最为重要的部分就是它的响应式布局，通过这种布局可以兼容PC端、PAD以及手机移动端的页面访问。Bootstrap下载及演示：国内文档翻译官网：二．Bootstrap特点特点(1)跨设备、跨浏览器可以兼容所有现代浏览器，包括比较诟病的IE7、8。当然，本课程不再考虑IE9以下浏览器。(2)响应式布局不但可以支持PC端的各种分辨率的显示，还支持移动端PAD、手机等屏幕的响应式切换显示。(3)提供的全面的组件Bootstrap提供了实用性很强的组件，包括：导航、标签、工具条、按钮等一系列组件，方便开发者调用。特点(4)内置jQuery插件Bootstrap提供了很多实用性的jquery插件，这些插件方便开发者实现Web中各种常规特效。(5)支持HTML5、CSS3HTML5语义化标签和CSS3属性，都得到很好的支持。(6)支持LESS动态样式LESS使用变量、嵌套、操作混合编码，编写更快、更灵活的CSS。它和Bootstrap能很好的配合开发。三．Bootstrap结构结构首先，想要了解Bootstrap的文档结构，需要在官网先把它下载到本地。解压后，目录呈现这样的结构：主要分为三大核心目录：css(样式)、js(脚本)、fonts(字体)。1.css目录中有四个css后缀的文件，其中包含min字样的，是压缩版本，一般使用这个；不包含的属于没有压缩的，可以学习了解css代码的文件；而map后缀的文件则是css源码映射表，在一些特定的浏览器工具中使用。2.js目录包含两个文件，是未压缩和压缩的js文件。3.fonts目录包含了不同后缀的字体文件。四．开发工具结构1.开发工具介绍网站开发的工具很多，比如Dreamweaver、Hbuilder、sublime、VSCode等等，推荐使用Hbuilder。2.Hbuilder的使用：百度搜索：Hbuilder官网，进入该软件官网下载即可。五．搭建环境，创建第一个页面结构1.环境搭建步骤1）百度搜索bootstrap，进入其中文官网，下载bootstrap基本环境包。然后复制到站点文件中。官网：/2）百度搜索jQuery，进入其官网，下载jQuery库文件，将jQuery库文件复制到站点的js文件夹中。3）在网页中通过link标签引入bootstrap框架的css样式文件。4）可选项，通过script标签首先引入jQuery库文件，然后引入bootstrap框架的js文件。!DOCTYPEhtmlhtmlhead metacharset=utf-8 title/title !--引入bootstrap框架的样式文件-- linkrel=stylesheettype=text/csshref=css/bootstrap.css//headbody buttonclass=btnbtn-info测试按钮/button !--引用jquery库文件-- scriptsrc=js/jquery-3.2.1.min.js/script !--引入bootstrap框架的js文件-- scriptsrc=js/bootstrap.min.js/script/body/html2.案例代码：第一个页面Bootstrap特点Bootstrap结构搭建bootstrap框架环境本讲总结作业：一、作业内容： 1.开发工具使用：Hbuilder 2.搭建bootstrap框架环境，创建第一个页面