首页 > 代码库 > Bootstrap 3.2.0 源码试读 2014/08/09
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; }
搜索框的宽度不包括内添充也不包括边框,默认的样式为一个文本框。
不显示搜索框的取消按钮及搜索修饰的显示样式为不显示。
待续 ...
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。