Bootstrap3基础栅格系统列中有行，行中有列

内容	参数
OS	Windows 10 x64
browser	Firefox 65.0.2
framework	Bootstrap 3.3.7
editor	Visual Studio Code 1.32.1
typesetting	Markdown

code

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <!-- IE将使用最新的引擎渲染网页 -->

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!-- 页面的宽度与设备屏幕的宽度一致

         初始缩放比例 1:1 -->

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Demo</title>

    <meta name="author" content="www.cnblogs.com/kemingli">

    <!-- 引入外部bootstrap的css文件(压缩版)，版本是3.3.7 -->

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

    <style type="text/css">

        div[class*="col-"] {

            border: 1px solid red;

        }

        .row {

            border: 1px solid blue;

        }

    </style>

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->

    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->

    <!--[if lt IE 9]>

        <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>

        <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>

    <![endif]-->

</head>

<body>

    <!-- start : demo -->

    <div class="container">

        <!-- 标尺 -->

        <div class="row">

            <div class="col-lg-1 col-md-1 col-sm-1 col-xs-1">1</div>

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

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

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

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

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

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

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

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

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

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

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

        </div>

        <div class="row">

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

                <!-- 列中嵌套行 -->

                <div class="row">

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

                        8-1

                    </div>

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

                        8-3

                    </div>

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

                        8-4

                    </div>

                </div>

            </div>

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

                &nbsp;

            </div>

        </div>

    </div>

    <!-- end : demo -->

    <!-- NO.1 加载框架依赖的jQuery文件(压缩版)，版本是1.12.4 -->

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

    <!-- NO.2 加载Bootstrap的所有JS插件，版本是3.3.7 -->

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

</body>

</html>

result

resource

[ 文档 ] getbootstrap.com/docs/3.3
[ 源码 ] github.com/twbs/bootstrap
[ 源码 ] archive.mozilla.org/pub/firefox/releases/65.0/source/
[ 平台 ] www.cnblogs.com
[ 平台 ] github.com
[ 扩展 - 平台] www.bootcss.com
[ 扩展 - 浏览器 ] www.mozilla.org/zh-CN/firefox/developer

Bootstrap是前端开源框架，优秀，值得学习。

博文讲述的是V3版本，更为先进的是V4版本。学有余力的话，可作简单地了解。

Firefox是开源的浏览器，优秀，值得关注。

面对开源框架，分析、领悟与应用，能对其进行加减裁化，随心所欲而不逾矩。

博文的质量普通，仅供参考。盲目复制，处处是坑。Think twice before you act(三思而后行)！

Bootstrap3基础栅格系统列中有行，行中有列的更多相关文章

Bootstrap3基础栅格系统 1行最多12列
内容参数 OS Windows 10 x64 browser Firefox 65.0.2 framework Bootstrap 3.3.7 editor ...
Bootstrap3基础栅格系统页面布局随浏览器大小的变化而变化
内容参数 OS Windows 10 x64 browser Firefox 65.0.2 framework Bootstrap 3.3.7 editor ...
Bootstrap3基础栅格系统 col-lg/md/sm/xs-* 简单示例
内容参数 OS Windows 10 x64 browser Firefox 65.0.2 framework Bootstrap 3.3.7 editor ...
Bootstrap3基础栅格系统 col-md-offset 向右偏移
内容参数 OS Windows 10 x64 browser Firefox 65.0.2 framework Bootstrap 3.3.7 editor ...
Bootstrap3基础栅格系统标尺(col-lg/md/sm/xs-1)
内容参数 OS Windows 10 x64 browser Firefox 65.0.2 framework Bootstrap 3.3.7 editor ...
Bootstrap3基础栅格系统 col-md-push/pull 向左、右的浮动偏移
内容参数 OS Windows 10 x64 browser Firefox 65.0.2 framework Bootstrap 3.3.7 editor ...
Bootstrap3.0 栅格系统背后的精妙魔法(Bootstrap3.0的栅格布局系统实现原理)
这个标题取的有点奇怪,怪我翻译的有问题吧.英文学平有限,有道词典和google翻译齐上阵是必须的.还好翻译的不是小说,对于技术文章,还是能勉强翻过来的. 本文主要讲解了Bootstrap3.0的栅格布 ...
sql中的行转列和列转行的问题
sql中的行转列和列转行的问题这是一个常见的问题,也是一个考的问题 1.行转列的问题简单实例 CREATE TABLE #T ( MON1 INT, MON2 INT, MON3 INT ) G ...
sqlserver 行转列、字符串行转列、自动生产行转列脚本
行转列,老生常谈的问题.这里总结一下网上的方法. 1.生成测试数据: CREATE TABLE human( name ), --姓名 norm ), --指标 score INT , --分数 gr ...

随机推荐

《ABCD组》第一次作业：团队亮相
ABCD组:团队亮相项目内容这个作业属于哪个课程 http://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.com/nw ...
linux软件安装方式
先插句题外话,快捷键 Ctrl+s 的功能是停止输入,Ctrl+q 恢复输入; 正题,在linux的应用软件安装有三种: 1,tar包 2,rpm包 3,dpkg包以下介绍三种包的安装和卸载方式 1 ...
截取字段split
172.0.0.1String[] splitAddress=qip.split("\\.");//--172001 String ip=splitAddress[0]+" ...
linux 逆向映射
逆向映射用于建立物理内存页和使用该页的进程的对应页表项之间的联系,在换出页时以便更新所有涉及的进程.得到物理页基址后,根据pfn_to_page可以将页框转换为page实例,page实例中的mappi ...
kubernetes安装
本文主要参考自: https://blog.csdn.net/real_myth/article/details/78719244 还有一份更适合在生产环境使用的超强高可用(多master,nginx ...
小程序报错 TLS 版本必须大于等于 1.2
https://www.cnblogs.com/phpper/p/6866036.html 服务器是windows 2008 server 环境是IIS7SSL是申请用的阿里免费.微信小程序发现wx. ...
opencart精简checkout购物流程
最近在做一个商城项目,让外国朋友帮忙看看,他给我们一些建议了,其中他说Can You make more simple buying Button,3 step:Sign up :Shipping A ...
Nginx实现负载均衡的简单案例
七层负载均衡的实现(Nginx): 基于URL等应用层信息的负载均衡,一般使用Nginx来实现 Nginx的proxy是它一个很强大的功能,实现了7层负载均衡功能强大.性能卓越.运行稳定配置简单灵 ...
ORA-27300 ORA-27301 ORA-27302 sskgpcreates
1.环境信息 OS:SUSE 12SP3 DB:12.2.0.1.0 2.数据库启动失败 SQL> startup ORA-27154: post/wait create failed ORA- ...
CentOS安装PHP7.*
安装如之前安装过PHP,则先卸载 $ yum -y remove php* 由于linux的yum源不存在php7.x,所以我们要更改yum源 $ rpm -Uvh https://dl.fedor ...

Bootstrap3基础 栅格系统 列中有行，行中有列

code

result

resource

Bootstrap3基础 栅格系统 列中有行，行中有列的更多相关文章

随机推荐

热门专题

Bootstrap3基础栅格系统列中有行，行中有列

Bootstrap3基础栅格系统列中有行，行中有列的更多相关文章