BootStap学习笔记(1)
移动设备优先:
<metaname="viewport"content="width=device-width, initial-scale=1.0">
响应式图像:
通过对图像添加class="img-responsive"可以让图像对响应式布局设计的更好;
伪元素
http://www.w3school.com.cn/css/css_pseudo_elements.asp
Bootstrap3 css有一个申请响应的媒体查询,在不同的媒体查询阈值范围内都为container设置了max-width,用以匹配网格系统.
@media (min-width: 768px) {
.container {
width: 750px;
}
网格系统
提供了一套响应式、移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。
行必须放置在 .container class 内,以便获得适当的对齐(alignment)和内边距(padding);
使用行来创建列的水平组;
内容应该放置在列内,且唯有列可以是行的直接子元素;
预定义的网格类,比如 .row 和 .col-xs-4,可用于快速创建网格布局。其中如果有多行,那么每行都要有.row
个人总结:如果同时定义了col-sm-* col-md-* col-lg-*,那么如果有匹配的就会采用匹配的列模式,如果窗口应用了col-lg-*,此时删除col-lg-*,那么窗口布局就会采用col-md-*。
<div class="clearfix visible-xs"></div>主要用在响应式列的重置
BootStap学习笔记(1)的更多相关文章
- BootStap学习笔记(2)
学习该内容之前可能会用到的内容: css属性Font-Weight:如果数字为700就是加粗的.或者更粗的为bolder,更细的是lighter. html Cite标签定义文档的引用,默认字体以斜体 ...
- js学习笔记:webpack基础入门(一)
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
- PHP-自定义模板-学习笔记
1. 开始 这几天,看了李炎恢老师的<PHP第二季度视频>中的“章节7:创建TPL自定义模板”,做一个学习笔记,通过绘制架构图.UML类图和思维导图,来对加深理解. 2. 整体架构图 ...
- PHP-会员登录与注册例子解析-学习笔记
1.开始 最近开始学习李炎恢老师的<PHP第二季度视频>中的“章节5:使用OOP注册会员”,做一个学习笔记,通过绘制基本页面流程和UML类图,来对加深理解. 2.基本页面流程 3.通过UM ...
- 2014年暑假c#学习笔记目录
2014年暑假c#学习笔记 一.C#编程基础 1. c#编程基础之枚举 2. c#编程基础之函数可变参数 3. c#编程基础之字符串基础 4. c#编程基础之字符串函数 5.c#编程基础之ref.ou ...
- JAVA GUI编程学习笔记目录
2014年暑假JAVA GUI编程学习笔记目录 1.JAVA之GUI编程概述 2.JAVA之GUI编程布局 3.JAVA之GUI编程Frame窗口 4.JAVA之GUI编程事件监听机制 5.JAVA之 ...
- seaJs学习笔记2 – seaJs组建库的使用
原文地址:seaJs学习笔记2 – seaJs组建库的使用 我觉得学习新东西并不是会使用它就够了的,会使用仅仅代表你看懂了,理解了,二不代表你深入了,彻悟了它的精髓. 所以不断的学习将是源源不断. 最 ...
- CSS学习笔记
CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...
- HTML学习笔记
HTML学习笔记 2016年12月15日整理 Chapter1 URL(scheme://host.domain:port/path/filename) scheme: 定义因特网服务的类型,常见的为 ...
随机推荐
- 11g数据库查看dataguard是否同步
一.环境 主库: ip地址:192.168.122.203 oracle根目录:/data/db/oracle SID:qyq 数据文件路径/ ...
- September 25th 2017 Week 39th Monday
No man is rich enough to buy back his own past. 没有人富有到可以赎回自己的过去. Those rich are not willing to buy b ...
- 【4】python函数基础
---恢复内容开始--- 案例1:时间下一秒程序 #__author:"吉勇佳" #date: 2018/10/14 0014 #function: timestr=input(& ...
- Spring Boot 以 war 方式部署
Spring Boot 默认自带了一个嵌入式的 Tomcat 服务器,可以以jar方式运行,更为常见的情况是需要将 Spring Boot 应用打包成一个 war 包,部署到 Tomcat.Jerry ...
- ascii2native 转码 解码
//把十六进制的编码转为原码function asciiHex2native(strAscii) { var output = ""; var posFrom = 0; var p ...
- CSS3 新增颜色表示方式
一.CSS1&2颜色表示方式(W3C标准) 1.Color name 颜色名称方式(用颜色关键字表示对应的颜色.) 例如:red(红色).blue(蓝色).pink(粉色) 优点:方便快捷而 ...
- shell基础--cat命令的使用
一.cat的常用用法 1.总结 2.实验 (1).非交互式编辑 [root@~_~ day5]# cat > cattest.sh <<STOP > hello > ST ...
- 既生 Redis 何生 LevelDB ?
了解 Redis 的同学都知道它是一个纯内存的数据库,凭借优秀的并发和易用性打下了互联网项的半壁江山.Redis 之所以高性能是因为它的纯内存访问特性,而这也成了它致命的弱点 —— 内存的成本太高.所 ...
- ASP.NET MVC编程——路由
框架自动生成的路由配置 上图中,路由配置文件为App_Start文件夹下的RouteConfig.cs. 代码如下: public class RouteConfig { public static ...
- zoc license code
点击导航栏上的zoc-about zoc,然后: 点击enter license: 然后输入内容即可: part A: 51698/01027/34713 part B: 00937 还有很多其他 ...