2015-04-22 73 views
3

我試圖用Twitter Bootstrap運氣。我處於開始階段,只是想定製原來的Carousel預定義主題 - http://getbootstrap.com/examples/carousel/,我已經下載並放在我的localhost中。無法更改背景旋轉木馬顏色

我使用Chrome開發人員工具查看是否可以根據我的要求將黑色背景更改爲更令人愉快的顏色。我甚至找不到使用顏色選擇器的顏色 - #777777。這與圓圈中的顏色相同。但是這種顏色在css中沒有提及,因爲顏色可能是較暗的,而不透明度會顯示較淺的顏色。

我能夠改變旋轉木馬導航背景漸變,但我一直在努力尋找如何改變背景顏色。

我試圖在css中搜索背景,並且還檢查了http://bootstrap-live-customizer.com/(BLC)以查看我是否可以自定義它。但是這種特定的顏色並不在要定製的東西列表中。然後我下載了bootstrap.min.css從BLC但結果是相同的

我使用的是默認的頁面在Github上的文檔/例子/轉盤可用

相關章節

<!-- Carousel 
================================================== --> 
<div id="myCarousel" class="carousel slide" data-ride="carousel"> 
    <!-- Indicators --> 
    <ol class="carousel-indicators"> 
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
    <li data-target="#myCarousel" data-slide-to="1"></li> 
    <li data-target="#myCarousel" data-slide-to="2"></li> 
    </ol> 
    <div class="carousel-inner" role="listbox"> 
    <div class="item active"> 
     <img class="first-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="First slide"> 
     <div class="container"> 
     <div class="carousel-caption"> 
      <h1>Example headline.</h1> 
      <p>Note: If you're viewing this page via a <code>file://</code> URL, the "next" and "previous" Glyphicon buttons on the left and right might not load/display properly due to web browser security rules.</p> 
      <p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p> 
     </div> 
     </div> 
    </div> 
    <div class="item"> 
     <img class="second-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Second slide"> 
     <div class="container"> 
     <div class="carousel-caption"> 
      <h1>Another example headline.</h1> 
      <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> 
      <p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p> 
     </div> 
     </div> 
    </div> 
    <div class="item"> 
     <img class="third-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Third slide"> 
     <div class="container"> 
     <div class="carousel-caption"> 
      <h1>One more for good measure.</h1> 
      <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> 
      <p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p> 
     </div> 
     </div> 
    </div> 
    </div> 
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> 
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
    <span class="sr-only">Previous</span> 
    </a> 
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> 
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
    <span class="sr-only">Next</span> 
    </a> 
</div><!-- /.carousel --> 

CSS是缺省的bootstrap.min.css沒有改變。我試圖在.item,.containter,.carousel上更改CSS項目及其變體的背景。

據我所知,Twitter Bootstrap非常有名,我敢肯定我只是錯過了一些非常簡單的事情,更高級的用戶將能夠向我展示正確的方式來做到這一點。 css對於初始階段的任何引導迭代都是一樣的,所以我沒有提供任何css(因爲它太多了)。

我搜索周圍,發現了幾個stackoverflow q &一個但沒有幫助我。

回答

2

我在想要將具有相同顏色的圓圈更新爲實際圖像時找到了答案。 CSS不工作,因爲背景是通過src本身生成的。

src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" 

此代碼創建了灰色背景。將此更改爲無效可解決問題。

2

相信對於轉盤背景CSS選擇如下:

.carousel .item { 
    background-color: #777; 
} 

我不認爲作爲默認情況下,背景色是bootstrap.css文件中,但是從着眼於引導例子定義關閉他們的網站,這似乎是他們正在使用的選擇器。

+0

不會改變一件事情。我之前也做過這樣的改變,但是再次嘗試沒有結果 –

+1

@SaudKazia爲我工作,在這裏看到結果:http:// www。bootply.com/Dqf5ZE3Ept – Muggles

+0

我已經回答了爲什麼它不起作用,解決方案 –

1

本文將展示如何可以改變這一字符串的5個字符R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw ==以產生你想自舉對象的任何顏色: http://micheljansen.org/blog/entry/1238

例如改變字符串數據:圖像/ GIF; base64,R0lGODlhAQABAPAAAP8AAP /// yH5BAAAAAAALAAAAAABAAEAAAICRAEAOw ==會產生一個紅色物體