参考常用样式:
1.在使用了navbar-static-top属性后,导航宽度50px
2.根据栅栏结构,带表结构的要给 div 加 input-group 属性
<div 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> </div>
3.表格隔行变色
table-striped
4.表格
<div class="page_main"> <ol class="breadcrumb"> <li><a href="#">管理首页</a></li> <li><a href="#">栏目</a></li> <li class="active">增加栏目</li> </ol> <div class="row"> <div class="col-md-6"> <div class="panel panel-default"> <div class="panel-heading">最新订单</div> <div 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> </div> </div> </div> <div class="col-md-6"> </div> </div> </div>5.小屏幕时,收起侧边功能栏