温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

bootstrap如何实现网格系统

发布时间:2021-12-28 15:11:14 来源:亿速云 阅读:142 作者:小新 栏目:开发技术

小编给大家分享一下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如何实现网格系统”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI