twitter-bootstrap – 您可以在Bootstrap 2.3中使用面板

前端之家收集整理的这篇文章主要介绍了twitter-bootstrap – 您可以在Bootstrap 2.3中使用面板前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
是否有任何简单的方法在引导2.3中使用引导3面板。从我可以看到的面板样式是BS 3中的一个新功能

解决方法

为此,您的bootstrap.css代码必须具有面板的样式。所以你必须将以下样式粘贴到你的bootstrap.css / bootstrap.min.css文件中。如果您对更改核心文件不感兴趣,可以将其添加到您的css文件中。这样做后,您可以按照 http://getbootstrap.com/components/#panels中的代码进行操作。
.panel {
  padding: 15px;
  margin-bottom: 20px;
  background-color: #ffffff;
  border: 1px solid #dddddd;
  border-radius: 4px;
  -webkit-Box-shadow: 0 1px 1px rgba(0,0.05);
  Box-shadow: 0 1px 1px rgba(0,0.05);
}

.panel-heading {
  padding: 10px 15px;
  margin: -15px -15px 15px;
  font-size: 17.5px;
  font-weight: 500;      
  background-color: #f5f5f5;
  border-bottom: 1px solid #dddddd;
  border-top-right-radius: 3px;
  border-top-left-radius: 3px;
}

.panel-footer {
  padding: 10px 15px;
  margin: 15px -15px -15px;
  background-color: #f5f5f5;
  border-top: 1px solid #dddddd;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
}

.panel-primary {
  border-color: #428bca;
}

.panel-primary .panel-heading {
  color: #ffffff;
  background-color: #428bca;
  border-color: #428bca;
}

.panel-success {
  border-color: #d6e9c6;
}

.panel-success .panel-heading {
  color: #468847;
  background-color: #dff0d8;
  border-color: #d6e9c6;
}

.panel-warning {
  border-color: #fbeed5;
}

.panel-warning .panel-heading {
  color: #c09853;
  background-color: #fcf8e3;
  border-color: #fbeed5;
}

.panel-danger {
  border-color: #eed3d7;
}

.panel-danger .panel-heading {
  color: #b94a48;
  background-color: #f2dede;
  border-color: #eed3d7;
}

.panel-info {
  border-color: #bce8f1;
}

.panel-info .panel-heading {
  color: #3a87ad;
  background-color: #d9edf7;
  border-color: #bce8f1;
}

猜你在找的Bootstrap相关文章