Bootstrap3基础 栅格系统 1行最多12列
内容 | 参数 |
---|---|
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 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 style="background-color:gray;">
<!-- start : demo -->
<!-- 非响应式,会出现堆叠 -->
<div class="container" style="background-color:white;">
<div class="row">
<!--
所有的列要放到行里
一行最多有12列,超过12的话,就会另起一行
-->
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-2</div>
<div class="col-md-1">col-md-3</div>
<div class="col-md-1">col-md-4</div>
<div class="col-md-1">col-md-5</div>
<div class="col-md-1">col-md-6</div>
<div class="col-md-1">col-md-7</div>
<div class="col-md-1">col-md-8</div>
<div class="col-md-1">col-md-9</div>
<div class="col-md-1">col-md-10</div>
<div class="col-md-1">col-md-11</div>
<div class="col-md-1">col-md-12</div>
<div class="col-md-1">col-md-13</div>
</div>
<hr />
<div class="row">
<!--
一行最多12列
col-md-4:四列的合并之后的效果
-->
<div class="col-md-4">col-md-1/2/3/4</div>
<div class="col-md-4">col-md-5/6/7/8</div>
<div class="col-md-4">col-md-9/10/11/12</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基础 栅格系统 1行最多12列的更多相关文章
- Bootstrap3基础 栅格系统 列中有行,行中有列
内容 参数 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-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基础 栅格系统 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.0 栅格系统背后的精妙魔法(Bootstrap3.0的栅格布局系统实现原理)
这个标题取的有点奇怪,怪我翻译的有问题吧.英文学平有限,有道词典和google翻译齐上阵是必须的.还好翻译的不是小说,对于技术文章,还是能勉强翻过来的. 本文主要讲解了Bootstrap3.0的栅格布 ...
- bootstrap3之栅格系统
原理 栅格系统的核心就是媒体查询.指定的尺寸都是百分比,也就是流式布局. 查看bootstrap中的源码可以发现,对样式的定义次序全都是依次 xs.sm.md.lg,如: // grid-framew ...
- Bootstrap3 栅格系统-实例:多余的列(column)将另起一行排列
如果在一个 .row 内包含的列(column)大于12个,包含多余列(column)的元素将作为一个整体单元被另起一行排列. <div class="row"> &l ...
随机推荐
- Centos7.3安装和配置Tomcat8
1.下载tomcat8压缩包 下载地址:https://pan.baidu.com/s/1ONIq3S5YjbCsET1rA13lGA 2.通过xftp工具将压缩包上传到usr/java下,然后使用下 ...
- Django---cookie和session
Django的cookie和session 一.cookie 二.session 回到顶部 一.cookie 1.特点 1. cookie数据保存在客户端,以key-value存储 2. cookie ...
- MFC Dialog使用
1. OnInitDialog 对话框初始化函数 在MFC主对话框OnInitDialog()中弹出对话框 BOOL CXXXDlg::OnInitDialog() { CDialogEx::OnIn ...
- 运维自动化之系统部署 cobbler(三)
cobbler 介绍 Cobbler: 快速网络安装linux操作系统的服务,支持众多的Linux发行版:Red Hat.Fedora.CentOS.Debian.Ubuntu和SuSE,也可以支持网 ...
- Your password does not satisfy the current policy requirements问题解决方法
运行 mysql>set validate_password_policy=0; 目的是,可以设置弱密码.
- django中static的坑
在django搭建网络平台的时候免不了要使用到static来保存静态文件, 在static文件夹里包含两个文件:css和js文件,如果使用不当就会出现很多问题 第一个坑:配置文件settings.py ...
- webpack入门文档教程
.octicon{margin-right:2px}a.tabnav-extra:hover{color:#4078c0;text-decoration:none}.tabnav-btn{margin ...
- mysql的执行过程
1 总流程 https://www.cnblogs.com/annsshadow/p/5037667.html 2 优化器 https://www.cnblogs.com/olinux/p/5 ...
- vue命令行错误处理
全局安装vue/cli时:npm install -g @vue/cli (1)Error: EACCES: permission denied, access '/usr/local/lib/nod ...
- C++笔记整理(参考整理自各大博客)
为什么构造函数不能是虚函数,析构函数往往是虚函数? 静态存储区.无论在那里构建,其过程都是两步:首先,分配一块内存:其次,调用构造函数.好,问题来了,如果构造函数是虚函数,那么就需要通过vtable ...