bootstrap

HTML页面内容：

        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                  <span class="sr-only">Toggle navigation</span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">HPIT学院</a>
              </div>

              <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav navbar-right">
            <li>
                <a href="#home">首页</a>
            </li>
            <li>
                <a href="#bbs">论坛</a>
            </li>
            <li>
                <a href="#web">前端开发</a>
            </li>
            <li>
                <a href="#new">最新课程</a>
            </li>
            <li>
                <a href="#app">移动APP</a>
            </li>
            <li>
                <a href="#about">联系我们</a>
            </li>
        </ul>
    </div>
    </div>
    </nav>
  
    
    <section id="home">
            <div class="lvjing">
                <div class="container">
                    <div class="row">
                <div class="col-md-10 col-md-offset-1 text-center">
                    <h1>bootstrap实战课程等你来战！</h1>
                    <p>本套课程适用于：1.WEB开发人员；2.网站维护人员、管理人员</p>
                    <p>培训技能的目标：使用bootstrap框架快速构建响应式网页，颠覆传统WEB前端！</p>
                    <img class="img img-responsesive" src="./img/php.jpg" alt="">
                </div>
            </div>
        </div>
    </div>
    </section>

运行结果如下：

    <section id="bbs">
        <div class="container">
            <div class="row">
                <div class="col-md-4">
                    <img src="./img/a.png" class="img-responsesive" alt="">
                    <h3>Android开发 </h3>
                    <p>Android开发技术交流、问题求助、实战案例分享</p>
                </div>
                <div class="col-md-4">
                    <img src="./img/i.png" class="img-responsesive" alt="">
                    <h3>Android开发 </h3>
                    <p>Android开发技术交流、问题求助、实战案例分享</p>
                </div>
                <div class="col-md-4">
                    <img src="./img/b.png" class="img-responsesive" alt="">
                    <h3>Android开发 </h3>
                    <p>Android开发技术交流、问题求助、实战案例分享</p>
                </div>
            </div>
        </div>
    </section>

运行结果如下： ![TP2MLH7$H%OB146)~X)CWX.png

    <div class="container">
        <div class="row">
            <div class="col-md-6">
               <h1> HTML5前端开发</h1>
               <p>一线资深前端开发工程师倾情打造！助你完成普通程序员到优秀工程师的华丽升级！</p>

               <p><span class="glyphicon glyphicon-grain"></span>使用HTML5与CSS3技术轻松实现设备自适应展示。</p>

               <p><span class="glyphicon glyphicon-grain"></span>清晰明了的语义代码结构，更高的可读性、更利于页面维护的。</p>
            </div>
            <div class="col-md-6"><img src="./img/html5.jpg" alt=""></div>
        </div>
    </div>
    </section>

    <section id="bs">
        <div class="container">
            <div class="row">
                <div class="col-md-6"><img src="./img/Bootstrap.jpg" alt=""></div>
                <div class="col-md-6">
                   <h1>bootstrap实战视频教程</h1>
                   <p>一线资深前端开发工程师倾情打造！助你完成普通程序员到优秀工程师的华丽升级！</p>
    
                   <p><span class="glyphicon glyphicon-grain"></span>使用HTML5与CSS3技术轻松实现设备自适应展示。</p>
    
                   <p><span class="glyphicon glyphicon-grain"></span>清晰明了的语义代码结构，更高的可读性、更利于页面维护的。</p>
                </div>
                
            </div>
        </div>
        </section>
        
       <section id="new">
           <div class="container">
            <h2 class="text-center">最新课程</h2>
               <div class="row">
                   <div class="col-md-3 col-xs-6">
                       <div class="course">
                    <img class="img img-responsive" src="./img/swift.jpg" alt="">
                    <button class="btn btn-default">加入学习</button>
                </div>
            </div>
                <div class="col-md-3 col-xs-6">
                    <div class="course">
                    <img class="img img-responsive" src="./img/swift.jpg" alt="">
                    <button class="btn btn-default">加入学习</button>
                </div>
            </div>
                <div class="col-md-3 col-xs-6">
                    <div class="course">
                    <img class="img img-responsive" src="./img/swift.jpg" alt="">
                    <button class="btn btn-default">加入学习</button>
                </div>
            </div>
                <div class="col-md-3 col-xs-6">
                    <div class="course">
                    <img class="img img-responsive" src="./img/swift.jpg" alt="">
                    <button class="btn btn-default">加入学习</button>
                </div>
            </div>
                <div class="col-md-3 col-xs-6">
                    <div class="course">
                    <img class="img img-responsive" src="./img/swift.jpg" alt="">
                    <button class="btn btn-default">加入学习</button>
                </div>
            </div>
                <div class="col-md-3 col-xs-6">
                    <div class="course">
                    <img class="img img-responsive" src="./img/swift.jpg" alt="">
                    <button class="btn btn-default">加入学习</button>
                </div>
            </div>
                <div class="col-md-3 col-xs-6">
                    <div class="course">
                    <img class="img img-responsive" src="./img/swift.jpg" alt="">
                    <button class="btn btn-default">加入学习</button>
                </div>
            </div>
                <div class="col-md-3 col-xs-6">
                    <div class="course">
                    <img class="img img-responsive" src="./img/swift.jpg" alt="">
                    <button class="btn btn-default">加入学习</button>
                </div>
            </div>
               </div>
           </div>
       </section>

        <section id="app">
            <div class="container">
                <div class="row">
                    <div class="col-md-6">
                       <h1> HPIT学院</h1>
                       <p>全新倾情打造！助你完成普通程序员到优秀工程师的华丽升级你完成普通程序员到优秀工程师的华丽升级！</p>
        
                       <p>
                           <button class="btn btn-default"><span class="glyphicon glyphicon-download-alt"></span>iPhone版</button>
                           <button class="btn btn-default"><span class="glyphicon glyphicon-download-alt"></span>Androld版</button>
                        </p>
        
                       
                    </div>
                    <div class="col-md-6"><img src="./img/app-banner.jpg" class="img img-responsive" alt=""></div>
                </div>
            </div>
            </section>

运行结果如下：

                <div class="lvjing">
                    <div class="container">
                        <div class="row">
                            <div class="col-md-6">
                                <h2><span class="glyphicon glyphicon-send"></span>联系我们</h2>
                                <p>1111111111111111111111111111111111111111111
                                    111111111111111111111111111111111111111111
                                    111111111111111111111111111111111111111111111</p>
                                <p><span class="glyphicon glyphicon-home"></span>地址:1556845268</p>
                                <p><span class="glyphicon glyphicon-phone-alt"></span>电话:1556845268</p>
                                <p><span class="glyphicon glyphicon-envelope"></span>邮箱:1556845268</p>
                            </div>
                            <div class="col-md-6">
                                <form action="" method="post" class="form-horizontal" role="form">
                                    <div class="form-group">
                                                <div class="col-xs-6">
                                                    <input type="text" name="" id="" class="form-control">
                                                </div>
                                                <div class="col-xs-6">
                                                    <input type="text" name="" id="" class="form-control">
                                                </div>
                                    </div>
                                    <div class="form-group">
                                        <!-- <div class="row">-->
                                            <div class="col-xs-12">
                                                <input type="text" name="" id="" class="form-control">
                                            </div>
                                      <!--   </div> -->
                                    </div>
                                    <div class="form-group">
                                        <div class="col-xs-12">
                                           <textarea name="" id="" cols="30" rows="3" class="form-control"></textarea>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="col-xs-8">
                                            <button type="submit" class="btn btn-primary form-control">submit</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

运行结果如下：

scss页面内容:

    background-color: #fff;

    .navbar-brand{
        font-size: 30px;
        font-weight: bold;
        color: #40d2b1;
        height: 70px;
        line-height: 35px;
    }
    .navbar-nav>li>a{
        font-size: 16px;
        line-height: 35px;
        height: 70px;
        font-weight: bold;
        color: #333;
    }
    .navbar-toggle{
        margin-top: 17px;

        &:focus, &:hover{
            border-color: #40d2b1;
            background-color: rgb(69, 210, 184);
        }

        .icon-bar{
            background-color: #1c9982;
        }
    }
}

#home{
    background-image: url(../img/home-bg.jpg);
    background-size: cover;
    color: #fff;
    margin-top: 71px;
    // height: 765px;

    .lvjing{
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
    }

    h1{
            font-weight: bolder;
            margin-top: 50px;
    }

    p{
        margin: 20px 0;
    }

    img{
        margin-top: 30px;
        margin-bottom: 50px;
        display: inline-block;
    }
}

#bbs{
    padding: 80px 0;
    background-color: #fff;

    .col-md-4{
        padding: 15px;
        text-align: center;
        &:hover{
            background-color: #f1f1f1;
            box-shadow: 1px 1px 4px #ccc;
        }
        img{
            display: inline-block;
        }
    }
}

#web{
    background-color: #f1f1f1;
    padding: 80px 0;

    h1{
        font-weight: bolder;
    }

    span.glyphicon-grain{
        width: 36px;
        height: 36px;
        display: inline-block;
        background-color: #40d2b1;
        border-radius: 50%;
        color: #fff;
        padding-top: 10px;
        padding-left: 10px;
        margin-right: 15px;
    }
}


#bs{
    @extend #web;
    background-color: #fff;
}

#new{
    background-color: #f1f1f1;
    padding: 80px 0;

    h2{
        font-weight: bolder;
        margin-bottom: 60px;
    }
    
    .col-md-3 {
        margin-bottom: 20px;
        .course{
            margin: 0 5px;
            background-color: #fff;
            text-align: center;

            .btn{
               margin-top: 20px;
               margin-bottom: 30px;
               padding: 8px 40px;
               color: #40d2b1;
               border-radius: 0;
               border-color: #1c9982;

               &:hover,
               &:focus{
                   color: #fff;
                   background-color: #40d2b1;
                   outline: none;
               }
            }
        }
    }
}


#app{
    @extend #bs;

    h1{
        margin-bottom: 30px;
        // font-weight: bolder;
    }

    .btn{
        padding: 6px 30px;
        background-color: #40d2b1;
        color: #fff;
        border-radius: 0;
        border-color: #40d2b1;
        &:hover,
        &:focus{
            background-color: #1c9982;
            outline: none;
        }
    }
}

#about{
    background-image: url(../img/contact-bg.png);
    color: #fff;

    .lvjing{
        height: 100%;
        padding: 80px 0;
        background-color: rgba(0, 0, 0, 0.5);

        h2{
            span{
                margin-right: 30px;
            }
        }
        p{
            margin: 20px 0;
            span{
                margin-right: 15px;
            }
        }
        form{
            margin-top: 30px;

            .form-control{
                border-radius: 0;
                line-height: 50px;
                height: 50px;
                &:focus{
                    border-color: #40d2b1;
                }
            }
            textarea{
                height: 80px !important;
            }
            .btn{
                background-color: #40d2b1;
                font-weight: bold;
                border: none;
                &:hover,
                &:focus{
                    background-color: #1c9982;
                    outline: none;
                }
        }
    }
    }
}


footer{
    p{
        margin: 20px 0;
    }
}