Bootstrap基础教程（第3版）（微课版）课件 第一章 Bootstrap概述

第一章Bootstrap概述Bootstrap基础教程（第3版）（微课版）赵丙秀

目录CONTENTS12345Bootstrap简述为何使用Bootstrap如何使用Bootstrap下载Bootstrap简单模板6案例：Bootstrap实例Bootstrap简述Bootstrap框架是一个基于HTML、CSS、JavaScript的开源工具集，用于快速开发Web应用程序和网站的前端框架。Bootstrap是全球非常受欢迎的前端框架，用于开发响应式、移动设备优先的Web项目。2012年1月增加了新样式、修改了网页元素的默认样式、修改上版的错误。重大改变：添加了响应式设计特性，采用了更为灵活的12栅格布局。Bootstrap2.02013年3月Bootstrap3.02011年8月Twitter公司推出快速搭建网页应用的轻量级前端开发工具，由CSS语言Less编写。Bootstrap1发布Bootstrap3.0预览版本。Bootstrap3最大的变化是移动设备优先、扁平化设计。Bootstrap简述2020年12月2020年12月，发布Bootstrap5的内测版，2021年5月发布正式版，目前最新版本5.3.0。重大改变：删除了对jQuery的依赖，增加了CSS的自定义属性，栅格中增加了新的设备类型。支持从右向左显示页面。Bootstrap52015年8月2018年1月发布正式版。Bootstrap4重新改写框架，从Less迁移到Sass，支持弹性盒子模型，改进栅格系统。目前最新版本：4.6.2.Bootstrap4Bootstrap简述为何使用Bootstrap移动设备优先。自Bootstrap3起，框架包含了贯穿于整个库的移动设备优先的样式。浏览器支持。MicrosoftEdge、Firefox、Google等所有的主流浏览器都支持Bootstrap。容易上手。用户只需要具备HTML和CSS的基础知识即可。响应式设计。Bootstrap的响应式CSS能够自适应于台式计算机、平板电脑和手机。它为开发人员创建接口提供了一个简洁统一的解决方案。它包含了功能强大的内置组件，易于定制。它还提供了基于Web的定制。它是开源的。如何使用Bootstrap用户生产环境的Bootstrap：下载包为编译并且压缩后的CSS、JS，不包含文档和源代码。Bootstrap源码：包含Sass、JS的源码，并且带有文档，需要Sass编译器和一些设置工作。下载Bootstrap编译版官方网站：/源码版下载Bootstrapbootstrap/├──css/│├──bootstrap-grid.css│├──bootstrap-grid.css.map│├──bootstrap-grid.min.css│├──bootstrap-grid.min.css.map│├──bootstrap-grid.rtl.css│├──bootstrap-grid.rtl.css.map│├──bootstrap-grid.rtl.min.css│├──bootstrap-grid.rtl.min.css.map│├──bootstrap-reboot.css│├──bootstrap-reboot.css.map│├──bootstrap-reboot.min.css│├──bootstrap-reboot.min.css.map│├──bootstrap-reboot.rtl.css│├──bootstrap-reboot.rtl.css.map│├──bootstrap-reboot.rtl.min.css│├──bootstrap-reboot.rtl.min.css.map│├──bootstrap-utilities.css│├──bootstrap-utilities.css.map│├──bootstrap-utilities.min.css│├──bootstrap-utilities.min.css.map│├──bootstrap-utilities.rtl.css│├──bootstrap-utilities.rtl.css.map│├──bootstrap-utilities.rtl.min.css│├──bootstrap-utilities.rtl.min.css.map│├──bootstrap.css│├──bootstrap.css.map│├──bootstrap.min.css│├──bootstrap.min.css.map│├──bootstrap.rtl.css│├──bootstrap.rtl.css.map│├──bootstrap.rtl.min.css│└──bootstrap.rtl.min.css.map

bootstrap/

└──js/├──bootstrap.bundle.js├──bootstrap.bundle.js.map├──bootstrap.bundle.min.js├──bootstrap.bundle.min.js.map├──bootstrap.esm.js├──bootstrap.esm.js.map├──bootstrap.esm.min.js├──bootstrap.esm.min.js.map├──bootstrap.js├──bootstrap.js.map├──bootstrap.min.js└──bootstrap.min.js.map每组文件中包含：编译好的css和js文件编译并压缩的css和js文件对应的sourcemaps文件下载BootstrapCSS文件Layout（布局）Content（内容）Components（组件）Utilities（工具）bootstrap.cssbootstrap.min.cssIncluded（包含）Included（包含）Included（包含）Included（包含）bootstrap-grid.cssbootstrap-grid.min.css（仅包含栅格系统）Notincluded（不包含）Notincluded（不包含）（仅包含flex工具）bootstrap-reboot.cssbootstrap-reboot.min.cssNotincluded（不包含）（仅包含）Notincluded（不包含）Notincluded（不包含）Bootstrap-utilities.cssBootstrap-utilities.min.cssNotincluded（不包含）Notincluded（不包含）Notincluded（不包含）Included（包含）JSfilesPopperbootstrap.bundle.jsbootstrap.bundle.min.jsIncluded（包含）bootstrap.jsbootstrap.min.jsNotincluded（不包含）bootstrap/├──dist/│├──css/│└──js/├──site/│└──content/│└──docs/│└──5.3/│└──examples/├──js/└──scss/包含了CSS和JS的源码包含了预编译Bootstrap包内的所有文件包含了源码文档包含了Bootstrap的用法实例下载Bootstrap下载Bootstrapnpminstallbootstrap@5.3.0简单模板简单模板开发工具工欲善其事，必先利其器。开发工具开发工具HBuilderX它是DCloud（数字天堂）推出的一款支持HTML5的Web开发IDE，其自身主体由Java编写。HBuilderX为HTML5设计做过了特殊优化，快，是它的最大优势，通过完整的语法提示和代码输入法、代码块等，可以大幅提升HTML、css、js的开发效率。第一个bootstrap案例谷歌浏览器HBuilderX的快捷输入例子嵌套>