<!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. 编译安装redis 3.2.9 make test 时报错

    默认监听端口:6379(可以创建多个端口的配置文件) 源码安装: $ yum install tcl $ wget http://download.redis.io/releases/redis-3. ...

  2. kerberos&LDAP实现免密码登录搭建

    kerberos && openldap 1.install openldap & kerberos server: yum install db4 db4-utils db4 ...

  3. sqlserver 数据库 创建不同文件组的数据库

  4. 使用类似GeoJson的数据生成物体(建筑等)的功能逻辑

    GeoJson作为一种模型传输格式, 用的最多的就是地图里面的各种简单模型了, 比如下图中很贴切的俄罗斯方块楼: 它的格式大概就是下面这样: { "type": "Fea ...

  5. windows10下Bad owner or permissions on .ssh/config的解决办法

    方法很简单,亲测有效. 1.进入如下路径C:\Users\用户名\.ssh,你会看到有config这个文件 2.右击config,属性→安全→高级→禁止继承→删除所有继承(忘了全称了,大概这个意思)→ ...

  6. 201871010134-周英杰 《面向对象程序设计（java）》第十二周学习总结

    201871010134-周英杰 <面向对象程序设计(java)>第十二周学习总结 项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ ...

  7. datagrid editor动态的改变不同行修改列的editor属性

    onBeforeEdit: function (row) { let options = $(this).treegrid('options'); options.tempeditor = optio ...

  8. nginx geoip_module 地域信息读取

    1.安装geoip yum -y install nginx-module-geoip 2.安装完成后在cd /etc/nginx/modules/ 能看到安装的模块 # cd /etc/nginx/ ...

  9. web框架--tornado之cookie与session初识

    cookie的本质其实就是在浏览器端保存的键值对, 每当浏览器端发送一次请求, 都会将这些键值对附加在请求中并发送给服务器端. 一.目录结构 二.main_pro.py #!/usr/bin/env ...

  10. 使用jattach 在host 节点查看容器jvm信息

    jattach是基于hostspot attach api 指南编写的轻量all in one(jmap,jstack,jcmd,jinfo) 的工具 包含了以下命令 load 家在agent lib ...