带徽标的Bootstrap 3 Navbar
本文翻译自：Bootstrap 3 Navbar with Logo
I want to use the Bootstrap 3 default navbar with an image logo instead of text branding. 我想使用带有图像徽标而不是文本标记的Bootstrap 3默认导航栏。 What's the proper way of doing this without causing any issues with different screen sizes? 在不引起不同屏幕尺寸问题的情况下，这样做的正确方法是什么？ I assume this a common requirement, but I haven't yet seen a good code sample. 我认为这是一个常见的要求，但我还没有看到一个好的代码示例。 A key requirement other than having acceptable display on all screen sizes is the menu collapsibility on smaller screens. 除了在所有屏幕尺寸上具有可接受的显示之外的关键要求是较小屏幕上的菜单可折叠性。
I tried just putting an IMG tag inside the A tag that has the navbar-brand class, but that caused the menu not to function properly on my android phone. 我试过把一个IMG标签放在带有navbar-brand类的A标签内，但这导致菜单在我的Android手机上无法正常运行。 I also tried increasing the height of the navbar class, but that screwed things up even more. 我也试过增加导航栏类的高度，但这更加困扰了事情。
By the way, my logo image is larger than the height of the navbar. 顺便说一句，我的徽标图像大于导航栏的高度。
#1楼
参考：https://stackoom.com/question/1FW4q/带徽标的Bootstrap-Navbar
#2楼
Although your question is interesting i don't expect there will be one answer for it. 虽然你的问题很有意思，但我不认为会有一个答案。 Maybe your question is too broad. 也许你的问题太宽泛了。 Your solution should depend on: other content in the navbar (number of items), sizes of your logo, should your logo act responsive, etc. Adding the logo in the a (with navbar-brand) seems a good starting point. 您的解决方案应取决于：导航栏中的其他内容（项目数量），徽标大小，徽标是否响应等等。在a中添加徽标（使用navbar-brand）似乎是一个很好的起点。 I should use the navbar-brand class because this will add a padding (top / bottom) of 15 pixels. 我应该使用navbar-brand类，因为这将添加15像素的填充（顶部/底部）。
I test this setting on http://getbootstrap.com/examples/navbar/ with a logo of 300x150 pixels. 我在http://getbootstrap.com/examples/navbar/上测试了这个设置，标识为300x150像素。
Full screen > 1200: 全屏> 1200：
between 768 and 992 pixels (menu not collapsed): 在768和992像素之间（菜单未折叠）：
<768 (menu collapsed) <768（菜单已折叠）
Beside the aesthetic aspects i did not find any technical problem. 除了审美方面，我没有发现任何技术问题。 On small screens a big logo will overlap or break out the viewport maybe. 在小屏幕上，大徽标可能会重叠或突破视口。 Screens between 768 and 992 pixels also have other problems when the content doesn't fit in a line, see for example: https://github.com/bassjobsen/jamedo-bootstrap-start-theme/issues/18 当内容不符合一行时，768和992像素之间的屏幕也有其他问题，例如： https ： //github.com/bassjobsen/jamedo-bootstrap-start-theme/issues/18
The default navbar has The default navbar example adds a bottom-margin of 30px so the content of your navbar should never overlap the content of your page. 默认导航栏具有 默认导航栏示例添加30px的底部边距，因此导航栏的内容不应与页面内容重叠。 (fixed navbars will have problems when the height of the navbar varies). （当导航栏的高度变化时，固定的导航栏会出现问题）。
You will need some css and media queries to adapt the navbar to your need on different screen sizes. 您将需要一些css和媒体查询来根据不同屏幕尺寸的需要调整导航栏。 Please try to narrow your question. 请尝试缩小您的问题范围。 be describe the problem you found on android. 描述你在android上发现的问题。
update see http://bootply.com/77512 for an example. 更新请参见http://bootply.com/77512以获取示例。
On smaller screens such as a phone, the collapsed menu appears above the logo 在较小的屏幕（如手机）上，折叠的菜单显示在徽标上方
interchange the button and the logo in your code, logo first (set float:left on the logo) 在代码中更换按钮和徽标，首先是徽标（设置浮动：徽标左侧）
There is no way to align the menu items to anything except top 没有办法将菜单项对齐除top之外的任何内容
set the margin-top for .navbar-collapse ul . 设置.navbar-collapse ul的margin-top 。 Use logo height minus navbar height, to align to the bottom or (logo height - navbar height) / 2 to center 使用徽标高度减去导航栏高度，以对齐底部或（徽标高度 - 导航栏高度）/ 2到中心
#3楼
<div class="navbar-header"><button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="navbar-brand" rel="home" href="#" title="Buy Sell Rent Everyting"><img style="max-width:100px; margin-top: -7px;"src="/img/transparent-white-logo.png"></a>
</div>
#4楼
<header class="navbar navbar-inverse header-outer" role="banner"><div class="container form-inline"><img src="@Url.Content(" ~/Content/img/Logo-Sample.png ")" alt="Image" id="logo" class="img-responsive pull-left" /><div class="pull-right padding-top"><form class="hidden-xs" role="form"><div class="form-group" style="padding-left:10px"><input type="email" class="form-control" id="exampleInputEmail2" placeholder="Username"></div><div class="form-group"><input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password"></div><div class="form-group navbar-remember"><label class="white-font"><input type="checkbox" class="white-font"> Remember me</label></div><button type="button" class="btn btn-primary form-group" title="Sign In">Sign In</button></form></div></div></header>
Please understand the code at your own effort :D This is my draft code and its already working :) Here's the screenshot. 请自行理解代码：D这是我的草稿代码，它已经正常工作:)这是截图。
#5楼
My approach is to include FOUR different images of different sizes for phones, tablet, desktop, large desktop but only show ONE using bootstrap's responsive utility classes, as follow: 我的方法是为手机，平板电脑，桌面，大型桌面包含四种不同大小的不同图像，但只使用bootstrap的响应式实用程序类显示ONE，如下所示：
<!--<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>
Note: You can replace the commented line with the code provided. 注意：您可以使用提供的代码替换注释行。 Replace the php code if you're not using wordpress. 如果你不使用wordpress，请替换php代码。
Edit Note2: Yes, this adds requests to your server when loading the page which might slow down a bit but if you use a background css sprite technique, chances are the logo doesn't get printed when printing a page and the code above should get better SEO. 编辑注意2：是的，这会在加载页面时向服务器添加请求，这可能会减慢一些但是如果使用后台css精灵技术，则打印页面时可能无法打印徽标，上面的代码应该得到更好的SEO。
#6楼
my working code - bootstrap 3.0.3. 我的工作代码 - bootstrap 3.0.3。 when navbar-toggle, hidden-xs original logo image. 当navbar-toggle，hidden-xs原始徽标图像时。
<a class="navbar-brand hidden-xs" href="<?=$g4['path']?>/"><img src="<?=$g4[path]?>/images/logo_opencode.gif" align=absmiddle alt="brand logo"></a><a class="navbar-brand navbar-toggle" href="<?=$g4['path']?>/" style="border:0;margin-bottom:0;"><img src="<?=$g4[path]?>/images/logo_opencode.gif" alt="brand logo" style="width:120px;"></a>
带徽标的Bootstrap 3 Navbar相关推荐
- c#.net中创建带图标的ListBox
下面的代码实现了带图标的ListBoox的功能,可以直接拷贝即可运行.运行结果如下: using System; using System.Drawing; using System.Collecti ...
- CSS/HTML 5简洁带图标的input日期选择器
CSS/HTML 5简洁带图标的input日期选择器 说明 css代码 html代码 演示效果图 说明 演示效果分辨率为1980x1080分辨率效果 高度可定制修改 纯css代码控制 使用的input ...
- Qt之自定义带游标的QSlider
最近翻看6年前写了一篇关于QSlider的博客:Qt自定义带游标的slider,在滑块正上方显示当前值 发现存在很多问题,比如游标的坐标不准确:如果游标宽度稍大,滑到Slider最左或最右的时候会显示 ...
- 手把手教你学习IEC104协议和编程实现 八-协议的运行态(带时标的变位遥信及对时功能)
本章我们讲解带时标的变位遥信就是SOE. SOE SOE也可以叫带时标的遥信变位 9:29:47:759 上行I帧: [ 单点SOE ] ↑ 68 15 36 00 02 00 1E 01 03 00 ...
- 三、Bootstrap之Navbar属性整理
Bootstrap之Navbar属性整理 参考资料 container Navbar属性 参考资料 row和col可以参考一下: https://blog.csdn.net/yzy85/article ...
- bootstrap之navbar样式
一.前言 现在开始介绍bootstrap的导航条(navbar)样式. 二.源码 1.navbar.less 1.1.navbar.less源码 //// Navbars// ------------ ...
- Leaflet中使用awesome-markers插件显示带图标的marker
场景 Vue+Leaflet实现加载OSM显示地图: Vue+Leaflet实现加载OSM显示地图_BADAO_LIUMANG_QIZHI的博客-CSDN博客 在上面的基础上,实现Marker上带图标 ...
- bootstrap之navbar
.navbar--设置nav元素为导航条组件: .navbar-default--指定导航条组件为默认主题: .navbar-inverse--指定导航条组件为黑色主题: .navbar-fixed- ...
- html css 带图标按钮,Bootstrap带图标的按钮样式
这是一款基于bootstrap的带图标的按钮样式.这组按钮在bootstrap按钮的基础上,通过附加的HTML元素来构建小图标,并通过CSS3来制作鼠标hover动画效果. 使用方法 在页面中引入bo ...
最新文章
- Flash中如何使用滤镜
- const的用法,特别是用在函数前面与后面的区别
- DevExpress的下拉框控件ComboxBoxEdit怎样绑定键值对选项
- 百斗度输入法linux,斗字输入法安卓版-斗字输入法app下载-最火软件站
- 名为 cursor_jinserted 的游标不存在_性能优化技巧 - 程序游标
- 矩形法求定积分的原理和实现
- java log4j logback jcl_内部分享：如何解决Java日志框架冲突问题。
- PHP中的foreach遍历数组
- lombok 简化代码_如何编写更少，更好的代码，或Project Lombok
- 高中学生计算机软件,中学生计算器
- 【计算机网络】——流量控制与可靠传输机制
- 再谈 Formsville
- 一个优秀的测试如何在敏捷开发中体现自己的价值？
- python字典中get()函数的用法总结
- 大学上计算机课要准备笔记本电脑吗,大一新生需要买笔记本电脑吗 有必要吗...
- virsh、qemu-img基本管理操作
- dell服务器重装iso系统,戴尔R620安装windows2012R2过程和方法
- 人生就是游戏，你如何遵守游戏规则？
- SRAM/SDRAM/DDR/Cache
- 流行的蓝光影片播放器推荐