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文件,我们按模块放在具体模块下就好。

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,456评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,370评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,337评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,583评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,596评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,572评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,936评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,595评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,850评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,601评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,685评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,371评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,951评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,934评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,167评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,636评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,411评论 2 342

推荐阅读更多精彩内容

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