本文实例讲述了bootstrap实现的自适应页面简单应用。分享给大家供大家参考,具体如下:
.tNav{ margin-top: 10px; border-bottom-style: none; } .bNav{ text-align: center; height: 50px; line-height: 50px; font-size: 20px; } #btnNavList{ font-size: 20px; position: absolute; top: 15px; right: 20px; } #btnNavList:hover{ cursor: pointer; } .bNav:hover{ background: #EED2EE; cursor: pointer; } #btnNavList, #normalTNav, #btnNavList-nav, #btnMess-nav, #btnMore-nav{ display: none; } #btnNavList-nav, #btnMess-nav, #btnMore-nav{ text-align: center; background: #FFF0F5; position: fixed; right: 0; width: 100%; filter:alpha(opacity=80); -moz-opacity: 0.8; -khtml-opacity: 0.8; opacity: 0.8; } #btnNavList-nav{ top: 50px; } #btnMess-nav, #btnMore-nav{ bottom: 50px; } #btnNavList-nav a, #btnMess-nav a, #btnMore-nav a{ display: block; text-decoration: none; height: 50px; line-height: 50px; } #btnNavList-nav a{ border-bottom: 1px solid #EED2EE; } #btnMess-nav a, #btnMore-nav a{ border-top: 1px solid #EED2EE; } #btnNavList-nav a:hover, #btnMess-nav a:hover, #btnMore-nav a:hover{ background: #EED2EE; cursor: pointer; } .content{ margin: 70px 0; } 基础信息 基地订单 总部订单 发货结算 生产物流 库存查询 我的消息1 我的消息2 我的消息3 当前版本 意见反馈 联系方式 关于
运行效果图:
PS:关于bootstrap布局,这里再为大家推荐一款本站的在线可视化布局工具供大家参考使用:
在线bootstrap可视化布局编辑工具:
http://tools.jb51.net/aideddesign/layoutit
希望本文所述对大家基于bootstrap的程序设计有所帮助。



