23
2020
03

Bootstrap CSS编码规范

语法用两个空格来代替制表符(tab) -- 这是唯一能保证在所有环境下获得一致展现的方法。为选择器分组时,将单独的选择器单独放在一行。为了代码的易读性,在每个声明块的左花括号前添加一个空格。声明块的右花括号应当单独成行。每条声明语句的 : 后应该插入一个空格。为了获得更准确的错误报告,每条声明都应该独占一行。所有声明语句都应当以分号结尾。最后一条声明语句后面的分号是可选的,但是,如果省略这个分号,你的代码可能更易出错。对于以逗号分隔的属性值,每个逗号后面都应该插入一个空格(例如,box-shad
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 带边框的图标

使用.fa-border类,可以类轻易构造出带有圆角边框的图标。还可以添加.pull-right或.pull-left类,让图标向右或向左浮动,所有图标都支持这两个类。如:<div><i class="fa fa-quote-left fa-3x fa-border pull-left"></i><p>歪脖网(waibo.wang),Web技术交流平台,分享Web知识,交流Web经验。</p><p>歪脖网
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类来控制整体大小。如: