<!DOCTYPE html>

<html>

   <head>

      <meta charset="utf-8">

      <title>Admin后台</title>

      <meta name="viewport" content="width=device-width, initial-scale=1.0">

      <!-- 引入 Bootstrap -->

      <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

      <style>

        body {

            padding-top: 50px;

            padding-bottom: 20px;

        }

        .body-content {

            margin-top:20px;

            padding-left: 15px;

            padding-right: 15px;

        }

      </style>

      <!-- HTML5 Shiv 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->

      <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->

      <!--[if lt IE 9]>

         <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>

         <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>

      <![endif]-->

   </head>

   <body>

     <div class="navbar navbar-default navbar-fixed-top">

       <div class="container">

         <div class="navbar-header">

           <button type="button" data-toggle="collapse" data-target=".navbar-collapse" class="navbar-toggle">

             <span class="icon-bar"></span>

             <span class="icon-bar"></span>

             <span class="icon-bar"></span>

           </button>

           <a href="#" class="navbar-brand">管理后台</a>

         </div>

        <div class="navbar-collapse collapse">

          <ul class="nav navbar-nav">

            <li><a href="#"><span class="glyphicon glyphicon-user"></span> 用户管理</a></li>

            <li><a href="#"><span class="glyphicon glyphicon-lock"></span> 管理员</a></li>

            <li><a href="#"><span class="glyphicon glyphicon-list"></span> 栏目设置</a></li>

            <li><a href="#"><span class="glyphicon glyphicon-cog"></span> 网站设置</a></li>

          </ul>

          <ul class="nav navbar-nav navbar-right">

            <li>

              <a href="#">

                <span class="glyphicon glyphicon-envelop"></span> Alexander

              </a>

            </li>

            <li>

              <a href="#">

                <span class="glyphicon glyphicon-log-out"></span> 退出

              </a>

            </li>

          </ul>

        </div>

       </div>

     </div>

    <div class="container body-content">

      <div class="row">

        <div class="col-lg-3 col-md-3 col-sm-4">

          侧边栏

        </div>

        <div class="col-lg-9 col-md-9 col-sm-8">

          内容区域

        </div>

      </div>

      <hr>

      <footer class="navbar navbar-fixed-bottom text-center bg-primary">

        <p>© AlexanderZhao </p>

      </footer>

    </div>

      <!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->

      <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

      <!-- 包括所有已编译的插件 -->

      <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

   </body>

</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. spring的组件使用

    源代码下载:https://www.lanzous.com/i5p4mvc * 组件扫描 * @Component:表示这个类需要在应用程序中被创建 * @ComponentScan:自动发现应用程序 ...

  2. MAC盗版软件下载网站黑名单

    上面有大量的开源软件或者免费软件,拒绝盗版从我做起, 下面被删除的网站提供大量破解软件下载,欢迎大家监督它们. 玩转苹果:http://www.ifunmac.com Mac软件下载站:http:// ...

  3. Win平台下窗口操作(Unity)

    Unity发布在Win平台时, 可以通过user32.dll的方式与Win API通信, 最小化窗口代码: public static class DllImports { private const ...

  4. 05showLoading配置和 <text>标签的坑 如何发送请求 分享功能和懒加载

    14-电影-列表-需求分析 小程序里面取数据 没有冒号这么一说 加载动画 在对应页面 js文件中 showLoading你可以去看他的配置     // wx.showLoading() 应用在让用户 ...

  5. echo和printf打印输出

    [root@node2 scprits]# echo Hello World! Hello World! [root@node2 scprits]# echo 'Hello World!' Hello ...

  6. web-程序逻辑问题

    题目 查看源码 http://ctf5.shiyanbar.com/web/5/index.txt 代码如下 <html> <head> welcome to simplexu ...

  7. shell之seq

    seq 用于生成从一个数到另一个数之间的所有整数 seq [选项]... 尾数 seq [选项]... 首数 尾数 seq [选项]... 首数 增量 尾数 例如: 1.  -s 指定分隔符,默认分隔 ...

  8. day44_9_3前端（1）

    一.http协议. 1.在软件开发架构中 有两种模式:1.b/s.2.c/s. 其中b/s就是以浏览器作为客户端,所以,需要服务器同一遵循同一规则,向浏览器发送数据,这个规则就是http协议,存在以应 ...

  9. n8n 基于node 的流程自动化工具

    n8n 是基于node开发的流程自动化工具,提供了可视化的操作,我们可以用来集成不同的服务. 目前已经提供了很多的服务集成组件,同时我们也可以方便的自己扩展,后边会进行一个系统的 学习,同时介绍下使用 ...

  10. Sentinel: 接入控制台实时查看监控数据

    Sentinel 提供一个轻量级的开源控制台,它提供机器发现以及健康情况管理.监控(单机和集群),规则管理和推送的功能. 比如我们之前是直接在代码中初始限流的值,接入控制台后可以直接通过控制台进行限流 ...