文档章节

Bootstrap 3.2.0 源码试读 2014/08/10

go_array
 go_array
发布于 2014/08/10 12:38
字数 807
阅读 185
收藏 6

第一部分 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至178行

textarea {
  overflow: auto;
}

多行文本框在需要滚动条的时候再显示


179至181行

optgroup {
  font-weight: bold;
}

选项组的字体样式为加粗。


182至189行

table {
  border-spacing: 0;
  border-collapse: collapse;
}
td,
th {
  padding: 0;
}

表格table标签的相距单元的边框之间的距离为0,并且合并。单元格、标题行的单元格的内添充为0.

可以设置2个值,第1个为左右,第2个为上下。如果想继承自父容器则设为inherit

border-collapse是说如何处理相临单元格之间的边框样式。这里设置的是合并。

有3个值可选。

1、separate,这个是默认值,就是单元格独立显示自已的边框。

2、collapse,单元格之间合并显示边框

3、inherit,继承。


还有1个属性 empty-cells,如果2行2列的表格,你只用了3个单元格,第4个格没内容,那你不希望第4个没用的格子也显示边框,就是通过这个控制的

1、show

2、hide

3、inherit,继承。


第二部 @media print

这部分是用来设置打印的通用样式的(190至262行)。

使用的是媒体查询语法,举例如下:

@media only screen and (min-width: 480px) and (max-width: 767px) {

/* 样式规则 ...  */

}

解析:

1、only是说如果浏览器不支持媒体查询的语法就不要加载下面的样式了。

还可以设成not ,取反的意思。

2、screen这块是设备的类型

screen,屏幕;print,打印;all,所有;还有tv等等。

3、and ...( ...) 这块是就是条件的设定了。常用的有下面的这些,与浏览器的支持程序有关

min-width,最小可见区域

max-width,最大可见区域

min-device-width,最小设备宽度

max-device-width,最大设备宽度

orientation,屏幕方向,landscape(竖屏),portrait(横屏)


下面看一下这块的设置

191至197行

  * {
    color: #000 !important;
    text-shadow: none !important;
    background: transparent !important;
    -webkit-box-shadow: none !important;
            box-shadow: none !important;
  }

实在是很讨厌*。

全局设定,字体颜色黑,清除字体及盒标签的阴影,背景透明。

!important,设置为最高优先级,覆盖同类型的样式设置。

198至211行

  a,
  a:visited {
    text-decoration: underline;
  }
  a[href]:after {
    content: " (" attr(href) ")";
  }
  abbr[title]:after {
    content: " (" attr(title) ")";
  }
  a[href^="javascript:"]:after,
  a[href^="#"]:after {
    content: "";
  }

1、链接的默认及访问过的样式为加上下划线。

2、链接的href属性内容后面加上属性href的值,举例子:

<a href="www.baidu.com">百度</a>,实际的显示内容为 百度(www.baidu.com)

3、链接的title属性的内容后面加上属性title的值。

4、如果链接的href的值是以javascript和#开头的,那清除掉插入的任何值,以免调用js及跳转锚点出错。

5、缩写abbr的title属性的内容后面加上属性title的值。


content 属性与 :before 及 :after 伪元素配合使用,来插入生成内容。



待续 。。。

© 著作权归作者所有

go_array

go_array

粉丝 4
博文 34
码字总数 29198
作品 0
沈阳
部门经理
私信 提问
加载中

评论(1)

许雷神
许雷神
很好,谢谢
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/09

第一部分 normalize.css 104至110行 code, / 编辑代码 /kbd, / 键盘输入的文本 /pre,samp { / 范例,sample的简写 / font-family: monospace, monospace; / 这个地方应该是写错了,第二字体应...

潘金莲子羹
2014/08/09
0
0
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
CSS组件库--BootFlat

Boot Flat 基于Bootstrap3.2.0的FLAT UI的CSS组件库,提供了比原生bootstrap更加丰富的页面元素组件和页面布局,适合快速地进行Web app的开发。 兼容浏览器IE8,IE9, IE10, IE11, FIREFOX,C...

raydian_yuan
2013/09/11
9.4K
0

没有更多内容

加载失败,请刷新页面

加载更多

远程拷贝命令scp

命令scp 用途: secure copy,利用ssl安全复制(远程文件复制程序) 语法: ]# scp [选项] [用户名@ip]源文件 [用户@ip]目标文件 选项: -P port 指定远程主机的ssh端口 ...

迷失De挣扎
26分钟前
2
0
HTTP

作者:蛙课网 链接:https://zhuanlan.zhihu.com/p/70949908 来源:知乎 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 HTTP协议简介 HTTP(超文本传输协议)是应用...

元歌
51分钟前
2
0
总结使用tslint的一些代码规范

1.冒号后面,逗号后面要有空格,还有一般if语句大括号前面后面也都要有空格 2.使用for (let i = 0; i < arr.length; i++) {}循环数组报错,使用for (const i of arr) {} for (const i of arr...

大换子
今天
2
0
虚函数

虚函数作用: 基类中可以调用继承类中的函数。(相当于就是允许子类覆盖父类中的函数)

colin_86
今天
2
0
DisplayPort 迎来重大更新,数据带宽性能提高3倍

VESA宣布了他们对DisplayPort接口三年来的第一次重大更新。 与DP 1.4a相比,DisplayPort 2.0提供了三倍于DP 1.4a的数据带宽性能,支持超过8K的分辨率,更高的刷新率和更高分辨率的HDR,以及其...

linux-tao
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部