解决方法
为此,您的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; }