折叠面板:修订间差异
更新日期: 2024-06-03 最新编辑:郑妹仙
无编辑摘要 |
无编辑摘要 |
||
第1行: | 第1行: | ||
<div class="panel-group"> | <div class="panel-group"> | ||
<div class="panel panel-info | <div class="panel panel-info"> | ||
<div class="panel-heading">测试标题1</div> | <div class="panel-heading">测试标题1</div> | ||
<div class="mw-collapsible mw-made-collapsible mw-collapsed"> | <div class="mw-collapsible mw-made-collapsible mw-collapsed"> | ||
<div | <div class="panel-body panel-collapse"> | ||
<a href="#" target="_blank">DNF手游装备打造攻略</a> | |||
</div> | |||
<div class="panel-body panel-collapse"> | |||
<a href="#" target="_blank">强化系统玩法攻略详解</a> | |||
</div> | |||
</div> | </div> | ||
</div> | </div> | ||
<div class="panel panel-info | <div class="panel panel-info"> | ||
<div class="panel-heading">测试标题2</div> | <div class="panel-heading">测试标题2</div> | ||
<div class="mw-collapsible mw-made-collapsible mw-collapsed"> | <div class="mw-collapsible mw-made-collapsible mw-collapsed"> | ||
<div | <div class="panel-body panel-collapse"> | ||
<a href="#" target="_blank">DNF手游装备打造攻略</a> | |||
</div> | |||
<div class="panel-body panel-collapse"> | |||
<a href="#" target="_blank">强化系统玩法攻略详解</a> | |||
</div> | |||
</div> | </div> | ||
</div> | </div> | ||
第17行: | 第27行: | ||
{{#css: | {{#css: | ||
.panel-group { | .panel-group { | ||
margin-bottom: 20px | |||
} | } | ||
.panel-group .panel { | .panel-group .panel { | ||
margin-bottom: 0; | |||
border-radius: 4px; | |||
} | font-size: 18px; | ||
} | |||
.panel-group .panel+.panel { | .panel-group .panel+.panel { | ||
margin-top: 5px | |||
} | } | ||
.panel-heading { | |||
} | padding: 10px 15px; | ||
border-bottom: 1px solid transparent; | |||
border-top-left-radius: 3px; | |||
border-top-right-radius: 3px; | |||
font-weight: bold; | |||
} | |||
.panel-group .panel-heading+.panel-collapse>.list-group,.panel-group .panel-heading+.panel-collapse>.panel-body { | .panel-group .panel-heading+.panel-collapse>.list-group, | ||
.panel-group .panel-heading+.panel-collapse>.panel-body { | |||
} | border-top: 1px solid #ddd | ||
} | |||
.panel-group .panel-footer { | .panel-group .panel-footer { | ||
border-top: 0 | |||
} | } | ||
.panel-group .panel-footer+.panel-collapse .panel-body { | .panel-group .panel-footer+.panel-collapse .panel-body { | ||
border-bottom: 1px solid #ddd | |||
} | |||
} | |||
.panel-info | .panel-info { | ||
border-color: #bce8f1 | |||
} | |||
} | |||
.panel-info>.panel-heading | .panel-info>.panel-heading { | ||
color: #31708f; | |||
} | background-color: #d9edf7; | ||
border-color: #bce8f1 | |||
} | |||
.panel-info>.panel-heading . | .panel-info>.panel-heading+.panel-collapse>.panel-body { | ||
border-top-color: #bce8f1 | |||
} | |||
} | |||
.panel-info>.panel-footer+.panel-collapse>.panel-body { | .panel-info>.panel-heading .badge { | ||
color: #d9edf7; | |||
} | background-color: #31708f | ||
} | |||
.panel-body{ | |||
padding: 10px 15px; | |||
} | |||
.panel-body a{ | |||
color: #202122; | |||
} | |||
.panel-body a:hover{ | |||
text-decoration: underline; | |||
} | |||
.panel-info>.panel-footer+.panel-collapse>.panel-body { | |||
border-bottom-color: #bce8f1 | |||
} | |||
}} | }} |