有一段时间没写博客了，在忙着公司的项目上线。最近终于有了点空闲时间，打算写一些关于前端响应式框架，头脑中第一时间就冒出了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，它们的引入顺序如下：
<link rel="stylesheet" href="../libs/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="../libs/jquery/3.2.1/jquery.min.js"></script>
<script src="../libs/bootstrap/3.3.7/bootstrap.min.js"></script><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">（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：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!--禁用缩放(如在屏幕双击放大或缩小的情形)-->
<!--<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">-->
<!--允许缩放-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap CSS 概览</title>
<link rel="stylesheet" href="../libs/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="../libs/jquery/3.2.1/jquery.min.js"></script>
<script src="../libs/bootstrap/3.3.7/bootstrap.min.js"></script>
<style>
body {
font-size: 30px;
text-align: center;
}
</style>
</head>
<body>
<!--主容器样式.container 避免跨浏览器的不一致,通过上面的代码，把 container 的左右外边距（margin-right、margin-left）交由浏览器决定。请注意，由于内边距（padding）是固定宽度，默认情况下容器是不可嵌套的。-->
<!--Bootstrap 3 CSS 有一个申请响应的媒体查询，在不同的媒体查询阈值范围内都为 container 设置了max-width，用以匹配网格系统。即自动控制容器的最大宽度-->
<div class="container" style="background-color: green;">
<div style="background-color: orange; width: 100%; height: 100px;">container</div>
</div>
<div class="container-fluid" style="background-color: green; margin-top: 50px;">
<div style="background-color: orange; width: 100%; height: 100px;">container-fluid</div>
</div>
</body>
</html>效果图如下：
本篇只是简单谈了下博主对bs的见解，接下的博文会详细介绍各类bs实用组件的应用。若有不足之处，欢迎大家相互交流相互提升。
403
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
