(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. [PHP] PHP调用IMAP协议读取邮件类库

    socket.php 为连接socket的类库 imap.php 基于socket的imap协议封装 test.php 进行测试 require_once 'socket.php'; require_ ...

  2. C++学习五 const vector<int>类型的迭代器使用

    一情景: 算法功能:对于传入的vector, 能够找到两个数字,使其相加之和为target,然后返回这两个数字的位置(也就是秩) 最开始是这样的一个问题: 对于一个传入的const vector< ...

  3. 201271050130-滕江南-《面向对象程序设计(java)》第十五周学习总结

    201271050130-滕江南-<面向对象程序设计(java)>第十五周学习总结 博文正文开头格式:(2分) 项目 内容 这个作业属于哪个课程 https://www.cnblogs.c ...

  4. 十一,专著研读(CART算法)

    十一,专著研读(CART算法) CART称为分类回归树,既能用于分类也能用于回归.使用二元切分方法处理连续型变量,给定特定值,如果特征值大于给定值就走左子树,否则走右子树. CART算法步骤 决策树生 ...

  5. Pwnable-mistake

    先看看c的源码 #include <stdio.h> #include <fcntl.h> #define PW_LEN 10 #define XORKEY 1 void xo ...

  6. 解决飞秋绑定TCP错误

    电脑不能打开网页,局域网的飞秋不能运行:提示TCP/IP错误,错误事件代码:10106.重装TCP/IP协议后就OK了…… 步骤如下:1.删除这两个注册表选项:(打开注册表命令regedit.如果不能 ...

  7. 题解:T103342 Problem A. 最近公共祖先

    题目链接 题目大意 求每个点对的lca深度的和 以每一层分析,得出通式 由于1e9的数据范围要化简表达式得到O(能过) 瞎搞后就是2^(2n+2)-(4n+2)*2^n-2 code: #includ ...

  8. 鲜贝7.3--mysql 下载小问题

    安装mysql 5.7.20 及报错 This application requires Visual Studio 2013 Redistributable 问题原因大体是mysql自动安装的Vis ...

  9. pindel及breandancer安装

    1.安装pindel需要依赖htslib https://github.com/samtools/htslib.git mv htslib htslib1 autoheader # If using ...

  10. iview 组件的额外传参问题记录

    在使用iview组件的时候,经常遇到额外传参的问题,一般情况下可以使用以下2种方法都可以解决: 1.直接在方法后面输入参数,有的时候借用$event获取当前dom信息,在某些特定情况下可以将参数绑定在 ...