带有标题,副标题和图标的基本按钮,使用boostrap

时间:2017-04-04 21:21:43

标签: html css twitter-bootstrap

我正在使用bootstrap并希望保持这样(暂时没有其他库)。我在网页上有几个按钮,比如

|----------------------|
|       (icon)         |
|   BIG TITLE HERE     |
|  Small subtitle here |
|----------------------|

|----------------------|
|       (icon)         |
|   BIG TITLE HERE     |
|  Small subtitle here |
|----------------------|

它们位于页面的左侧,有3列div(col-md-3)。到目前为止,我有一个HTML

<div class="row">
    <div class="col-md-3">
        <ul class="buttons-ue">
            <li class="bg-lh text-uppercase bg-warning text-warning">
                <i class="icon-warning"></i>
                <strong>Title 1</strong>
                <small>Press here for warning</small>
            </li>
            <li class="bg-lh text-uppercase bg-danger text-danger">
                <i class="icon-danger"></i>
                <strong>Title 2</strong>
                <small>Press here if you dare</small>
            </li>
        </ul>
    </div>
</div>

<div class="row"> <div class="col-md-3"> <ul class="buttons-ue"> <li class="bg-lh text-uppercase bg-warning text-warning"> <i class="icon-warning"></i> <strong>Title 1</strong> <small>Press here for warning</small> </li> <li class="bg-lh text-uppercase bg-danger text-danger"> <i class="icon-danger"></i> <strong>Title 2</strong> <small>Press here if you dare</small> </li> </ul> </div> </div> 以及一些尚未改进的css类

{{ 1}}

建立这种组件的正确方法是什么,所以我只是简单地插入一些组件。

0 个答案:

没有答案