bootstrap 响应式的导航栏
2023-09-27 14:27:48 时间
响应式的导航栏
为了给导航栏添加响应式特性,您要折叠的内容必须包裹class.collapse、.navbar-collapse 的<duv>中。折叠起来的导航栏实际上是 一个带有class.navbar-toggle及两个data-元素的按钮。第一个是data-toggle,用于告诉JavaScript 需要对按钮做什么,第二个是data-target ,指示要切换到哪一个元素.三个带有class.icon-bar的<span>创建所谓的汉堡按钮。这些会切换为.nav-collapse<div>中的元素。为了 实现以上这些功能,您必须包含Bootstrap 折叠(Collapse插件) 下面实例演示了这点:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbra navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse">
<span class="sr-only">切换导航</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">LIUAN</a>
</div>
<div class="collapse navbar-collapse" id="example-navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">IOS</a></li>
<li><a href="#">SVN</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Java
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">Jueter</a></li>
<li><a href="#">Jueter</a></li>
<li><a href="#">Jueter</a></li>
<li><a href="#">Jueter</a></li>
<li class="divider"></li>
<li><a href="#">Jueter</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<h3>响应式的导航栏</h3>
<code class="pull-left">
为了给导航栏添加响应式特性,您要折叠的内容必须包裹class.collapse、.navbar-collapse 的<div>中。折叠起来的导航栏实际上是
一个带有class.navbar-toggle及两个data-元素的按钮。第一个是data-toggle,用于告诉JavaScript 需要对按钮做什么,第二个是data-target
,指示要切换到哪一个元素.三个带有class.icon-bar的<span>创建所谓的汉堡按钮。这些会切换为.nav-collapse<div>中的元素。为了
实现以上这些功能,您必须包含Bootstrap 折叠(Collapse插件)
下面实例演示了这点:
</code>
</div>
</body>
</html>
相关文章
- Netty Bootstrap(图解)|秒懂
- [转] BootStrap table增加一列显示序号
- [转]手把手教你--Bootstrap Table表格插件及数据导出(可导出Excel2003及Exce2007)
- 使用Bootstrap 3开发响应式网站实践03,轮播下方的内容排版
- 使用Bootstrap 3开发响应式网站实践01,前期准备、导航区域等
- Bootstrap 3之美06-Page Header、Breadcrumbs、Dropdowns、Button Dropdowns、用Button和Dropdowns模拟Select、Input Groups、Thumbnails、Panels、Wells
- Bootstrap 3之美02-Grid简介和应用
- 第87节:Java中的Bootstrap基础与SQL入门
- Bootstrap-基于bootstrap的后台二级垂直菜单
- bootstrap响应式设计简单实践。
- 基于 Bootstrap 5 的博客和杂志主题 HTML 网站模板
- bootstrap响应式前端页面
- laydate兼容bootstrap
- Bootstrap V3使用Tab标签
- 一、bootstrap-select输入选择框
- bootstrap表格的使用
- 实用bootstrap 表格控件
- Bootstrap 简洁、直观、强悍、移动设备优先的前端开发框架,让web开发更迅速、简单。
- ng-bootstrap 组件集中 tabset 组件的实现分析
- 使用 Bootstrap Typeahead 组件