标题属于偷懒的结果，实际上本文内容定位并不算是对于bootstrap的入门。毕竟大家都很聪明，bootstrap上手也是没啥门槛的。所以本文其实是基于个人的对bootstrap的一些认识以及过往开发经验中的积累，来说说bootstrap的特点、某些用法以及需要注意的地方。另，本文是在默认读者对于bootstrap已有初步了解，或者至少粗略看完过bootstrap官方文档的情况下来编写的，请知悉。
一，开发中的相关规范及技巧
1，头部meta标签以及兼容性相关
一些兼容性相关的标签
IE的响应式效果的兼容
IE的兼容问题
2，栅格系统的使用
bootstrap中栅格系统通过给元素添加col-*类来实现，col类共有四种类型：
. col-xs-* . col-sm-* . col-md-* . col-lg-*
它们是通过设置的尺寸分割临界点来产生作用的，也就是说，如果你只给当前元素添加了其中的某一种class名，它可能只会在这种尺寸区间产生预期的效果，而不能保证其他size的显示设备时的排版效果。下图示例说明：
图1，示例代码块（部分css代码没在图片内）；
图2，屏幕宽度 < 992px时（即col-sm-*/col-xs-*）;
图3，屏幕宽度 > 992px时（即col-md-*/col-lg-*）;
示例图1，2，3
3，多显示设备下的栅格使用
多种尺寸的栅格排版也可能会有个性化的排版要求，因此我们可以对同一个div设置多个不同类型的栅格class来实现不同的排版效果；还有就是针对不同尺寸屏幕的显示内容的变化，也可以通过添加visible-*/hiddden-*的class来实现。
示例图1，2，3，4，5
4，栅格内容区
a，模块化内容区。
用模块化的方式去构建项目时，模块最外层不应该有规定栅格的class，而是应该在使用该模块的页面中去做栅格排版，这样就保证了模块的多处不一样排版情况下复用的可能。当然模块内部可以有自己的栅格划分，模块内有栅格的话，最外层div应该有row这个class，如图：
模块创建示例
b，容器内的单位设置。
因为bootstrap作为响应式的框架，其栅格的宽度是一个变化值。所以我们在排版上尽量做到用栅格去切割排列，而少用我们常见的inline-block，float，margin等去做；但是针对一些特定设计，我们用栅格无法达到排版效果时，我们也应该尽量少去给容器设置固定的width；多用百分比，或者sass中的计算函数来实现，当然能直接在bootstrap中找到组件就更好了（如media组件）。
media组件
5，阻止最小缩放尺寸
禁止响应式
如果不禁止响应式，只是限制在电脑和平板使用，可以通过给container加min-width来限制，然后其他步骤同上相应改变即可。
6，行列的使用规范
为了内容在显示上的规范及一致性，我们在布局栅格系统时应该严格按照规范去书写和嵌套。
a，单层嵌套必须包裹在container和row内；
b，多层嵌套则必须在内部栅格外包裹一层row；
c，尽量不要去更改某一处的row或col-*的左右margin或者padding，容易引起排版错乱或内容区不齐整；
d，某些列的偏移，或者较大间距（大于默认间距）的，善用col-offset-*/col-pull-*/col-push-*的class来实现；
二，项目前期规范相关
1，源码相关；
下载bootstrap整个工程文件，用未压缩的代码先进行个性化定制，然后再压缩引用；
还有bootstrap中的mixin文件等代码可以复用，方便我们开发；
bootstrap的scss文件结构，代码划分方式，包括具体代码中变量/块代码/色值函数等代码的书写都是非常好的模板，值得我们去研究学习。
一旦我们定制化的文件确定后，之后所有改源码的行为应该让大家都知悉；
业务代码中覆盖源码的行为应该做限定生效区域，避免污染全局；
2，项目css代码文件结构
按照我们既定的方案，手机端和平板/电脑端分两套代码去开发，为的是更个性化的开发需求实现以及代码质量保障。但是两套代码处于同一开发目录下，所以我们有必要在两套代码的css文件结构上多加考量。目前我个人考虑的结构大致如下：
|---scss
|---|---public ------>公共样式的目录
|---mixin.scss
|---color.scss
|---size.scss
|---|---mobile ------>手机端的全局公共样式
|---|---pc ------>平板和PC端全局公共样式
如目录所示，我们在scss目录下分三个文件夹，分别是整个项目的公共样式，手机端的公共样式，pc的公共样式。至于其他的具体的scss文件，我们按模块放在具体模块下就好。
暂时就写这么多，以后想到会再补充。
网友评论