2017-04-21 3 views
0

Von diesem Bildschirm greifen möchte ich ähnliche Grenzen haben & Hintergrundfarben auf meine Divs. Ich benutze das Bootstrap-Framework. Welche CSS-Eigenschaft oder JS-Bibliothek sollte ich verwenden?
screengrabHTML Bootstrap Borders/Panels

+0

eine verkürzte Link zu verwenden ist gegen die Gemeinschaftspolitik. Bitte ändere es. – AHBagheri

Antwort

1

Sie brauchen nur CSS, das ist nur ein Beispiel, aber Sie können alles, was Sie wollen, auf Stil.

.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>