bootstrap实现的自适应页面简单应用示例

本文实例讲述了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的程序设计有所帮助。