您的位置:首页 > Web前端 > BootStrap

bootstrap注意事项及常用样式

2018-03-05 10:58 507 查看

参考常用样式:

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



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



内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: