《半吊子全栈系列：Boostrap3》

前言：后端开发做网站

　　几年前，作为一名纯粹后端Java开发人员，对JS还没开窍，对于页面只停留在《十天学会DIV+CSS》这种程度，但是我又想做网站怎么办？

　　这时候Boostrap3出现了，并成为我进军前端的踏板，到现在满打满算也做了大大小小10来个网站，在专业的UI设计人员看来可能上不了台面，但从我这个程序猿来看，perfect~

　　先放出一个自己原创的几个demo，俗话说，只有实践过的人才有发言权。

     

　　本人做的不算好，因为我本来是做Java的后台开发者，大神绕道，谅解，适合初中级BootStrap3研究者（以上界面都支持手机、平板、PC端，感兴趣的可以和我交流）。

Bootstrap 简介

　　Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的。Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品。目前稳定版本是Bootstrap v3.3.7，最新版是Bootstrap 4.x，不过还是测试版。

　　Bootstrap 3 的CSS技术是基于LESS的动态CSS。当然他完美的将CSS3和HTML5，流体式响应布局整合起来，让三者不仅仅停留在刀耕火种的概念阶段，让三大潮流前端技术在快速应用上成为了可能。以上页面是用BootStrap3做出来的， Bootstrap 2 和Bootstrap 3 可以说是不同的产品，Bootstrap 2有一些可视化拖拽工具，但 Bootstrap 3就必须自己手动写，Bootstrap 3 是响应式布局、移动设备优先的 WEB 项目，学习难度大，但3是趋势，成熟产品，推荐学习。Bootstrap 3 有几大特色：移动设备优先、响应式布局、栅格系统。

 

【响应式布局】

　　简而言之，就是一个网站能够兼容多个终端，而不是为每个终端做一个特定的版本。响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的普及，用大势所趋来形容也不为过。

　　优点不言而喻，缺点也是有的：

　　1、兼容各种设备工作量大，效率低下；

　　2、代码累赘，会出现隐藏无用的元素，加载时间加长；

　　3、其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果；

　　4、一定程度上改变了网站原有的布局结构，会出现用户混淆的情况。

　　有需求就会有解决方案，说到响应式布局，就不得不提起CSS3中的Media Query（媒介查询），Bootstrap 正是利用了这种方式配合流式栅格系统选择了折衷方案。

 

【栅格系统】

　　Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。

　　使用规则：

　　1、一行最多12列，超过则另起一行，列.col-sm-*有适合多种屏幕的，通常用md是中屏，要考虑兼容多个的话，可以写多种；

　　2、所有.row必须放在容器里面，所有.col列必须放在.row行里面（嵌套也是如此）；

　　3、列偏移使用.col-md-offset-*，列排序.col-md-push-*；

　　4、....（规则很多）

　　一句话总结，栅栏系统可以各种嵌套。无任何限制。唯一的规则是这一行的列宽度要相加等于12，大致效果如下：

<div class="container">
  <div class="row">
    <div class="col-xs-6 col-md-4">
    </div>
    <div class="col-xs-6 col-md-4">
   </div>
    <div class="col-xs-6 col-md-4">
    </div>
  </div>
</div>

　　最后说一句，想用BS3的 一定要抛弃原有的DIV设计理念了，一定时时刻刻都试着运用12栅栏系统，不要再用传统DIV布局了！！那样你的页面虽然看起来很 BootStrap3 但是 它完全没有流体特性。 放弃传统DIV布局，把大脑里装上12格栅栏系统。

　　关于boostrap 的介绍就到这边，有兴趣学习相关基础的同学，可以直接到中文网学习。 

Bootstrap 学习路线

【初级入门】

1、基础学习：前往中文网或者菜鸟教程，学习Boostrap的基础CSS和JS组件，能够自己写出demo布局。

2、学会抄袭：BS3的开发是需要抄袭的，而且必须抄袭！！ 官方甚至鼓励抄袭！！ 首先你要会使用官方已经公布并且整合好的各种控件，各种特效，会用之后，你还要知道怎么把这些控件和特效整合起来，创造一个新的特效。知道每个参数具体是控制什么的，用大脑记下来（BS3的痛苦就在这儿 你需要去记忆一些东西）。实在记不下来 开发的时候就开着文档，写着代码，不懂的随时点击随时看。。

如果你熟练抄袭官方文档 并且会自己组合控件的时候 可以说你已经入门了！！！

 

【高手进阶】

3、样式组合：这一阶段差不多已经会写一个BootStrap3 官方默认主题，色彩渣到极致的页面了，http://bootswatch.com/ 这个网站里面有好几套免费主题， 下载他们的CSS样式，直接替换官方的即可，你会觉得页面焕然一新！当然，如果你的CSS功底够扎实，不妨自己组合自己设计样式。

4、扩展插件：Bootstrap 自带 12 种 jQuery 插件，中文网上面有，这些都是最基础的，但这些远远不够。“想要更多的组件（我的财宝）吗？想要的话就给你吧，去找吧，互联网（伟大航路），我把世界的一切都放在那里，ONEPIECE！”

5、设计理念：到了这一阶段就要多和UI设计师讨论讨论，什么极简原则、扁平化设计拉，多逛一些花瓣网之类的设计网站，提升艺术家境界。。啧啧，其实“闻道有先后，术业有专攻”，设计理念不必强求，多逛一些Bootstrap优站精选即可。

编后语

　　要学好boostrap 光记住大量的Class和零散的组件写法是没用的，只有不断动手去尝试，去组合，不论美丑，才能让它们展现出完整的蓝图，这也是就是前端建站的乐趣所在。

　　“纸上得来终觉浅，绝知此事要躬行”