bootstrap响应式导航怎么设置折叠的大小

为了给导航栏添加响应式特性，您要折叠的内容必须包裹在带有 classes .collapse、.navbar-collapse 的 <div> 中。折叠起来的导航栏实际上是一个带有 class .navbar-toggle 及两个 data- 元素的按钮。第一个是 data-toggle，用于告诉 JavaScript 需要对按钮做什么，第二个是 data-target，指示要切换到哪一个元素。三个带有 class .icon-bar 的 <span> 创建所谓的汉堡按钮。这些会切换为.nav-collapse <div> 中的元素。为了实现以上这些功能，您必须包含 Bootstrap 折叠（Collapse）插件。<!DOCTYPE html><html><head><title>Bootstrap 实例 - 响应式的导航栏</title><link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"><script src="/scripts/jquery.min.js"></script><script src="/bootstrap/js/bootstrap.min.js"></script></head><body><nav class="navbar navbar-default" role="navigation"><div class="navbar-header"><button type="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 class="navbar-brand" href="#">W3Cschool</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="#">jmeter</a></li><li><a href="#">EJB</a></li><li><a href="#">Jasper Report</a></li><li class="divider"></li><li><a href="#">分离的链接</a></li><li class="divider"></li><li><a href="#">另一个分离的链接</a></li></ul></li></ul></div></nav></body></html>重点分析其与默认导航栏的不同之处：1、在<div class="navbar-header">中添加了一个按钮：<button type="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>如上所述，data-toggle用于告诉 JavaScript 需要对按钮做什么， data-target指示要切换到哪一个元素。三个带有 class .icon-bar 的 <span> 创建所谓的汉堡按钮。.navbar-toggle {position: relative;float: right;padding: 9px 10px;margin-top: 8px;margin-right: 15px;margin-bottom: 8px;background-color: transparent;background-image: none;border: 1px solid transparent;border-radius: 4px;}.navbar-toggle:focus {outline: 0;}.navbar-toggle .icon-bar {display: block;width: 22px;height: 2px;border-radius: 1px;}.navbar-toggle .icon-bar + .icon-bar {margin-top: 4px;}@media (min-width: 768px) {.navbar-toggle {display: none;}}.sr-only {position: absolute;width: 1px;height: 1px;padding: 0;margin: -1px;overflow: hidden;clip: rect(0, 0, 0, 0);border: 0;}.sr-only-focusable:active,.sr-only-focusable:focus {position: static;width: auto;height: auto;margin: 0;overflow: visible;clip: auto;}.navbar-toggle .icon-bar {display: block;width: 22px;height: 2px;border-radius: 1px;}.navbar-toggle .icon-bar + .icon-bar {margin-top: 4px;}.navbar-default .navbar-toggle .icon-bar {background-color: #888;}.navbar-inverse .navbar-toggle .icon-bar {background-color: #fff;}2、项目列表被包裹在了一个另外增加的<div>中<div class="collapse navbar-collapse" id="example-navbar-collapse">.collapse {display: none;}.navbar-collapse {padding-right: 15px;padding-left: 15px;overflow-x: visible;-webkit-overflow-scrolling: touch;border-top: 1px solid transparent;-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);}@media (min-width: 768px) {.navbar-collapse {width: auto;border-top: 0;-webkit-box-shadow: none;box-shadow: none;}.navbar-collapse.collapse {display: block !important;height: auto !important;padding-bottom: 0;overflow: visible !important;}@media (max-width: 480px) and (orientation: landscape) {.navbar-fixed-top .navbar-collapse,.navbar-fixed-bottom .navbar-collapse {max-height: 200px;}} 

bootstrap响应式导航怎么设置折叠的大小

bootstrap响应式导航怎么设置折叠的大小

2回答