bootstrap--小屏幕自动适应导航栏
程序员文章站
2023-12-30 17:52:46
...
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./css/bootstrap.min.css">
<title>bootstrap--小屏幕自动适应导航栏</title>
</head>
<body>
<!-- nav导航栏，navbar-default默认导航条样式，navbar-fixed-top导航条固定在顶部不滚动 -->
<div class="nav navbar-default navbar-fixed-top">
<!-- navbar-header导航栏头部（小屏幕下独占一行，不和菜单混排） -->
<div class="navbar-header">
<!-- navbar-brand导航栏品牌（可用来显示logo和标题,默认左边） -->
<div class="navbar-brand">小屏幕自动适应导航栏 </div>
<!-- 小屏幕显示菜单按钮
class="navbar-toggle" 指定按钮样式 不影响功能实现
data-toggle="collapse"和data-target=".navbar-collapse"指定 操作 和 被操作对象 ，影响功能实现 不能缺少
注意data-target属性值里的小点 -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">···</button>
</div>
<!-- 主菜单，navbar-collapse表示可以被折叠和展开，与上面的data-target=".navbar-collapse"配合使用
collapse表示默认折叠 -->
<ul class="nav navbar-nav navbar-collapse collapse">
<li><a href="">主页</a></li>
<li><a href="">新闻</a></li>
<li><a href="">头条</a></li>
</ul>
<!-- 副菜单，navbar-right表示向右对齐 其他与主菜单相同 -->
<ul class="nav navbar-nav navbar-right navbar-collapse collapse">
<li><a href="">注册</a></li>
<li><a href="">登录</a></li>
</ul>
</div>
<script src="./js/jquery-3.4.1.min.js"></script>
<script src="./js/bootstrap.js"></script>
</body>
</html>