<!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,iVBORw0KGgoAAAANSUhEUgAAAzMAAAB9CAIAAAAZc6pgAAAIcklEQVR4nO3dv07jyh7A8S15jrxE0PZIaehuGyQqutCg24VzmyNRhAaJ0s/BK2y5xXY8DLdw/owdJyfOzjK/4Xw+SgHBTuxp9qsZ2/vtf/8af/3l5eXl5eXlVdnrX+XXzx/fJlTl4ksoPYoAEJEyq0/ppsqj9CgCQETKrD6lmyqP0qMIABEps/qUbqo8So8iAESkzOpTuqnyKD2KABCRMqtP6abKo/QoAkBEyqw+pZsqj9KjCAARKbP6lG6qPEqPIgBEpMzqU7qp8ig9igAQkTKrT+mmyqP0KAJARMqsPqWbKo/SowgAESmz+pRuqjxKjyIARKTM6lO6qfIoPYoAEJEyq0/ppsqj9CgCQETKrD6lmyqP0qMIABEps/qUbqo8So8iAESkzOpTuqnyKD2KABDRlyqz6Wz+2qyuSh/Gn1a6qfIoPYoAEFHYMrtaNad7nc+mk8lkOpvd3S+bplncXE1n89eTd6xL6abKo/QoAkBEYctswNXN4pSWaje7u7l7zRFeVzeLNvV+83MyKt1UeZQexWGXl5elD2G03znmGs8X4Gv7gmXWms7mvTLbf+fkL626zO7ePt5fvidvfH95/3i7y1lZ5zjv3C9vn5qmebhO37t+6L9z/mc/3X5OqVw/JDO3v/Glv3PMn3m+AJxKmZ3ypcosv7NO/fqhaZ6eekFRW5ld3j51Dvj6YS82R32WMgP4Sr5SmV2tkoTadNhs+XzoerP0XoFpd7Pdn/bLbH6/3G63vJ9P+lv+J/mo/u0Ih/YdZWQCHS+z7y/vH2vbrb6/vH+8v7y8rd9/u7u4S34+suOfLrO2wfpFcf3QNA+3t0/rcU0b53L7brJHt+TWvyVb5qi8w4Z66Pphd3zJgSTHcv3QPN1eb//Ubrx/zIfO95R9AQjh65TZdDabzeavTbN6XEzGzZkN3m2wjqpumU33O6/9uu2WPa/Py833Hdt3lHxl9v3lfRdbd2+bxmqjq32/bbLd5rsteiE3Ns7OOPHrhzYrenHTrgymbdL+3JmbSuJnsMwmnzSH9A9f0jm2ZDKtc47JuaQf1/no5JdT9gUgiphlNurGzE5Itfsu7+enl1lbVOkM1uJxtU3AtMzan/djK/1r0o7tXzufk+zb+ZZRxpfZvre7i/1lzbu39g97wdb/OX3vYuCD/kiZJSHRXQ/srWZufr28fepMB203K1pmo5ZedxufcMz9T96ef9HzBWCkmGU2bPG4ak6+5KvtsPv7/x6pubSTWslq40CZ7bfUNJml2y+8+f1yu/3icbW3uLmOyLHjML7MDsyZ9f+ymfzqTIKlG62LLFnI3Bk7azb2rLsdkdbGZiqtt2Hv7d0HxC+z9P6AU8usuwq6Vv58ARipojK7WjXN34+Pfx9dAby6WbS9NeoOgLb5etKZsG2Z7cXcdPn8mpZZGo7JOwNLmeu5vvELmiHK7Kxry1IjT7pzM2PaHZWV2fCXbB9esT7NvWmw08ps+OiVGUBNqimz+f2yaVZXk+ny+fnICuD8ftnG09XNojdHdajMtvNk2+qabx5XO/naZXZsNfNYme2tZp5j3DnvTzXtLpiqajVz8Fu2q7O9mvyt1cyBTzm4LwBh1FJmu4W/7azYoMXjKumk1c3QVfm9WbH93kqXTceuZh4os8GqO9PIBDrvDoCjZdbu2Hl79BzaqFMeqo7OHNihK9yH7gBI30+fj/apT83o38GwH2Dr5cmh+hyuq+7nHipXZQYQWxVlNl0+v/aunT9wedYu4LaJtvuUA3Nmvd7aTqHtl9kpdwAcKrP25/SQ9q9LO1G+Mrs49tSMY2XW3fGspc0RJ3wgITaF1X0qxN4KZjPw/nZttN2x+8yJz3iKxMEnzSZ/aE/t+Dxf75jTi806jXbCvgCEEL/M2vrpXTs/XT6/7jdN0l4DGxy/N/PQjNo/PjVjG2rHy+zAguY5///66AgKafx5A8DXF7zMrlZDd1BOJpP0Aq/d1ptrywaffHbkDoD0AbCrx8XxNcr0doGhJ80eKrP+vmcvbpZuqjzOOnUA+OLillkbMccX+3rbbK7lWkdb2lsHZPgvzz9f6abKo/QoAkBEMcvsyFTZ8MbN5j9i2jxj9pxVwlqUbqo8So8iAEQUs8w4pnRT5VF6FAEgImVWn9JNlUfpUQSAiJRZfUo3VR6lRxEAIlJm9SndVHmUHkUAiEiZ1ad0U+VRehQBICJlVp/STZVH6VEEgIiUWX1KN1UepUcRACJSZvUp3VR5lB5FAIhImdWndFPlUXoUASAiZVaf0k2VR+lRBICIlFl9SjdVHqVHEQAiUmb1Kd1UeZQeRQCISJnVp3RT5VF6FAEgImVWn9JNlUfpUQSAiJRZfUo3VR6lRxEAIlJm9SndVHmUHkUAiOjXzx/fSv8bDQDAxcXFxa+fP759AAAQgDIDAIhCmQEARKHMAACiUGYAAFEoMwCAKJQZAEAUygwAIAplBgAQhTIDAIhCmQEARKHMAACiUGYAAFEoMwCAKJQZAEAUygwAIAplBgAQhTIDAIhCmQEARKHMAACiUGYAAFEoMwCAKJQZAEAUygwAIAplBgAQhTIDAIhCmQEARKHMAACiUGYAAFEoMwCAKJQZAEAUygwAIAplBgAQhTIDAIhCmQEARKHMAACiUGYAAFEoMwCAKJQZAEAUygwAIAplBgAQhTIDAIhCmQEARKHMAACiUGYAAFEoMwCAKJQZAEAUygwAIAplBgAQhTIDAIhCmQEARKHMAACiUGYAAFEoMwCAKJQZAEAUygwAIAplBgAQhTIDAIhCmQEARKHMAACiUGYAAFEoMwCAKJQZAEAUygwAIAplBgAQhTIDAIhCmQEARKHMAACiUGYAAFEoMwCAKJQZAEAUygwAIAplBgAQxa+fP/4P7wR1c3jaSLgAAAAASUVORK5CYII=" 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. 解决IE6下DIV无法实现1px高度问题

    2.多加一个line-height:1px的属性,不过得在DIV里多加一个 ,也就是空格,以下为引用的内容: <styletypestyletype="text/css"&g ...

  2. maven plugin在tomcat 热部署

    前言: 此处的方法适用于tomcat6 和 tomcat7,对于最新的tomcat8还没有进行过測试,有兴趣的同学能够自己測一下. 总共分为五步:         1.在tomcat中配置用户权限,即 ...

  3. web请求的处理流程

    web请求的处理流程如下: 1.客户发起请求到服务器网卡:2.服务器网卡接受到请求后转交给内核处理:3.内核根据请求对应的套接字,将请求交给工作在用户空间的Web服务器进程4.Web服务器进程根据用户 ...

  4. unbantu相关笔记

    很多项目使用的系统是centos或者redhat,最近有一个项目使用的系统竟然是阿里云unbantu,不知道他们负责人怎么想的,明明有centos,非要用unbantu.抱怨到此,unbantu的学习 ...

  5. mysql常用操作（转自阿铭linux）

    在前面两个章节中已经介绍过MySQL的安装了,但是光会安装还不够,您还需要会一些基本的相关操作.当然了,关于MySQL的内容也是非常多的,只不过对于linux系统管理员来讲,一些基本的操作已经可以应付 ...

  6. 使用hbase的api创建表时出现的异常

    /usr/lib/jvm/java-7-openjdk-amd64/bin/java -Didea.launcher.port=7538 -Didea.launcher.bin.path=/usr/l ...

  7. (转)[老老实实学WCF] 第一篇 Hello WCF

    http://blog.csdn.net/songyefei/article/details/7363296#comments 老老实实学WCF  第一篇 Hello WCF WCF(Windows ...

  8. NPOI导入导出Excel (2)

    简单演示一下创建一个Workbook对象,添加一个工作表,在工作表中添加一行一列: using System;using System.Collections.Generic;using System ...

  9. poj1915 BFS

    D - 广搜 基础 Crawling in process... Crawling failed Time Limit:1000MS     Memory Limit:30000KB     64bi ...

  10. CODEVS 2451 互不侵犯

    2451 互不侵犯 题目描述 Description 在N×N的棋盘里面放K个国王,使他们互不攻击,共有多少种摆放方案.国王能攻击到它上下左右,以及左上左下右上右下八个方向上附近的各一个格子,共8个格 ...