HTMLブートストラップの枠線/パネル

Question

この画面では、私のdivに背景の色が似ている&としたいと思います。私はブートストラップフレームワークを使用しています。どのCSSプロパティまたはJSライブラリを使用しますか？

Answer 1

あなたはちょうどcssが必要ですが、これは単なるサンプルにすぎませんが、あなたはスタイル上必要なものすべてを行うことができます。短縮リンクを使用して

.container{ 
 
    background-color: #F5F5F5; 
 
    height:200vh; 
 
    
 
    
 
    } 
 
.reset{ 
 
    margin:0px !important; 
 
    padding:0px !important; 
 
    } 
 
     
 
.box{ 
 
    height:200px; 
 
    background-color: white; 
 
    margin-top:10px; 
 
    border: 1px solid #E5E5E5; 
 
    border-radius:2px; 
 
    } 
 
    
 
#box-left{ 
 
    margin-right:5px; 
 
    
 
    } 
 

 
#box-left2{ 
 
    margin-right:5px; 
 
    
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 
<div class="container"> 
 
    <div class="row reset"> 
 
     <div class="col-xs-8 reset"> 
 
      <div id="box-left" class="box"> 
 
      </div> 
 
     </div> 
 
     <div class="col-xs-4 reset"> 
 
      <div class="box"> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    <div class="row reset"> 
 
     <div class="col-xs-2 reset"> 
 
      <div id="box-left2" class="box"> 
 
      </div> 
 
     </div> 
 
     <div class="col-xs-10 reset"> 
 
      <div class="box"> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    
 
</div>