<!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. JSON Web Token 使用详解

    JWT 是什么? JSON Web Token(缩写 JWT)是目前最流行的跨域认证解决方案.它是有三部分组成,示例如下,具体的讲解如下(jwt 是不会有空行的,下面只是为了显示,便使用了换行看着比较 ...

  2. linux驱动学习笔记---实现中断下半部以及驱动编写规范(七)【转】

    转自:https://blog.csdn.net/weixin_42471952/article/details/81609141 版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协 ...

  3. c# 第10节 表达式

    本节内容: 1:表达式是什么 2:表达式实例 1:表达式是什么 2:表达式实例 3:运算符分类

  4. 石欣钰-201871010117 《面向对象程序设计（java）》第六、七周学习总结

    项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这个作业要求在哪里 https://www.cnblogs.com/nwnu-daizh/p/ ...

  5. python27期day10：函数的动态参数、函数的注释、函数的名称空间、函数的嵌套、global（修改全局的）、nonlocal（修改局部的）、函数名的第一类对象及使用、作业题。

    1.动态参数的作用: 能够接收不固定长度参数 位置参数过多时可以使用动态参数 * args是程序员之间约定俗称(可以更换但是不建议更换) * args获取的是一个元组 ** kwargs获取的是一个字 ...

  6. source ~/.bashrc

    编辑命令: gedit ~/.bashrc source ~/.bashrc 每次修改.bashrc后,使用source ~/.bashrc(或者 . ~/.bashrc)就可以立刻加载修改后的设置, ...

  7. POJ3630-Phone List-（字典树）

    一直没有学字典树,听起来很唬人,闲来无事找一道入门题做做. 字典树:又称单词查找树,Trie树,是一种树形结构,是一种哈希树的变种.典型应用是用于统计,排序和保存大量的字符串(但不仅限于字符串),所以 ...

  8. Excel-数据透视表

    例如: 购买数量采用求和的方式 用户数ID数据采用计数的方式 一.数据透视表的结构 二.数据透视表的步骤 1.订单表 提出问题,理解数据,数据清晰,构建模型,数据可视化 问题1:每个客户的订单量? 问 ...

  9. mark-杭州互联网公司分布-位置信息

    项目内容: 在智联招聘上爬取杭州市互联网公司的位置信息,属于哪个区: 如果公司信息内不含区信息,则通过百度地图接口获取所属区信息 scrapy+pycharm

  10. for循环包含多个双引号怎么办？windows

    for循环包含多个双引号怎么办?windows@echo offsetlocal EnableDelayedExpansionset "sed=%~sdp0sed"echo %se ...