23
2020
03
Bootstrap CSS编码规范
23
2020
03
Affix 插件
Affix插件(affix.js)是一个很有用的插件,它可以让你的导航始终都固定在某个位置。一开始的时候,导航出现在页面的某个位置,当页面滚动一定距离时,无论页面如何滚动,它都固定在一个位置,就像被帖在页面上一样。
23
2020
03
Font Awesome 基本图标
Font Awesome图标跟Glyphicon图标的用法完全相同,所有图标都需要一个基类 .fa 和对应每个图标的 .fa-* 类。只需创建一个行内元素,并为它应用图标类,即可使用Font Awesome图标。如:
23
2020
03
Font Awesome 图标的尺寸
通过应用.fa-lg、.fa-2x、.fa-3x、.fa-4x、.fa-5x类,让图标变得更大。按先后顺序,这些类所对应的图标大小按 33% 依次递增。如:
23
2020
03
Bootstrap3 固定宽度的图标
使用.fa-fw类,可以将图标设置为一个固定宽度。主要用于不同宽度图标无法对齐的情况,尤其在列表或导航时起到重要作用。如:
23
2020
03
Bootstrap3 列表图标
为 <ul> 和 <li> 元素分别应用 .fa-ul 和 .fa-li 类,可以轻松使用自定义图标替换无序列表的默认图标。如:
23
2020
03
Bootstrap3 带边框的图标
23
2020
03
Bootstrap3 旋转或翻转图标
Font Awesome提供了一组样式类,可以对图标进行固定角度的旋转或翻转。这些类分别是 .fa-rotate-90(顺时针旋转90度)、.fa-rotate-180(顺时针旋转180度)、.fa-rotate-270(顺时针旋转270度)、.fa-flip-horizontal(水平翻转)、.fa-flip-horizontal(垂直翻转)。如:
23
2020
03
Bootstrap3 带动画的图标
Font Awesome不仅支持固定角度的旋转,还提供了带动画的旋转图标。可以使用.fa-spin类让任意图标动态持续旋转,还可以使用.fa-pulse类让图标以 8 步为周期进行旋转,它们尤其适合表示刷新、加载等功能的图标,如.fa-spinner、.fa-refresh和.fa-cog等:
23
2020
03
Bootstrap3 堆叠的图标
Font Awesome还支持将多个图标叠加在一起组成一个复合图标。如果想要将多个图标堆叠起来,需要给容器元素添加.fa-stack类,为图标元素使用.fa-stack-1x作为正常比例的图标,使用.fa-stack-2x作为大一些的图标。还可以为图标元素使用.fa-inverse类让图标颜色反色,为容器元素添加 .fa-lg、或.fa-2x、或.fa-3x、或.fa-4x、或.fa-5x类来控制整体大小。如: