Question

我可以像下面的bootstrap css脚本一样创建一个css面板而不使用bootstrap库

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

是否可以在没有bootrap库的情况下创建独立的css面板。非常感谢

Answer 1

这是怎么开始的。＆＃39;框之后的数字＆＃39;指你想要连续多少个，你需要相应地调整css中该box类的宽度，3％为33％，4为25％等等。

＆＃13;

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

＆＃13;

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

＆＃13;

自定义div面板css

1 个答案: