完美兼容

作为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的控件结合使用，例如： Primary

• Cras justo odio


• Dapibus ac facilisis in


• Morbi leo risus


• Porta ac consectetur ac


• Vestibulum at eros



代码结构是：

<button type="button" class="btn btn-primary"><i class="zi zi_user"></i>Primary</button>

<ul class="list-group">
      <li class="list-group-item active"><i class="zi zi_user"></i> Cras justo odio</li>
      <li class="list-group-item">Dapibus ac facilisis in</li>
      <li class="list-group-item">Morbi leo risus</li>
      <li class="list-group-item">Porta ac consectetur ac</li>
      <li class="list-group-item">Vestibulum at eros</li>
    </ul>

小技巧：如果你在用zico时，自然空一个格，会得到更好的排列效果。

引用代码

现在，你只要拷贝以下代码，就能一次性集成Bootstrap4和zico：

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" >  
<link rel="stylesheet" href="//code.z01.com/v4/dist/css/bootstrap.min.css" >
<link rel="stylesheet" href="//code.z01.com/v4/dist/css/zico.min.css" >
<script src="//code.z01.com/jquery/jquery-3.2.1.min.js" ></script>
<script src="//code.z01.com/v4/dist/js/popper.min.js"></script>
<script src="//code.z01.com/v4/dist/js/bootstrap.min.js" ></script>