简单的了解一下bootstrap

1.背景介绍

Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。

Bootstrap 是一套用于 HTML、CSS 和 JS 开发的开源工具集。利用我们提供的 Sass 变量和大量 mixin、

响应式栅格系统、可扩展的预制组件、基于 jQuery 的强大的插件系统，能够快速为你的想法开发出原型或者构建整个 app。

 

2.知识剖析

基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。这将在 Bootstrap 基本结构 部分详细讲解。

CSS：Bootstrap 自带以下特性：全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class，以及一个先进的网格系统。

组件：Bootstrap 包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。

JavaScript 插件：Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接包含所有的插件，也可以逐个包含这些插件。

定制：您可以定制 Bootstrap 的组件、LESS 变量和 jQuery 插件来得到您自己的版本。

 

container和row以及col之间的关系

“行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。

你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。

.container类用于固定宽度并支持响应式布局的容器。

.row和.col类配合用于为其赋予合适的排列和内补

 

栅格参数

 

常见问题：

Q：媒体查询的兼容性如何？

A：因为响应式布局兼容性并不好，在IE8以下的浏览器中无法实现效果。大家宁愿采用1000PX以下宽度的页面。

 

Q：可以bootstrap3和bootstrap4混用吗？

A：不可以，会发生很多未知的错误。

 

Q：如果我想一行中分为五列这种不能被12整除的列怎么办呢？

A：可以自定义一个列，然后给宽设置20%。