定製DIV面板CSS

Question

我可以創建一個CSS面板就像下面舉的CSS腳本，而不使用引導程序庫

<style type="text/css"> 

.panel-custom-horrible-red { 
    border-color: #ff0000; 
} 
.panel-custom-horrible-red > .panel-heading { 
    background: #ff0000; 
    color: #ffffff; 
    border-color: #ff0000; 
} 
</style> 

HTML

<div class="panels panels-custom-horrible-red"> 
    <div class="panels-heading"> 
     <h3 class="panel-title">Panel title</h3> 
    </div> 
    <div class="panel-body"> 
     Panel content 
    </div> 
</div> 

是否有可能創建一個獨立的CSS面板沒有引導庫。許多謝謝

Answer 1

這是如何開始。 'box'後面的數字表示您想要連續放置多少個數，並且您需要相應地調整css中的該類的寬度，例如33％爲3，25％爲4等。

.box { 
 
    position: relative; 
 
    width: 100%; 
 
    background-color: pink; 
 
} 
 
.box2 { 
 
    position: relative; 
 
    float: left; 
 
    width: 49.5%; 
 
    border: 2px solid black; 
 
    background-color: lightblue; 
 
} 
 
.clear-float { 
 
    clear: both 
 
}

<div class='box'> 
 
    <div class='box2'> 
 
    contained box 
 
    </div> 
 
    <div class='box2'> 
 
    contained box 
 
    </div> 
 
    <div class='box2'> 
 
    contained box 
 
    </div> 
 
    <div class='clear-float'> 
 
    </div> 
 
</div>