Bootstrap学习笔记一

Bootstrap学习笔记一

1. Bootstrap能做什么？

Bootstrap是一个Web前端的开发框架，学习并遵守它的标准，即使没有学过网页设计的开发者，也能做出专业美观的页面，极大的提高工作效率。

2. Bootstrap简介？

Bootstrap用于开发响应式布局，移动设备网页项目。最早是由美国Twitter公司的设计师Mark Otto(马克.奥拓)和Jacob Thornton(雅各布.桑顿)合作开发,是基于HTML、CSS、JavaScript的前端开发框架，使用它可以快速简单的构建网页和网站。

3. Bootstrap的优势？

a. 良好的代码规范

b. 基于Less打造

c. 响应式开发

d. 丰富的组件与插件

e. 适应各种技术水平

f. 跨设备跨浏览器

g. 提供12列网格布局

h. 样式化的文档

i. 不断完善的代码库

j. 可定制的jQuery插件

k. 支持HTML 5

l. 支持CSS 3。

m. 提供开源代码。

4. Bootstrap 4浏览器支持

支持所有的主流平台浏览器，可以在Bootstrap源码文件中找到.browserslistrc文件，查看支持的浏览器版本。

5. Bootstrap 4组成

a. 页面布局：

在960栅格系统的基础上扩展出一套优秀的栅格布局，在响应式布局中有更强大的功能，能让栅格布局适用各种设备。

b. 页面排版

从全局的概念出发，定制主体文本，段落文本、强调文本、标题，Code风格、按钮，表单、表格等格式。

c. 通用样式

边距、边框、颜色、对齐方式、阴影、浮动，显示与隐藏等，可以使用这些通用样式开发，无须编写大量CSS样式。

d. 基本组件

按钮、下拉菜单、标签页、工具栏、工具提示和警告框等，这些组件都配有jQuery插件，提高用户交互体验，使产品活泼。

e. jQuery插件

帮助开发者实现与用户交互的功能：模态框、下拉菜单、滚动监听、标签页、工具提示、弹出提示、警告框、按钮、折叠、轮播。

6. Bootstrap插件：

a. Font Awesome

b. Flat UI

c. Bsie

d. Sco.js

e. jQuery-UI-Bootstrap

f. HTML 5 Boilerplate

g. Metro UI CSS

h. Chart.js

7. Bootstrap开发工具和资源

a. Layoutit(

http://www.bootcss.com/p/layoutit

)

b. Ibootstrap(

http://www.ibootstrap.cn

)

8. Bootstrap开发资源

使用Bootstrap开发网站就像在拼图一样，需要什么就拿什么最后拼成一个完整的样子。框架定义了大量的组件，根据网页的需要可以直接拿来相应的组件进行拼凑，然后稍微添加一些自定义的样式风格即可完成网页开放。

Bootstrap 3中文网：

http://www.bootcss.com/

Bootstrap 3 英文参考：

https://getbootstrap.com/

Bootstrap 4 中文网：

https://v4.bootcss.com/

Bootstrap 4 英文参考：

https://getbootstrap.com/docs/4.0/getting-started/introduction/

Bootstrap 4.2.1 英文参考:

https://getbootstrap.com/docs/4.2/getting-started/introduction/

Bootstrap 所有版本:https://getbootstrap.com/docs/versions