Bootstrap 导航 标题栏
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 导航 标题栏的更多相关文章
- bootstrap导航条在手机上默认展开二级目录,必须用setTimeout才能实现
bootstrap导航条在手机上默认展开二级目录,必须用setTimeout才能实现 $(document).ready(function() { $('.dropdown').hover(funct ...
- BootStrap导航栏的使用
默认的导航栏 创建一个默认的导航栏的步骤如下: 向 <nav> 标签添加 class .navbar..navbar-default. 向上面的元素添加 role="naviga ...
- 自定义bootstrap样式-9行样式自定义漂亮大气bootstrap导航栏
有人说前端发展太快,框架太多,各有所需,各有所长.看看这幅图,估计都知道这些框架,但是大部分公司中实际要用到的也就那么几个. 发展再快,框架再多.还是得回到原点,不就是Html+Css+JavaScr ...
- Bootstrap -- 导航栏样式、分页样式、标签样式、徽章样式
Bootstrap -- 导航栏样式.分页样式.标签样式.徽章样式 1. 使用图标的导航栏 使用导航栏样式: <!DOCTYPE html> <html> <head&g ...
- Bootstrap导航
前面的话 导航对于一位前端人员来说并不陌生.可以说导航是一个网站重要的元素组件之一,便于用户查找网站所提供的各项功能服务.本文将详细介绍Bootstrap导航 基础样式 Bootstrap框架中制作导 ...
- Bootstrap 导航元素（标签页）
[Bootstrap 导航元素] 1.基本的导航元素:标签导航.基于ul.li而来,给ul添加 class="nav nav-tabs" 即可.选中的li添加 class=&quo ...
- Bootstrap学习笔记（5）--实现Bootstrap导航条可点击和鼠标悬停显示下拉菜单
实现Bootstrap导航条可点击和鼠标悬停显示下拉菜单 微笑的鱼 2014-01-03 Bootstrap 5,281 次围观 11条评论 使用Bootstrap导航条组件时,如果你的导航条带有下拉 ...
- Bootstrap 导航条理解
以下理论内容copy自Bootstrap中文网 (一个不错的bootstrap学习网站) 导航条 默认样式的导航条 导航条是在您的应用或网站中作为导航页头的响应式基础组件.它们在移动设备上可以折叠(并 ...
- Bootstrap导航栏实例讲解
导航栏是一个很好的功能,是 Bootstrap 网站的一个突出特点.导航栏是响应式元组件就,作为应用程序或网站的导航标题.导航栏在移动设备的视图中是折叠的,随着可用视口宽度的增加,导航栏也会水平展开. ...
随机推荐
- 开始学习MFC
<<对0基础MFC者的一点建议>>---------------------摘自某论坛lint2008的回复,不管对错,先看看. 因为上半年自己刚刚学了点MFC,算是对 ...
- FIR数字滤波器的设计要点
源:http://blog.sina.com.cn/s/blog_493520900101gt0a.html FIR数字滤波器的设计要点
- iOS中"查看更多/收起"功能实现
实现效果如图: 查看更多功能在很多app种都有应用,在这里简单的实现,介绍实现流程: 一个tableViewCell中包含一个collectionView,"查看更多"按钮是tab ...
- AMQP协议学习
参考这个:http://kb.cnblogs.com/page/73759/ 写的挺好 AMQP协议是一种二进制协议,提供客户端应用与消息中间件之间异步.安全.高效地交互.从整体来看,AMQP协议可划 ...
- java类到底是如何加载并初始化的？
Java虚拟机如何把编译好的.class文件加载到虚拟机里面?加载之后如何初始化类?静态类变量和实例类变量的初始化过程是否相同,分别是如何初始化的呢?这篇文章就 是解决上面3个问题的. 若有不正之处, ...
- HTML 5终于定稿，八年后我们再一次谈谈怎么改变世界
我们第一次谈论 HTML5 要改变世界大概是因为乔布斯,他坚持在 iOS 上不兼容 Flash,在 Adobe 统治多媒体开发的那个年代,这需要付出极大的勇气.这么多年过去了,虽然所有人都在谈论 HT ...
- iOS探究UITableView的内部代码,仿UITableView自定义
大家都知道UITableView,最经典在于循环利用,这里我自己模仿UITableView循环利用,写了一套自己的TableView实现方案,希望大家看了我的文章,循环利用思想有显著提升. 研究UIT ...
- mysql show命令
MySQL中有很多的基本命令,show命令也是其中之一,在很多使用者中对show命令的使用还容易产生混淆,本文汇集了show命令的众多用法. 1. show tables或show tables fr ...
- lpc1768usb使用-配置
#ifndef __USBCFG_H__ #define __USBCFG_H__ //#define USB_IF_NUM 1 #define USB_MAX_PACKET0 ...
- 机器人局部避障的动态窗口法(dynamic window approach) （转）
源:机器人局部避障的动态窗口法(dynamic window approach) 首先在V_m∩V_d的范围内采样速度: allowable_v = generateWindow(robotV, ro ...