Font-Awesome + BootStrap3 响应式界面组件

配有图标的响应式按钮、导航条、输入框、下拉列表框。

font,bootstrap

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 2476
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

HTML

</div>
<div class="col-md-9 col-sm-8">
 
 Font Awesome works great with the full range of Bootstrap components.
 
<div class="highlight"><pre><code class="html">&lt;a class="btn btn-danger" href="#"&gt;
 &lt;i class="fa fa-trash-o fa-lg"&gt;&lt;/i&gt; Delete&lt;/a&gt;
&lt;a class="btn btn-default btn-sm" href="#"&gt;
 &lt;i class="fa fa-cog"&gt;&lt;/i&gt; Settings&lt;/a&gt;

&lt;a class="btn btn-lg btn-success" href="#"&gt;
 &lt;i class="fa fa-flag fa-2x pull-left"&gt;&lt;/i&gt; Font Awesome&lt;br&gt;Version 4.2.0&lt;/a&gt;

&lt;div class="btn-group"&gt;
 &lt;a class="btn btn-default" href="#"&gt;&lt;i class="fa fa-align-left"&gt;&lt;/i&gt;&lt;/a&gt;
 &lt;a class="btn btn-default" href="#"&gt;&lt;i class="fa fa-align-center"&gt;&lt;/i&gt;&lt;/a&gt;
 &lt;a class="btn btn-default" href="#"&gt;&lt;i class="fa fa-align-right"&gt;&lt;/i&gt;&lt;/a&gt;
 &lt;a class="btn btn-default" href="#"&gt;&lt;i class="fa fa-align-justify"&gt;&lt;/i&gt;&lt;/a&gt;
&lt;/div&gt;

&lt;div class="input-group margin-bottom-sm"&gt;
 &lt;span class="input-group-addon"&gt;&lt;i class="fa fa-envelope-o fa-fw"&gt;&lt;/i&gt;&lt;/span&gt;
 &lt;input class="form-control" type="text" placeholder="Email address"&gt;
&lt;/div&gt;
&lt;div class="input-group"&gt;
 &lt;span class="input-group-addon"&gt;&lt;i class="fa fa-key fa-fw"&gt;&lt;/i&gt;&lt;/span&gt;
 &lt;input class="form-control" type="password" placeholder="Password"&gt;
&lt;/div&gt;

&lt;div class="btn-group open"&gt;
 &lt;a class="btn btn-primary" href="#"&gt;&lt;i class="fa fa-user fa-fw"&gt;&lt;/i&gt; User&lt;/a&gt;
 &lt;a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"&gt;
 &lt;span class="fa fa-caret-down"&gt;&lt;/span&gt;&lt;/a&gt;
 &lt;ul class="dropdown-menu"&gt;
 &lt;li&gt;&lt;a href="#"&gt;&lt;i class="fa fa-pencil fa-fw"&gt;&lt;/i&gt; Edit&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="#"&gt;&lt;i class="fa fa-trash-o fa-fw"&gt;&lt;/i&gt; Delete&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="#"&gt;&lt;i class="fa fa-ban fa-fw"&gt;&lt;/i&gt; Ban&lt;/a&gt;&lt;/li&gt;
 &lt;li class="divider"&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="#"&gt;&lt;i class="i"&gt;&lt;/i&gt; Make admin&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;
&lt;/div&gt;
</code></pre></div>
 </div>
</section>
</div>

配有图标的响应式按钮、导航条、输入框、下拉列表框。

font,bootstrap

编辑器支持Emmet

快捷键

配有图标的响应式按钮、导航条、输入框、下拉列表框。

font,bootstrap

使用jQuery/Bootstrap/dataTables实现的多功能响应式表格控件

HTML5/Bootstrap 响应式电子邮件客户端 | 邮箱收发列表UI模板

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：