简体   繁体   English

自定义引导程序导航栏颜色

[英]customize bootstrap navbar color

I have a navigation bar where I have used the bootstrap framework. 我有一个使用引导框架的导航栏。

I would like to customize that navigation bar, but the bootstrap.min.css is of course impossible to read. 我想自定义该导航栏,但是bootstrap.min.css当然是无法阅读的。 I would fx like to change the color, font and transparency on the nav bar. 我想FX更改导航栏上的颜色,字体和透明度。 Is there anybody how knows how I could do that? 有谁知道我该怎么做? Can I overwrite those part of boostrap css some how? 我可以通过一些方式覆盖boostrap CSS的那些部分吗? I have looked around on stackoverflow, but there is nothing that solves my problem, even if the question related to this have been up before. 我已经看过stackoverflow,但是没有什么可以解决我的问题的,即使以前与此有关的问题已经解决了。

Here is my navigation bar: 这是我的导航栏:

<nav class="navbar navbar-default navbar-fixed-top topnav" role="navigation">
        <div class="container topnav">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <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 topnav" href="#">Start Bootstrap</a>
            </div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                    <li>
                        <a href="#about">About</a>
                    </li>
                    <li>
                        <a href="#services">Services</a>
                    </li>
                    <li>
                        <a href="#contact">Contact</a>
                    </li>

            <!-- Login Form -->
     <ul class="nav navbar-nav navbar-right">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown"><b>Login</b> <span class="caret"></span></a>
            <ul id="login-dp" class="dropdown-menu">
                <li>
                     <div class="row">
                            <div class="col-md-12">
                                Login via
                                <div class="social-buttons">
                                    <a href="#" class="btn btn-fb"><i class="fa fa-facebook"></i> Facebook</a>
                                    <a href="#" class="btn btn-tw"><i class="fa fa-twitter"></i> Twitter</a>
                                </div>
                                or
                                 <form class="form" role="form" method="post" action="login" accept-charset="UTF-8" id="login-nav">
                                        <div class="form-group">
                                             <label class="sr-only" for="exampleInputEmail2">Email address</label>
                                             <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Email address" required>
                                        </div>
                                        <div class="form-group">
                                             <label class="sr-only" for="exampleInputPassword2">Password</label>
                                             <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password" required>
                                             <div class="help-block text-right"><a href="">Forget the password ?</a></div>
                                        </div>
                                        <div class="form-group">
                                             <button type="submit" class="btn btn-primary btn-block">Sign in</button>
                                        </div>
                                        <div class="checkbox">
                                             <label>
                                             <input type="checkbox"> keep me logged-in
                                             </label>
                                        </div>
                                 </form>
                            </div>
                            <div class="bottom text-center">
                                New here ? <a href="#"><b>Join Us</b></a>
                            </div>
                     </div>
                </li>
            </ul>
        </li>
      </ul>
           <!-- /.Login Form -->
        </div>
        <!-- /.container -->
    </nav>

Ofcourse you can overwrite those styles provided by default bootstrap. 当然,您可以覆盖默认引导程序提供的那些样式。 But its very much advisable to overwrite them using another own custom stylesheet. 但是非常建议使用另一个自定义样式表覆盖它们。 When you do this always make sure your custom stylesheet is called after the bootstrap.css stylesheet. 执行此操作时,请始终确保bootstrap.css样式表之后调用自定义样式表。

Next questions comes how do you overwrite these styles and how do we know from which components do these styles come from. 接下来的问题是如何覆盖这些样式以及如何知道这些样式来自哪些组件。 There are couple of ways to do it. 有几种方法可以做到这一点。 Either you need to start going through the bootstrap components on their website and get used to the default classes and overwrite them -- or -- you can make use of your browser's Developer Tools (Ctrl + Shift + i in Chrome) to check which is the class which is responsible for the style and overwrite them. 您需要开始浏览其网站上的引导程序组件并习惯默认类并覆盖它们-或者-您可以使用浏览器的开发人员工具(Chrome中的Ctrl + Shift + i)来检查哪个负责样式的类并覆盖它们。

在此处输入图片说明

Say now you want to change the navbar background color considering your example, now we know that the background color comes from the class named navbar-default from bootstrap.css . 现在说,您想考虑您的示例来更改导航栏背景色,现在我们知道背景色来自bootstrap.css名为navbar-default的类。 Now all we need to do is overwrite the already existing background-color coming from bootstrap stylesheet to our own color using our custom stylesheet. 现在,我们需要做的就是使用自定义样式表将自引导样式表中已经存在的background-color覆盖为我们自己的颜色。 like so 像这样

.navbar-default {
  background-color: green;
}

Hope this helps. 希望这可以帮助。 Fiddle here 在这里摆弄

The changing of the navbar color is relatively easy if you use the aria role="navigation". 如果您使用aria role =“ navigation”,则导航栏颜色的更改相对容易。

[role="navigation"]{ background-color: #F58C14; }

You've got some bigger picture issues with regard to your bootstrap syntax. 关于引导程序语法,您遇到了一些更大的问题。 You have duplicated 您已复制

           <!-- Login Form -->
 <ul class="nav navbar-nav navbar-right">

but you've already opened that <ul class="navbar-right a few lines up above. 但是您已经打开了<ul class="navbar-right上方几行。

You also have got the widths of the columns being specified too high. 您还指定了太宽的列的宽度。 This will cause collapse issues in BOOTSTRAP when in mobile breakpoints. 在移动断点时,这将导致BOOTSTRAP中的崩溃问题。

Please see this fiddle for what I think you're looking for. 请查看此小提琴,了解我想寻找的东西。 Dropdown side nav with aria css call 带有aria CSS调用的下拉侧导航

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM