<!DOCTYPE html>

<html lang="en">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <!--屏幕和设备的屏幕保持一致，初始缩放为100%，禁止用户缩放-->

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

    <title>栅格系统</title>

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

    <link rel="stylesheet" href="css/bootstrap-theme.css">

    <script src="js/bootstrap.js"></script>

    <script src="js/jquery-3.2.1.min.js"></script>

    <script src="js/bootstrap.js"></script>

    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->

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

    <script src="js/jquery-2.0.3.js"></script>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->

    <script src="js/bootstrap.min.js"></script>

    <style type="text/css">

        div[class*='col-'] {

            border: solid 1px blue

        }

    </style>

</head>

<body style="background-color: gray">

<div class="container-fluid" style="background-color: white">

    栅格系统

    <!--xs超小型，适合手机-->

    <!--sm小型，适合平板-->

    <!--md中等，适合PC-->

    <!--lg大型，适合大桌面显示器-->

    <div class="row">

        <div class="col-md-1">col-1</div>

        <div class="col-md-1">col-2</div>

        <div class="col-md-1">col-3</div>

        <div class="col-md-1">col-4</div>

        <div class="col-md-1">col-5</div>

        <div class="col-md-1">col-6</div>

        <div class="col-md-1">col-7</div>

        <div class="col-md-1">col-8</div>

        <div class="col-md-1">col-9</div>

        <div class="col-md-1">col-10</div>

        <div class="col-md-1">col-11</div>

        <div class="col-md-1">col-12</div>

        <div class="col-md-1">over</div>

        <div class="col-md-1">over</div>

        <div class="col-md-1">over</div>

        <div class="col-md-1">over</div>

        <div class="col-md-1">over</div>

        <div class="col-md-1">over</div>

        <div class="col-md-1">over</div>

    </div>

    <div class="row">

        <div class="col-md-4">

            <img src="fig.jpg" class="img-responsive img-thumbnail"/>

            <h3 class="page-header">h3</h3>

            <p>句子句子句子句子句子句子句子句子句子</p>

        </div>

        <div class="col-md-4">

            <img src="fig.jpg" class="img-responsive img-thumbnail"/>

            <h3 class="page-header">h3</h3>

            <p>句子句子句子句子句子句子句子句子句子</p>

        </div>

        <div class="col-md-4">

            <img src="fig.jpg" class="img-responsive img-thumbnail"/>

            <h3 class="page-header">h3</h3>

            <p>句子句子句子句子句子句子句子句子句子</p>

        </div>

    </div>

    <div class="row">

        <div class="col-md-6">col-1</div>

        <div class="col-md-6">col-2</div>

    </div>

    <div class="row">

        <div class="col-md-2">col-1</div>

        <div class="col-md-3">col-2</div>

        <div class="col-md-7">col-3</div>

    </div>

    <div class="row">

        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">

            内容

        </div>

        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">

            内容

        </div>

        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">

            内容

        </div>

        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">

            内容

        </div>

    </div>

    <div class="row">

        <div class="col-md-1">1</div>

        <div class="col-md-1">1</div>

        <div class="col-md-1">1</div>

        <div class="col-md-1">1</div>

        <div class="col-md-1">1</div>

        <div class="col-md-1">1</div>

        <div class="col-md-1">1</div>

        <div class="col-md-1">1</div>

        <div class="col-md-1">1</div>

        <div class="col-md-1">1</div>

        <div class="col-md-1">1</div>

        <div class="col-md-1">1</div>

    </div>

    <div class="row">

        <div class="col-md-4">4</div>

        <div class="col-md-2 col-md-offset-3">2</div>

    </div>

    <div class="row">

        <div class="col-md-4 col-md-push-8">4</div>

        <div class="col-md-8 col-md-pull-4">8</div>

    </div>

</div>

</body>

</html>

bootStrap小结2的更多相关文章

  1. Bootstrap 小结

    Bootstrap 小结 Bootstrap4特点:1.兼容IE10+ 2.使用flexbox 布局 3.抛弃Nomalize.css 4.提供布局和 reboot 版本 Bootstrap组成:1. ...

  2. bootstrap小结

    bootstrap总结 bootstrap总结 base css 我分为了几大类 1,列表 .unstyled(无样式列表),.dl-horizontal(dl列表水平排列) 2,代码 code(行级 ...

  3. bootStrap小结3

    <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Conten ...

  4. bootStrap小结1

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. Node.js + Express 构建的订餐系统

    Node.js的版本 - v0.8.12 Express的版本 – v3.3.3  (安装 $ npm install -g express) 系统的登录逻辑是:获取用户名 + 密码,向内网RTX服务 ...

  6. 关于Bootstrap table的回调onLoadSuccess()和onPostBody()使用小结

    关于Bootstrap table的回调onLoadSuccess()和onPostBody()使用小结 Bootstrap table 是一款基于 Bootstrap 的 jQuery 表格插件, ...

  7. Bootstrap 时间日历插件bootstrap-datetimepicker配置与应用小结

    Bootstrap时间日历插件bootstrap-datetimepicker配置与应用小结   by:授客 QQ:1033553122 1.   测试环境 win7 JQuery-3.2.1.min ...

  8. Bootstrap Bootstrap表格插件bootstrap-table配置与应用小结

    Bootstrap表格插件bootstrap-table配置与应用小结   by:授客 QQ:1033553122 1.   测试环境 win7 JQuery-3.2.1.min.js 下载地址: h ...

  9. bootstrap与Select2使用小结

    这个select2组件的功能确实很强大,可以将图片放入到select里面随着文字一起显示. 组件的下载地址以及API说明地址: 1.Select2使用示例地址:https://select2.gith ...

随机推荐

  1. nginx 配置下载text等文件

    当前的浏览器能够识别文件格式,如果浏览器本身能够解析就会默认打开,如果不能解析就会下载该文件.比如txt文件就直接被解析,还有其他文件也是一样. 在nginx.conf配置文件中添加 add_head ...

  2. MyBatis开发重点知识

    1.1为什么需要ORM框架? 传统的JDBC编程存在的弊端: ü 工作量大,操作数据库至少要5步: ü 业务代码和技术代码耦合: ü 连接资源手动关闭,带来了隐患: MyBatis前身是iBatis, ...

  3. App测试理论简介

    一.App测试常见关注点 1.App的功能测试 功能测试都是我们首要测试的,只有功能实现了才算符合上线发布的最低标准.我们需要检测产品功能是否已实现.产品功能是否符合设计要求.产品功能是否有重复.产品 ...

  4. 云计算openstack核心组件——neutron网络服务（8）

    一.neutron 介绍:   Neutron 概述 传统的网络管理方式很大程度上依赖于管理员手工配置和维护各种网络硬件设备:而云环境下的网络已经变得非常复杂,特别是在多租户场景里,用户随时都可能需要 ...

  5. python中random库的使用

    基本随机函数 计算机产生随机数是需要随机数种子的,例如 给定一个随机数种子,就能利用梅森旋转算法产生一系列随机序列 每一个数都是随机数,只要随机种子相同,产生的随机数和数之间的关系都是确定的 随机种子 ...

  6. vue v-for渲染数据出现DOMException: Failed to execute 'removeChild' on 'Node': The node .....

    在项目中,使用了vue的v-for渲染数组数据,在一次改变数组的时候出现异常报错,而实际的数组是已经变化过的了,页面卡死 网上找了一下原因,说是vue的DOM渲染的时候,删除之后DOM里面的还没有反应 ...

  7. 第一篇 Hell wcf

    老老实实学WCF  第一篇 Hello WCF WCF(Windows Communication Foundation)是微软公司推出的面向服务技术的集大成者,涵盖继承了其之前发布的所有的分布式应用 ...

  8. 堆中的线程私有缓存区域TLAB（Thread Local Allocation Buffer）

    TLAB产生的原因 堆区是线程共享区域,任何线程都可以访问到堆区中的共享数据 由于对象实例的创建在JVM中非常频繁,因此在并发环境下从堆区中划分内存空间是线程不安全的 为避免多个线程操作同一地址,需要 ...

  9. 有关java反射的几个小方法的作用和区别

    1.Class类中 getXXX()和getDeclaredXXX()的作用和区别: 前者获取某个类的所有公共(public)的字段(or方法or构造函数),包括父类.后者获取所有的字段(or方法or ...

  10. XDCMS审计（复现）

    最近开始学习审计,拿一些简单cms的漏洞复现一下.源码在文末会分享出来. 0x01 index.php <?php if(!file_exists("data/config.inc.p ...