Есть ли какой-либо простой способ использования bootstrap 3-панелей в bootstrap 2.3. Из того, что я вижу, стилизация панелей - это новая функция в BS 3.
Можете ли вы использовать панели в Bootstrap 2.3
Ответ 1
Для этого ваш код 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, 0, 0.05);
box-shadow: 0 1px 1px rgba(0, 0, 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;
}
Ответ 2
Если вы планируете поместить таблицу внутри панели, вы также захотите добавить
.panel>.table, .panel>.table-responsive>.table {
margin-bottom: 0;
}