Слияние кода завершено, страница обновится автоматически
<?php
/*
Template Name: 样式参考页面
*/
?>
<?php get_header(); ?>
<header class="bs-masthead well">
<h1>CSS样式参考</h1>
<div class="alert alert-info"><p>通过对应的CSS样式调用，我们可以把自己的文章变得更加丰富多彩。</p></div>
</header>
<section class="well">
<div id="btn-css">
<div class="page-header">
<h1>按钮样式CSS</h1>
</div>
<h3>样式预览：</h3>
<div class="alert">
<button type="button" class="btn btn-default">默认</button>
<button type="button" class="btn btn-primary">主要</button>
<button type="button" class="btn btn-success">成功</button>
<button type="button" class="btn btn-info">信息</button>
<button type="button" class="btn btn-warning">警告</button>
<button type="button" class="btn btn-danger">危险</button>
<button type="button" class="btn btn-link">链接</button>
</div>
<h3>代码调用：</h3>
<div class="alert">
<p><code><button type="button" class="btn btn-default">默认</button></code></p>
<p><code><button type="button" class="btn btn-primary">主要</button></code></p>
<p><code><button type="button" class="btn btn-success">成功</button></code></p>
<p><code><button type="button" class="btn btn-info">信息</button></code></p>
<p><code><button type="button" class="btn btn-warning">警告</button></code></p>
<p><code><button type="button" class="btn btn-danger">危险</button></code></p>
<p><code><button type="button" class="btn btn-link">链接</button></code></p>
</div>
<h3>说明：这些btn类都可以放入到a标签中进行使用</h3>
<div class="alert">
<p><code><a href="#" class="btn btn-default">默认</a></code></p>
</div>
</div>
<br>
<div id="alert-css">
<div class="page-header">
<h1>背景样式CSS</h1>
</div>
<h3>样式预览：</h3>
<div class="alert">
<div class="alert alert-success">这是成功背景框</div>
<div class="alert alert-info">这是信息背景框</div>
<div class="alert alert-warning">这是警告背景框</div>
<div class="alert alert-danger">这是危险背景框</div>
</div>
<h3>代码调用：</h3>
<div class="alert">
<p><code><div class="alert alert-success">这是成功背景框</div></code></p>
<p><code><div class="alert alert-info">这是信息背景框</div></code></p>
<p><code><div class="alert alert-warning">这是警告背景框</div></code></p>
<p><code><div class="alert alert-danger">这是危险背景框</div></code></p>
</div>
<h3>说明：如果想要给背景框添加关闭按钮，则要添加一个class以及一个button标签</h3>
<div class="alert">
<div class="alert alert-warning alert-dismissable">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
警告框！这是一个可以关闭的警告框。
</div>
<p><code><div class="alert alert-warning alert-dismissable"></code></p>
<p><code> <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button></code></p>
<p><code>警告框！这是一个可以关闭的警告框。</code></p>
<p><code></div></code></p>
</div>
</div>
<br>
<div id="block-css">
<div class="page-header">
<h1>引用文段样式CSS</h1>
</div>
<h3>样式预览：</h3>
<div class="alert">
<blockquote>这是引用文段样式</blockquote>
</div>
<h3>代码调用：</h3>
<div class="alert">
<p><code><blockquote>这是引用文段样式</blockquote></code></p>
</div>
<h3>说明：可以在文章编辑器上的小按钮快速调用该样式</h3>
</div>
<div id="block-panel">
<div class="page-header">
<h1>折叠样式CSS</h1>
</div>
<h3>样式预览：</h3>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
Collapsible Group Item #1
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
Collapsible Group Item #1 Content
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
Collapsible Group Item #2
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
Collapsible Group Item #2 Content
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
Collapsible Group Item #3
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
Collapsible Group Item #3 Content
</div>
</div>
</div>
</div>
<h3>代码调用：</h3>
<div class="alert">
<p><code><div class="panel-group" id="accordion"></code></p>
<p><code><div class="panel panel-default"></code></p>
<p><code><div class="panel-heading"></code></p>
<p><code><h4 class="panel-title"></code></p>
<p><code><a data-toggle="collapse" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"></code></p>
<p><code>Collapsible Group Item #1</code></p>
<p><code></a></code></p>
<p><code></h4></code></p>
<p><code></div></code></p>
<p><code><div id="collapseOne" class="panel-collapse collapse in"></code></p>
<p><code><div class="panel-body"></code></p>
<p><code>Collapsible Group Item #1 Content</code></p>
<p><code></div></code></p>
<p><code></div></code></p>
<p><code></div></code></p>
<p><code><div class="panel panel-default"></code></p>
<p><code><div class="panel-heading"></code></p>
<p><code><h4 class="panel-title"></code></p>
<p><code><a data-toggle="collapse" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"></code></p>
<p><code>Collapsible Group Item #2</code></p>
<p><code></a></code></p>
<p><code></h4></code></p>
<p><code></div></code></p>
<p><code><div id="collapseTwo" class="panel-collapse collapse"></code></p>
<p><code><div class="panel-body"></code></p>
<p><code>Collapsible Group Item #2 Content</code></p>
<p><code></div></code></p>
<p><code></div></code></p>
<p><code></div></code></p>
<p><code><div class="panel panel-default"></code></p>
<p><code><div class="panel-heading"></code></p>
<p><code><h4 class="panel-title"></code></p>
<p><code><a data-toggle="collapse" data-toggle="collapse" data-parent="#accordion" href="#collapseThree"></code></p>
<p><code>Collapsible Group Item #3</code></p>
<p><code></a></code></p>
<p><code></h4></code></p>
<p><code></div></code></p>
<p><code><div id="collapseThree" class="panel-collapse collapse"></code></p>
<p><code><div class="panel-body"></code></p>
<p><code>Collapsible Group Item #3 Content</code></p>
<p><code></div></code></p>
<p><code></div></code></p>
<p><code></div></code></p>
<p><code></div></code></p>
</div>
</div>
<div id="block-qiangdiao">
<div class="page-header">
<h1>强调Class</h1>
</div>
<h3>样式预览：</h3>
<div class="bs-example">
<p class="text-muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
<p class="text-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
<p class="text-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
<p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
<p class="text-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>
</div>
<h3>代码调用：</h3>
<p><code><p class="text-muted">...</p></code></p>
<p><code><p class="text-primary">...</p></code></p>
<p><code><p class="text-success">...</p></code></p>
<p><code><p class="text-info">...</p></code></p>
<p><code><p class="text-warning">...</p></code></p>
<p><code><p class="text-danger">...</p></code></p>
</div>
<div id="block-qiangdiao">
<div class="page-header">
<h1>进度条效果</h1>
</div>
<h3>样式预览：</h3>
<div class="bs-example">
<div class="progress progress-striped active">
<div class="progress-bar" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
<span class="sr-only">45% Complete</span>
</div>
</div>
</div>
<h3>代码调用：</h3>
<p><code><div class="progress progress-striped active"></code></p>
<p><code><div class="progress-bar" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%"></code></p>
<p><code><span class="sr-only">45% Complete</span></code></p>
<p><code></div></code></p>
<p><code></div></code></p>
</div>
<div id="block-qiangdiao">
<div class="page-header">
<h1>面板</h1>
</div>
<h3>样式预览：</h3>
<div class="bs-example">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel panel-success">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel panel-warning">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel panel-danger">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
</div>
<h3>代码调用：</h3>
<p><code><div class="panel panel-primary">...</div></code></p>
<p><code><div class="panel panel-success">...</div></code></p>
<p><code><div class="panel panel-info">...</div></code></p>
<p><code><div class="panel panel-warning">...</div></code></p>
<p><code><div class="panel panel-danger">...</div></code></p>
</div>
</section>
<?php get_footer(); ?>
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Опубликовать ( 0 )