Bootstrap 导航 标题栏
2024-08-26 21:20:57
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>
最新文章
- CentOS7系统安装及初始化
- CSS样式基础总结
- List tuple 类型转成数组
- SQL Server 2008 R2数据库镜像部署
- 11-cp 命令总结
- 用Java开发代理服务器
- 理解ASP.NET MVC的路由系统
- 【CSS3】---结构性伪类选择器-first-child+last-child
- libcurl使用演示样例
- openstack 安装
- C语言函数参数压栈顺序为何是从右到左？（从左向右的话，碰到printf的会陷入死循环）
- RPC技术
- iOS相关教程
- Java 继承、抽象、接口
- What Are You Talking About
- loj#2531. 「CQOI2018」破解 D-H 协议(BSGS)
- P1515 旅行（简单搜索）
- [Micropython]TPYBoard v102 DIY照相机
- microsoft viso 下载地址
- QT QHttpMultiPart上传图片