标签：思想 长方形 需要 全栈 前端 技术 页面 包含 小白
原因：
现在技术更新很快，我们需要掌握更多的语言和技术，公司现在也希望招全栈工程师。
名词：
bootstrap(前端框架)，less(css的扩充)
案例：
在bootstrap中常用row行级元素来定义元素，比如说一个页面有许多板块组成的，这些板块我们可以看成是一个个的长方形框里面有文字有图片，我们写页面就要有一个基本的思想，这个页面我们可以分为几块，比如页面顶部，页面左部，页面右部，页面底部，我们拿最简单的一个页面举例。
.container 类用于固定宽度并支持响应式布局的容器。<div class="container"></div>container的div包含着你写的所有HTML代码，然后我们用row定义页面布局了。
比如顶部一个row<div class="row col-lg-12 col-md-12 col-sm-12 col-xs-12"></div>在这个div里你就可以写你的顶部代码了，
row后的四个代码是支持不同宽度的屏幕的，比如手机，平板，pc端，想调各种大小就调这四个，我就不详细说了，可以去菜鸟教程或官网查询，row使用的时候会有15的边距当你想把宽度变小的时候用row，这里你也可以不用row包，
我喜欢row 包起来写宽度比较合适，再来一个row现在写中间部分，里面包含了页面左部与页面右部 ，row一行有12个格子，相当于把页面宽度分为12份 ， 先定义一个row加四个那种代码
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4"></div> //这是页面左部
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
<div class="row">
<div class="row col-lg-6 col-md-6 col-sm-6 col-xs-6"></div> //右部的左边部分
<div class="row col-lg-6 col-md-6 col-sm-6 col-xs-6"></div> //右部的右边部分
</div>
</div> //这是页面右部
</div>
上面就是把一行分为两步份，左边与右边，如果你还想在右部分两个框
row的宽度是比较小的所以要用padding来定义，padding是来调整高度的，
flex这是用来布局的，是一种新出现的技术，我就不介绍了http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html，可以自学
最后再写底部了，row的边距可以用margin调，margin-left|right|top|bottom或padding-left|right|top|bottom来调整大小边距问题，css样式你可以用css写也可以用less写，再less里你可以完全用css写
本篇文章适合公司要求用到上面技术而你没接触过的可以看看，下次介绍less的简单写法。
标签：思想 长方形 需要 全栈 前端 技术 页面 包含 小白
原文地址：http://www.cnblogs.com/dyj--php/p/7694734.html
