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.表格
<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.小屏幕时,收起侧边功能栏
推荐阅读
-
网站建设步骤及常用建站系统分享
-
wifi共享精灵使用心得及注意事项分享
-
分享9个实战及面试常用Linux Shell脚本编写
-
bootstrap table实现x-editable的行单元格编辑及解决数据Empty和支持多样式问题
-
oracle的导入导出注意事项及心得分享
-
教你使用Sublime text3搭建Python开发环境及常用插件安装另分享Sublime text3最新激活注册码
-
Linux Bash及Vim 常用命令分享
-
rubymine快捷键有哪些?rubymine常用快捷键大全及更改方法分享
-
荐 JavaWeb基础之Bootstrap快速入门、响应式布局、常用CSS样式、插件
-
Docker 常用命令整理及使用注意事项总结