053288628280
您的当前位置:首页 > 技术支持 > 建站知识 >

bootstrap网格实例教程

时间:2018-06-06

bootstrap的网格系统,要想了解全面,必须通过实例来说明,下面通过手机,平板  pc电脑 来说明一下

代码如下

<div class="container">
   <h1>千龙网络</h1>
 
   <div class="row">
 
      <div class="col-sm-3 col-md-6 col-lg-8"  
         style="background-color: #dedef8; 
         box-shadow: inset 1px -1px 1px #444, 
         inset -1px 1px 1px #444;">
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
            enim ad minim veniam, quis nostrud exercitation ullamco laboris 
            nisi ut aliquip ex ea commodo consequat. 
         </p>
 
         <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem 
            accusantium doloremque laudantium, totam rem aperiam, eaque ipsa 
            quae ab illo inventore veritatis et quasi architecto beatae vitae 
            dicta sunt explicabo. 
         </p>
      </div>
 
      <div class="col-sm-9 col-md-6 col-lg-4" 
         style="background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, 
         inset -1px 1px 1px #444;">
         <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem 
            accusantium doloremque laudantium.
         </p>
 
         <p> Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, 
            consectetur, adipisci velit, sed quia non numquam eius modi 
            tempora incidunt ut labore et dolore magnam aliquam quaerat 
            voluptatem. 
         </p>
      </div>
  </div>
</div>
 
首先这个页面布局是两列

第一列设置
div class="col-sm-3 col-md-6 col-lg-8"  

第二列设置
div class="col-sm-9 col-md-6 col-lg-4" 

他们是对应的  给我们提供了 3 种不同的列布局,分别适用于三种设备。在手机上,它将是左边 25% 右边 75% 的布局。在平板电脑上,它将是 50%/50% 的布局。在大型视口的设备上,它将是 33%/66% 的布局。

第一个是默认最小屏幕堆叠显示



下面这个是手机屏幕



下面这个是平板显示



下面是大型设备显示



演示地址查看




相关文章

Copyright © 2009-2017 千龙网络 版权所有  鲁ICP备09004053号 TAG SITEMAP