bootstrap基础样式学习(二)——栅格
(1)最外层必须使用容器
div.container或 div.container-fluid
(2)容器可以放置任何内容,若想使用栅格系统必须用 div.row
div.container > div.row
(3)一个.row中不能放置其它的内容,只能放置.col,列中放置任何内容.
div.container > div.row > div.col
(4)Bootstrap中行的默认均分12等分,每个列必面指定在行内占比.
12=[6-6]=[4-4-4]
(5)栅格系统针对不同的屏幕提供不同列
.col-lg-1/2/3...12
.col-md-1/2/3..12
.col-sm-1/2/3..12
.col-xs-1/2/3..12
(6)可以使用“列偏移”实现指定列及其后的列向右偏移的效果
.col-lg-offset-1/2/3/...12
.col-md-offset-1/2/3/...12
.col-sm-offset-1/2/3/...12
.col-xs-offset-1/2/3/...12
(7)需要注意不同屏幕下列的适用性
.col-xs-* 适用xs/sm/md/lg 屏幕
.col-sm-* 适用 sm/md/lg 屏幕
.col-md-* 适用 md/lg屏幕
.col-lg-* 适用 lg屏幕
列宽对于当前屏幕己更大屏幕都有效,列偏一样
(8)一个列可以指定在不同屏幕下宽度占比
div.col-xs-12/col-sm-9/col-md-6
div.col-xs-12/col-md-6
坑:div.col-xs-6 冲突 div.col-sm-6 错,不能写相同站列
(9)一列可以指定在特定屏幕下隐藏
.hidden-xs 仅在xs屏幕下隐藏
.hidden-sm 仅在sm屏幕下隐藏
.hidden-md 仅在md屏幕下隐藏
.hidden-lg 仅在lg屏幕下隐藏
(10)栅格系统可以嵌套,规则:在 列中再嵌入行,行中再有列
.container >
.row >
.col-*-* >
.row >
.col-*-*>
bootstrap基础样式学习(二)——栅格的更多相关文章
- bootstrap基础样式学习(一)
1.按钮btn .btn 按钮基础的样式 .btn-default 白底黑子的按钮 .btn-danger/warning/success/info/primary .btn-lg/sm/xs 按钮大 ...
- Bootstrap <基础三十二>模态框(Modal)插件
模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等. 如果您想要单独引用该插件的功能,那么您需要引用 ...
- bootstrap基础样式使用
<small> 为了给段落添加强调文本,则可以添加 class="lead" <small>本行内容是在标签内</small><br> ...
- Bootstrap基础知识学习
Bootstrap中文网 http://www.bootcss.com/ Bootstrap菜鸟教程 http://www.runoob.com/bootstrap/bootstrap-tutoria ...
- Swift3.0基础语法学习<二>
对象和类: // // ViewController2.swift // SwiftBasicDemo // // Created by 思 彭 on 16/11/15. // Copyright © ...
- [Bootstrap]全局样式(二)
具体排版 1.标题和标题类 <h1> ~<h6>和.h1~h6|副标题<small>和.small font-size mar ...
- django 基础框架学习 (二)
Django框架基础-02 Django缓存cookie 1.说明 当我们服务器在响应数据的同时,希望写⼊⼀些缓存数据到客户端 我们可以选择在响应的同时,将要写⼊到客户端的 ...
- 蜗牛—ORACLE基础之学习(二)
如何创建一个表,这个表和还有一个表的结构一样但没有数据是个空表,旧表的数据也插入的 create table newtable as select * from oldtable 清空一个表内的数据 ...
- Bootstrap <基础二十九>面板(Panels)
Bootstrap 面板(Panels).面板组件用于把 DOM 组件插入到一个盒子中.创建一个基本的面板,只需要向 <div> 元素添加 class .panel 和 class .pa ...
随机推荐
- [视频教程] docker端口映射与目录共享运行PHP
当我们在容器中安装完环境以后,需要在宿主机的端口上访问到容器中的端口,这时候就需要做端口映射.在开发代码的时候,需要频繁的修改代码,因此要把宿主机上的代码目录共享到容器中,这样容器里面就能访问的到代码 ...
- vue 表格组件 有事件交互(二)
04==>v-if下面可以嵌套 同级的 v-if 和v-node如下若是第一个v-if没有下面的就不可能显示出来的. <span v-if="!single" @cli ...
- 剑指Offer-13.调整数组顺序使奇数位于偶数前面(C++/Java)
题目: 输入一个整数数组,实现一个函数来调整该数组中数字的顺序,使得所有的奇数位于数组的前半部分,所有的偶数位于数组的后半部分,并保证奇数和奇数,偶数和偶数之间的相对位置不变. 分析: 这道题做法有很 ...
- 工具资源系列之给 windows 虚拟机装个 centos
前面我们已经介绍了如何在 Windows 宿主机安装 VMware 虚拟机,这节我们将利用安装好的 VMware 软件安装 centos 系统. 前情回顾 由于大多数人使用的 Windows 电脑而工 ...
- CentOS7 部署 Django 项目
1. 更新系统软件包 yum update -y 2. 安装软件管理包和可能使用的依赖 yum -y groupinstall "Development tools" yum in ...
- 安装oracle 11g及初次链接使用, 解锁及常用命令
1. 安装方法参考原创: https://blog.csdn.net/projectNo/article/details/76533921 2.初次链接数据库时,注意以下: 1. window + r ...
- C语言——初见指针
指针 指针是存放变量地址的变量. 由此我们可以知道了,指针存放的是变量地址且只能应用于内存中对象,指针本身也是一个变量.但是指针不仅仅可以存储变量地址,还可以是其他例如函数指针. C语言程序运行时,内 ...
- 使用JaCoCo统计单元测试代码覆盖率
1 JaCoCo介绍 JaCoCo是EclEmma团队基于多年覆盖率库使用经验总结而研发的一个开源的Java代码覆盖率库. 2 JaCoCo覆盖率计数器 JaCoCo 包含了多种尺度的覆盖率计数器(C ...
- Win10 企业版ltsc 无法访问samba网络共享问题及解决!(转)
1.本地安全策略,本地策略-安全选项,需要修改成默认的值的修改方式:查找注册表浏览到 HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\LSA直接 ...
- Qt 编译配置相关总结
MinGW 与 MSVC 编译的区别 我们可以从 Qt 下载页面看到两种版本编译器,如下图: 我们来对比一下这两个编译器的区别: MSVC 是指微软的 VC 编译器. MinGW 是 Minimali ...