<!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. ubuntu 18.04下修改python3指向

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

  2. 11.QT-ffmpeg+QAudioOutput实现音频播放器

    1.前言      由于QAudioOutput支持的输入数据必须是原始数据,所以播放mp3,WAV,AAC等格式文件,需要解封装后才能支持播放.      而在QT中,提供了QMediaPlayer ...

  3. 预科班D8

    2020.09.16星期三 预科班D8 学习内容: 一.注释 单行注释 ==>用 # 写在上一行或者该行后面 多行注释 ==>用 ''' '''或""" &q ...

  4. Netty之ChannelOption的各种参数

    ChannelOption.SO_BACKLOG, 1024 BACKLOG用于构造服务端套接字ServerSocket对象,标识当服务器请求处理线程全满时,用于临时存放已完成三次握手的请求的队列的最 ...

  5. 【Linux常用命令①】程序员必须掌握的Linux命令

    目录 man:帮助命令 echo:输出 date:时间 reboot:重启 poweroff:关闭系统 wget:下载 ps:查看进程状态 top:任务管理器 pidof:查询某个指定进程的PID值 ...

  6. 在Notepad++中配置python运行环境

    1.当然首先还是需要先安装Python软件包的,推荐Python 3.X 2.打开Notepad++,[运行]--[运行],或者直接按F5快捷键,输入如下命令: cmd /k cd /d " ...

  7. Java Web学习（四）http协议

    文章更新时间:2020/07/24 一.概念 定义 HTTP:超文本传输协议,是TCP/IP协议的一个应用层协议,用于定义WEB浏览器与WEB服务器之间交换数据的过程. HTTP协议:用于定义客户端与 ...

  8. 一道Postgresql递归树题

    转载请注明出处: https://www.cnblogs.com/funnyzpc/p/13698249.html 也是偶然的一次,群友出了一道题考考大家,当时正值疫情最最严重的三月(借口...),披 ...

  9. 关于消息中间件ActiveMQ的企业级应用

    几个月前看到项目中配置了activeMq,于是想通透的掌握activeMq,便去网上学习搜寻资料,找到这一篇博客挺不错的,解释的比较清楚,包括原理使用和配置,特此把它分享给大家. 众所周知,消息中间件 ...

  10. Spark中的聚类算法

    Spark - Clustering 官方文档:https://spark.apache.org/docs/2.2.0/ml-clustering.html 这部分介绍MLlib中的聚类算法: 目录: ...