与Bootstrap结合开发
发表于:2018/05/31

完美兼容

作为Bootstrap v4中国版本的翻译团队,我们有一直与其有着良好的兼容和更新,zico定位只做图标显示的事,因而我们对定位、左右浮动等进行规范,从而最大的兼容Bootstrap。
我们推荐在网页中引用Bootstrap时,将zico图标放在后面,以便更好的呈现,其顺序如下:

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<link href="/dist/css/bootstrap4.min.css" rel="stylesheet"/>
<link href="/dist/css/zico.min.css" rel="stylesheet"/>

`

使用说明

一旦引用了Bootstrap,你就可以将其样式用到zico中,比如我们可以:生成这样的一个图标

其代码结构是:

<a class="btn btn-info"><i class="zi zi_user"></i></a>

`
你也可以直接用Bootstrap的装饰符(颜色类)来定义zico图标:





其它代码结构如下:

<i class="zi zi_user text-primary"></i></a>
<i class="zi zi_user text-info"></i></a>
<i class="zi zi_user text-danger"></i></a>
<i class="zi zi_user text-secondary"></i></a>
<i class="zi zi_user text-warning"></i></a>

`
你还可以将zico与bootstrap的控件结合使用,例如:

本文档基于Zoomla!逐浪CMS MarkDown编辑器输出。