框架实战课件04-Bootstrap入门到实战.pdf

Bootstrap入门到实战

刘军liujun

目录

1认识Bootstrap

content

2Bootstrap安装

3响应式容器原理

4网格系统的原理

5响应式工具和组件

6Bootstrap项目实

战

coderwhy认识Bootstrap

◼Bootstrap读音/ˈbu:tstræp/，是一个非常受欢迎的前端框架，官方网站将其描述为。

最流行的HTML、CSS和JS框架，用于在Web上开发响应式、移动优先的项目。(v3.x)

✓响应式页面：页面布局会随着屏幕尺寸的变化而自动调整布局，作用是适配各个屏幕。

Bootstrap是功能强大、可扩展，且功能丰富的前端工具包。（v5.x）

Bootstrap底层是使用Sass构建，支持定制（Sass、Color、CSSvariable）。（v5.x）

Bootstrap中的网格系统、组件以及强大的JavaScript插件可以让我们快速搭建响应式网站。(v5.x)

◼简单的理解

Bootstrap是由HTML、CSS和JavaScript编写可复用代码的集合（包括全局样式、组件、插件等），它是一个前端框架，使用该框

架能够快速开发出响应的网站（即适配PC、平板和移动端的网站）。

Bootstrap可以让我们免去编写大量的CSS代码（Writeless），让我们更专注于网站业务逻辑的开发。

Bootstrap是开源免费的，可以从GitHub直接拿到源码。

coderwhyBootstrap起源和历史

◼Bootstrap原名TwitterBlueprint，由Twitter公司的MarkOtto和JacobThornton编写。

他们的本意是想制作一套可以让网页保持统一风格的前端框架。

◼在Bootstrap之前，Twitter团队在开发界面时，不同的项目组会使用不同的代码库。

这样就会很容易导致界面风格不一致等问题，从而增加了后期的维护成本。

◼MarkOtto发现自己设计的工具比别人设计的更强大，能够做更多的事情。几个月之后，MarkOtto和一群开发人员做出了

Bootstrap的原型。然后经过他们开发小组几个月之后的努力，大家把TwitterBlueprint改名为Bootstrap。

◼在2011年8月19日将其作为开源项目发布。项目由MarkOtto、JacobThornton和核心开发小组维护。

◼在2012年1月31日发布Bootstrap2，增加了十二列网格系统和响应式组件，并对许多组件进行了修改。

◼在2013年8月19日发布Bootstrap3，开始将移动设备优先作为方针，并且开始使用扁平化设计，支持IE8-9。

◼在2018年1月7日发布Bootstrap4，增加了FlexboxGrid、Cards、SpacingUtilities等。

◼在2021年5月5日发布Bootstrap5，增强GridSystem、增强Formelements、NotSupportforIE、BootstrapIcons等

coderwhyBootstrap3-5版本的区别

/wiki/Bootstrap_(front-end_framework)

coderwhyBootstrap优缺点

◼BootStrap的优点

Bootstrap在Web开发人员中如此受欢迎的原因之一是它具有简