Bootstrap 3学习笔记 -栅格
这是Bootstrap中非常基础一张表,但其实有这么容易掌握和理解吗?
(1).对于col-md的div, 默认是垂直排列, 当视口(屏幕或浏览器的宽度)>992px,col-md-1的div块就水平排列了
(2).container的div最大宽度是自适应的,根据屏幕或浏览器的"视口"宽度自动调整的,例如当"视口"宽度>=1200px时,container的div最大宽度是1170px; 当视口>=768px,<=970px container的div最大宽度是750px
(3).当col块水平排列时,每个col块是有最宽宽度的概念, 对于col-md的div,最大列宽大概是81px(我实践测量并不是81px,求解释)
(4).栅格类嵌套
显示效果如下: 在这里 col-xs与 col-md 嵌套使用, 当视口>=992px时, col-md块层水平排列, col-xs不起作用,而当col-xs单独使用,是符合栅格系统基本要求,即一行只能有12个col, 所以,第2行的col-xs块就换行了.
(5).响应式列重置 .clearfix
Bootstrap 3学习笔记 -栅格的更多相关文章
- Bootstrap学习笔记-栅格系统
栅格系统的原理就是在这个界面中这个栅格被分成12个格子,你根据自己的想要的布局就把这个界面分割成你想要的部分就行了.一般如果我们用电脑作为显示器的我们用的样式是col-md 如果你用的显示期变小的情况 ...
- Bootstrap 基础学习笔记(一)
排版 (1)标题 Bootstrap标题样式进行了以下显著的优化重置: 1.重新设置了margin-top和margin-bottom的值, h1~h3重置后的值都是20px:h4~h6重置后的值都 ...
- bootstrap 新手学习笔记 代码整理
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- Bootstrap 新手学习笔记——布局组件
1.字形图标: <button type="button" class="btn btn-primary btn-lg" style="font ...
- Bootstrap入门学习笔记(只记录了效果)
基本头文件 <!DOCTYPE html> <html> <head> <title>Bootstrap 实例</title> <me ...
- Bootstrap新手学习笔记——css
Css模块: 1.网格系统: class前缀:.col-xs-*,.col-sm-*,.col-md-*,.col-lg-* <div class="container"&g ...
- bootstrap 4 学习笔记
一.button 颜色类 白色:btn 浅蓝色:btn btn-primary 深蓝色:btn btn-info 绿色:btn btn-success 黄色:btn btn-warning 红色:bt ...
- Bootstrap学习笔记博客
本片博客用于记录之后要用到Bootstrap的学习笔记 概括: Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASC ...
- Bootstrap学习笔记系列1-------Bootstrap网格系统
Bootstrap网格系统 学习笔记 [TOC] 简单网格 先上代码再解释 <!DOCTYPE html> <html> <head> <title>B ...
随机推荐
- cmake 静态调用 c++ dll 的类的一个例子(Clion IDE)[更新1:增加1.模版的应用,2.ma 的算法]
CMakeLists.txt project(aaa) add_library(aaa SHARED aaa.cpp) add_executable(bbb bbb.cpp) target_link_ ...
- td:first-child 伪类 匹配第一个 匹配第一个 <td> 元素
css代码: td:first-child{border-right: 1px solid #d9dbdd; } 备注:在下面的例子中,选择器匹配作为任何元素的第一个子元素的 p 元素: 链接:htt ...
- Robot Framework--10 万能的evaluate
转自:http://blog.csdn.net/tulituqi/article/details/10124559 这一讲我们重点来介绍一下一个常用的关键字evaluate. 我觉得这个关键字在RF里 ...
- Python开发【第二篇】:初识Python
Python开发[第二篇]:初识Python Python简介 Python前世今生 python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏 ...
- 缓存算法(页面置换算法)-FIFO、LFU、LRU
在前一篇文章中通过leetcode的一道题目了解了LRU算法的具体设计思路,下面继续来探讨一下另外两种常见的Cache算法:FIFO.LFU 1.FIFO算法 FIFO(First in First ...
- XSHELL下直接下载文件到本地(Windows)
xshell很好用,然后有时候想在windows和linux上传或下载某个文件,其实有个很简单的方法就是rz,sz 首先你的Ubuntu需要安装rz.sz(如果没有安装请执行以下命令,安装完的请跳过. ...
- shell脚本笔记(原创不断记录)
今天开始自己的shell脚本练习,刚好公司有太服务器,要时间对数据的cp是按月的: 考虑:首先寻找规律,发现都放置在/opt/www/aaa/ 里面有很多的2级和3级目录和文件,但我追踪要备份的是年 ...
- Linux服务器管理: 系统的进程管理终止进程kill命令
在Linux中如何用kill终止进程: kill -l [root@localhost~]#kill -l 可以看到kill中有很多的 常用: -1 是重启一个进程 -9 是强制杀死进程 ...
- hdu4939 Stupid Tower Defense (DP)
2014多校7 第二水的题 4939 Stupid Tower Defense Time Limit: 12000/6000 MS (Java/Others) Memory Limit: 131 ...
- C# 中excel操作
c#中设置Excel单元格格式 1.全表自动列宽 mysheet.Cells.Select(); mysheet.Cells.Columns.AutoFit(); 2.合并 excelRa ...