文档章节

Bootstrap 3.2.0 源码试读 2014/08/09

go_array
 go_array
发布于 2014/08/09 21:21
字数 690
阅读 172
收藏 7

第一部分 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;
}

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

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


待续 ...

© 著作权归作者所有

go_array

go_array

粉丝 4
博文 34
码字总数 29198
作品 0
沈阳
部门经理
私信 提问
Ubuntu虚拟机中编译运行cgminer挖矿软件

蔡清华 版权所有 未经允许不得转载。 编译cgminer cgminer github代码: https://github.com/ckolivas/cgminer If building on Ubuntu:sudo apt-get install build-essential autoconf auto......

蔡清华
2014/04/16
0
0
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版本没这个问...

潘金莲子羹
2014/08/11
0
0
Bootstrap 3.2.0 源码试读 2014/08/04

第一部分 normalize.css 用于解决不同浏览器下显示不一致的问题 8至12行 html { font-family: sans-serif; / 设置默认字体为 sans-serif / -webkit-text-size-adjust: 100%; / 手机等设备转屏...

潘金莲子羹
2014/08/04
0
0
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;} 表单分组标题的内添充为上 .2......

潘金莲子羹
2014/08/10
0
1
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; vertic......

潘金莲子羹
2014/08/07
0
0

没有更多内容

加载失败,请刷新页面

加载更多

protoc 编译工具

在进行开发 protoc 之前,你需要首先在你的计算机中安装 protoc 编译工具。 下载编译工具 进入 Protocol Buffers 的源代码中然后选择发布的版本中,找到对应的版本。项目的链接地址为:https...

honeymoose
今天
1
0
uniapp + bootstrapvue 移动/PC 一套搞定 (一)配置bootstrapvue

1.准备文件 自己到DCloud官网: http://dcloud.io/ 去下载官方的IDE Hbuilder,新建一个空的uniapp项目即可。 uniapp框架自带优化的vue,我们仅仅需要准备以下三个文件: bootstrap.min.css ...

panyunxing
今天
9
0
Android Camera原理之camera service类与接口关系

camera service主要是指 frameworks/av/services/camera/下面的代码,最近在看这一块的代码,为了更好地理清这一块的代码,也为了后续学习camera方便一些,我觉得很有必要理一下这一块的整体...

天王盖地虎626
今天
2
0
Golang学习笔记

[TOC] Golang学习笔记 这个学习笔记是最早在1.初,版本左右的时候写的,和当前最新的版本可能会有较大的差异. 因为成文比较早,文章里面又有很多自己的见解,有些东西当时理解的不太透彻可能写错...

我爱吃炒鸡
今天
14
0
科技赋能成效显著!金融壹账通两大赋能项目荣获IDC大奖

7月19日,2019IDC中国未来金融论坛曁颁奖典礼于北京举办。由金融壹账通赋能的长春农商银行多人视频面审智能风控系统、包头农商银行互联网银行SaaS服务两大项目因在项目的创新性、技术领先性、...

IFTNews
昨天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部