<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title></title>

        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

        <!--bootstrap要引入的文件：bootstrap.min.css,jquery.min.js,bootrap.min.js-->

        <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>

        <script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>

        <!--要在bootstrap之前引入jquery,bootstrap依赖JQUERY,因为bootstrapJS里要使用$这个jquery变量-->

        <script src="js/popper.js" type="text/javascript" charset="utf-8"></script>

        <!--如果你要用bootstrap使用一些提示性的交互，那么就需要引入提示性的框架popper.js,因为bootstrap的提示就是依赖popper-->

        <script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>

    </head>

    <body>

        <!--首先要设置一个容器-->

        <div class="container">

            <!--每一行用row来包裹-->

            <!--仅设置col，等宽,可以使div平均分成相对应的份数-->

            <!--boostrap网格系统，平均分成12份-->

            <!--使用boostrap框架就是为了提高效率，省去设计师，也不需要精确到像素去实现页面，如果要像素级还原设计图稿，那么依然还需要大量的书写css-->

            <!--

                    超小<576px    .col-

                    小≥576px        .col-sm-

                    中等≥768px    .col-md-

                    大≥992px        .col-lg-

                    超大≥1200px    .col-xl-

            -->

            <!--使用col-{breakpoint}-auto类根据内容的自然宽度调整列的大小。-->

            <!--网格里面还可以继续嵌套网格，所有的容器，都是12格进行划分-->

            <div class="row">

                <div class="col-12 col-lg-2 col-xl-1 bg-danger order-3">

                    第一部分内容

                </div>

                <div class="col-12 col-lg-2 col-xl-5 bg-info order-2">

                    第二部分内容

                </div>

                <div class="col-12 col-lg-8 col-xl-6 bg-warning order-1">

                    第三部分内容

                </div>

            </div>

            <div class="row">

                <div class="col-12 col-lg-2 col-xl-1 bg-danger">

                    第一部分内容

                </div>

                <!--使用col-{breakpoint}-auto类根据内容的自然宽度调整列的大小。-->

                <div class="col-12 col-lg-auto col-xl-5 bg-info">

                    第二部分内容

                </div>

                <div class="col-12 col-lg-8 col-xl-6 bg-warning">

                    <div class="row">

                        <div class="col-3 bg-dark">

                            3

                        </div>

                        <div class="col-9 bg-danger">

                            9

                        </div>

                    </div>

                </div>

            </div>

            <div class="row no-gutters">

              <div class="col">col</div>

              <div class="col">col</div>

              <!--<div class="w-100"></div>-->

              <div class="col">col</div>

              <div class="col">col</div>

            </div>

        </div>

    </body>

</html>

bootstrap网格系统.html的更多相关文章

  1. 第四篇.Bootstrap网格系统偏移列和嵌套列

    偏移列: 在bootstrap网格系统中我们可以使用偏移列来达到让某列右移的效果,如下所示: <div class="row"> <div class=" ...

  2. 详解Bootstrap网格系统

    bootstrap框架中的网格系统就是将容器平分成12份,在使用的时候可以根据实际情况重新编译LESS/SASS源码来修改12这个数值.bootstrap框架的网格系统工作原理: 1.数据行(.row ...

  3. bootstrap学习笔记--bootstrap网格系统

    移动设备优先 移动设备优先是 Bootstrap 3 的最显著的变化. 在之前的 Bootstrap 版本中(直到 2.x),您需要手动引用另一个 CSS,才能让整个项目友好的支持移动设备. 现在不一 ...

  4. 使用bootstrap网格系统自适应盒子宽度时保持所有盒子高度一致。

    使用了bootstrap网格系统的好处是很容易便实现了响应式布局,盒子可以根据设置的样式,随着屏幕的大小改变而自动改变宽度,但是也存在一个问题,那就是盒子的高度是由盒子的内容决定的,如果盒子里的内容不 ...

  5. Bootstrap -- 网格系统、排版样式类、 <blockquote>、 <abbr> 元素

    Bootstrap -- 网格系统.排版样式类. <blockquote>. <abbr> 元素 1. Bootstrap 提供了一套响应式.移动设备优先的流式网格系统,随着屏 ...

  6. Bootstrap 网格系统（Grid System）的工作原理 - 媒体查询

    媒体查询 媒体查询是非常别致的"有条件的 CSS 规则".它只适用于一些基于某些规定条件的 CSS.如果满足那些条件,则应用相应的样式. Bootstrap 中的媒体查询允许您基于 ...

  7. Bootstrap 网格系统(Grid System)实例5

    Bootstrap 网格系统(Grid System)实例5:手机,平板电脑,笔记本或台式电脑 <!DOCTYPE html><html><head><met ...

  8. Bootstrap 网格系统(Grid System)实例4

    Bootstrap 网格系统(Grid System)实例4:中型和大型设备 <!DOCTYPE html><html><head><meta http-eq ...

  9. Bootstrap 网格系统(Grid System)实例3

    Bootstrap 网格系统(Grid System)实例:堆叠水平 <!DOCTYPE html><html><head><meta http-equiv= ...

  10. Bootstrap 网格系统(Grid System)实例2

    Bootstrap 网格系统(Grid System):堆叠水平,两种样式 <!DOCTYPE html><html><head><meta http-equ ...

随机推荐

  1. redis-分片（转）

    转:https://www.cnblogs.com/houziwty/p/5167075.html 分片(partitioning)就是将你的数据拆分到多个 Redis 实例的过程,这样每个实例将只包 ...

  2. java8 运算语法集

    1.分组并进行求和组合运算 示例主要代码: List<String> items = Arrays.asList("apple", "apple", ...

  3. 使用Hugo，只需5分钟，轻松搭建一个自己的博客

    前面跟大家介绍过hexo这款静态博客系统,功能强大,基本能满足博客的各种需求.今天,我再跟大家介绍一款优秀的静态博客系统,那就是Hugo. Hugo是由Go语言实现的静态网站生成器.简单.易用.高效. ...

  4. java工作错误总结

    1.访问接口出现以下错误 com.alibaba.dubbo.rpc.RpcException: Forbid consumer 192.168.200.126 access service com. ...

  5. useradd、id、userdel、usermod、chsh、passwd、pwck

    1.useradd [-cdefgGmkMsu] 用户名称 用来添加用户 -c “备注“:加上备注文字 -d 路径:指定家目录 -e 有效期限:指定帐号的有效期限: -f 缓冲天数:指定在密码过期后多 ...

  6. WebGL简易教程(九)：综合实例：地形的绘制

    目录 1. 概述 2. 实例 2.1. TerrainViewer.html 2.2. TerrainViewer.js 3. 结果 4. 参考 1. 概述 在上一篇教程<WebGL简易教程(八 ...

  7. 死磕 java线程系列之自己动手写一个线程池

    欢迎关注我的公众号"彤哥读源码",查看更多源码系列文章, 与彤哥一起畅游源码的海洋. (手机横屏看源码更方便) 问题 (1)自己动手写一个线程池需要考虑哪些因素? (2)自己动手写 ...

  8. 浅谈个人对客户端JavaScript同步、异步、执行顺序等概念的理解

    一.同步和异步的概念. 同步:即按代码的顺序执行任务. 在下列代码中,按照同步概念,则是先打印1后打印2. console.log(1); console.log(2); 异步:即执行一个任务的同时执 ...

  9. A-06 最小角回归法

    目录 最小角回归法 一.举例 二.最小角回归法优缺点 2.1 优点 2.2 缺点 三.小结 更新.更全的<机器学习>的更新网站,更有python.go.数据结构与算法.爬虫.人工智能教学等 ...

  10. Cocos Creator实现大炮英雄，附代码！

    游戏预览 ​ 开始场景 ​ 搭建开始场景 摆放一个背景图,在背景图上添加背景地面.开始按钮.4个角色选择按钮.游戏logo. 创建游戏脚本 1. 实现开始按钮的回调,点击开始按钮,跳转到游戏场景.跳转 ...