当前位置： 移动技术网 > IT编程>网页制作>CSS > bootstrap注意事项及常用样式分享

bootstrap注意事项及常用样式分享

2019年06月02日  | 移动技术网IT编程  | 我要评论

参考常用样式：

1.在使用了navbar-static-top属性后，导航宽度50px

2.根据栅栏结构，带表结构的要给 p 加 input-group 属性

<p class="input-group">
    <input type="text" class="form-control">
    <span class="input-group-btn">
        <button class="btn btn-default">
            <span class="glyphicon glyphicon-search"></span>
        </button>
    </span>
</p>

3.表格隔行变色

table-striped

4.表格

\
<p class="page_main">
    <ol class="breadcrumb">
        <li><a href="#">管理首页</a></li>
        <li><a href="#">栏目</a></li>
        <li class="active">增加栏目</li>
    </ol>
    <p class="row">
        <p class="col-md-6">
            <p class="panel panel-default">
                <p class="panel-heading">最新订单</p>
                <p class="panel-body ">
                    <table class="table table-striped  table-hover table-bordered">
                        <thead>
                        <tr>
                            <th>#</th>
                            <th>订单号</th>
                            <th>订单日期</th>
                            <th>总价</th>
                            <th>状态</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <th>1</th>
                            <th>154546</th>
                            <th>2018-12-12</th>
                            <th>2343</th>
                            <th>出货</th>
                        </tr><tr>
                            <th>1</th>
                            <th>154546</th>
                            <th>2018-12-12</th>
                            <th>2343</th>
                            <th>出货</th>
                        </tr><tr>
                            <th>1</th>
                            <th>154546</th>
                            <th>2018-12-12</th>
                            <th>2343</th>
                            <th>出货</th>
                        </tr><tr>
                            <th>1</th>
                            <th>154546</th>
                            <th>2018-12-12</th>
                            <th>2343</th>
                            <th>出货</th>
                        </tr>
                        </tbody>
                    </table>
                </p>
            </p>
        </p>
        <p class="col-md-6">

        </p>
    </p>
</p>

5.小屏幕时，收起侧边功能栏

\
\

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网