ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

bootstrap组件学习之导航条

2019-07-11 14:02:01  阅读:233  来源: 互联网

标签:768px collapse header navbar bootstrap 组件 导航条 border display


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

 

标签:768px,collapse,header,navbar,bootstrap,组件,导航条,border,display
来源: https://www.cnblogs.com/naivav/p/11142522.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有