Bootstarp详解(配有旅游网首页和头条首页，轻松实现轮播，导航等..)

详解Bootstarp框架(不会让你失望的呦)

一、Bootstrap简介

Bootstrap是美国公司开发的一种基于HTML,CSS,JavaScript开发的一款简洁,直观，强悍的前端框架(总之一句话，很牛掰，反正菜鸟的我用的特别爽)，使得web开发更加更加敏捷，Bootstrap提供优雅的HTML和CSS规范,它是由动态的CSS语言Less组成，Bootstrap是在jQuery的基础上工作的，所有可以理解为Bootstrap是jQuery的一个插件

Bootstrap是实现响应式布局的，能够兼容不同的浏览器，能够在不同的终端上展示我们的各种效果，相关文件的下载和引入，下载就在其官网去下载(任何一个文件都可以去相关的官网去下载，不要小看会自己下载的东西的人，这种人的搜索能力很好)，这里就不介绍了，下面介绍一下配置：


二、栅格布局
特点：Bootstrap提供了一套响应式的，移动设备优先的流式栅栏系统，随着屏幕或视口的尺寸的增加，系统会自动分为12列，栅格系统用于一系列的行于列的结合来创建页面布局，你的内容就是可以放入这些创建好的布局中，这些可以做好多原来头疼的效果。

栅格特点：
１.行（row）必须定义在.container或则.container-fluied(100%布局)中
2.列通过行行在水平方法创建的一组称为字列
3.列使用的样式col--
4.如果这一行超过了12.多余的列，多余的列所在的元素被称为一个整体

三、Bootstrap的相关的教程和组件


表单:

 <table class="table table-bordered table-hover">

        <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>账号</th>
            <th>性别</th>
        </tr>

        <tr>
            <th>001</th>
            <th>张三</th>
            <th>001</th>
            <th>男</th>
        </tr>

        <tr>
            <th>002</th>
            <th>李四</th>
            <th>002</th>
            <th>女</th>
        </tr>

        <tr>
            <th>003</th>
            <th>王五</th>
            <th>003</th>
            <th>男</th>
        </tr>

    </table>

表单：

 <form class="form-horizontal" role="form">
        <div class="form-group">
            <label for="firstname" class="col-sm-2 control-label">名字</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="firstname" placeholder="请输入名字">
            </div>
        </div>
        <div class="form-group">
            <label for="lastname" class="col-sm-2 control-label">姓</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="lastname" placeholder="请输入姓">
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <div class="checkbox">
                    <label>
                        <input type="checkbox">请记住我
                    </label>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button type="submit" class="btn btn-success">登录</button>
            </div>
        </div>
    </form>

导航栏：

<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <!--定义汉堡按钮-->
            <button type="button" class="navbar-toggle" data-toggle="collapse"
                    data-target="#example-navbar-collapse">
                <span class="sr-only">切换导航</span>
                <!--定义汉堡里面的线的元素-->
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">菜鸟教程</a>
        </div>
        <div class="collapse navbar-collapse" id="example-navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">iOS</a></li>
                <li><a href="#">SVN</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                        Java <b class="caret"></b>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a href="#">jmeter</a></li>
                        <li><a href="#">EJB</a></li>
                        <li><a href="#">Jasper Report</a></li>
                        <li class="divider"></li>
                        <li><a href="#">分离的链接</a></li>
                        <li class="divider"></li>
                        <li><a href="#">另一个分离的链接</a></li>
                    </ul>
                </li>
            </ul>
        </di