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

今天药忘吃喽~ 2021-09-14 13:52 516阅读 0赞

有一段时间没写博客了，在忙着公司的项目上线。最近终于有了点空闲时间，打算写一些关于前端响应式框架，头脑中第一时间就冒出了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：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		
    		
    		
    		<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>
    		
    		
    		<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>

效果图如下：

![SouthEast][]

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

[SouthEast]: /images/20210813/2b064a6cd0784d5dac0566117f7195aa.png