一:基本的网格布局

<div class="container">

<div class="row">

<div class="col-md-4">占四格</div>

<div class="col-md-6">占八格</div>

</div>

</div>

1、一行网格数一共有分为12格,

<div class="col-md-4">占四格</div>:表示一列占4格

<div class="col-md-8">占八格</div>:表示一列占8格

两列加起来一共是12格。

不论分为多少列,加起来格数必须是12格

2、col-md-4是什么意思

col-md-:表示显示页面尺寸>992px ;4:表示一列占多少格数

3、显示页面尺寸

<768px使用.col-xs-格数

>=768px使用.col-sm-格数

>=992px使用.col-md-格数

>=1200px使用.col-lg-格数

4、偏移

右偏移:<div class="col-md-4 col-md-push-8">占四格,往右偏移8格</div>

左偏移:<div class="col-md-8  col-md-pull-4">占8格,往左偏移4格</div>

5、嵌入

<div class="container">

<div class="row">

<div class="col-md-4">

<div class="row">

<div class="col-md-4">占四格</div>

<div class="col-md-4">占四格</div>

<div class="col-md-4">占四格</div>

</div>

</div>

<div class="col-md-8">占八格</div>

</div>

</div>

上述例子:一条网格分为两列,第一列占四格,第二列占8格,

在第一列嵌入一条3列网格,每列都占四格

最新文章

  1. C# 发送电子邮件
  2. Linux C编程学习之C语言简介---预处理、宏、文件包含……
  3. gulp 基本使用
  4. bitnami-redmine 安装与插件使用
  5. 在Sharepoint2010中一种自定义调查列表的不允许再次答复提示的处理方法!
  6. How to run an manually installed program from terminals in Linux / Ubuntu
  7. rubymine配置 rspec
  8. centos apache 隐藏和伪装 版本信息
  9. Quartz任务调度器及与Spring的整合使用
  10. Java爬虫----有道翻译初步
  11. linux修改root账户的用户名所得的教训
  12. Django模板语言相关内容
  13. [Swift]LeetCode653. 两数之和 IV - 输入 BST | Two Sum IV - Input is a BST
  14. 架构设计---soa与msa的概念(转)
  15. 2017第45周一java多线程创建方法
  16. RNA测序的质量控制
  17. 用JS来实现的第一个简单游戏 :贪吃蛇
  18. 2018ACM-ICPC南京区域赛M---Mediocre String Problem【exKMP】【Manacher】
  19. swift 头尾式动画
  20. 配置 Windows 下的 nodejs C++ 模块编译环境 安装 node-gyp

热门文章

  1. 1 JSONP
  2. 6.shell脚本
  3. PostgreSQL使用总结
  4. isinstance、issubclass、反射
  5. 9.2 Socket编程
  6. [HDU3038]How Many Answers Are Wrong(并查集)
  7. 清北学堂模拟赛d2t1 一道图论神题(god)
  8. asciiflow
  9. 查询和删除数据表中反复数据的sql
  10. 创建虚拟机中的nova-scheduler 调度配置