(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. Python基础之猜数游戏

    例题一:猜数游戏.在程序中预设一个0~9之间的整数,让用户通过键盘输入所猜的数,如果大于预设的数,显示“遗憾,太大了”:小于预设的数,显示“遗憾,太小了”,如此循环,直至猜中该数,显示“预测N次,你猜 ...

  2. 201871010102-常龙龙《面向对象程序设计(java)》第十一周学习总结

    项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.com/nwnu-daizh/p ...

  3. lua 10 迭代器

    转自:http://www.runoob.com/lua/lua-iterators.html 迭代器(iterator)是一种对象,它能够用来遍历标准模板库容器中的部分或全部元素,每个迭代器对象代表 ...

  4. vue-cli2 打包

    npm run build 打包安装 相当于静态资源 解决vue-cli项目打包出现空白页和路径错误的问题 路径错误的问题解决方式: 打开config文件夹下的 index.js 找到如下图所示区域: ...

  5. C实现string字符串

    在C中实现string字符串,使用typedef将string定义为char *. #include <stdio.h> #include <stdlib.h> #includ ...

  6. 【2019.8.6 慈溪模拟赛 T2】树上路径(tree)(Trie)

    从暴力考虑转化题意 考虑最暴力的做法,我们枚举路径的两端,然后采用类似求树上路径长度的做法,计算两点到根的贡献,然后除去\(LCA\)到根的贡献两次. 即,设\(v_i\)为\(i\)到根路径上的边权 ...

  7. vue_03day

    目录 作业: vue组件操作页面渲染: 组件渲染: 作业: vue组件操作页面渲染: 1.有以下广告数据(实际数据命名可以略做调整) ad_data = { tv: [ {img: 'img/tv/0 ...

  8. strcspn()函数

    函数描述: 检索字符串 str1 开头连续有几个字符都不含字符串 str2 中的字符. 函数声明: #include<string.h> size_t strcspn(const char ...

  9. 线性结构之习题选讲-ReversingLinkedList

    目录 一.什么是抽象的链表 二.单链表的逆转 三.测试数据 3.1 边界测试 更新.更全的<数据结构与算法>的更新网站,更有python.go.人工智能教学等着你:https://www. ...

  10. Kubernetes 遇到的问题

    Kubernetes 遇到的问题 k8s 版本 k8s v1.13.5 docker 18.09.2 问题一 kubelet 报错 May 22 10:14:42 test-ops-k8s-03 ku ...