1. <!DOCTYPE html>
  2. <html>
  3.    <head>
  4.       <meta charset="utf-8">
  5.       <title>Admin后台</title>
  6.       <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.       <!-- 引入 Bootstrap -->
  8.       <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  9.       <style>
  10.         body {
  11.             padding-top: 50px;
  12.             padding-bottom: 20px;
  13.         }
  14.         .body-content {
  15.             margin-top:20px;
  16.             padding-left: 15px;
  17.             padding-right: 15px;
  18.         }
  19.       </style>
  20.       <!-- HTML5 Shiv 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
  21.       <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
  22.       <!--[if lt IE 9]>
  23.          <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  24.          <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
  25.       <![endif]-->
  26.    </head>
  27.    <body>
  28.  
  29.      <div class="navbar navbar-default navbar-fixed-top">
  30.        <div class="container">
  31.          <div class="navbar-header">
  32.            <button type="button" data-toggle="collapse" data-target=".navbar-collapse" class="navbar-toggle">
  33.              <span class="icon-bar"></span>
  34.              <span class="icon-bar"></span>
  35.              <span class="icon-bar"></span>
  36.            </button>
  37.            <a href="#" class="navbar-brand">管理后台</a>
  38.          </div>
  39.  
  40.         <div class="navbar-collapse collapse">
  41.           <ul class="nav navbar-nav">
  42.             <li><a href="#"><span class="glyphicon glyphicon-user"></span> 用户管理</a></li>
  43.             <li><a href="#"><span class="glyphicon glyphicon-lock"></span> 管理员</a></li>
  44.             <li><a href="#"><span class="glyphicon glyphicon-list"></span> 栏目设置</a></li>
  45.             <li><a href="#"><span class="glyphicon glyphicon-cog"></span> 网站设置</a></li>
  46.           </ul>
  47.           <ul class="nav navbar-nav navbar-right">
  48.             <li>
  49.               <a href="#">
  50.                 <span class="glyphicon glyphicon-envelop"></span> Alexander
  51.               </a>
  52.             </li>
  53.             <li>
  54.               <a href="#">
  55.                 <span class="glyphicon glyphicon-log-out"></span> 退出
  56.               </a>
  57.             </li>
  58.           </ul>
  59.         </div>
  60.  
  61.        </div>
  62.      </div>
  63.  
  64.     <div class="container body-content">
  65.       <div class="row">
  66.         <div class="col-lg-3 col-md-3 col-sm-4">
  67.           侧边栏
  68.         </div>
  69.         <div class="col-lg-9 col-md-9 col-sm-8">
  70.           内容区域
  71.         </div>
  72.       </div>
  73.       <hr>
  74.       <footer class="navbar navbar-fixed-bottom text-center bg-primary">
  75.         <p>© AlexanderZhao </p>
  76.       </footer>
  77.     </div>
  78.  
  79.       <!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
  80.       <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
  81.       <!-- 包括所有已编译的插件 -->
  82.       <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
  83.    </body>
  84. </html>

　　

Bootstrap导航栏示例的更多相关文章

  1. BootStrap导航栏的使用

    默认的导航栏 创建一个默认的导航栏的步骤如下: 向 <nav> 标签添加 class .navbar..navbar-default. 向上面的元素添加 role="naviga ...

  2. 自定义bootstrap样式-9行样式自定义漂亮大气bootstrap导航栏

    有人说前端发展太快,框架太多,各有所需,各有所长.看看这幅图,估计都知道这些框架,但是大部分公司中实际要用到的也就那么几个. 发展再快,框架再多.还是得回到原点,不就是Html+Css+JavaScr ...

  3. Bootstrap -- 导航栏样式、分页样式、标签样式、徽章样式

    Bootstrap -- 导航栏样式.分页样式.标签样式.徽章样式 1. 使用图标的导航栏 使用导航栏样式: <!DOCTYPE html> <html> <head&g ...

  4. Bootstrap导航栏实例讲解

    导航栏是一个很好的功能,是 Bootstrap 网站的一个突出特点.导航栏是响应式元组件就,作为应用程序或网站的导航标题.导航栏在移动设备的视图中是折叠的,随着可用视口宽度的增加,导航栏也会水平展开. ...

  5. Bootstrap导航栏navbar源码分析

    1.本文目地:分析bootstrap导航栏及其响应式的实现方式,提升自身css水平 先贴一个bootstrap的导航栏模板 http://v3.bootcss.com/examples/navbar- ...

  6. html 小米商城导航栏示例

    1.小米导航栏示例 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset=&q ...

  7. eclipse Maven Bootstrap 导航栏

    1.在pom.xml添加两个依赖 Bootstrap 依赖和jQuery依赖 代码如下 <!-- https://mvnrepository.com/artifact/org.webjars/b ...

  8. bootstrap导航栏.nav与.navbar区别

    刚刚看了bootstrap的导航栏,发现有点弄混了,现在来整理一下: 一.简单的ul,li组成的导航: <ul class="nav nav-pills justify-content ...

  9. Bootstrap导航栏

    导航栏: <div id="menu-nav" class="navbar navbar-default navbar-inverse navbar-fixed-t ...

随机推荐

  1. pipenv 管理虚拟环境

    pipenv --python 3.6 创建虚拟环境 vim Pipfile —> 修改源 为阿里云镜像 https://mirrors.aliyun.com/pypi/simple [pack ...

  2. 关于宝塔一个站点绑定多个域名宝塔ssl证书的问题

    目前“宝塔SSL”自动申请绑定一个证书,即根域名和www域名,如果还需要绑定手机端m则需要绑定多个域名如果多域名绑定一个网站数据,需要新建多个站点指向同一文件目录. 用相同的方法,在不新建站点的前提下 ...

  3. NACOS升级操作

    Server端 0.8.0及以上版本: 解压安装包后替换{nacos.home}/target/nacos-server.jar 删除{nacos.home}/plugins/cmdb/及{nacos ...

  4. luoguP1195 口袋的天空

    生成树一 题目描述 给你云朵的个数NN,再给你MM个关系,表示哪些云朵可以连在一起. 现在小杉要把所有云朵连成KK个棉花糖,一个棉花糖最少要用掉一朵云,小杉想知道他怎么连,花费的代价最小. 链接 分析 ...

  5. Spring(005)-多环境Profile

    多个环境下的配置应该怎么进行,比如数据库连接字符,多个环境不同,spring的方案,大概总结如下. 例子,数据库配置. 定义一个获取数据库链接的接口 public interface DataConn ...

  6. cisco

    配置ntp conf t ntp server 172.28.10.10 clock timezone Beijing 8 show clock 配置端口组 interface Port-channe ...

  7. shell 之for循环几种写法

    参见博客 http://blog.csdn.net/babyfish13/article/details/52981110 ,此博客写的非常清晰明了.

  8. Graph Embedding Review：Graph Neural Network(GNN)综述

    作者简介: 吴天龙  香侬科技researcher 公众号(suanfarensheng) 导言 图(graph)是一个非常常用的数据结构,现实世界中很多很多任务可以描述为图问题,比如社交网络,蛋白体 ...

  9. jsp中for-each应用(遍历数据相乘再相加)

  10. Educational Codeforces Round 57 (Rated for Div. 2) D dp

    https://codeforces.com/contest/1096/problem/D 题意 给一个串s,删掉一个字符的代价为a[i],问使得s的子串不含"hard"的最小代价 ...