如何改变bootstrap的颜色? [英] How change the color of bootstrap ?

查看:174
本文介绍了如何改变bootstrap的颜色?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述





我在我的网络项目上工作我正在起诉我,我在标题背景颜色,正文和页脚之间做了不同的工作。像这样:

Hi,

I working on my web project I'm suing the bootstrap and I make a different between the header background color, body and footer. like this :

-----------------------------
|       HEADER               |
|----------------------------|
|                            |
|                            |
|     BODY                   |
|                            |
|                            |
|----------------------------|
|         FOOTER             |
|-----------------------------



默认的bootstarp它就像白色然后当使用逆时,背景的颜色变成黑色。但我希望背景上的其他颜色不使用黑色或白色。我不知道编码问题。我卡住了我只是使用bootstrap中的默认css。这是标题内容中的html代码:




the default of bootstarp it's like white then when using the inverse the color of background turn to black. But i want other color on the background not using black or white. And I got no idea to code the problem. I stuck. I just using the default css from bootstrap. this is the html code from the header content :

<!DOCTYPE HTML>
<html>
   <header>
       <!-- All connection CSS and JS from Bootstrap -->
       <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
       <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
       <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
       
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       
       <title>rafidkarim</title>
    </header>
    
<body>
       <div class="navbar navbar-default navbar-static-top">
            <div class="container">
               <a href="index.html" class="navbar-brand">
                   <img src="images/rafidkarim3.png"/>
                </a>
                
                <button class="navbar-toggle" data-toggle = "collapse" data-target=".navHeaderCollapse">
                   <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                
                <div class="collapse navbar-collapse navHeaderCollapse">
                     <ul class="nav navbar-nav navbar-right">
                    
                         <li class="active"><a href="#">HOME</a></li>
                         <li><a href="#">PRODUCT</a></li>
                    </ul>
               </div>
            </div>
      </body>
</html>

推荐答案

将bootstrap css覆盖到您自己的css ,例如。 bootstrap有 .btn-danger 并使用红色颜色。所以你可以做的是,改变这个按钮的颜色。

创建你自己的.css文件并将它引用到你的html,并在其中编写bootstrap重写的css类。



现在,回答你的问题就好了,

Override the bootstrap css to your own css, e .g. bootstrap has .btn-danger and uses red color for it. So what you can do is, change the color for this button.
Create your own .css file and reference it to your html, and write the bootstrap overridden css classes in it.

Now, answer to your question would be something like,
.navbar 
{
    background-color:#f44;
    color:#fff;
    border:0;
}



我刚刚覆盖了bootstrap的导航栏风格到我自己的风格。

确保你不要在任何bootstrap的样式表中进行更改。 jQuery。创建具有相同名称类的自定义css,并根据您的意愿覆盖css规则。



希望清楚:)



-KR


I just overridden the bootstrap's navbar style to my own style.
Make sure that you don't make changes in any of the bootstrap's stylesheets & jQuery. Create you custom css with the same name class and override the css rule to your wish.

Hope that's clear :)

-KR


颜色由3个(或4个)组成部分组成:红色,绿色,蓝色(最终是透明度)。



获得给定颜色的相反颜色的公式为:

A color is composed of 3 (or 4) components : red, green, blue (and eventually transparency).

The formula to get the 'opposite' color of a given color is:
Color originalColor;

Color oppositeColor = Color.FromARGB(
   originalColor.A,       // Here I keep the same transparency value
   255 - originalColor.R,
   255 - originalColor.G,
   255 - originalColor.B
);



希望这有帮助。


Hope this helps.


这篇关于如何改变bootstrap的颜色?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆