<!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. poj 1236 Network of Schools（tarjan+缩点）

    Network of Schools Description A number of schools are connected to a computer network. Agreements h ...

  2. poj1014 Dividing （多重背包）

    转载请注明出处:http://blog.csdn.net/u012860063 题目链接:id=1014">http://poj.org/problem?id=1014 Descrip ...

  3. 具体解说Android的图片下载框架UniversialImageLoader之磁盘缓存的扩展（二）

    相对于第一篇来讲,这里讲的是磁盘缓存的延续.在这里我们主要是关注四个类.各自是DiskLruCache.LruDiskCache.StrictLineReader以及工具类Util. 接下来逐一的对它 ...

  4. Window7下vagrant的部署

    1. 下载并安装VirtualBox     下载地址:https://www.virtualbox.org/wiki/Downloads,下载最新的安装包,接下来的安装步骤就是下一步下一步了,你懂的 ...

  5. 字符串匹配之horspool算法(简化的BM算法)

    前面介绍在BF,KMP这些算法的时候老是提到BM这个东西,究竟这什么东西,有啥高深的,这些问题我们如今不去考虑.不知道,认真读前几篇文章的读者有没有发现前面的算法都是从模式串的前面開始匹配的,那我们就 ...

  6. C#用注册表开机自动启动某某软件

    代码如下: public static void chkAutoRun(bool isRun) { if (isRun)//开机自动启动 { try { RegistryKey runKey = Re ...

  7. Gson源码分析之Json结构抽象和注解使用

    github上的博客地址: http://chuyun923.github.io/blog/2015/01/06/gsonyuan-ma-fen-xi/ XML和Json作为最常用的两种网络传输格式而 ...

  8. iptables 实现centos内网机器访问外网

    环境:一台带外网和内网的机器,另一台只有内网,默认不能上网.两台机器都是centos系统带外网机器的外网ip为 123.221.20.11, 内网ip为 192.168.15.100内网机器的内网ip ...

  9. compass模块----Utilities

    引入Utilities: @import "compass/utilities"; 分别引入: @import "compass/utilities/color" ...

  10. ASP.Net MVC与WebForm的区别