一、添加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>

图片轮播

<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>

不过，需要注意的是：bootstrap样式可能与主题样式有冲突，需要细微调整，以兼容主题样式