最受欢迎的前端框架 —— Bootstrap学习

Bootstrap是Twitter的Mark Otto和Jacob Thornton开发的,是目前最受欢迎的前端框架,它简单灵活,使得Web前端开发更加快捷方便。

首先,要基本掌握Bootstrap框架:Bootstrap基本结构、Bootstrap CSS、Bootstrap 布局组件、Bootstrap 插件,以及用LESS实现定制。

Bootstrap的特点:

响应式布局设计:布局自动适应设备尺寸(但是移动设备优先)。

移动设备优先:从Bootstrap 3起,移动设备优先的样式,贯穿整个框架的库。

所有主流浏览器都支持Bootstrap。

为开发人员创建了,提供统一解决方案的接口。

开源、可基于Web定制。

Bootstrap 包的内容:

基本结构:提供了一个带有网格系统、链接样式、背景的基本结构。

CSS特性:一些全局的CSS设置、定义了基本的HTML元素的默认样式、可扩展的class、以及先进的网格系统的样式。

布局组件:包含10多个可重用的组件,用于创建图像、下拉菜单等。

插件:包含10多个自定义的jQuery插件,可以选择包含的插件。

定制Bootstrap:还可以定制Bootstrap的组件、LESS变量、jQuery插件,来获得自己的Bootstrap版本。

预编译版的Bootstrap的文件目录结构:

最受欢迎的前端框架 —— Bootstrap学习

其中包含了Glyphicons的 fonts,这也是一个可选的主题。

Bootstrap 源代码(也包含预编译的文件)的文件结构:

最受欢迎的前端框架 —— Bootstrap学习

如果您使用的是未编译的源代码,您需要编译 LESS 文件来生成可重用的 CSS 文件。对于编译 LESS 文件,Bootstrap 官方只支持 Recess,这是 Twitter 的基于 less.js 的 CSS 提示。很明显,我们通常选择预编译版的压缩版。

引入Bootstrap的文件:

<!-- 直接使用CDN(压缩版:4.x版本好像还有问题,要报错,一些响应式样式也没有了) --> <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <!-- 使用bootstrap的javascript插件之前,需要引入jQuery --> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zgywfp.html