响应式前端框架Bootstrap系列（1）浅谈Bootstrap

有一段时间没写博客了，在忙着公司的项目上线。最近终于有了点空闲时间，打算写一些关于前端响应式框架，头脑中第一时间就冒出了Bootstrap，毕竟它是Github上Star数最多的框架之一，下面简称bs。虽然bs的中文资料还蛮多的，百度一下就有一堆，但为了方便记忆，我还是想写一系列博文把它们分类总结一下。

平心而论，作为一个前端工程师，我并不会很热衷于使用bs框架，因为我参与的项目中至少会有一个专业的UI设计师，若用bs开发，就必须要经历这么一个过程：重写bs样式以符合设计师的要求。但即使重写后也未必百分百符合要求，就如阿里的设计师，他们将会严格要求至每一个像素。这种情况，对我来说还不如直接用原生开发，因为时间成本在这两者间并不会差别太大。其次，也有人提出可以用React+Bootstrap定制一套前端UI框架，想法不错，但是一家公司要是没有一定的技术和人才积累，要想搭建一套企业级的组件化UI工程，并不是轻而易举的事情，换句话说，按照现在的软件迭代速度，中小企业的时间和金钱的成本并不允许这样做，而像BAT这样的大企业也并不屑于这样做。因此，于我而言，bs更多是为了做一个演示前端的原型或后端界面的一个便捷工具库。我理解的响应式，就是界面能自适应各种设备和分辨率，bs框架简单来说就是一堆由响应式组件组成前端工具库，只要你简单加一些class就可以构建出样式上还看得过去的前端组件。现在bs最新的版本是3.3.7，接下来都会以这个版本为准展示demo。

言归正传，最新版本的bs样式编写由less编译转变为sass编译，要使用该工具库，至少得引进3个文件，分别是bootstrap.min.css、jquery.min.js和bootstrap.min.js，它们的引入顺序如下：

如果应用在移动端，头部还要加这样一段代码：

关于meta标签：

（1）width 属性控制设备的宽度。假设您的网站将被带有不同屏幕分辨率的设备浏览，那么将它设置为 device-width 可以确保它能正确呈现在不同设备上。

（2）initial-scale=1.0 确保网页加载时，以 1:1 的比例呈现，不会有任何的缩放。

（3）在移动设备浏览器上，通过为 viewport meta 标签添加 user-scalable=no 可以禁用其缩放（zooming）功能。通常情况下，maximum-scale=1.0 与 user-scalable=no 一起使用。这样禁用缩放功能后，用户只能滚动屏幕，就能让您的网站看上去更像原生应用的感觉。

bs框架里的组件常常放在主容器中，且最好一个界面只有一个主容器，主容器有两类：container和container-fluid，它们的区别在于：

（1）container：响应式，虽然padding为15px，但随着浏览器宽度的不同，容器距浏览器边框的margin不同，即margin会响应式的变化。

（2）container-fluid：仅padding为15px，容器没有margin值。

下面展示一段最简单的bs Demo：

	
		
		
		
		
		
		
		
		
		
		
	

	
		
		
		

			
container
		

		

			
container-fluid
		
	

效果图如下：

本篇只是简单谈了下博主对bs的见解，接下的博文会详细介绍各类bs实用组件的应用。若有不足之处，欢迎大家相互交流相互提升。