創建引導面板和樣式

嗨，大家一直在玩弄引導pannels並試圖理解這一切。我正嘗試在其他面板內重新創建一些面板。創建引導面板和樣式

因此，例如這個網站：Website

是使用引導pannels爲他們重新複製。這是我試圖用面板重新創建，但我不知道如何2這樣做。到目前爲止，但它看起來並不像所有

代碼的一個網站上我已經做到了這一點：

<div id="mainContainer" class="container"> 
    <div class = "pannels"> 
    <div class="panel panel-default"> 
     <div class="panel-heading">Panel Title</div> 
     <div class="panel-body"> 
     <div class="row"> 
      <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"> 
      <div class="panel panel-default"> 
       <div class="panel-body"> 
       </div> 
      </div> 
      <div class="panel panel-default"> 
       <button type="button" class="btn btn-success">Success</button> 
      </div> 
      </div> 
      <div class="col-lg-10 col-md-9 col-sm-8 col-xs-6"> 
      <h4> 
      List Title 
      </h4> 
      <ul class="list-group"> 
       <li class="list-group-item">Item One</li> 
       <li class="list-group-item">Item Two</li> 
       <li class="list-group-item">Item One</li> 
       <li class="list-group-item">Item Two</li> 
       <li class="list-group-item">Item One</li> 
      </ul> 
      </div> 
     </div> 
     </div> 
     <div class="panel-footer"> 
     Here comes some text 
     </div> 
    </div> 
    </div> 
</div>

我試圖讓一切合適的尺寸。因此，例如我的圖片選項卡與網站相比尺寸不正確，而且我正在重新創建問題。我也在努力縮小整個窗戶面板。我不知道我是否應該使用CSS來做到這一點或bootstrap等

無論如何，任何幫助將是偉大的。

謝謝

來源

2016-02-23 Nevershow2016

引導沒有非常具體的樣式，比如你在找什麼。您將不得不使用CSS，也許會覆蓋默認的Bootstrap樣式以獲得您想要的結果。 – 4castle

好吧，但要得到佈局，這將在bootstrap完成？ – Nevershow2016

是的，Bootstrap是一個用於高度常見佈局和功能的庫，因此它是入門的絕佳選擇。您可以通過在Bootstrap CSS文件之後鏈接您自己的CSS文件**，通過重新定義具有所需寬度，高度，邊距，填充，顏色等的各種類來對其佈局進行個性化調整。 – 4castle

使用CSS。所以在你的head標籤中添加一個鏈接到你自己的CSS文件，它添加了你想要的樣式。但請確保鏈接引導CSS文件後後。

Ex。

<link rel="stylesheet" type="text/css" href="--Bootstrap URL Here--"/> 
<link rel="stylesheet" type="text/css" href="myCustomCSSFile.css"/>

內。然後myCustomCSSFile.css像放東西：你想

panel > panel { 
    height: 50%; 
    background-color: orange; 
}

或任何風格。

這裏有一個CSS教程：W3Schools CSS Tutorial

來源

2016-02-23 15:19:09 4castle

創建引導面板和樣式

回答

相關問題