高二下北京理工大学出版社移动Web前端开发课件第9章 流行的BootStrap

2023-01-09
| 32页
| 63人阅读
| 0人下载
普通

内容正文：

本章简介： 第9章　流行的BootStrap BootStrap是一个基于HTML、CSS和JavaScript的框架集。它起源于Twitter，是目前最受欢迎的前端框架。它的灵活多变，尤其是响应式开发，使得前台开发变得更加快捷，更加高效。本章主要讲解BootStrap的框架基础、栅格系统、表单按钮以及各种组件。Bootstrap提供了一个带有栅格系统、链接样式、背景的基本结构。同时在CSS配置上，BootStrap自带以下特性：全局的CSS设置、定义基本的HTML元素样式、可扩展的class等。在组件方面，BootStrap包含了几十个可重用的组建，用于创建图像、下拉菜单、导航等等。在JavaScript插件上，BootStrap包含了十几个自定义的JQuery插件，功能较为全面。 课堂学习目标 理解BootStrap基础框架的使用方式 掌握栅格系统的使用 掌握表单、按钮、辅助类的使用 掌握BootStrap基本组件的使用 掌握BootStrap插件的使用 9.1认识BootStrap 9.1.1BootStrap起步 9.1.2十二栅格系统 9.1.1BootStrap起步 1．案例分析——栅格系统页面设计 1）需求分析 实现栅格系统对接横向的四个栅格响应式栅格系统。让四个栅格能够随着浏览器窗口的跳整而自适应。实现效果图如下： 2）设计思路 （1）规划网格布局，分为四栏布局。 （2）新建HTML文件，进行栅格系统的应用。 实现步骤 首先对bootstrap和jQuery进行引入，完成功能库和样式表的引入 <head> <link rel="stylesheet" href="bootstrap-4.0.0-dist/css/bootstrap.min.css"> <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script> <script src="bootstrap-4.0.0-dist/js/bootstrap.min.js"></script> </head> 知识点讲解 Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成的。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码进行性能优化而来。可以从 http://getbootstrap.com/ 上下载 Bootstrap 的最新版本。当您点击这个链接时，您将看到如下所示的网页： BootStrap分为预编译和已编译两种，如果使用的是未编译的源代码，需要编译less文件来生成可用的css文件。对于编译less文件，BootStrap官方只支持Recess，这是Twitter的基于less.js的css提示。 less/、js/ 和 fonts/ 下的文件分别是 Bootstrap CSS、JS 和图标字体的源代码。 dist/ 文件夹包含了上面预编译下载部分中所列的文件和文件夹。 docs-assets/、examples/ 和所有的 *.html 文件是 Bootstrap 文档。 9.1.2十二栅格系统 1．案例分析——栅格系统页面设计 1）需求分析 实现栅格系统对接横向的四个栅格响应式栅格系统。让四个栅格能够随着浏览器窗口的跳整而自适应。实现效果图如下： 2）设计思路 （1）规划网格布局，分为四栏布局。 （2）新建HTML文件，进行栅格系统的应用。 实现步骤 首先对bootstrap和jQuery进行引入，完成功能库和样式表的引入 <head> <link rel="stylesheet" href="bootstrap-4.0.0-dist/css/bootstrap.min.css"> <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script> <script src="bootstrap-4.0.0-dist/js/bootstrap.min.js"></script> </head> 然后对页面的div进行栅格化处理，实现

资源预览图

高二下北京理工大学出版社移动Web前端开发课件第9章 流行的BootStrap
1
高二下北京理工大学出版社移动Web前端开发课件第9章 流行的BootStrap
2
高二下北京理工大学出版社移动Web前端开发课件第9章 流行的BootStrap
3
高二下北京理工大学出版社移动Web前端开发课件第9章 流行的BootStrap
4
高二下北京理工大学出版社移动Web前端开发课件第9章 流行的BootStrap
5
高二下北京理工大学出版社移动Web前端开发课件第9章 流行的BootStrap
6
所属专辑
由于学科网是一个信息分享及获取的平台，不确保部分用户上传资料的 来源及知识产权归属。如您发现相关资料侵犯您的合法权益，请联系学科网，我们核实后将及时进行处理。