bootstrap3 文档随看
唉 昨天看的是2,早知道就只可以看3啦,虽然整体不变,但是小改小闹的还是很多啦。产品上线是需要升级的,但是像这么改会很烦哎,有些样式名字修改,用法修改,功能修改,那让用惯了2的人还得把之前记忆清除了然后再看3。改的辛苦,学的也很累,谁让要用人家的工具呢~~~~~~
在 Bootstrap 2 中,我们对框架中的某些关键部分增加了对移动设备友好的样式。而在 Bootstrap 3 中,我们重写了整个框架,使其一开始就是对移动设备友好的。这次不是简单的增加一些可选的针对移动设备的样式,而是直接融合进了框架的内核中。也就是说,Bootstrap 是移动设备优先的。针对移动设备的样式融合进了框架的每个角落,而不是增加一个额外的文件。
bootstrap迎合了如火如荼的移动互联发展,
<meta name="viewport" content="width=device-width, initial-scale=1">
简单的一句话让你的网页基于现实屏幕大小去展示,要去适应肯定需要修改框架原本只能友好适应屏幕的span*样式。这样子col-xs-* col-sm-* col-md-* col-lg-*替代了原本只是以列划分。具体参见http://v3.bootcss.com/css/,这样子设置多种样式可以根据用户端产品去选择使用哪一种。当span被替代,当然,偏移也改了col-sm-offset-*,相应很多啦。这里添加了一个push pull,通过使用
.col-md-push-*
和 .col-md-pull-*
类就可以很容易的改变列(column)的顺序。
其他改变不多啦
还有一个就是我很喜欢的小图标的使用,更语义化使用
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
在简单的标签也可以使用啦,不用再独立出一个标签
使用注意
出于性能的考虑,所有图标都需要一个基类和对应每个图标的类。把下面的代码放在任何地方都可以正常使用。注意,为了设置正确的内补(padding),务必在图标和文本之间添加一个空格。
不要和其他组件混合使用
图标类不能和其它组件直接联合使用。它们不能在同一个元素上与其他类共同存在。应该创建一个嵌套的 <span>
标签,并将图标类应用到这个 <span>
标签上。
只对内容为空的元素起作用
图标类只能应用在不包含任何文本内容或子元素的元素上。
改变图标字体文件的位置
Bootstrap 假定所有的图标字体文件全部位于 ../fonts/
目录内,相对于预编译版 CSS 文件的目录。如果你修改了图标字体文件的位置,那么,你需要通过下面列出的任何一种方式来更新 CSS 文件:
- 在 Less 源码文件中修改
@icon-font-path
和/或@icon-font-name
变量。 - 利用 Less 编译器提供的 相对 URL 地址选项。
- 修改预编译 CSS 文件中的
url()
地址。
根据你自身的情况选择一种方式即可。
图标的可访问性
现代的辅助技术能够识别并朗读由 CSS 生成的内容和特定的 Unicode 字符。为了避免 屏幕识读设备抓取非故意的和可能产生混淆的输出内容(尤其是当图标纯粹作为装饰用途时),我们为这些图标设置了 aria-hidden="true"
属性。
如果你使用图标是为了表达某些含义(不仅仅是为了装饰用),请确保你所要表达的意思能够通过被辅助设备识别,例如,包含额外的内容并通过 .sr-only
类让其在视觉上表现出隐藏的效果。
如果你所创建的组件不包含任何文本内容(例如, <button>
内只包含了一个图标),你应当提供其他的内容来表示这个控件的意图,这样就能让使用辅助设备的用户知道其作用了。这种情况下,你可以为控件添加 aria-label
属相。
我觉得bootstrap团队应该把区别列出来有利于程序员的升级啦~~~
bootstrap3 文档随看的更多相关文章
- 看文档要看仔细,英语要加强啊... cocos2d-x 的 API 和 对应版本的 cocos2d-js 的 API 没有完全对应
/** * Sets the X rotation (angle) of the node in degrees which performs a horizontal rotational skew ...
- 短篇文档兼职看过来 python 课后作业 assignment project
文档兼职 开题报告 读后感 课后作业 等 代写 编程,Java ,Python,R,等语言的,国内外课程作业指导,写作. 有经验,有作品,成交快,放心! 可联系 QQ 550987425
- 同事跳槽阿里P7,甩我一份微服务架构设计模式文档,看完我也去
给所有微服务架构开发者的忠告,我想对你们说: 第一,要记住微服务不是解决所有问题的万能“银弹”. 第二,编写整洁的代码和使用自动化测试至关重要,因为这是现代软件开发的基础. 第三,关注微服务的本质,即 ...
- SpingMVC 核心技术帮助文档
声明:本篇文档主要是用于参考帮助文档,没有实例,但几乎包含了SpringMVC 4.2版本的所有核心技术,当前最新版本是4.3,4.2的版本已经经是很新的了,所以非常值得大家一读,对于读完这篇文档感觉 ...
- C# 写入XML文档三种方法详细介绍
三个类将同样的xml内容写入文档,介绍了如何使用XmlDocument类对XML进行操作,以及如何使用LINQ to XML对XML进行操作. 它们分别使用了XmlDocument类和XDocum ...
- MongoDB--使用修改器修改文档
可以使用修改器啦修改文档,比如增加.删除文档的键值.使用修改器首先要定位到某个文档, 然后再增加相应的修改选项,需要使用update语句 1.$inc修改器修改文档 > db.users.fin ...
- 自动生成并导出word文档
今天很荣幸又破解一现实难题:自动生成并导出word文档 先看页面效果: word效果: 代码: 先搭建struts2项目 创建action,并在struts.xml完成注册 <?xml vers ...
- 对于Swift的Enum,文档上没有说的
今天无意发现一个东西, 但是在文档上看了很多遍都没找到, 但是亲测是可行的, 那到底是什么呢? 以前我们定义枚举 会这样: enum Hello { case Item( String, Int) c ...
- 前端开发必备之MDN文档
想下载MDN文档的看前面的内容就可以了. HTML 源码下载 MDN官方下载地址:https://developer.mozilla.org/media/developer.mozilla.org.t ...
随机推荐
- JS实现自动轮播图效果(js案例)
现在很多网站都有轮播图,这篇文章主要为大家详细介绍了js实现轮播图的完整代码及原理,需要的小伙伴可以参考一下. 1.轮播图主要功能: 1. 图片自动轮播(主图切换同时下面导航图片也会跟着变化) 2. ...
- 自动检测GD库支持的图像类型
以下代码通过自动检测GD库支持的图像类型 来写出移直性更好的PHP代码 <?php if(function_exists("imagegif")){ header(" ...
- python学习笔记(一)——关于正则表达式的学习小结
python中提供了re这个模块提供对正则表达式的支持. 一.正则表达式常用到的一些语法(并非全部): . 匹配任意单个字符 [...] 匹配单个字符集 \w 匹配单词字符,即[a-zA-Z0-9] ...
- 【ACM】括号配对问题 - 栈
括号配对问题 时间限制:3000 ms | 内存限制:65535 KB 难度:3 描述 现在,有一行括号序列,请你检查这行括号是否配对. 输入 第一行输入一个数N(0<N<=1 ...
- python入门之time模块和datetime模块
time模块 时间三种表示:时间戳(秒单位),struct_time(元组,可以分开调用),指定格式(格式化) time.sleep() 等待5秒钟 time.time() 返回时间戳 time.ct ...
- mysql 帮助手册 以及 warning: World-writable config file 以及 ERROR 1840 (HY000) at line 24:
1. mysql --help 2.报错 报错Warning: World-writable config file http://www.jb51.net/article/99027.htm 最近在 ...
- 011 Container With Most Water 盛最多水的容器
给定 n 个非负整数 a1,a2,…,an,每个数代表坐标中的一个点 (i, ai) .画 n 条垂直线,使得垂直线 i 的两个端点分别为 (i, ai) 和 (i, 0).找出其中的两条线,使得它们 ...
- ZK请求处理
1. 事务请求转发-事务必须由Leader处理 所有非Leader的服务器收到来自客户端的事务请求,都会将客户端请求已REQUEST形式转发给Leader服务器进行处理 2. 事务处理 Proposa ...
- 【转】This Android SDK requires Android Developer Toolkit version 20.0.0 or above
本人最近在操作更新ANDROID SDK时出现类似于题目中的错误,是一启动ECLIPSE时.但是,我现在只是想恢复到原先的开发环境.于是找到本文,方法有效!!! windows 下面安装Android ...
- 在ActionBar中,即便设置showAsAction="always",items仍然在overflow中显示的问题
今天很是苦恼,明明设置了android:showAsAction="always",但是所有的items全部都显示在overflow中,然后在官网发现了答案. 如果你为了兼容 An ...