<!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. upstream--负载

    语法格式: upstream 负载名 { [ip_hash;] server ip:port  [weight=数字]  [down]; server ip:port  [weight=数字]; } ...

  2. ubuntu 18.04下修改python3指向

    起因 ubuntu18.04下默认带的是python3.6,但是因为需求需要升级为python3.7 步骤 安装 sudo apt install python3.7 修改环境变量 修改默认的pyth ...

  3. 10行实现最短路算法——Dijkstra

    今天是算法数据结构专题的第34篇文章,我们来继续聊聊最短路算法. 在上一篇文章当中我们讲解了bellman-ford算法和spfa算法,其中spfa算法是我个人比较常用的算法,比赛当中几乎没有用过其他 ...

  4. Coneology(POJ 2932)

    原题如下: Coneology Time Limit: 5000MS   Memory Limit: 65536K Total Submissions: 4937   Accepted: 1086 D ...

  5. Python中的枚举enumerate

  6. 【深入理解Linux内核架构】第3章：内存管理

    3.1 概述 内存管理涵盖了许多领域: 内存中物理内存页的管理: 分配大块内存的伙伴系统: 分配小块内存的slab.slub.slob分配器: 分配非连续内存块的vmalloc机制: 进程的地址空间. ...

  7. 跨平台框架与React Native基础

    跨平台框架 什么是跨平台框架? 这里的多个平台一般是指 iOS 和 Android . 为什么需要跨平台框架? 目前,移动开发技术主要分为原生开发和跨平台开发两种.其中,原生应用是指在某个特定的移动平 ...

  8. CTF-BugKu-WEB-1-20

    2020.09.17 全面复习web,给自己定个目标,后天之前结束BugKu-Web,开始逆向. 经验教训 php弱等于用于绕过==,弱等于之前会把等号两边转化为同一类型变量: 全局变量全局变量全局变 ...

  9. 属性序列化自定义与字母表排序-JSON框架Jackson精解第3篇

    Jackson是Spring Boot默认的JSON数据处理框架,但是其并不依赖于任何的Spring 库.有的小伙伴以为Jackson只能在Spring框架内使用,其实不是的,没有这种限制.它提供了很 ...

  10. 如何解决Python下 pip install module 下载慢解决方法？

    对于Python来编程的用户最大的一个痛点就是,下载模块是下载速度特别慢,那么有没有解决方法呢? 换Python的pip下载源 1.首先安装一个模块 pqi,在cmd下 pip install pqi ...