Bootstrap 导航 标题栏：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

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

</head>

<body style="margin:50px 0">

    <div class="container">

        <ul class="nav nav-tabs">

            <li class="active"><a href="">01</a>

            </li>

            <li><a href="">02</a>

            </li>

            <li><a href="">03</a>

            </li>

            <li><a href="">04</a>

            </li>

        </ul>

        <ul class="nav nav-pills">

            <li class="active"><a href="">01</a>

            </li>

            <li><a href="">02</a>

            </li>

            <li><a href="">03</a>

            </li>

            <li><a href="">04</a>

            </li>

        </ul>

        <ul class="nav nav-pills nav-stacked">

            <li class="active"><a href="">01</a>

            </li>

            <li><a href="">02</a>

            </li>

            <li><a href="">03</a>

            </li>

            <li><a href="">04</a>

            </li>

        </ul>

        <ul class="nav nav-pills nav-justified">

            <li class="active"><a href="">01</a>

            </li>

            <li><a href="">02</a>

            </li>

            <li><a href="">03</a>

            </li>

            <li><a href="">04</a>

            </li>

        </ul>

    </div>

    <nav class='navbar navbar-default'>asdf</nav>

    <nav class='navbar navbar-inverse'>asdf</nav>

    <nav class='navbar navbar-default'>

        <div class="container">

            <div class="navbar-head">

                <a href="" class="navbar-brand">标题名称</a>

            </div>

        </div>

    </nav>

    <nav class='navbar navbar-default'>

        <div class="container">

            <div class="navbar-head">

                <a href="" class="navbar-brand">标题名称</a>

            </div>

            <ul class="nav navbar-nav">

                <li class="active"><a href="">001</a>

                </li>

                <li><a href="">002</a>

                </li>

                <li class="disabled"><a href="">003</a>

                </li>

                <li><a href="">004</a>

                </li>

            </ul>

        </div>

    </nav>

    <nav class='navbar navbar-default navbar-fixed-top'>

        <div class="container">

            <div class="navbar-head">

                <a href="" class="navbar-brand">标题名称</a>

            </div>

            <form action="" class="navbar-form navbar-right">

                <input type="text" class="form-control">

            </form>

            <button class="btn btn-default navbar-btn">button</button>

        </div>

    </nav>

    <nav class='navbar navbar-default navbar-fixed-bottom'>

        <div class="container">

            <div class="navbar-head">

                <a href="" class="navbar-brand">标题名称</a>

            </div>

            <form action="" class="navbar-form navbar-right">

                <input type="text" class="form-control">

            </form>

            <button class="btn btn-default navbar-btn">button</button>

        </div>

    </nav>

    <nav class='navbar navbar-default navbar-static-tops'>

        <div class="container">

            <div class="navbar-head">

                <a href="" class="navbar-brand">标题名称</a>

            </div>

            <form action="" class="navbar-form navbar-right">

                <input type="text" class="form-control">

            </form>

            <button class="btn btn-default navbar-btn">button</button>

        </div>

    </nav>

    <p>001</p>

    <p>002</p>

    <p>003</p>

    <p>004</p>

    <p>005</p>

    <p>006</p>

    <p>007</p>

    <p>008</p>

    <p>009</p>

    <p>010</p>

    <p>011</p>

    <p>012</p>

    <p>013</p>

    <p>014</p>

    <p>015</p>

    <p>016</p>

    <p>017</p>

    <p>018</p>

    <p>019</p>

</body>

</html>

Bootstrap导航：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%

    String path = request.getContextPath();

    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";

%>

<!DOCTYPE html>

<html>

<head>

<base href="<%=basePath%>">

<meta charset="UTF-8">

<title>b index</title>

<link rel='stylesheet' type="text/css" href='b/css/bootstrap.css'>

</head>

<body style="margin:150px;">

    <div class="bg-primary">导航1  .nav .nav-tabs</div>

    <ul class="nav nav-tabs">

        <li class="active"><a>index</a></li>

        <li><a>index</a></li>

        <li><a>index</a></li>

        <li class="disabled"><a>index</a></li>

        <li class="nav-divider"></li>

        <li><a>index</a></li>

        <li><a>index</a></li>

    </ul>

    <div class="bg-primary">导航2 .nav .nav-pills</div>

    <ul class="nav nav-pills">

        <li class="active"><a>index</a></li>

        <li><a>index</a></li>

        <li><a>index</a></li>

        <li class="disabled"><a>index</a></li>

        <li class="nav-divider"></li>

        <li><a>index</a></li>

        <li><a>index</a></li>

    </ul>

    <div class="bg-primary">导航3, .nav .nav-pills .nav-stacked, nav-divider只在这里有效果</div>

    <ul class="nav nav-pills nav-stacked">

        <li class="active"><a>index</a></li>

        <li><a>index</a></li>

        <li><a>index</a></li>

        <li class="disabled"><a>index</a></li>

        <li class="nav-divider"></li>

        <li><a>index</a></li>

        <li><a>index</a></li>

    </ul>

    <div class="bg-primary">导航4  .nav .nav-tabs .nav-justified, 有nav-divider会有个灰块</div>

    <ul class="nav nav-tabs nav-justified">

        <li class="active"><a>index</a></li>

        <li><a>index</a></li>

        <li><a>index</a></li>

        <li class="disabled"><a>index</a></li>

        <li class="nav-divider"></li>

        <li><a>index</a></li>

        <li><a>index</a></li>

    </ul>

    <div class="bg-primary">导航5 .nav .nav-pills .nav-justified, 有nav-divider会有个灰块</div>

    <ul class="nav nav-pills nav-justified">

        <li class="active"><a>index</a></li>

        <li><a>index</a></li>

        <li><a>index</a></li>

        <li class="disabled"><a>index</a></li>

        <li class="nav-divider"></li>

        <li><a>index</a></li>

        <li><a>index</a></li>

    </ul>

    <div class="bg-primary">导航6  .nav .nav-tabs 二级导航 </div>

    <ul class="nav nav-tabs">

        <li class="active"><a>index</a></li>

        <li><a>index</a></li>

        <li class="dropdown">

            <a class="dropdown-toggle" data-toggle="dropdown">dropdown<span class="caret"></span></a>

            <ul class="dropdown-menu">

                <li><a>21</a></li>

                <li><a>22</a></li>

                <li class="divider"><a>22</a></li>

                <li><a>22</a></li>

            </ul>

        </li>

    </ul>

    <div class="bg-primary">导航7  .nav .nav-pills 二级导航 </div>

    <ul class="nav nav-pills">

        <li class="active"><a>index</a></li>

        <li><a>index</a></li>

        <li class="dropdown">

            <a class="dropdown-toggle" data-toggle="dropdown">dropdown<span class="caret"></span></a>

            <ul class="dropdown-menu">

                <li><a>21</a></li>

                <li><a>22</a></li>

                <li class="divider"><a>22</a></li>

                <li><a>22</a></li>

            </ul>

        </li>

    </ul>

    <script type="text/javascript" src="js/jquery-1.11.1.js"></script>

    <script type="text/javascript" src="b/js/bootstrap.js"></script>

</body>

</html>

Bootstrap 导航 标题栏的更多相关文章

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

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

  2. BootStrap导航栏的使用

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

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

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

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

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

  5. Bootstrap导航

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

  6. Bootstrap 导航元素（标签页）

    [Bootstrap 导航元素] 1.基本的导航元素:标签导航.基于ul.li而来,给ul添加 class="nav nav-tabs" 即可.选中的li添加 class=&quo ...

  7. Bootstrap学习笔记（5）--实现Bootstrap导航条可点击和鼠标悬停显示下拉菜单

    实现Bootstrap导航条可点击和鼠标悬停显示下拉菜单 微笑的鱼 2014-01-03 Bootstrap 5,281 次围观 11条评论 使用Bootstrap导航条组件时,如果你的导航条带有下拉 ...

  8. Bootstrap 导航条理解

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

  9. Bootstrap导航栏实例讲解

    导航栏是一个很好的功能,是 Bootstrap 网站的一个突出特点.导航栏是响应式元组件就,作为应用程序或网站的导航标题.导航栏在移动设备的视图中是折叠的,随着可用视口宽度的增加,导航栏也会水平展开. ...

随机推荐

  1. Hadoop的初步理解

    一.整体思维导图 二.HDFS(Hadoop分布式文件系统) 说明 NameNode:保存整个文件系统的目录信息.文件信息及分块信息,这是由唯一一台主机专门保存,当然这台主机如果出错,NameNode ...

  2. higncharts 编辑Highcharts.com链接

    credits: {             text: 'Example.com',             href: 'http://www.example.com'          }, 只 ...

  3. 在js中如何得到上传文件的大小。

    <html>  <head>  <script language="javascript">    function getSize() {   ...

  4. JSP处理AJAX

    register.jsp: <script type="text/javascript"> var req; function validate() { var idF ...

  5. deb安装了些啥？

    http://www.cyberciti.biz/faq/view-contents-of-deb-file/

  6. Docker - 容器编排工具 compose 之安装

    准备 首先,在使用和安装 docker compose之前,我们应该确保我们已经安装了 docker engine. 安装 官网上面有好多种安装方式,由于我们现在是在使用Docker, 个人感觉应该以 ...

  7. Big Data架构师技能图谱

    大数据通用处理平台 Spark Flink Hadoop 分布式存储 HDFS 资源调度 Yarn Mesos 机器学习工具 Mahout Spark Mlib TensorFlow (Google ...

  8. svn第一篇----入门指南

    摘要:trunk存放的是主代码,不修改,branch,tag,milestone均是从trunk中衍生的.branch复制trunk中代码用于开发,tag用于存放比较重要的发行版,存放release版 ...

  9. HTML--绝对路径, 表格,表单, 框架

    URL, URI, URN URL: 统一资源定位符: Uniform Resource Locator URN: 持久可用的资源标准名称 Uniform Resource Name , 比如邮箱 U ...

  10. objective-c学习笔记2

    Objective-c学习笔记 1.cocoa的对象初始化一般使用alloc和init两个方法,不适用new,其中alloc用于分配内存,init用于初始化,因为初始化方法返回的对象可能和分配的对象不 ...