<!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. APP常用模块

    2016年上半年 APICloud合作云服务商提供了各种类型模块多达45个 其中最新发布的重要模块有 美洽客服模块 亲加视频直播相关模块 保利威视视频播放器模块 苹果银联支付模块 贝宝支付模块 谷歌分 ...

  2. git删除未跟踪文件

    # 删除 untracked files git clean -f   # 连 untracked 的目录也一起删掉 git clean -fd   # 连 gitignore 的untrack 文件 ...

  3. 安装mysql时提示The host 'xxx' could not be looked up with resolveip的解决办法

    1.首先用cat查看/etc/hosts文件,会显示以下内容: 127.0.0.1 localhost localhost.localdomain localhost4 localhost4.loca ...

  4. 查看哪些ip破解你ssh密码以及次数

    在互联网中,总有一些无聊的人,每天不断的猜解别人服务器的密码!作为linux服务器的管理员,我们应该了解哪些IP经常不断地扫描我们的SSH端口以尝试暴力破解,下面我们用一条命令简单列出哪些IP破解你S ...

  5. C#扩展方法的理解

    “扩展方法使您能够向现有类型“添加”方法,而无需创建新的派生类型.重新编译或以其他方式修改原始类型.” 这是msdn上说的,也就是你可以对String,Int,DataRow,DataTable等这些 ...

  6. AngularJs练习Demo2

    @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport&quo ...

  7. C# string的一些函数

    创建string: string (char[])      使用指定的字符串数组构建一个新的string对象 Copy(string) 使用指定的string构建一个新的string对象 比较函数: ...

  8. mysql对GIS空间数据的支持，包括创建空间索引

    CREATE TABLE tb_geo( id INT PRIMARY KEY AUTO_INCREMENT, NAME ) NOT NULL, pnt POINT NOT NULL, SPATIAL ...

  9. [译]终极塔防——运用HTML5从头创建一个塔防游戏

    翻译共享一篇CodeProject的高星力作,原文地址:http://www.codeproject.com/Articles/737238/Ultimate-Tower-Defense 下载演示项目 ...

  10. ECSHOP_百度收录网址后面有?from=rss

    ecshop的feed.xml文件中间添加了?from=rss,百度蜘蛛抓取收录后,会出现frome页面,导致商品列表重复抓取,访问出错. 修改方法简单: 在根目录下的feed.php找到(八处), ...