首页 > 代码库 > 【Bootstrap】导航栏navbar在PC上的缺陷与解决方案

【Bootstrap】导航栏navbar在PC上的缺陷与解决方案

2024-07-31 11:07:07   229人阅读

在Bootstrap的官网上，提供了一种导航栏的组件：

只要在站点文件夹放好JQ与Bootstrap输入如下代码，

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>navbar</title>
		<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
		<link href=http://www.mamicode.com/"css/bootstrap.css" rel="stylesheet" media="screen">>
则可以得到一个可以随窗口大小变化的导航栏：

还可以把<nav class="navbar navbar-default" role="navigation">中的class值改成<nav class="navbar navbar-default navbar-fixed-top" role="navigation">则导航条，就一直悬挂在网页顶部。无论窗口怎么拖动，如果把class值改成<nav class="navbar navbar-inverse" role="navigation">，则可以得到一条黑色的导航条。
看起来很好用的样子，但是缺点是相当致命的。且不论此导航条提供的颜色就只有白色与黑色，两种色调，最可怕的是在IE8中直接以手机方式显示这个导航条，然而是在1440x900的屏幕分辨率之下。

这导致用户的要选择导航条的项目需要点击右方的按钮，之后下拉菜单则变成：

让网页内容直接被下拉正整整一大截。值得注意的是，IE8是现在WIN7默认的浏览器。姑且不论IE6在中国的绝对核心地位，即使在越来越多的用户选用WIN7的情况的大背景下，IE8的兼容性还是一个值得考虑的问题。
所以，仅能不选择这种导航条作为网站的导航，可作为替代品的bootstrap的元素有两种，风格各异，一种是标签页，另一种则是按钮组，所谓的面包屑导航栏也并不是一种很好的解决方式，因为下拉菜单在bootstrap必须以按钮的方式呈现，写成文本的话，在IE8同样是吃力不讨好，当然，你完全可以选择抛开bootstrap，大神们的css都是自己手写，看不起框架。

一、标签页
标签的基本样式如下，存在着下拉菜单需要bootstrap.js，bootstrap.css，jq的支持

标签页不随浏览器的尺寸的变化而变化，

可以在一个网页内切换，也可以跳到其他页面，
强力建议导航的标签页上的链接，都跳到其他与此页同样布局的网页。也就是同样存在此标签页，且位置一模一样的页面。
代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Togglabletabs</title>
		<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
		<link href=http://www.mamicode.com/"css/bootstrap.css" rel="stylesheet" media="screen">>
二、选择按钮组
一个铺满页面的选择按钮组基本样式如下，

会随着浏览器的尺寸改变而改变，当然，当被压缩到极致时，不会像bootstrap自带的导航条navbar那样收起来，静静地躺在一个按钮中，

具体代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>按钮组buttongroup</title>
		<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
		<link href=http://www.mamicode.com/"css/bootstrap.css" rel="stylesheet" media="screen">>
此乃两种解决导航栏navbar在PC上的缺陷的方案。
【Bootstrap】导航栏navbar在PC上的缺陷与解决方案


联系
我们