《Web前端开发技术（》课件T_第八章.pptx

第八章

Bootstrap技术;Bootstrap，来自Twitter，是目前最受欢迎的前端框架，可用于快速构建Web应用程序，它具有以下特点：移动设备优先，响应式设计，浏览器支持好，容易上手，容易定制等。Bootstrap是基于Html、Css、JavaScript的，它简洁灵活，使得Web开发更加快捷。;在页面中通过引入相关css文件和js文件即可使用Bootstrap，其中css只有一个Bootstrap核心css文件，而js除了Bootstrap的js外可能还需要popper.js和jQuery文件，可以通过下面方式来获取Bootstrap：

下载Bootstrap库后到本地

通过CDN（内容分发网络）加载Bootstrap库

通过工具下载Bootstrap库;通过官网/或者其他开发网站下载Bootstrap库，下载的Bootstrap一般有2个版本。

生产版本(production)，这个版本的文件是经过压缩处理，适用于生产环境使用，能够节省带宽、提高性能，一般带有min字样。

开发版本(development)，这个版本的文件是未经过压缩处理的，适用于开发时进行调试。;css文件;Bootstrapjs文件的影响;通过CDN加载-css;通过CDN加载-js;通过工具下载;Bootstrap练习主要是看UI效果，在接下来的练习例子中都会使用统一的模板。;Bootstrap布局;Bootstrap布局-容器;容器-界点数值;Bootstrap布局-栅格系统;Bootstrap内容排版;文字排版-标题样式;文字排版-正文样式;文字排版-列表样式;代码样式;表格样式;效果;图片样式;Bootstrap组件包含了各式各样日常页面开发中用到的组件样式。方便我们在前期开发中设计出美观的页面。;警告框（Alerts）;徽章（Badge）;面包屑导航（Breadcrumb）;按钮（Buttons）;按钮组（Buttongroup）;卡片（Card）;轮播（Carousel）;折叠（Collapse）;下拉菜单（Dropdowns）;表单（Forms）;输入组（Inputgroup）;巨幕（Jumbotron）;列表组（Listgroup）;媒体对象（Mediaobject）;模态框（Modal）;导航（Navs）;导航条（Navbar）;分页（Pagination）;弹出框（Popovers）;进度条（Progress）;滚动监听（Scrollspy）;旋转图标（Spinners）;轻量弹框（Toasts）;工具提示框（Tooltips）