我想使用Bootstrap 3默认导航栏的图像标志,而不是文本品牌。什么是正确的方法来做到这一点,而不引起任何问题与不同的屏幕尺寸?我认为这是一个常见的需求,但我还没有看到一个好的代码示例。除了在所有屏幕尺寸上都有可接受的显示外,一个关键要求是小屏幕上的菜单可折叠性。
我试着在有navbar-brand类的A标签内放置一个IMG标签,但这导致菜单不能在我的android手机上正常运行。我还尝试了增加导航栏类的高度,但这把事情搞砸了。
顺便说一下,我的logo图像比导航栏的高度要大。
我想使用Bootstrap 3默认导航栏的图像标志,而不是文本品牌。什么是正确的方法来做到这一点,而不引起任何问题与不同的屏幕尺寸?我认为这是一个常见的需求,但我还没有看到一个好的代码示例。除了在所有屏幕尺寸上都有可接受的显示外,一个关键要求是小屏幕上的菜单可折叠性。
我试着在有navbar-brand类的A标签内放置一个IMG标签,但这导致菜单不能在我的android手机上正常运行。我还尝试了增加导航栏类的高度,但这把事情搞砸了。
顺便说一下,我的logo图像比导航栏的高度要大。
当前回答
我的方法是为手机、平板电脑、台式机、大型台式机包括四张不同大小的图像,但只显示一张使用bootstrap的响应实用程序类,如下所示:
<!--<a class="navbar-brand" href="<?php echo home_url(); ?>/"><?php bloginfo('name'); ?></a>-->
<a class="navbar-brand visible-xs" href="<?php echo home_url(); ?>/"><img src="/assets/logo-phone.png" alt="<?php bloginfo('name'); ?> Logo" /></a>
<a class="navbar-brand visible-sm" href="<?php echo home_url(); ?>/"><img src="/assets/logo-tablet.png" alt="<?php bloginfo('name'); ?> Logo" /></a>
<a class="navbar-brand visible-md" href="<?php echo home_url(); ?>/"><img src="/assets/logo-desktop.png" alt="<?php bloginfo('name'); ?> Logo" /></a>
<a class="navbar-brand visible-lg" href="<?php echo home_url(); ?>/"><img src="/assets/logo-large.png" alt="<?php bloginfo('name'); ?> Logo" /></a>
注意:您可以用所提供的代码替换注释行。如果不使用wordpress,请替换php代码。
编辑Note2:是的,这会在加载页面时向服务器添加请求,这可能会变慢一点,但如果你使用后台css精灵技术,打印页面时很可能不会打印logo,上面的代码应该会得到更好的SEO。
其他回答
这不是语义上的,我只是使用现有的a元素,设置背景图像,然后为@2倍分辨率创建多个变量,较小的屏幕尺寸等。
然后,您可以使用.text-hide类以传统的方式在页面上获取一些文本。简单而有效,但不是正确使用图像。
下面是文本替换助手类的链接:
http://getbootstrap.com/css/#helper-classes
这段代码工作完美,如果你需要看到品牌居中和自动宽度工具栏。 它包含从正确路径获取图像文件的Wordpress函数:
<a class="navbar-brand page-scroll" rel="home"
href="#page-top" title="Title">
<img style="height: 100%; width: auto;"
src="<?php echo get_template_directory_uri();?>/img/logo.png">
为什么每个人都想用艰难的方式来做?当然,其中一些方法是有效的,但它们比必要的要复杂得多。
好的,首先,你需要一个图像,将适合你的导航栏。你可以通过css的height属性来调整你的图像(允许宽度缩放),或者你可以只使用一个适当大小的图像。无论你决定做什么,这看起来将取决于你的图像大小。
出于某种原因,每个人都想用navbar-brand将图像粘在锚中,这是不必要的。navbar-brand应用的文本样式,不是必要的图像,以及navbar-left类(就像拉左,但用于导航栏)。所有你真正需要的是添加导航栏左。
<a href="#" class="navbar-left"><img src="/path/to/image.png"></a>
你甚至可以用一个导航栏品牌项目,它将出现在图像的右侧。
虽然你的问题很有趣,但我不认为会有一个答案。也许你的问题太宽泛了。 你的解决方案应该取决于:导航栏中的其他内容(条目的数量),你的logo的大小,你的logo是否响应,等等。 在a中添加logo(使用navbar-brand)似乎是一个很好的起点。我应该使用navbar-brand类,因为这将添加一个15像素的填充(顶部/底部)。
我在http://getbootstrap.com/examples/navbar/上用300x150像素的logo测试了这个设置。
全屏> 1200:
768到992像素之间(菜单未折叠):
<768(菜单折叠)
除了美学方面,我没有发现任何技术问题。在小屏幕上,大标志可能会重叠或打破视口。 在768到992像素之间的屏幕上,当内容不在一条线上时,还会出现其他问题,例如:https://github.com/bassjobsen/jamedo-bootstrap-start-theme/issues/18
默认的导航栏示例添加了一个30px的底边距,所以你的导航栏的内容永远不会与你的页面的内容重叠。(固定导航栏会有问题时,导航栏的高度变化)。
您将需要一些css和媒体查询,以适应导航栏在不同屏幕尺寸上的需要。请缩小你的问题范围。B.e.描述一下你在android上发现的问题。
更新示例请参见http://bootply.com/77512。
在手机等较小的屏幕上,折叠菜单出现在logo上方
在代码中转换按钮和logo,首先是logo(设置float: logo上的左)
除了顶部,没有办法将菜单项对齐到任何地方
为.navbar-collapse ul设置margin-top。使用标志高度减去导航栏高度,以对齐到底部或(标志高度-导航栏高度)/ 2到中心
您不需要添加额外的CSS,因为Bootstrap3提供了它。除非你想加进去。 这是我的代码,把标志放在左边,链接到右边。 这个导航是响应式的。在你认为合适的时候对此进行修改。
HTML:
<nav class="navbar navbar-expand-lg navbar-light fixed-top" style="background-color:white;">
<div class="container">
<a class="navbar-brand" href="#"><img style=" width: 150px;" src="image.jpg" alt="Image text"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item"><a class="nav-link" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#">Projects</a></li>
<li class="nav-item"><a class="nav-link" href="#">Blog</a></li>
<li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
</ul>
</div>
</div>
</nav>