《深入理解bootstrap》读书笔记:第4章 CSS组件(上)
程序员文章站
2022-05-17 09:50:39
...
bootstrap三大核心之二。
包括glyphicon图标,下拉菜单(dropdown),按钮组(button group)....等等。
一. 图标字体
bootstrap3提供了200多个免费图标字体。认为它是一个字。
arial-hidden="true"
.sr-only(只读)
1. 引入方法:
1
|
|
i标签是已经废弃了的html斜体标签。用span也可以。使用时必须基于glyphicon glyphicon-xxx两个类的样式。
2. 实现机制:
(1)雪碧技术:允许无损放大,减少图片大小,减少网页的请求次数。
把网页的背景图片整合到一张图片中,利用背景定位显示出来。
定位的是做上点坐标,右边为x轴负方向,左边为y轴正方向。
1
|
background : url (路径) no-repeat 0 0 ; |
(2)@font-face,缓存自服务器,字体特性(如可设置颜色)。CSS3的在线字体引入写法是:
在CSS的最上面:导入第三方字体图标
1
2
3
|
@font-face{ font :字体名称;(自定义名称,避开网络安全字名) src : url (字体文件路径), url (字体文件路径), url (字体文件路径),…;} |
@font-face至少.woff,.eot两种格式的字体。一般还要加上SVG字体。
3.应用
在button上应用字体图标:
1
|
|
这是在按钮上应用字体图标的案例。可以在login上面加一个空格。不然会和图标挤在一起。
还有一种推荐的方式:
1
2
3
4
|
相关文章 相关视频 专题推荐
|
下一篇: 实例解析函数jQuery.one()
网友评论
文明上网理性发言,请遵守 新闻评论服务协议
我要评论