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

考虑:
使用什么样的布局,在什么样的条件下使用这样的布局。
比如我们想把布局分为两栏,左边是主题内容占用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>
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 176,539评论 25 709
  • 前言 温馨提示:本文较长,图片较多,本来是想写一篇 CSS 布局方式的,但是奈何 CSS 布局方式种类太多并且实现...
    sunshine小小倩阅读 8,377评论 0 59
  • 大红袍,为王者香。 很少见这么霸气外露的茶,远远的自楚河汉界的那边一路攻城掠地而来,逼得我无处可逃。 品一脉岩骨花...
    行度竹林风阅读 1,085评论 0 0
  • 最近我在看科恩的《游戏力》这本书。这是一本非常神奇的书。让我不由自主的就会笑起来,有时候又会伤心的落泪。读着这本...
    JC贾阅读 2,962评论 0 0
  • 黑色的书架藏着泛黄的绿萝 它困在方格 白炽灯照亮了窗帘笼罩的黑暗 这是个白天 曾经生长在一片宽阔的土地 如今困在压...
    itmaoo阅读 1,607评论 0 0

友情链接更多精彩内容