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 ...
随机推荐
- [PHP] PHP调用IMAP协议读取邮件类库
socket.php 为连接socket的类库 imap.php 基于socket的imap协议封装 test.php 进行测试 require_once 'socket.php'; require_ ...
- C++学习五 const vector<int>类型的迭代器使用
一情景: 算法功能:对于传入的vector, 能够找到两个数字,使其相加之和为target,然后返回这两个数字的位置(也就是秩) 最开始是这样的一个问题: 对于一个传入的const vector< ...
- 201271050130-滕江南-《面向对象程序设计(java)》第十五周学习总结
201271050130-滕江南-<面向对象程序设计(java)>第十五周学习总结 博文正文开头格式:(2分) 项目 内容 这个作业属于哪个课程 https://www.cnblogs.c ...
- 十一,专著研读(CART算法)
十一,专著研读(CART算法) CART称为分类回归树,既能用于分类也能用于回归.使用二元切分方法处理连续型变量,给定特定值,如果特征值大于给定值就走左子树,否则走右子树. CART算法步骤 决策树生 ...
- Pwnable-mistake
先看看c的源码 #include <stdio.h> #include <fcntl.h> #define PW_LEN 10 #define XORKEY 1 void xo ...
- 解决飞秋绑定TCP错误
电脑不能打开网页,局域网的飞秋不能运行:提示TCP/IP错误,错误事件代码:10106.重装TCP/IP协议后就OK了…… 步骤如下:1.删除这两个注册表选项:(打开注册表命令regedit.如果不能 ...
- 题解:T103342 Problem A. 最近公共祖先
题目链接 题目大意 求每个点对的lca深度的和 以每一层分析,得出通式 由于1e9的数据范围要化简表达式得到O(能过) 瞎搞后就是2^(2n+2)-(4n+2)*2^n-2 code: #includ ...
- 鲜贝7.3--mysql 下载小问题
安装mysql 5.7.20 及报错 This application requires Visual Studio 2013 Redistributable 问题原因大体是mysql自动安装的Vis ...
- pindel及breandancer安装
1.安装pindel需要依赖htslib https://github.com/samtools/htslib.git mv htslib htslib1 autoheader # If using ...
- iview 组件的额外传参问题记录
在使用iview组件的时候,经常遇到额外传参的问题,一般情况下可以使用以下2种方法都可以解决: 1.直接在方法后面输入参数,有的时候借用$event获取当前dom信息,在某些特定情况下可以将参数绑定在 ...