bootstrap注意事项及常用样式
2018-03-05 10:58
507 查看
参考常用样式:
1.在使用了navbar-static-top属性后,导航宽度50px2.根据栅栏结构,带表结构的要给 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.小屏幕时,收起侧边功能栏
相关文章推荐
- C++类使用常用注意事项
- [置顶] CodePush热更新常用命令与注意事项
- C++ Container 以及 STL 相关的常用操作 和 注意事项
- css常用注意事项及基础知识点
- MySQL常用语句及注意事项
- bootstrap注意事项(六)按钮
- 打造最强大最完美的开发环境:Win 2008 R2安装激活、设置优化、可用杀毒软件、常用软件安装顺序与注意事项
- sturts2.xml的常用配置及注意事项
- 老司机带你玩转git(三)git常用命令以及注意事项
- 使用WPF的Generic.xaml加载样式的注意事项
- vue build前图片样式注意事项
- Bootstrap栅格布局的注意事项
- [G+smo]Eigen常用函数以及注意事项总结
- 二叉树常用操作算法集、解释及注意事项
- 使用 <pre> 标签样式的注意事项
- bootstrap注意事项(四)表格
- jquery 注意事项与常用语法小结
- CSS中关于不同分辨率下的样式设置注意事项
- hdu 1075 map的使用 字符串截取的常用手段 以及string getline 使用起来的注意事项
- 常用dos命令、语法及注意事项