Bootstrap3.3.7

页面的布局

<-!不让文字超出左右屏幕-->
<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>
实现的效果如下：