bootstrap如何实现网格系统

小编给大家分享一下bootstrap如何实现网格系统,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

示例代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>bootstrap10</title>
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">  
</head>
<body>
<div class="container">
<h2>Hello, world!</h2>

<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>
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

以上是“bootstrap如何实现网格系统”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注行业资讯频道!