页面的布局
<-!不让文字超出左右屏幕-->
<style>
.demo {
word-wrap: break-word;
}
</style> 他们为那个模板中的一个列网格添加了所有这些类，
.col-xs-* = *超小设备（即手机）（<768像素）
.col-sm-* =小设备（即平板电脑）（≥768像素）
.col-md-* =中型设备（即笔记本电脑或小型桌面）（≥992像素）
.col-lg-* =大型设备（即桌面）（≥1200像素） <!--
首先定义一个container容器做主体,然后在container下面定义一个row，在row下面定义col-md-9和col-md-3的类，然后在col-md-9下面在定义row的类，
再定义col-md-4，col-md-4，col-md-4,3个类，总结：要想把屏幕分割成12个网格，必须要先定义row，然后在row下面分割
-->
如以上设置，最后出现的效果应该如下:
<a href="#" class="btn btn-primary navbar-btn navbar-sm navbar-right">订阅课程</a>
实现的效果如下：
<form action="#" class="navbar-form navbar-left">
<input type="text" placeholder="搜索" class="form-control">
<button type="submit" class="btn btn-default">
<span class="glyphicon glyphicon-search"></span>
</button>
</form>
实现的效果如下：
