美文网首页Web前端
Bootstrap3 - 5.grid类(网格系统)

Bootstrap3 - 5.grid类(网格系统)

作者: 廖马儿 | 来源:发表于2018-01-03 11:25 被阅读3次

考虑:
使用什么样的布局,在什么样的条件下使用这样的布局。
比如我们想把布局分为两栏,左边是主题内容占用8个网格,右边是边栏内容占用4个网格。
而且希望只有在桌面设备上去应用这样的布局。

屏幕宽度大于等于992px时候:


图片.png

代码:

<!doctypoe html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width, scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-8">
                <h1 class="page-header">title</h1>
                <p>retcvgbjhknlm234567890-kjhgfdsasdfghjklezsxfdgezrxtcyvgbhnjk</p>
            </div>
            <div class="col-md-4">
                <h1 class="page-header">sidebar</h1>
                <p>retcvgbjhknlm234567890-kjhgfdsasdfghjklezsxfdgezrxtcyvgbhnjk</p>
            </div>
        </div>  
    </div>
    <script src="lib/jquery/jquery.min.js"></script>
    <script src="lib/bootstrap/js/bootstrap.min.js"></script>   
</body>
</html>

相关文章

  • Bootstrap3 - 5.grid类(网格系统)

    考虑:使用什么样的布局,在什么样的条件下使用这样的布局。比如我们想把布局分为两栏,左边是主题内容占用8个网格,右边...

  • Bootstrap3 - 3.网格系统

    网格系统:Grid System文章介绍:https://www.w3cplus.com/css3/introdu...

  • Bootstrap--常用及实例合集

    栅格系统 列的样式 文本对齐类 表单 表格 响应式表格 按钮 快速浮动 清除样式 Bootstrap3居中处理 垂...

  • uikit 网格(重点)

    网格 UIKit中的网格系统遵循移动优先的方式并且最多可容纳10个网格列。它使用网格内预定义的类对每个单元格的列宽...

  • 什么是栅格系统

    一、概念 1、栅格系统(grid systems),也叫“网格系统”。栅格设计系统(又称网格设计系统、标准尺寸系统...

  • Bootstrap4 学习笔记三

    Bootstrap 4 网格系统有以下 5 个类: .col- 针对所有设备 .col-sm- 平板 - 屏幕宽度...

  • bootstrap4网格

    Bootstrap 4 网格系统有以下 5 个类: .col- 针对所有设备 .col-sm- 平板 - 屏幕宽度...

  • Bootstrap学习(一)入门

    Date: 2018-10-17 1、Bootstrap网格系统 Bootstrap网格系统定义: Bootstr...

  • 网格系统(grid)

    网格系统代码网格系统测试代码 1.思路 使用row.vue和col.vue构成网格系统的基础部分 两单文件所需要的...

  • 网格系统总结:从初识到应用

    网格系统总结:从初识到应用 目录: 1.什么是网格 2.为什么要使用网格 3.网格系统中都包括什么 4.如何制作网...

网友评论

    本文标题:Bootstrap3 - 5.grid类(网格系统)

    本文链接:https://www.haomeiwen.com/subject/hnchnxtx.html