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. JAVA基础-多态

    多态 polymophism: 动态绑定, 迟绑定, 指在执行期间(java), 而不是编译期间(javac), 判断所引用对象的实际类型, 根据实际类型调用响应的方法. 3个条件: 1. 继承 2. ...

  2. ExtJS如何取得GridPanel当前选择行数据对象 - nuccch的专栏 - 博客频道 - CSDN.NET

    body { font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI ...

  3. 轻量级别的Cache和反向代理软件---Varnish

    1.Varnish描述 1.1 Varnish的结构与特点 Varnish是一个轻量级别的Cache和反向代理软件,先进的设计理念和成熟的设计框架是Varnish的主要特点: 基于内存进行缓存,重启后 ...

  4. openstack controller ha测试环境搭建记录（十）——配置neutron（控制节点）

    创建neutron用户:mysql -u root -p CREATE DATABASE neutron;GRANT ALL PRIVILEGES ON neutron.* TO 'neutron'@ ...

  5. HDU 2412 Party at Hali-Bula

    树形DP水题.判断取法是否唯一,dp的时候记录一下每个状态从下面的子节点推导过来的时候是否唯一即可. #include<cstdio> #include<cstring> #i ...

  6. Mariadb galera 群集

    环境:  CentOS 7 x64  *  3 IP : 192.168.0.100 IP : 192.168.0.101 IP : 192.168.0.102 配置mariadb YUM 源 htt ...

  7. OPENCV图像变换-1

    图像变换是指将一幅图像变换为图像数据的另一种表现形式,例如将图像进行傅立叶变换,或者对图像进行X,Y方向的求导等,经过这些变换,可以将图像数据处理中的某些问题换一个别的角度想办法,所以图像变换是图像处 ...

  8. Android如何监听蓝牙耳机的按键事件(转)

    源: Android如何监听蓝牙耳机的按键事件 写在前面: 直接想要代码很简单,你直接把滚动条拉到最底端就可以看到.如果想要十分地了解为什么,那就按照我规划的一步一步来理解.以下测试环境以手头上有的「 ...

  9. ZOJ 3931 Exact Compression

    题目看了半小时才看懂的. 题意:首先根据给出的序列,构造出哈夫曼树,构造出来的是一棵二叉树,每个节点都有一个权值,每个节点的两个儿子只能取一个,问能否使取出来的节点权值之和刚好等于e. 这样一分析就很 ...

  10. leetcode--007 word break I

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAA+4AAAC5CAIAAAA55fI7AAAZa0lEQVR4nO3dPW7bQIMG4L2MT6B7+A