欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-06-18 23:50:32
参考常用样式: 1.在使用了navbar-static-top属性后,导航宽度50px 2.根据栅栏结构,带表结构的要给 p 加 input-group 属性

参考常用样式:

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.表格

bootstrap注意事项及常用样式分享
<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.小屏幕时,收起侧边功能栏

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