Question

例如，在此导航栏中：

    <nav class="navbar navbar-inverse" role="navigation">
        <div class="navbar-header">
            <a class="navbar-brand" href="/">Brand</a>
        </div>
    </nav>

我应该如何添加公司徽标？ Bootstrap有很多类，我不知道最好的方法是什么。我应该在锚中添加一个img标签吗？是否有一个特定的类添加图像（w /精灵）？

Answer 1

您可以使用此代码添加徽标，将图片路径放在给定的代码中希望这会对你有所帮助

`<div class="menu-xs visible-xs navbar-inverse">

    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbarCollapse">
        <span class="sr-only">The Logo</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>

    <button class="navbar-toggle glyphicon glyphicon-search pull-right search" data-toggle="collapse" data-target="#navbarSearch">&nbsp;
    </button>

</div>

//below is menu
<div class="collapse navbar-collapse" id="navbarCollapse">
                <ul class="nav navbar-nav visible-xs menu-items">
                    <li><a href="index.php">Home</a></li>
                    <li><a href="myacc.php">My Account</a></li>
                    <li><a href="register_xs.php">Register</a></li>
                </ul>
</div>
   //below is search bar
    <div class="collapse navbar-collapse search-mobile" id="navbarSearch">
                <ul class="nav navbar-nav visible-xs menu-items">
                    <li>
            <form class="form-horizontal" action="mblsearch.php" method="get">
                <label class="label">Search: </label>
                <input type="text" name="title" placeholder="Search..." />&nbsp;&nbsp;
                <button type="submit" class="navbar-toggle search glyphicon glyphicon-search">&nbsp;</button>
            </form>
        </li>
                </ul>
</div>
   //this is your logo
<img class="pull-left logo visible-xs" src="images/logo.png" />`

Answer 2

我为导航栏中的徽标制作了一个基本的小提琴。您只需将图像添加到导航栏品牌即可。你需要调整css。

logo in navbar

<a class="navbar-brand" href="#"><img src="http://lorempixel.com/50/50/"/></a>

Bootstrap在导航栏中添加徽标

2 个答案: