文档章节

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

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周日乱弹 —— 喝了维他茶,忘了那个她

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @xiaoniezi :#今日歌曲推荐#哈哈哈洗脑《土拨鼠之歌》 《土拨鼠之歌》 手机党少年们想听歌,请使劲儿戳(这里) 周六…… 不是该休息么, 被...

小小编辑
56分钟前
185
5
你需要知道的 5 个 Linux 新手会犯的失误

Linux 爱好者们分享了他们犯下的一些最大错误。 终身学习是明智的 —— 它可以让你的思维敏捷,让你在就业市场上更具竞争力。但是有些技能比其他技能更难学,尤其是那些小菜鸟错误,当你尝试...

xiangyunyan
今天
6
0
来迟了,用Python助你叠猫猫,抢618大红包!

目录: 0 引言 1 环境 2 需求分析 3 前置准备 4 逛店铺流程回顾 5 代码全景展示 6 总结 0 引言 最近叠猫猫的活动可真是十分的火爆,每天小伙伴们为了合猫猫忙的可谓是如火如荼。为啥要叠猫猫...

上海小胖
今天
8
0
FPGA 设备 USB Platform Cable USB

lsusbFuture Technology Devices International, Ltd FT232H Single HS USB-UART/FIFO IC

MtrS
今天
4
0
lua web快速开发指南(6) - Cache、DB介绍

"数据库"与"缓存"的基本概念 数据库与缓存是服务端开发人员的必学知识点. 数据库 "数据库"是一种信息记录、存取的虚拟标记地点的集合统称. 比如现实生活中, 我们经常会用到文件柜、书桌等等数...

水果糖的小铺子
今天
10
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部