(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基础样式学习(二)——栅格的更多相关文章

  1. bootstrap基础样式学习(一)

    1.按钮btn .btn 按钮基础的样式 .btn-default 白底黑子的按钮 .btn-danger/warning/success/info/primary .btn-lg/sm/xs 按钮大 ...

  2. Bootstrap <基础三十二>模态框(Modal)插件

    模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等. 如果您想要单独引用该插件的功能,那么您需要引用  ...

  3. bootstrap基础样式使用

    <small> 为了给段落添加强调文本,则可以添加 class="lead" <small>本行内容是在标签内</small><br> ...

  4. Bootstrap基础知识学习

    Bootstrap中文网 http://www.bootcss.com/ Bootstrap菜鸟教程 http://www.runoob.com/bootstrap/bootstrap-tutoria ...

  5. Swift3.0基础语法学习<二>

    对象和类: // // ViewController2.swift // SwiftBasicDemo // // Created by 思 彭 on 16/11/15. // Copyright © ...

  6. [Bootstrap]全局样式(二)

    具体排版 1.标题和标题类 <h1> ~<h6>和.h1~h6|副标题<small>和.small font-size                    mar ...

  7. django 基础框架学习 (二)

    Django框架基础-02 Django缓存cookie 1.说明        当我们服务器在响应数据的同时,希望写⼊⼀些缓存数据到客户端        我们可以选择在响应的同时,将要写⼊到客户端的 ...

  8. 蜗牛—ORACLE基础之学习(二)

    如何创建一个表,这个表和还有一个表的结构一样但没有数据是个空表,旧表的数据也插入的 create table newtable as select * from oldtable 清空一个表内的数据 ...

  9. Bootstrap <基础二十九>面板(Panels)

    Bootstrap 面板(Panels).面板组件用于把 DOM 组件插入到一个盒子中.创建一个基本的面板,只需要向 <div> 元素添加 class .panel 和 class .pa ...

随机推荐

  1. [视频教程] docker端口映射与目录共享运行PHP

    当我们在容器中安装完环境以后,需要在宿主机的端口上访问到容器中的端口,这时候就需要做端口映射.在开发代码的时候,需要频繁的修改代码,因此要把宿主机上的代码目录共享到容器中,这样容器里面就能访问的到代码 ...

  2. vue 表格组件 有事件交互(二)

    04==>v-if下面可以嵌套 同级的 v-if 和v-node如下若是第一个v-if没有下面的就不可能显示出来的. <span v-if="!single" @cli ...

  3. 剑指Offer-13.调整数组顺序使奇数位于偶数前面(C++/Java)

    题目: 输入一个整数数组,实现一个函数来调整该数组中数字的顺序,使得所有的奇数位于数组的前半部分,所有的偶数位于数组的后半部分,并保证奇数和奇数,偶数和偶数之间的相对位置不变. 分析: 这道题做法有很 ...

  4. 工具资源系列之给 windows 虚拟机装个 centos

    前面我们已经介绍了如何在 Windows 宿主机安装 VMware 虚拟机,这节我们将利用安装好的 VMware 软件安装 centos 系统. 前情回顾 由于大多数人使用的 Windows 电脑而工 ...

  5. CentOS7 部署 Django 项目

    1. 更新系统软件包 yum update -y 2. 安装软件管理包和可能使用的依赖 yum -y groupinstall "Development tools" yum in ...

  6. 安装oracle 11g及初次链接使用, 解锁及常用命令

    1. 安装方法参考原创: https://blog.csdn.net/projectNo/article/details/76533921 2.初次链接数据库时,注意以下: 1. window + r ...

  7. C语言——初见指针

    指针 指针是存放变量地址的变量. 由此我们可以知道了,指针存放的是变量地址且只能应用于内存中对象,指针本身也是一个变量.但是指针不仅仅可以存储变量地址,还可以是其他例如函数指针. C语言程序运行时,内 ...

  8. 使用JaCoCo统计单元测试代码覆盖率

    1 JaCoCo介绍 JaCoCo是EclEmma团队基于多年覆盖率库使用经验总结而研发的一个开源的Java代码覆盖率库. 2 JaCoCo覆盖率计数器 JaCoCo 包含了多种尺度的覆盖率计数器(C ...

  9. Win10 企业版ltsc 无法访问samba网络共享问题及解决!(转)

    1.本地安全策略,本地策略-安全选项,需要修改成默认的值的修改方式:查找注册表浏览到 HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\LSA直接 ...

  10. Qt 编译配置相关总结

    MinGW 与 MSVC 编译的区别 我们可以从 Qt 下载页面看到两种版本编译器,如下图: 我们来对比一下这两个编译器的区别: MSVC 是指微软的 VC 编译器. MinGW 是 Minimali ...