BootStrap导航栏问题记录

今天完成的事情:(实现了test9的响应式导航栏的垂直平分和下拉列表的居中问题。)

我觉得最麻烦的就是要在bootstrap的格式下修改。我弄了好多次demo来虐导航栏。但是一直都没有头绪。知道昨晚在完玩狼人杀后,突然灵机一闪。

能不能通过内部的固定高度,来实现垂直平分的效果呢。

在查看psd图的效果是导航栏的a是垂直平分的。

BootStrap导航栏问题记录

那么我可否通过固定a超链接的高度来实现垂直平分呢?

<div "h-nav">
  <nav "container navbar navbar-default" role="navigation">
    <div "row">
      <div "navbar-header df-jcsbc">
        <a "navbar-brand" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
          <img src="img/test8-1/logo6.png" "">
        </a>
        <button type="button" " navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
          <span "sr-only">切换导航</span>
          <span "icon-bar"></span>
          <span "icon-bar"></span>
          <span "icon-bar"></span>
        </button>
      </div>
      <div "collapse navbar-collapse" id="navbar-collapse">
        <ul id="h-cell-1" "nav navbar-nav lsno navbar-right">
          <li ""><a href="test9-1.html" rel="external nofollow" >首页</a></li>
          <li ""><a href="test9-3.html" rel="external nofollow" ><span "dib">职业</span></a></li>
          <li ""><a href="test9-2.html" rel="external nofollow" rel="external nofollow" ><span "dib pat">推荐</span></a></li>
          <li ""><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><span "dib pat">关于</span></a></li>
        </ul>
      </div>
    </div>
  </nav>
</div>

带着这种想法,我设定了如下属性。

#h-cell-1 a{
  display:inline-block;
  height:97px;
  margin-left:32px;
  font-size:17.8px;
  text-decoration: none;color:white;
}

BootStrap导航栏问题记录

为此怎么实现垂直居中呢?

第一点想到的是position定位了

既然要实现相对于a超链接的position,那么必须引入一个span盒子了。

<li ""><a href="test9-2.html" rel="external nofollow" rel="external nofollow" ><span "dib pat">推荐</span></a></li>

然后增加

#h-cell-1 li{height:97px;}
#h-cell-1 a{
  display:inline-block;
  position:relative;
  width:40px;
  height:97px;
  margin-left:32px;
  border-bottom:2px solid #20B176;
  font-size:17.8px;
  text-decoration: none;color:white;
}
#h-cell-1 a span{width:40px;}

就可实现垂直居中了!

但另外一个问题又接着出现了,在galaxy5的小屏幕下,下拉菜单的li间距太大,不美观。

BootStrap导航栏问题记录

又该怎么办呢?

这个是在28号晚上想到方法的。灵感也是看了其他同学的日报。他们提到媒体查询。

好,什么是媒体查询。建议百度。这里不做介绍。

媒体查询是吧,好那么久好办了。

@media only screen and (max-width: 700px) {
#h-cell-1 li{height:auto;}
#h-cell-1 a{height:20px;width:100%;margin:0;padding:0;overflow:hidden;}
#h-cell-1 a span{height:auto;}
}

ok,完美。

但是还有问题啊!

BootStrap导航栏问题记录

图标,和按钮原本是不垂直居中的啊!那这个怎么搞!

<div "navbar-header df-jcsbc">
  <a "navbar-brand" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
    <img src="img/test8-1/logo6.png" "">
  </a>
  <button type="button" " navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
    <span "sr-only">切换导航</span>
    <span "icon-bar"></span>
    <span "icon-bar"></span>
    <span "icon-bar"></span>
  </button>
</div>

他们不是都在navbar-header的盒子里吗?

那不能通过flex两端对齐来实现垂直吗?

试试看

加了个

.df-jcsbc{display:flex;justify-content: space-between;align-items: center;} 

但是效果不理想啊!总体来说,.navbar-brand 和navbra-toggle实现了垂直居中。

BootStrap导航栏问题记录

那,怎么办呢?

我是直接弄

.navbar-header{position: relative;height:97px;}
.navbar-brand{
padding:0;

  }
.navbar-header img{position:absolute;
  left:20px;}
.navbar-header button{position:absolute;
  margin:0;
  right:20px;}

padding和margin来使他们让出位置来的。

然后通过定位稍微调了点左右距离。

最后就可以实现垂直居中了。

明天及今天计划的事情:(是按照大娃师兄,提出的UI自检 :首先对照字体大小,颜色,边距,定位等问题,之后在不同的分辨率下查看是否有布局错乱,不协调等问题。来做test10。)

总结

以上所述是小编给大家介绍的BootStrap导航栏问题记录,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

时间: 2017-07-30

Bootstrap多级导航栏(级联导航)的实现代码

在bootstrap官方来说,导航最多就是两级,两级以上是无法实现的,大叔找了一些第三方的资料,终于找到一个不错的插件,使用上和效果上都还不错,现在和大家分享一下 插件地址:http://vsn4ik.github.io/bootstrap-submenu/ 先看一下,在后台系统上的显示效果 下面说一下实现的方式 1.引用三个JS插件和一个CSS类库 <script src="~/Content/bootstraps/JS/bootstrap-submenu.js"><

Bootstrap3制作自己的导航栏

导航栏是一个很好的功能,是Bootstrap 网站的一个突出特点.导航栏是响应式元组件就,作为应用程序或网站的导航标题.导航栏在移动设备的视图中是折叠的,随着可用视口宽度的增加,导航栏也会水平展开.在 Bootstrap 导航栏的核心中,导航栏包括了为站点名称和基本的导航定义样式. 创建一个默认的导航栏的步骤如下: 向 <nav> 标签添加 class .navbar..navbar-default(白底黑字),navbar-inverse(黑底白字) 向上面的元素添加 role="

Bootstrap实现默认导航栏效果

导航栏是一个很好的功能,是 Bootstrap 网站的一个突出特点.导航栏是响应式元组件就,作为应用程序或网站的导航标题.导航栏在移动设备的视图中是折叠的,随着可用视口宽度的增加,导航栏也会水平展开.在 Bootstrap 导航栏的核心中,导航栏包括了为站点名称和基本的导航定义样式. 创建一个默认的导航栏的步骤如下: 向 <nav> 标签添加 class .navbar..navbar-default(白底黑字),navbar-inverse(黑底白字) 向上面的元素添加 role="

Bootstrap导航栏各元素操作方法(表单、按钮、文本)

本文主要包括三大方面,大家仔细学习. 1.导航栏中的表单 导航栏中的表单不是使用 Bootstrap 表单 章节中所讲到的默认的 class,它是使用 .navbar-form class.这确保了表单适当的垂直对齐和在较窄的视口中折叠的行为.使用对齐方式选项(这将在组件对齐方式部分进行详细讲解)来决定导航栏中的内容放置在哪里. 下面的实例演示了这点: <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 默

解决bootstrap导航栏navbar在IE8上存在缺陷的方法

在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

Bootstrap实现响应式导航栏效果

为了给导航栏添加响应式特性,您要折叠的内容必须包裹在带有 classes .collapse..navbar-collapse 的 <div> 中.折叠起来的导航栏实际上是一个带有class .navbar-toggle 及两个 data- 元素的按钮.第一个是 data-toggle,用于告诉 JavaScript 需要对按钮做什么,第二个是 data-target,指示要切换到哪一个元素.三个带有 class .icon-bar 的 <span> 创建所谓的汉堡按钮.这些会切换

BootStrap实现响应式布局导航栏折叠隐藏效果(在小屏幕、手机屏幕浏览时自动折叠隐藏)

废话不多说了,直接给大家贴代码了,具体代码如下所示: <!DOCTYPE html> <html> <head> <title>bootstrap实现导航栏的响应式布局,当在小屏幕.手机屏幕浏览时自动折叠隐藏</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name=&q

Bootstrap禁用响应式布局的实现方法

在Bootstrap中极其重要的一个技术内容便是响应式布局了,一次编码针对不同设备终端的强大能力使得响应式技术愈发流行. 不过正所谓"萝卜青菜各有所爱",如果你想要使用Bootstrap开发自己的项目却又恰巧不太喜欢响应式布局(或者你所设计的页面布局不允许你使用响应式技术),那么你可以通过以下方式禁用响应式布局. 移除标签 禁用第一步,就是需要移除在head标签中添加的 <meta name="viewport" content="width=dev

BootStrap学习笔记之nav导航栏和面包屑导航

nav导航栏 <nav role="navigation" class="navbar navbar-default"> <div class="container-fluid"></div> <div class="navbar-header"> <a href="#" class="navbar-brand"> 大大的log

BootStrap创建响应式导航条实例代码

首先你得引入bootstrap与jquery 推荐一个CDN:http://cdn.gbtags.com/index.html 然后就是开始编写HTML代码.如果你不想更改显示效果的话实际上CSS都免去写了2333 因为HTML代码比较多 这里分为三个部分 然后最后再上一份整体HTML代码 首先如上图所示的,实现这个效果需要了解bootstrap的以下几个组件 •导航条 •按钮 •表单 •下拉菜单 实际上以上几个组件的样式有很多.我们只需要了解一部分即可 如需了解更多的请转自http://www

谈一谈bootstrap响应式布局

随着移动端的用户越来越多,传统的web系统架构无法兼容很多移动终端的正常使用.在工作中也会发现,现在很多的客户都有在手机.平板等移动终端上使用管理系统的需求.如果单独为每一个终端开发相应的响应网页,这必定增加项目的成本和开发人员的压力.这时候了解响应式布局就很有必要,响应式布局就是为解决多终端问题而生的.本次介绍的是轻量级.开源的.免费的bootstrap. 搭建开发环境 首先下载官网的boostrap源码包:http://www.bootcss.com/. 开发简单的项目不必加入源码中的所有c

简要了解jQuery移动web开发的响应式布局设计

响应式布局设计是根据用户设备的屏幕分辨率来响应用户设备的一种设计.这意味着,无论用户是在移动.平板还是桌面设备上浏览 Web 页面,设计都将根据该设备的屏幕分辨率显示特定的布局,从而适当地响应设备. 该框架的文档实际上结合使用了 jQuery Mobile 框架和 CSS3 媒体查询来实现自己的响应式设计.对不同屏幕分辨率的反应方式. 没有自定义样式,我们的电网将3列的布局在所有的屏幕宽度: 在我们的自定义样式,我们希望此网格叠加在狭窄的宽度,然后切换到一个标准的3栏布局.在很宽的屏幕宽度,我们

使用BootStrap建立响应式网页——通栏轮播图(carousel)

1.bootstrap提供了js插件--轮播图 我们还是照旧,直接拿过来用,需要改的地方再说. 2.修改 小屏幕看小图,大屏图看大图:这个可以利用自定义属性(data-XXX)data-img-lg(保存大图)和data-img-xs(保存小图)属性保存图片的路径,利用jQuery的data函数取出data-xxxx属性进行动态加载. 图片居中显示:大图用背景图片来做比较好一点,小图用img来做比较好一点(因为小图的话需要等比例缩放,用背景图做不到等比例缩放). 承载轮播图的盒子高度:大图的的时

JS中使用media实现响应式布局

常见写法: 下面总结常见的响应式布局的分类: @media screen and (max-width:320px){ #talkFooter .editArea{-- } } @media screen and (min-width:321px) and (max-width:375px){ #talkFooter .editArea{-- } } @media screen and (min-width:376px) and (max-width:414px){ #talkFooter .e

超棒的响应式布局jQuery插件Freetile.js

在线演示 我们曾经介绍过俩款知名的响应式布局插:isotope和masonary,今天我们这里再介绍一款相当不错的响应式布局插件 –Freetile.js,使用它同样可以生成超酷的动态布局效果.相信大家一定会喜欢! 主要特性 Freetie来自于Assemblage和Assemblage Plus的内建布局引擎,设计灵感来自于Masonry,VGrid和Wookmark,但是和他们相比较,拥有以下独特的地方: 允许包含任何尺寸的元素,并且不要求一个固定的列宽度,因此你不需要指定列宽度来迎合你的元