<li role="presentation" class="active" style="text-align:center"><a href="#">主页</a></li>

  <li role="presentation" style="text-align:center"><a href="gaiyao。html">课程概要</a></li>

  <li role="presentation" style="text-align:center"><a href="teacher。html">本书作者</a></li>

  <li role="presentation" style="text-align:center"><a href="video。html">教学视频</a></li>

  <li role="presentation" style="text-align:center"><a href="question。php">问题交流</a></li>

  <li role="presentation" style="text-align:center"><a href="homework。html">作业下载</a></li>

  <li role="presentation" style="text-align:center"><a href="contact。html">联系我们</a></li>

  </ul>

nav-pills是定义胶囊式标签页。nav-stacked设置标签页可以堆叠，当屏幕尺寸不是足够的话，标签能够自动堆叠显示。

4。2。2 课程概要模块论文网

课程概要模块是用来显示课程主要内容的。课程概要模块主要分为两个部分，课程简介和课程章节。课程简介主要介绍这门课程的主要内容。课程章节主要展现各个章节的知识要点。

课程简介的布局如图4-6所示。

图4-6： 课程概要界面

如果需要用到面板显示，可以把<p>标签的class属性设为panel。具体如下：

<p class="panel panel-default">

当需要插入图片，可以使用<img>标签。例如：

<img src="。/image/czxt。jpg" height=20% width=10% class="img-responsive" alt="Responsive image" style="float:left"/>

src存放图片的路径。height和width设置图片的高度和宽度。img-responsive 类可以让图片支持响应式布局。其实质是为图片设置了 max-width: 100%;、 height: auto; 和 display: block; 属性，从而让图片在其父元素中更好的缩。float设置图片的位置。

课程章节模块的设计如图4-7所示。

图4-7： 课程章节模块

在课程章节中，把每个章节设置为一个按钮，点击按钮，弹出下拉菜单，显示本章的每个小节。点击小节标题，弹出该小节的知识点。首先设置一个下拉按钮，格式如下：

<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

   第一章:操作系统引论

    <span class="caret"></span>

  </button>

dropdown表示菜单下拉，如果想菜单向上弹出，可以用dropup。aria-haspopup :true表示点击的时候会出现菜单或是浮动元素； false表示没有pop-up效果。aria-expanded:表示展开状态。默认为undefined, 表示当前展开状态未知。其它可选值：true表示元素是展开的；false表示元素不是展开的。

在每一章的标题下，设置了该章节的课程小节标题。课程小节的标题设计是采用了<a>标签加链接的方式，链接的是模态框的地址。