Question

我有一个问题：我想在这样的Bootstrap中创建一个导航菜单

在Photoshop中制作的

但是在这张图片中放置徽标的最简单方法是什么。（黑色部分是幻灯片）我还想知道在菜单项之间使用分隔符制作菜单的最简单方法是什么。这是我现在的HTML代码：

<header>


    <div class="container">
  <div class="row">
    <div class="col-sm-4">
    </div>
    <div class="col-sm-4">
    </div>
    <div class="col-sm-2"> 
      <i class="fa fa-phone" aria-hidden="true"></i><p>06 12345678</p>
    </div>
      <div class="col-sm-2"> 
          <i class="fa fa-envelope" aria-hidden="true"></i><p>info@mail.nl</p>
    </div>
  </div>
</div>


    </header>
            <div class="container">
<nav class="navbar">

            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-menu" aria-expanded="false">
                    <span>Menu</span>
                    <span class="glyphicon glyphicon-menu-hamburger">
                </button>
                <a class="navbar-brand" href="#">
                    <img src="images/logo.png">
                </a>
            </div>
            <div class="collapse navbar-collapse" id="main-menu">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#" class="nav-selected">CURRENT</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">page2 <span class="caret"></span></a>
                        <ul class="dropdown-menu arrow_box">
                            <li><a href="#">dropdownpage1</a></li>
                            <li><a href="#">dropdownpage2</a></li>
                        </ul>
                    </li>
                    <li><a href="#">page3</a></li>
                    <li><a href="#">Page4</a></li>
                    <li role="separator" class="divider"><a href="#">page5</a></li>
                </ul>
            </div>
    </nav>
            </div>

这里是css：

nav{
    background:#fff;
    width:100%;
    padding:0px 30px;
}

.navbar-header{
    display:block; 
    text-align:center;
    height:80px;
}

    .navbar-header img{
        margin:0px auto;
        height:45px;
    }

    a.navbar-brand{
        padding:20px 30px; 
        position: absolute; 
        width:auto; 
        left:0; 
        top:0; 
        text-align:center; 
        margin:auto;
    }

    .navbar-collapse.collapse{
        padding:0px; 
        white-space: nowrap;
    }

    .navbar{
        background:#fff;
        width:100%; 
        margin:0px;
        padding-left: 0px;
        padding-right: 15px;
        z-index:10; 
        border: 0px solid transparent;
        border-radius:0px
    }

    .navbar > div{
        margin-left: 0px;
        margin-right: 0px;
    }


    .collapse, .nabar-right{
        margin-right: 0px!important;
    }

        .navbar ul li a{
            background:none; 
            text-transform:uppercase; 
            font-family: 'Open Sans', sans-serif;
            font-weight:300; 
            font-size:14px; 
            color:#000; 
            letter-spacing: 0.035em;
            text-decoration: none;
        }



ul.nav li.open ul.dropdown-menu li{
             padding:0px 0px;
        }

        .navbar ul li a:hover{
            background:#ffffff; 
            color:#22257a!important;
        }

        .navbar ul li a:active{
            background:none;
        }

.nav-selected{color:#22257a!important; font-weight:700;}
.navbar a.nav-selected{color:#22257a!important; font-weight:700;}
.navbar ul li.nav-path-selected .dropdown-toggle{color:#22257a;  font-weight:700;}
/*-------------------------------------------------*/

.caret {
    color: #000000;
    -webkit-transition: color 0.2s; /* Safari */
    transition: color 0.2s;
}
.dropdown-menu>.active>a, .dropdown-menu>.active>a:focus, .dropdown-menu>.active>a:hover {
    background-color: transparent;
    color: #000000 !important;
}

.dropdown-menu {
    border:1px solid #f1f1f1;
    border-radius: 0;
    box-shadow: none;
    margin-top: -15px;
    padding:0px 0px;
}

.dropdown-menu li {
    padding: 2px 16px 2px 16px;
}

.dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover {
    background-color: transparent;
}

.dropdown-menu a {
    color: #777777 !important;
}

.dropdown-menu > li > a {
    padding: 8px 14px;
}
i {
    color: white;
}
header {
    width: 100%;
    height: 50px;
    background-color: #4d4d4d;
}
header p{
    color:white;
}
header i {
    float:left; 
    padding-right: 10px;
}

Answer 1

除非我遗漏了你所追求的内容，否则你应该可以使用CSS将内容放在任何地方。

UIGraphicsBeginImageContextWithOptions(viewBackground.bounds.size, viewBackground.opaque, 0.0);
[viewBackground.layer renderInContext:UIGraphicsGetCurrentContext()];
UIImage * img = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();

[[UINavigationBar appearance]            setBackgroundImage:img forBarMetrics:UIBarMetricsDefault];
[self.navigationController.navigationBar setBackgroundImage:img forBarMetrics:UIBarMetricsDefault];

Bootstrap导航/标题，分隔符，徽标

1 个答案: