Bootstrap快速入门

        标题属于偷懒的结果,实际上本文内容定位并不算是对于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文件,我们按模块放在具体模块下就好。

         暂时就写这么多,以后想到会再补充。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • Bootstrap是什么? 一套易用、优雅、灵活、可扩展的前端工具集--BootStrap。GitHub上介绍 的...
    凛0_0阅读 13,744评论 3 184
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,693评论 1 92
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 136,092评论 19 139
  • 最近,有位妈妈跟我说了件事: 前些天我给女儿读了睡美人的故事,女儿问我,妈妈,如果王子没有来救公主,那公主是不是永...
    鲁尼妈妈阅读 4,296评论 2 2
  • 唱着人们心肠的曲折,我想我很快乐,当有你的温热,脚边的空气转了。
    梁逗逗阅读 1,207评论 0 0

友情链接更多精彩内容