《半吊子全栈系列：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 有几大特点：移动设备优先、响应式布局、栅格系统。

 

【响应式布局】

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

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

　　一、兼容各类设备工做量大，效率低下；

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

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

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

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

 

【栅格系统】

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

　　使用规则：

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

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

　　三、列偏移使用.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 学习路线

【初级入门】

一、基础学习：前往中文网或者菜鸟教程，学习Boostrap的基础CSS和JS组件，可以本身写出demo布局。

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

若是你熟练抄袭官方文档 而且会本身组合控件的时候 能够说你已经入门了！！！

 

【高手进阶】

三、样式组合：这一阶段差很少已经会写一个BootStrap3 官方默认主题，色彩渣到极致的页面了，http://bootswatch.com/ 这个网站里面有好几套免费主题， 下载他们的CSS样式，直接替换官方的便可，你会以为页面面目一新！固然，若是你的CSS功底够扎实，不妨本身组合本身设计样式。

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

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

编后语

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

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