<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<!-- 视口 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>基本模板</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
</head>
<body>
<!--
1. navbar-inverse 表示反色的导航条
2. 将 container-fluid 改成 container
用于支持盲人设备:
aria- 开头的属性直接删除
设置了 sr-only类的元素直接删除
role 开头的属性直接删除
-->
<nav class="navbar navbar-default">
<div class="container">
<!-- 大标题和按钮组合使用, 可以在移动端有更好的体验 -->
<div class="navbar-header">
<!-- 移动端显示的按钮 -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-1">
<!-- 每个 span 表示一道杠 -->
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- 大标题 -->
<a class="navbar-brand" href="#">Brand11111</a>
</div>
<!-- 用于切换显示的导航模块 -->
<!-- 按住 alt 键, 双击, 多行编辑, 将来 ctrl+v 粘贴进来 -->
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<!-- 左侧的导航 -->
<ul class="nav navbar-nav">
<li class="active"><a href="#">我要投资</a></li>
<li><a href="#">我要借贷</a></li>
<li><a href="#">平台介绍</a></li>
<li><a href="#">新手专区</a></li>
<li><a href="#">最新动态</a></li>
<li><a href="#">微平台</a></li>
</ul>
<!-- 右侧的导航 -->
<ul class="nav navbar-nav navbar-right">
<li><a href="#">个人中心</a></li>
</ul>
</div>
</div>
</nav>
<script src="./jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
</body>
</html>
网友评论