bootstrap

作者: FengZai8 | 来源:发表于2018-06-07 05:56 被阅读17次
    <div class="container-fluid">
        <div class="row-fluid">
            <div class="span12">
                <div class="row-fluid">
                    <div class="span6">
                        <h3>
                            数据统计
                        </h3>
                        <div class="btn-group">
                             <button class="btn">Action</button> <button data-toggle="dropdown" class="btn dropdown-toggle"><span class="caret"></span></button>
                            <ul class="dropdown-menu">
                                <li>
                                    <a href="#">操作</a>
                                </li>
                                <li>
                                    <a href="#">设置栏目</a>
                                </li>
                                <li>
                                    <a href="#">更多设置</a>
                                </li>
                                <li class="divider">
                                </li>
                                <li class="dropdown-submenu">
                                     <a tabindex="-1" href="#">更多选项</a>
                                    <ul class="dropdown-menu">
                                        <li>
                                            <a href="#">操作</a>
                                        </li>
                                        <li>
                                            <a href="#">设置栏目</a>
                                        </li>
                                        <li>
                                            <a href="#">更多设置</a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="span6">
                        <form class="form-search">
                            <input class="input-medium search-query" type="text" /> <button type="submit" class="btn">查找</button>
                        </form>
                    </div>
                </div>
                <div class="row-fluid">
                    <div class="span4">
                        <img alt="140x140" src="img/a.jpg" class="img-rounded" />
                        <p>
                            <span><strong>总任务数</strong></span>
                        </p>
                    </div>
                    <div class="span4">
                        <img alt="140x140" src="img/a.jpg" />
                        <p>
                            <span><strong>失败任务数</strong></span>
                        </p>
                    </div>
                    <div class="span4">
                        <img alt="140x140" src="img/a.jpg" />
                        <p>
                            <span><strong>成功任务数</strong></span>
                        </p>
                    </div>
                </div>
                <table class="table">
                    <thead>
                        <tr>
                            <th>
                                编号
                            </th>
                            <th>
                                产品
                            </th>
                            <th>
                                交付时间
                            </th>
                            <th>
                                状态
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>
                                1
                            </td>
                            <td>
                                TB - Monthly
                            </td>
                            <td>
                                01/04/2012
                            </td>
                            <td>
                                Default
                            </td>
                        </tr>
                        <tr class="success">
                            <td>
                                1
                            </td>
                            <td>
                                TB - Monthly
                            </td>
                            <td>
                                01/04/2012
                            </td>
                            <td>
                                Approved
                            </td>
                        </tr>
                        <tr class="error">
                            <td>
                                2
                            </td>
                            <td>
                                TB - Monthly
                            </td>
                            <td>
                                02/04/2012
                            </td>
                            <td>
                                Declined
                            </td>
                        </tr>
                        <tr class="warning">
                            <td>
                                3
                            </td>
                            <td>
                                TB - Monthly
                            </td>
                            <td>
                                03/04/2012
                            </td>
                            <td>
                                Pending
                            </td>
                        </tr>
                        <tr class="info">
                            <td>
                                4
                            </td>
                            <td>
                                TB - Monthly
                            </td>
                            <td>
                                04/04/2012
                            </td>
                            <td>
                                Call in to confirm
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    相关文章

      网友评论

        本文标题:bootstrap

        本文链接:https://www.haomeiwen.com/subject/jwrwsftx.html