标签：
栅格系统
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>index</title> <link href="//cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"> <!--[if lt IE 9]> <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <div class="container"> <p>开始是堆叠在一起的，当大于这些阈值时将变为水平排列C <br/> 当达到宽度时，相应的样式 .col-md-6 会生效，即水平排版 <br/> 如果 要兼容手机，一定要写 col-xd-2 <br/> 如果 只写 col-lg-2 PC端最 大化没问题，但平板排版肯定乱了，手机更乱。 </p> <p>超大</p> <div class="row"> <div class="col-lg-6" style="border: 1px solid red;">使用单一的一组 .col-md-* 栅格类，就可以创建一个基本的栅格系统，在手机和平板设备上一开始是堆叠在一起的（超小屏幕到小屏幕这一范围），在桌面（中等）屏幕设备上变为水平排列。所有“列（column）必须放在 ” .row 内。</div> <div class="col-lg-6" style="border: 1px solid red;">是否不希望在小屏幕设备上所有列都堆叠在一起？那就使用针对超小屏幕和中等屏幕设备所定义的类吧，即 .col-xs-* 和 .col-md-*。请看下面的实例，研究一下这些是如何工作的。</div> </div> <p>大</p> <div class="row"> <div class="col-md-6" style="border: 1px solid red;">使用单一的一组 .col-md-* 栅格类，就可以创建一个基本的栅格系统，在手机和平板设备上一开始是堆叠在一起的（超小屏幕到小屏幕这一范围），在桌面（中等）屏幕设备上变为水平排列。所有“列（column）必须放在 ” .row 内。</div> <div class="col-md-6" style="border: 1px solid red;">是否不希望在小屏幕设备上所有列都堆叠在一起？那就使用针对超小屏幕和中等屏幕设备所定义的类吧，即 .col-xs-* 和 .col-md-*。请看下面的实例，研究一下这些是如何工作的。</div> </div> <p>平板</p> <div class="row"> <div class="col-sm-6" style="border: 1px solid red;">使用单一的一组 .col-md-* 栅格类，就可以创建一个基本的栅格系统，在手机和平板设备上一开始是堆叠在一起的（超小屏幕到小屏幕这一范围），在桌面（中等）屏幕设备上变为水平排列。所有“列（column）必须放在 ” .row 内。</div> <div class="col-sm-6" style="border: 1px solid red;">是否不希望在小屏幕设备上所有列都堆叠在一起？那就使用针对超小屏幕和中等屏幕设备所定义的类吧，即 .col-xs-* 和 .col-md-*。请看下面的实例，研究一下这些是如何工作的。</div> </div> <p>手机</p> <div class="row"> <div class="col-xs-6" style="border: 1px solid red;">使用单一的一组 .col-md-* 栅格类，就可以创建一个基本的栅格系统，在手机和平板设备上一开始是堆叠在一起的（超小屏幕到小屏幕这一范围），在桌面（中等）屏幕设备上变为水平排列。所有“列（column）必须放在 ” .row 内。</div> <div class="col-xs-6" style="border: 1px solid red;">是否不希望在小屏幕设备上所有列都堆叠在一起？那就使用针对超小屏幕和中等屏幕设备所定义的类吧，即 .col-xs-* 和 .col-md-*。请看下面的实例，研究一下这些是如何工作的。</div> </div> </div> <script src="//cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> <script src="//cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> </body> </html>
标签：
原文地址：http://www.cnblogs.com/gyz418/p/5953794.html
