Usually when desgin a web page, we think building the page in grid.

Bootstrap can help us to do that.

It divides the page into 12 cols. In the picture, there are three rows, on the top is header (it takes 12 cols), in the middle there is two cols, in the bottom, there are three cols.

You can finish this work quickly by using 'col-md-x' class: it should sum up to 12 for each row.

To organize the code structure better, you can but add 'row' class:

If one row exceeds 12 cols, the page layout would broken.

If you want to add more padding:

You can use 'col-md-offest-x' class:

Result:

最新文章

1. iOS陀螺仪 参数意义
2. Go - 变量初始化 及 注意事项
3. HDU2896 病毒侵袭
4. 【转】ASP.NET"正在中止线程"错误原因
5. <base href="<%=basePath%>
6. WebForm 中的页面重定向和传值（转自 MSDN）
7. sql临时表和表变量
8. android 67 生成和解析xml
9. Lucene.net 从创建索引到搜索的代码范例
10. nginx基础入门
11. selenium2入门 用Yaml文件进行元素管理 （五）
12. 重温Javascript（二）
13. mini2440串口使用
14. 4个错误使用JavaScript数组方法的案例
15. 云计算的三种服务模式：IaaS, PaaS, SaaS
16. react-router 4.3 js实现跳转
17. ssm框架整合
18. annotation注释简单介绍
19. TSubobjectPtr和C++传统指针的区别
20. 何凯文每日一句打卡||DAY1~DAY3

热门文章

1. 关于C#控制台传递参数和接收参数
2. bzoj1196：[Hnoi2010]chorus 合唱队
3. 【转】 Android 开发 之 JNI入门 - NDK从入门到精通
4. svc 报“由于扩展配置问题而无法提供您请求的页面。如果该页面是脚本，请添加处理程序。如果应下载文件，请添加 MIME 映射。“的HTTP 错误 404.3 – Not Found
5. android中GridView关于间距的属性值介绍
6. ie 提示浏览器升级信息 干掉ie
7. MySQL UNION 与 UNION ALL 语法与用法
8. 【转】linux trap
9. java 内部类的使用
10. ANT打包J2EE项目war包