<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<title>Bootstrap</title>

<meta name="description" content="">

<meta name="keywords" content="">

<!-- 设置自适应设备  width=device-width宽度为设备宽度  initial-scale=1缩放比例设置为当前不缩放 -->

<meta name="viewport" content="width=device-width , initial-scale=1, user-scalable=no">

<script src="./bootstrap/js/bootstrap.min.js" ></script>

<script src="./bootstrap/js/jquery.js"></script>

<link rel="stylesheet" href="./bootstrap/css/bootstrap.css">

</head>

<body>

    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">

        <div class="container">

            <div class="navbar-header">

                <a href="#" class="navbar-brand">天涯alone</a>

            </div>

            <div id="navbar" class="collapse navbar-collapse">

                <ul class="nav navbar-nav">

                    <li class="active"><a href="#">Home</a></li>

                    <li><a href="#">About</a></li>

                    <li><a href="#">Cantent</a></li>

                </ul>

            </div>

        </div>

    </nav>

</body>

</html>

效果如下：

aaarticlea/png;base64,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" alt="" />

bootstrap 导航布局的更多相关文章

  1. Bootstrap 导航条理解

    以下理论内容copy自Bootstrap中文网 (一个不错的bootstrap学习网站) 导航条 默认样式的导航条 导航条是在您的应用或网站中作为导航页头的响应式基础组件.它们在移动设备上可以折叠(并 ...

  2. Bootstrap导航栏navbar源码分析

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

  3. Bootstrap页面布局3 - BS布局以及流动布局

    1. <h1 class='page-header'>布局<small> 使用bootstrap网格系统布局网页</small></h1> 得到如图所示 ...

  4. bootstrap导航条在手机上默认展开二级目录,必须用setTimeout才能实现

    bootstrap导航条在手机上默认展开二级目录,必须用setTimeout才能实现 $(document).ready(function() { $('.dropdown').hover(funct ...

  5. BootStrap导航栏的使用

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

  6. Bootstrap 导航 标题栏

    Bootstrap 导航 标题栏: <!DOCTYPE html> <html lang="en"> <head> <meta chars ...

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

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

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

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

  9. Bootstrap导航

    前面的话 导航对于一位前端人员来说并不陌生.可以说导航是一个网站重要的元素组件之一,便于用户查找网站所提供的各项功能服务.本文将详细介绍Bootstrap导航 基础样式 Bootstrap框架中制作导 ...

随机推荐

  1. (转)iOS7界面设计规范(3) - UI基础 - 启动与退出

    周二晚间来第三发,搞得好像今天是周六的赶脚.发掉之后再奖励自己一点冰啤酒吧,然后扑床去.天气热起来了,各位注意防暑降温呗.走起. 重要:这是针对于正在开发中的API或技术的预备文档(预发布版本).虽然 ...

  2. c++ 依据输入动态声明数组(一维,二维)

    较早的编译器是不同意这样做的,所以一些书籍比方以Tc解说的书本都说数组的下标不能是变量.在vc6.0下亦是如此. 只是在一些较新的编译器如dev c++已经支持了,例如以下代码不会报错 #includ ...

  3. 用Spring提高java观察者模式灵活性

    在上篇博客 用java观察者模式解耦经典三层架构 的最后,用了一个Client类把Listener的实现类注冊到了LoginEventSource类中,假设须要加入�新的逻辑,加入�新的listene ...

  4. LDAP禁止匿名访问

    LDAP默认是允许用户匿名访问的,如下图:在使用工具连接时,勾选匿名绑定后,不需要输入UserDN和密码就可能连接到LDAP服务器,但是只能进行read及search操作.不能做任何的修改及删除操作. ...

  5. js 闭包和回调

    原文:http://www.cnblogs.com/yuyuj/p/4525530.html 之前的工作都是基于老大搭建的框架,仿照他写的例子写的请求,很多东东也都做好了封装,只需要了解下直接调用就好 ...

  6. Android应用中使用Popupmenu

    最终效果: 页面布局: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns: ...

  7. 多种下载文件方式 Response.BinaryWrite(byte[] DocContent)；Response.WriteFile(System.IO.FileInfo DownloadFile .FullName);Response.Write(string html2Excel);

    通过html给xls赋值,并下载xls文件 一.this.Response.Write(sw.ToString());System.IO.StringWriter sw = new System.IO ...

  8. 关于plist文件

    一.代码创建plist文件: NSArray *path = NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomain ...

  9. redis基础操作

    /** * redis的Java客户端Jedis测试验证 * * @author */ public class Test { /** * 非切片客户端链接 */ private Jedis jedi ...

  10. Jlink仿真器下载程序时出现Invalid ROM table!

    原因:仿真器时钟设置不对,应该将时间改低一点.