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

参考常用样式：

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.小屏幕时，收起侧边功能栏