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 ...
随机推荐
- Python基础之猜数游戏
例题一:猜数游戏.在程序中预设一个0~9之间的整数,让用户通过键盘输入所猜的数,如果大于预设的数,显示“遗憾,太大了”:小于预设的数,显示“遗憾,太小了”,如此循环,直至猜中该数,显示“预测N次,你猜 ...
- 201871010102-常龙龙《面向对象程序设计(java)》第十一周学习总结
项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.com/nwnu-daizh/p ...
- lua 10 迭代器
转自:http://www.runoob.com/lua/lua-iterators.html 迭代器(iterator)是一种对象,它能够用来遍历标准模板库容器中的部分或全部元素,每个迭代器对象代表 ...
- vue-cli2 打包
npm run build 打包安装 相当于静态资源 解决vue-cli项目打包出现空白页和路径错误的问题 路径错误的问题解决方式: 打开config文件夹下的 index.js 找到如下图所示区域: ...
- C实现string字符串
在C中实现string字符串,使用typedef将string定义为char *. #include <stdio.h> #include <stdlib.h> #includ ...
- 【2019.8.6 慈溪模拟赛 T2】树上路径(tree)(Trie)
从暴力考虑转化题意 考虑最暴力的做法,我们枚举路径的两端,然后采用类似求树上路径长度的做法,计算两点到根的贡献,然后除去\(LCA\)到根的贡献两次. 即,设\(v_i\)为\(i\)到根路径上的边权 ...
- vue_03day
目录 作业: vue组件操作页面渲染: 组件渲染: 作业: vue组件操作页面渲染: 1.有以下广告数据(实际数据命名可以略做调整) ad_data = { tv: [ {img: 'img/tv/0 ...
- strcspn()函数
函数描述: 检索字符串 str1 开头连续有几个字符都不含字符串 str2 中的字符. 函数声明: #include<string.h> size_t strcspn(const char ...
- 线性结构之习题选讲-ReversingLinkedList
目录 一.什么是抽象的链表 二.单链表的逆转 三.测试数据 3.1 边界测试 更新.更全的<数据结构与算法>的更新网站,更有python.go.人工智能教学等着你:https://www. ...
- Kubernetes 遇到的问题
Kubernetes 遇到的问题 k8s 版本 k8s v1.13.5 docker 18.09.2 问题一 kubelet 报错 May 22 10:14:42 test-ops-k8s-03 ku ...