bootstrap组件学习之导航条

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;
}

navbar navbar-default

导航条在小于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>

div class="navbar-header"

.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-header

.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-brand

.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-toggle

接下来就是导航条的主题内容了，根据媒体查询，在不同尺寸的屏幕上有不同的表现。主体层的样式有两个：

.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;
  }
}

.navbar-collapse

.collapse 起始状态是隐藏的，因为bootstrap是移动设备优先，在媒体查询下，才能以块结构显示出来。

.collapse {
  display: none;
}

@media (min-width: 768px) {
  .navbar-collapse.collapse {
    display: block !important;
    height: auto !important;
    padding-bottom: 0;
    overflow: visible !important;
  }

.collapse

bootstrap组件学习之导航条

相关文章