Bootstrap教程

Bootstrap简介

一、介绍

Bootstrap是基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架,主要用于开发响应式布局和移动设备优先的Web项目,还提供了许多现成的组件,如导航栏、下拉菜单、按钮、卡片等,可以大大减少前端开发的工作量。同时,它还支持响应式布局,可以根据不同设备的屏幕大小自动调整页面布局,提高用户体验。

Bootstrap是由美国Twitter公司的两名技术工程师Mark Otto和Jacob Thornton开发的开源前端开发框架。Bootstrap一直是GitHub上的热门开源项目,包括NASA的MSNBC(微软全国广播公司)的Breaking News都使用了该项目。国内一些移动开发者较为熟悉的框架,如WeX5前端开源框架等,也是基于Bootstrap源码进行性能优化而来。

二、发展历程

Bootstrap 最初是由 Twitter 的设计师和开发人员mdo 和 fat 在 2010 年中旬创造的,当时被称为 Twitter Blueprint。经过几个月的开发,该项目在首届黑客周(Hack Week)上获得了爆炸性的关注,吸引了各种技能水平的开发人员加入进来。在公开发布之前的一年多时间里,该项目一直作为公司内部工具开发的样式指南,并且一直沿用至今。

Bootstrap 首个版本于 2011 年 8 月 19 日发布,目前已经发布了超过 20 个版本,包括两次重要的重构:v2 和 v3。

在 Bootstrap 2 版本中,整个框架都添加了对响应式布局的支持,但是这是作为一个可选的样式表提供的;

而在 Bootstrap 3 版本中,再次重写了整个框架,并将“移动设备优先”这一理念深刻地融入到整个框架中。

在 Bootstrap 4 版本中,进行了全面重构,以推动 web 开发社区向前发展。其中两个架构方面的关键改变是:

  • 改用 Sass 编写代码以及采用 CSS flexbox 布局;
  • 通过使用大部分浏览器所支持的新的 CSS 属性、减少依赖项以及各种新技术的使用,从而进一步促进 web 开发的发展。

从Bootstrap 5版本开始,不再支持IE(Internet Explorer),并且脱离了对jQuery的依赖,大大提升了对原生JavaScript和各前端框架的支持,并更加完善了无障碍相关的辅助功能。

三、功能

1、基本结构:Bootstrap包含了 HTML、CSS 和 JavaScript 组件,用于构建响应式、移动设备优先的网站。

2、CSS:Bootstrap 的基本结构提供了一个带有网格系统、链接样式、背景等基本元素的页面布局。在 Bootstrap CSS 部分可以找到全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class,以及一个先进的网格系统。

3、组件:Bootstrap 还包含了许多可重用的组件,如图像、下拉菜单、导航、警告框、弹出框等等,这些组件可以大大减少前端开发的工作量,并且可以通过简单的配置来实现个性化定制。

4、JavaScript 插件:Bootstrap 还提供了十几个自定义的 jQuery 插件,可以直接包含所有的插件,也可以逐个包含这些插件,从而可以实现一些常见的交互效果,如轮播图、模态框等等。

5、定制:Bootstrap支持修改其组件、LESS 变量和 jQuery 插件来得到相应的版本,可以根据项目需求进行更加精细的控制和定制。

广告合作
QQ群号:707632017

温馨提示:

1、本网站发布的内容(图片、视频和文字)以原创、转载和分享网络内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。邮箱:2942802716#qq.com。(#改为@)

2、本站原创内容未经允许不得转裁,转载请注明出处“站长百科”和原文地址。

目录