欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

《深入理解bootstrap》读书笔记:第4章 CSS组件(上)

程序员文章站 2022-05-17 09:50:39
...
bootstrap三大核心之二。
包括glyphicon图标,下拉菜单(dropdown),按钮组(button group)....等等。

一. 图标字体

bootstrap3提供了200多个免费图标字体。认为它是一个字。

arial-hidden="true"

.sr-only(只读)

1. 引入方法:

《深入理解bootstrap》读书笔记:第4章 CSS组件(上)
1
i class="glyphicon glyphicon-search">i>

《深入理解bootstrap》读书笔记:第4章 CSS组件(上)

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
button class="btn btn-default glyphicon glyphicon-log-in"> loginbutton>

这是在按钮上应用字体图标的案例。可以在login上面加一个空格。不然会和图标挤在一起。

《深入理解bootstrap》读书笔记:第4章 CSS组件(上)

还有一种推荐的方式:

1
2
3
4
button class="btn btn-default">
span class="glyphicon glyphicon-log-in">span>
《深入理解bootstrap》读书笔记:第4章 CSS组件(上)

声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。

相关文章

相关视频


网友评论

文明上网理性发言,请遵守 新闻评论服务协议

我要评论
  • 《深入理解bootstrap》读书笔记:第4章 CSS组件(上)
  • 专题推荐

    作者信息
    《深入理解bootstrap》读书笔记:第4章 CSS组件(上)

    认证0级讲师

    推荐视频教程
  • 《深入理解bootstrap》读书笔记:第4章 CSS组件(上)javascript初级视频教程
  • 《深入理解bootstrap》读书笔记:第4章 CSS组件(上)jquery 基础视频教程
  • 视频教程分类