Bootstrap 3.2.0 源码试读 2014/08/09

第一部分 normalize.css

104至110行

code,    /* 编辑代码 */
kbd,    /* 键盘输入的文本 */
pre,
samp {    /* 范例,sample的简写 */
  font-family: monospace, monospace;    /* 这个地方应该是写错了,第二字体应该是serif */
  font-size: 1em;
}

设置字体的大小为1em,字体为monospace。

111至119行

button,
input,
optgroup,    /* 选项组,配合select使用。有个label属性用来显示组描述 */
select,
textarea {
  margin: 0;
  font: inherit;
  color: inherit;
}

设置外边距是0,字体与颜色都继续自父容器。

120至122行

button {
  overflow: visible;
}

按钮上显示的文本即使溢出也照常显示。

123至126行

button,
select {
  text-transform: none;
}

按钮与列表的文本的大小写为标准方式。

text-transform 属性控制文本的大小写,可选的值有5个。

1、none与inherit

2、capitalize,每个单词的第一个字母大写

3、uppercase,全是大写

4、lowercase,全是小写

127至133行

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  cursor: pointer;
}

设置按钮的显示样式就是按钮(听着有点绕),鼠标放上去的时候显示的是个表示可以点击的样式。

appearance的值有6个,用来控制标签显示的样式。

1、normal,浏览器的默认值

2、icon,像个图标

3、window,像个窗口

4、button,像个按钮

5、menu,像个菜单

6、filed,像个输入框

cursor的值有挺多,如果你采用浏览器的默认值就设为auto。

常用的有下面几个

1、pointer,放链接上显示的那种,有可能是手形,有可能是箭头

2、crosshair,十字

3、wait,等待,沙漏的样子

4、help,问号

5、move,十字箭头

6、text,像可以输入文本的样子

134至137行

button[disabled],
html input[disabled] {
  cursor: default;
}

按钮及输入框的禁用状态,鼠标的样式是箭头。

138至142行

button::-moz-focus-inner,
input::-moz-focus-inner {
  padding: 0;
  border: 0;
}

就是告诉浏览器,当按钮、输入框获得焦点的时候,不要显示个虚框,搞的文字不好好在中间呆着。

143至145行

input {
  line-height: normal;
}

input的行高为默认值,也就是字体的1到1.2倍。

146至152行

input[type="checkbox"],
input[type="radio"] {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  padding: 0;
}

单选框、复选框的宽度不包含边框,同时内添充为0.

153至156行

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

数据输入框的上下调整按钮的高度为自动调整。

157至166行

input[type="search"] {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
  -webkit-appearance: textfield;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

搜索框的宽度不包括内添充也不包括边框,默认的样式为一个文本框。

不显示搜索框的取消按钮及搜索修饰的显示样式为不显示。

待续 ...

Bootstrap 3.2.0 源码试读 2014/08/09,布布扣,bubuko.com

时间: 2024-12-10 13:48:05

Bootstrap 3.2.0 源码试读 2014/08/09的相关文章

Bootstrap 3.2.0 源码试读 2014/08/04

第一部分 normalize.css 用于解决不同浏览器下显示不一致的问题 8至12行 html {   font-family: sans-serif;    /* 设置默认字体为 sans-serif */   -webkit-text-size-adjust: 100%;    /* 手机等设备转屏时,字体大小随着自动调整 */       -ms-text-size-adjust: 100%;    /* 但是如果禁用了缩放功能,则此设置无效 */ } text-size-adjust由

Bootstrap 3.2.0 源码试读 2014/08/11

第二部 @media print 212至217行   pre,   blockquote {    /* 块引用 */     border: 1px solid #999;     page-break-inside: avoid;   } 215行是个空格,是什么个意思?闲着蛋疼往前翻了翻,3.0.X版本没这个问题.根本没这行. 设置边框宽度为1px,实心,颜色#999,并且避免在内容里挺入分页符. page-break-inside据说只有opera支持,可用的值有3个 auto,默认值

Bootstrap 3.2.0 源码试读 2014/08/07

第一部分 normalize.css 70至72行 small {   font-size: 80%; } 设置small标签的字体大小为父容器字体的80%. 73至79行 sub, sup {   position: relative;   font-size: 75%;   line-height: 0;   vertical-align: baseline; } sup {   top: -.5em; } sub {   bottom: -.25em; } 先设置上标sup及下标sub,位

Bootstrap 3.2.0 源码试读 2014/08/10

第一部分 normalize.css 167至171行 fieldset {   padding: .35em .625em .75em;   margin: 0 2px;   border: 1px solid #c0c0c0; } legend {   padding: 0;   border: 0; } 表单分组标题的内添充为上 .23em,下 .75em, 左右 .625em.外边距为上下0,左右2px,边框为#c0c0c0.实心的1px宽. 分组标题的内添充为0,边框为0. 176至1

Lua 源码试读

开始看 Lua 源码也有段时间了,由于尝试用各种方式切入,效果均不是很理想,应该是个人内功不做所致.加上先阶段个人时间有限,现记录下断点,待到来日能力足够有兴趣时再来看. 初期探索: 0.由于第一次尝试读源码,开始时竟将源码按大小顺序排列,从小文件看起. 1.尝试从数据结构看起,看完了 Lua 的数据结构后对 Lua 的数据结构还是有种朦胧的感觉.然后尝试看 Lua 的 GC 终止. 2.尝试把 Lua 当作一个程序来看,从 main 函数开始读,函数调用层层深入下去...作为一个菜鸟,这注定是

Redis源码试读(一)源码准备

这里开始查看Redis的源码,之前是在看Unix的环境编程,虽然这本书写的很好,但是只看这个感觉有点隔靴搔痒.你可以知道沙子.水泥.钢筋的特性,但是要想建一栋大楼仍然是另一回事.Unix环境编程要看,同时也要借助源码来看下大神的操作. Redis的版本:Redis 4.0.1下载地址:http://download.redis.io/releases/redis-4.0.1.tar.gz源码查看工具:Source InsightSource Insight的版本:Source Insight 4

Spring源码试读--BeanFactory模拟实现

动机 现在Springboot越来越便捷,如果简单的Spring应用,已无需再配置xml文件,基本可以实现全注解,即使是SpringCloud的那套东西,也都可以通过yaml配置完成.最近一年一直在用Springboot+JPA或者Springboot+MyBatis,基本上不用Spring和SpringMVC了,心血来潮想着趁国庆假期试着一点点实现一下Spring的基本功能(当然是会对照源码的,毕竟很多细节想不到,变量命名也会按照源码来),基本思路就是先按照Spring的类图试着自己写,争取实

Solr4.8.0源码分析(10)之Lucene的索引文件(3)

Solr4.8.0源码分析(10)之Lucene的索引文件(3) 1. .si文件 .si文件存储了段的元数据,主要涉及SegmentInfoFormat.java和Segmentinfo.java这两个文件.由于本文介绍的Solr4.8.0,所以对应的是SegmentInfoFormat的子类Lucene46SegmentInfoFormat. 首先来看下.si文件的格式 头部(header) 版本(SegVersion) doc个数(SegSize) 是否符合文档格式(IsCompoundF

[Android 编译(一)] Ubuntu 16.04 LTS 成功编译 Android 6.0 源码教程

本文转载自:[Android 编译(一)] Ubuntu 16.04 LTS 成功编译 Android 6.0 源码教程 1 前言 经过3天奋战,终于在Ubuntu 16.04上把Android 6.0的源码编译出来了,各种配置,各种error,各种爬坑,特写此博客记录爬坑经历.先上图,Ubuntu上编译完后成功运行模拟器,如图: 2 编译环境 UbuntuKylin 16.04 LTS Android 6.0_r1 Open JDK 7 3 准备工作 (1) 下载android 6.0源码.