标签:导航条 堆叠 边框 完整 nbsp nav focus 排列 相同
Bootstrap3中的导航条主要包含品牌项(brand)、菜单项(menu)、表单项(form)等元素。
大屏下,各元素呈水平排列。小屏中,各元素默认隐藏,仅显示品牌项和一个折叠按钮。点击折叠按钮后,菜单和表单元素呈现为堆叠排列。由此可见,导航条由两个部分组成,一个是导航主题,由 .navbar-header 实现,另外一个是导航链接,由 .nav .navbar-nav 实现。它们都包含在组合类 .navbar .navbar-default 中。
.navbar 类负责构建一个相对定位,50px高,有边框的条形区域。在大屏中,该区域有圆角。而 .navbar-default 只负责导航条的背景和边框颜色,从后续的内容还将解除到另一个样式的导航条,由 .navbar-inverse 实现。
.navbar {
position: relative;
min-height: 50px;
margin-bottom: 20px;
border: 1px solid transparent;
}
@media (min-width: 768px) {
.navbar {
border-radius: 4px;
}
}
.navbar-default {
background-color: #f8f8f8;
border-color: #e7e7e7;
}
导航条在小于768px的屏幕下,项呈现为品牌项和一个折叠按钮。完整代码如下:
1 <div class="navbar-header"> 2 <a href="#" class="navbar-brand">Brand</a> 3 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navMain"> 4 <span class="icon-bar"></span> 5 <span class="icon-bar"></span> 6 <span class="icon-bar"></span> 7 </button> 8 </div>
.navbar-header类 包含了品牌项目和折叠按钮,它利用伪类实现了display,并且清除两端浮动。此外,在大于768px的屏幕中,还实现了向左浮动效果。.navbar-header 类代码如下:
.navbar-header:before,
.navbar-header:after {
display: table;
content: " ";
}
@media (min-width: 768px) {
.navbar-header {
float: left;
}
}
.navbar-header:after,
.navbar-collapse:after {
clear: both;
}
.navbar-brand类 主要设定字体大小和边框,并让在其中的图片已块元素呈现。代码如下:
.navbar-brand {
float: left;
height: 50px;
padding: 15px 15px;
font-size: 18px;
line-height: 20px;
}
.navbar-brand:hover,
.navbar-brand:focus {
text-decoration: none;
}
.navbar-brand > img {
display: block;
}
.navbar-toggle类 实现折叠按钮。它需要和js结合,才能实现对菜单项的隐藏和显示。折叠按钮为相对定位且向右浮动的。它的内外边框不尽相同,并通过子选择器和相邻兄弟选择器实现了“三”型效果。此外,通过媒体查询,让其在大于768px的屏幕上隐藏。实现的代码如下:
.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;
}
}
接下来就是导航条的主题内容了,根据媒体查询,在不同尺寸的屏幕上有不同的表现。主体层的样式有两个:
.navbar-collapse 定义上下内边距分别是15px,在大于768px的屏幕上,定义宽度自动。
.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; } }
.collapse 起始状态是隐藏的,因为bootstrap是移动设备优先,在媒体查询下,才能以块结构显示出来。
.collapse { display: none; } @media (min-width: 768px) { .navbar-collapse.collapse { display: block !important; height: auto !important; padding-bottom: 0; overflow: visible !important; }
标签:导航条 堆叠 边框 完整 nbsp nav focus 排列 相同
原文地址:https://www.cnblogs.com/naivav/p/11142522.html