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团队应该把区别列出来有利于程序员的升级啦~~~

 
时间: 2024-10-16 09:35:11

bootstrap3 文档随看的相关文章

看文档要看仔细,英语要加强啊... cocos2d-x 的 API 和 对应版本的 cocos2d-js 的 API 没有完全对应

/** * Sets the X rotation (angle) of the node in degrees which performs a horizontal rotational skew. * * The difference between `setRotationalSkew()` and `setSkew()` is that the first one simulate Flash's skew functionality, * while the second one u

Bootstrap3学习笔记 Bootstrap3文档和栅格系统

?? Bootstrap 使用到的某些 HTML 元素和 CSS 属性须要将页面设置为 HTML5 文档类型. 1)例如以下开头html标签: <!DOCTYPE html> <html lang="zh-CN"> ... </html> 2)Bootstrap3是依照移动设备优先设计的框架.为了确保适当的绘制和触屏缩放.须要加入viewport元数据标签: <meta name="viewport" content=&qu

Activit最入门学习文档,从如何创建项目开始共20章,看完,任何Java项目集成无压力

Activit流程引擎 本人水平,刚自学java一个多月,然后看视频做的笔记,全部傻瓜式截图教程,反正我学习之前没在网上搜索到任何小白教程, Activit官方的教程真心看不懂,因为都是文字 没具体创建步奏,所以对新手来说很无奈, 然后吧,就把自己的学习经验贡献出来啦 最小白的文档,看完之后,集成到任何java项目中都无压力,我最后的是做了个Jfinal集成,估计这是网上搜到最全的容易懂的入门学习文档,本人自学java一个月,反正我看官方例子什么的都看不懂,然后各搜素也没收到教程视频,还好有别人

写文档的一些感触

软工写文档也有一个多星期了,还没有写完,感觉太慢了~ 对于软工文档,最大的感觉就是不知道该怎么写.问过一个师哥,师哥说这次写主要是为了让我们先了解一下写文档,现在让我们真正写那肯定是写不好的.后面还会有项目来练习的. 真正优秀的程序员应该不单是编程高手,同时也应该是写文档的高手.大多数程序员是不喜欢写文档的.文档种类多,要求多.需求的改变和代码的改变都会让文档如同一张过时的废纸一样.很多程序员不写文档照样能编出程序来,文档的好处更多的体现在公司.用户和后续程序员身上.这样即使程序员走了,只要有文

让你提前认识软件开发(40):既要写好代码,又要写好文档

第3部分 软件研发工作总结 既要写好代码,又要写好文档 对于软件相关行业,在学校或单位上,大家也许都已经注意到了,除了要编写的程序.绘制设计图之外,还有一个重要的工作便是写文档.为什么要写文档呢?因为我们要把自己做的东西展示出来,不光展示给同行看,可能还要展示给其他岗位上的工作人员看,甚至展示给用户看.如果我们只是会写程序,不会在文档中描述自己的想法,那么就真正的成为"码农"了. 工作也有一段时间了,我发现周围的同事,会写高质量文档的确实很少.李开复老师在<浪潮之巅>的序言

程序员如何写出一份好的文档?

写文档的重要性 对于软件相关行业,在学校或单位大家也许都已经注意到了,除了要编写的程序.绘制设计图之外,还有一个重要的工作便是写文档.为什么要写文档呢?因为我们要把自己做的东西展示出来,不光展示给同行看,可能还要展示给其他岗位上的工作人员看,甚至展示给用户看.如果我们只是会写程序,不会在文档中恰当且优雅地描述自己的想法,那么就真正的成为“码农”了. 我注意了一下,周围的同事会写高质量文档的确实很少.李开复老师在<浪潮之巅>的序言中说到:“我认识很多顶尖的工程师,但具备强大叙事能力的优秀工程师,

Beautiful Soup 4.2.0 文档

Beautiful Soup 4.2.0 文档 Beautiful Soup 是一个可以从HTML或XML文件中提取数据的Python库.它能够通过你喜欢的转换器实现惯用的文档导航,查找,修改文档的方式.Beautiful Soup会帮你节省数小时甚至数天的工作时间. 这篇文档介绍了BeautifulSoup4中所有主要特性,并且有小例子.让我来向你展示它适合做什么,如何工作,怎样使用,如何达到你想要的效果,和处理异常情况. 文档中出现的例子在Python2.7和Python3.2中的执行结果相

MongoDB--使用修改器修改文档

可以使用修改器啦修改文档,比如增加.删除文档的键值.使用修改器首先要定位到某个文档, 然后再增加相应的修改选项,需要使用update语句 1.$inc修改器修改文档 > db.users.findOne({'name':'cd'}); { "_id" : ObjectId("584eafa97629396db95535da"), "name" : "cd", "sex" : "M"

SpingMVC 核心技术帮助文档

SpringMVC 框架使用技巧 声明:本篇文档主要是用于参考帮助文档,没有实例,但几乎包含了SpringMVC 4.2版本的所有核心技术 对于觉得篇幅长的文档,建议大家使用快捷键crtl + F,搜索关键字查询较为方便. 欢迎加群JAVA编程交流群 574337670 21.1 Spring Web MVC框架简介 Spring的模型-视图-控制器(MVC)框架是围绕一个 DispatcherServlet 来设计的,这个Servlet会把请求分发给各个处理器,并支持可配置的处理器映射.视图渲