|
一、添加bootstrap样式
在主题的header.php中，添加bootstrap样式
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
二、自定义页面中，使用BS样式
1、Jumbotron 大屏幕
<div class="container">
<div class="row">
<div class="col-md-9">
<div class="jumbotron" style="color:#39b3d7;background-color:#443">
<h1 >古典小说网<small>创意软件站</small></h1>
<p>致力于于 学习、工作中知识的记录管理<br>
致力于 教育软件开发<br>
致力于打造赏心悦目的阅读体验<br>
</p>
</div>
</div>
</div>
</div>
2 轮播
<div class="container">
<div class="row">
<div class="col-md-9">
<hr>
<table class="table table-hover">
<caption style="text-align: center;">快乐课堂</caption>
<tbody>
<tr>
<td>
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">快乐课堂</h3>
</div>
<div class="panel-body">
<h4 class="text-success text-center">
众多老师的实践选择，错过了，错过了肯定是您的损失。
</h4>
<blockquote>
<p class="text-info lead text-left">
【一】 个性开头白 唐诗、名言、英文、自定义 并可语音朗读出<br>
<hr>
【二】 点名、FLASH、倒计时、击鼓传花随机选组、随机选人、语音点名<br><hr>
【三】 完善的积分点名机制<br><hr>
【四】 QQ管理界面<br><hr>
【五】 课堂知识点、编辑阅读的 有声教案<br><hr>
【六】 软件与PPT完美融合，打开PPT后，自动适应到软件右侧，融为一体老师评价：这个软件好用，学生很积极很好，很有创意<br><hr>
【七】 考勤功能 ：旷课 迟到 请假<br><hr>
【八】 课堂表现 ：认真听讲、回答响亮、乱说话、欠交作业等 可自定义<br><hr>
【九】可扩充的插件：大屏编辑插件、课堂笔记插件<br><hr>
<br>
<strong>老师评价：</strong><br>
很好 很有创意<br>
这软件确实很实用<br>
不错、对教学很好<br>
学生很感兴趣<br>
这个软件在小组教学中，很有帮助
</p>
</blockquote>
<br><br>
<div class="col-md-10 col-md-offset-1" >
<div id="myCarousel" class="carousel slide">
<!-- 轮播（Carousel）指标 -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0"
class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- 轮播（Carousel）项目 -->
<div class="carousel-inner">
<div class="item active">
<img src="http://gudianxiaoshuo.com/wp-content/uploads/2015/08/1-1.jpg" class="img-responsive" alt="First slide">
</div>
<div class="item">
<img src="http://gudianxiaoshuo.com/wp-content/uploads/2015/08/QQ图片20161212192219.png" class="img-responsive" alt="Second slide">
</div>
<div class="item">
<img src="http://gudianxiaoshuo.com/wp-content/uploads/2015/08/小组-1.png" class="img-responsive" alt="Third slide">
</div>
<div class="item">
<img src="http://gudianxiaoshuo.com/wp-content/uploads/2015/08/倒计时.png" class="img-responsive" alt="Third slide">
</div>
<div class="item">
<img src="http://gudianxiaoshuo.com/wp-content/uploads/2015/08/课堂表现.png" class="img-responsive" alt="Third slide">
</div>
</div>
<!-- 轮播（Carousel）导航 -->
<a class="carousel-control left" href="#myCarousel"
data-slide="prev"></a>
<a class="carousel-control right" href="#myCarousel"
data-slide="next"></a>
</div>
</div>
<div class="col-md-8 col-md-offset-2">
<br><br>
<a href="http://pan.baidu.com/s/1slyJGHR" class="btn btn-primary btn-lg btn-block" role="button" target="_blank">快乐课堂下载V7.1</a>
</div>
<!--面板-->
</div>
</div>
</tr>
</tbody>
</table>
</div>
</div>
</div>
具体效果，参考：gudianxiaoshuo.com
不过，需要注意的是：bootstrap样式可能与主题样式有冲突，需要细微调整，以兼容主题样式
| 
转播
