首页 | 新闻 | 新品 | 文库 | 方案 | 视频 | 下载 | 商城 | 开发板 | 数据中心 | 座谈新版 | 培训 | 工具 | 博客 | 论坛 | 百科 | GEC | 活动 | 主题月 | 电子展
返回列表 回复 发帖

Bootstrap 网格系统(3)

Bootstrap 网格系统(3)

Bootstrap 网格系统实例:中型和大型设备区分显示
在上个例子中,我们使用 2 个 div,并在视口宽度的中间对它们进行 50%/50% 分割:
<div class="col-md-6">....</div>
<div class="col-md-6">....</div>
但是,在大型设备上,您最后设计成 33%/66%。所以我们要做的是配置大型设备对应的列的宽度:
<div class="col-md-6 col-lg-4">....</div>
<div class="col-md-6 col-lg-8">....</div>
Bootstrap 在中型设备中,会查找带有 md 的class,并使用它们。在大型设备中,会查找带有 lg 的class,并使用它们。在本实例中,我们的 2 个 div 在中型设备中显示为 50%/50% ,在大型设备为 33%/66%。请查看下面的实例进行验证。

    <!DOCTYPE html>
    <html>
    <head>
       <title>Bootstrap 实例 - 中型和大型设备区分显示</title>
        <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">   
       <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>
    </head>
    <body>
    <div class="container">
       <h1>Hello, world!</h1>
     
       <div class="row">
     
          <div class="col-md-6 col-lg-4"  style="background-color: #dedef8;
             box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
             <p>第一列段落1
             </p>
     
             <p>第一列段落2
             </p>
          </div>
     
          <div class="col-md-6 col-lg-8" style="background-color: #dedef8;
             box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
             <p>第二列段落1
             </p>
     
             <p>第二列段落2
             </p>
       </div>
    </div>
     
    </body>
    </html>

代码保存为html打开可见效果:

在手机等中型屏幕是两列分别 50% 50%的布局


在大屏幕中是两列分别是33%/66%的布局
返回列表