欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

bootstrap网格布局

程序员文章站 2022-03-04 17:20:51
...
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>bootstrap 网格布局</title>
<link rel="stylesheet" href="../bootstrap-3.3.7/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="../bootstrap-3.3.7/plugin/bootstrap-table/bootstrap-table.min.css" />
<script src="../assets/js/jquery-2.1.4.min.js"></script>
<script src="../bootstrap-3.3.7/dist/js/bootstrap.min.js"></script>
<script src="../bootstrap-3.3.7/plugin/bootstrap-table/bootstrap-table.min.js"></script>
<script src="../bootstrap-3.3.7/plugin/bootstrap-table/bootstrap-table-zh-CN.min.js"></script>
</head>
<body>

<div class="container">
   <div class="row" >
      <div class="col-xs-6 col-sm-3"
         style="background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         <p>Lorem ipsum dolor sit amet</p>
      </div>
      <div class="col-xs-6 col-sm-3"
         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
         </p>
         <div class="row" >
         <div class="col-xs-12" style="border: 1px solid;">
         安全生产
         </div>
        </div>
        <div class="row" >
        <div class="col-xs-6" style="border: 1px solid;">
        部门树
        </div>
        <div class="col-xs-6" style="border: 1px solid;">
        主页
        </div>
        </div>
      </div>

      <div class="clearfix visible-xs"></div>

      <div class="col-xs-6 col-sm-3"
         style="background-color: #dedef8;
         box-shadow:inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         <p>Ut enim ad minim veniam,
         </p>
      </div>
      <div class="col-xs-6 col-sm-3"
         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,
         </p>
        
         <div class="row" >
         <div class="col-xs-6" style="border: 1px solid;">
         左边
         </div>
         <div class="col-xs-6" style="border: 1px solid;">
         右边
         </div>
         </div>
      </div>
   </div>
</div>
</body>
</html>
相关标签: bootstrap