bootstarp模板01

HTML

<header>
    <div class="container">
        <div class="row">
            <div class="col-md-3 col-sm-4 col-xs-12">
                <p>
                    <i class="fa fa-phone"></i>
                    <span>Phone</span>
                    010-020-0340
                </p>
            </div>
            <div class="col-md-3 col-sm-4 col-xs-12">
                <p>
                    <i class="fa fa-envelope-o"></i>
                    <span>Email</span>
                    <a href="#">bluesQian@qw.com</a>
                </p>
            </div>
            <div class="col-md-5 col-sm-4 col-xs-12">
                <ul class="social-icon">
                    <li><span>Meet us on</span></li>
                    <li><a href="#" class="fa fa-facebook"></a></li>
                    <li><a href="#" class="fa fa-twitter"></a> </li>
                    <li><a href="#" class="fa fa-instagram"></a> </li>
                    <li><a href="#" class="fa fa-apple"></a> </li>
                </ul>
            </div>
        </div>
    </div>
</header>
<nav class="navbar navbar-default" role="navigation" style="border-radius: 0;">
    <div class="container">
        <div class="navbar-header">
            <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon icon-bar"></span>
                <span class="icon icon-bar"></span>
                <span class="icon icon-bar"></span>
            </button>
            <a href="#" class="navbar-brand">Admin</a>
        </div>
        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#top" class="current">HOME</a></li>
                <li><a href="#about">ABOUT</a></li>
                <li><a href="#team">TEAM</a></li>
                <li><a href="#service">SERVICE</a></li>
                <li><a href="#portfolio">PORTFOLIO</a></li>
                <li><a href="#contact">CONTACT</a></li>
            </ul>
        </div>
    </div>
</nav>
<section id="home">
    <div class="container">
        <div class="row">
            <div class="col-md-offset-2 col-md-8">
                <h1 class="wow fadeIn animated"  style="visibility: visible; animation-delay: 0.9s; animation-name: fadeIn;">
                    We make templates that are <span>awesome</span></h1>
                <a data-scroll="" href="#about" class="btn btn-default" style="visibility: visible; animation-delay: 0.6s; animation-name: fadeInUp;">
                    GET STARTED</a>
            </div>
        </div>
    </div>
</section>
<section id="about">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <h2>WE ARE <span>AWESOME</span></h2>
            </div>
            <div class="col-md-4 col-sm-4 col-xs-12">
                <div class="media">
                    <div class="media-heading-wrapper">
                        <div class="media-object pull-left">
                            <i class="fa fa-mobile"></i>
                        </div>
                        <h3 class="media-heading">FULLY RESPONSIVE</h3>
                    </div>
                    <div class="media-body">
                        <p>Awesome responsive template is provided by <a rel="nofollow" href="http://www.templatemo.com"
                                                                         target="_parent">templatemo</a>
                            website. This is Bootstrap v3.3.2 layout built on HTML5 CSS3. You can use this for any purpose.
                            Please tell your friends about it.</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4 col-sm-4 col-xs-12">
                <div class="media">
                    <div class="media-heading-wrapper">
                        <div class="media-object pull-left">
                            <i class="fa fa-comment-o"></i>
                        </div>
                        <h3 class="media-heading">FULLY RESPONSIVE</h3>
                    </div>
                    <div class="media-body">
                        <p>Awesome responsive template is provided by <a rel="nofollow" href="http://www.templatemo.com"
                                                                         target="_parent">templatemo</a>
                            website. This is Bootstrap v3.3.2 layout built on HTML5 CSS3. You can use this for any purpose.
                            Please tell your friends about it.</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4 col-sm-4 col-xs-12">
                <div class="media">
                    <div class="media-heading-wrapper">
                        <div class="media-object pull-left">
                            <i class="fa fa-html5"></i>
                        </div>
                        <h3 class="media-heading">FULLY RESPONSIVE</h3>
                    </div>
                    <div class="media-body">
                        <p>Awesome responsive template is provided by <a rel="nofollow" href="http://www.templatemo.com"
                                                                         target="_parent">templatemo</a>
                            website. This is Bootstrap v3.3.2 layout built on HTML5 CSS3. You can use this for any purpose.
                            Please tell your friends about it.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<section id="team">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <h2>
                    <span>Bootstrap</span>
                    Team
                </h2>
            </div>
            <div class="col-md-3 col-sm-6 col-xs-12">
                <div class="team-wrapper">
                    <img src="images/team-img1.jpg" class="img-responsive" alt="team img 2">
                    <div class="team-des">
                        <h4>MARY</h4>
                        <span>Developer</span>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elitquisque tempus ac eget diam et laoreet phasellus ut nisi id leo molest.</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-sm-6 col-xs-12">
                <div class="team-wrapper">
                    <img src="images/team-img2.jpg" class="img-responsive" alt="team img 2">
                    <div class="team-des">
                        <h4>MARY</h4>
                        <span>Developer</span>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elitquisque tempus ac eget diam et laoreet phasellus ut nisi id leo molest.</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-sm-6 col-xs-12">
                <div class="team-wrapper">
                    <img src="images/team-img3.jpg" class="img-responsive" alt="team img 2">
                    <div class="team-des">
                        <h4>MARY</h4>
                        <span>Developer</span>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elitquisque tempus ac eget diam et laoreet phasellus ut nisi id leo molest.</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-sm-6 col-xs-12">
                <div class="team-wrapper">
                    <img src="images/team-img4.jpg" class="img-responsive" alt="team img 2">
                    <div class="team-des">
                        <h4>MARY</h4>
                        <span>Developer</span>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elitquisque tempus ac eget diam et laoreet phasellus ut nisi id leo molest.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<section id="service">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <h2>
                    OUR<span>Bootstrap</span>THIS
                </h2>
            </div>
            <div class="col-md-4 active">
                <i class="fa fa-laptop"></i>
                <h4>Web Design</h4>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elitquisque tempus ac eget diam et laoreet
                    phasellus ut nisi id leo molestie. Adipiscing vitae vel quam proin eget mauris eget. Lorem ipsum
                    dolor sit amet, consectetur adipiscing elitquisque tempus ac eget diam et laoreet phasellus ut nisi
                    id leo molestie.
                </p>
            </div>
            <div class="col-md-4 active">
                <i class="fa fa-cloud"></i>
                <h4>Web Design</h4>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elitquisque tempus ac eget diam et laoreet
                    phasellus ut nisi id leo molestie. Adipiscing vitae vel quam proin eget mauris eget. Lorem ipsum
                    dolor sit amet, consectetur adipiscing elitquisque tempus ac eget diam et laoreet phasellus ut nisi
                    id leo molestie.
                </p>
            </div>
            <div class="col-md-4 active">
                <i class="fa fa-cog"></i>
                <h4>Web Design</h4>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elitquisque tempus ac eget diam et laoreet
                    phasellus ut nisi id leo molestie. Adipiscing vitae vel quam proin eget mauris eget. Lorem ipsum
                    dolor sit amet, consectetur adipiscing elitquisque tempus ac eget diam et laoreet phasellus ut nisi
                    id leo molestie.
                </p>
            </div>
        </div>
    </div>
</section>
<section id="contact">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <h2>CONTACT <span>AWESOME</span></h2>
            </div>
            <div class="col-md-6 col-sm-6 col-xs-12">
                <form>
                    <label>NAME</label>
                    <input name="fullname" type="text" class="form-control" id="fullname">

                    <label>EMAIL</label>
                    <input name="email" type="email" class="form-control" id="email">

                    <label>MESSAGE</label>
                    <textarea name="message" rows="4" class="form-control" id="message"></textarea>

                    <input type="submit" class="form-control">
                </form>
            </div>
            <div class="col-md-6 col-sm-6 col-xs-12">
                <address>
                    <p class="address-title">OUR ADDRESS</p>
                    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elitquisque tempus ac eget diam et laoreet phasellus ut nisi id leo molestie.</span>
                    <p><i class="fa fa-phone"></i> 010-020-0340</p>
                    <p><i class="fa fa-envelope-o"></i> awesome@company.com</p>
                    <p><i class="fa fa-map-marker"></i> 663 New Walk Roadside, Birdeye View, GO 11020</p>
                </address>
                <ul class="social-icon">
                    <li><h4>WE ARE SOCIAL</h4></li>
                    <li><a href="#" class="fa fa-facebook"></a></li>
                    <li><a href="#" class="fa fa-twitter"></a></li>
                    <li><a href="#" class="fa fa-instagram"></a></li>
                </ul>
            </div>
        </div>
    </div>
</section>
<footer id="copyright">
    <div class="container">
        <div class="row">
            <div class="col-md-12 text-center">
                <p>
                    Copyright © BluesQian
                </p>
            </div>
        </div>
    </div>
</footer>

CSS

body {
            background: #303030;
            color: #ffffff;
            font-family: 'Open Sans', sans-serif;
            font-weight: 300;
            overflow-x: hidden;
            margin: 0;padding: 0;
        }
        header {
            min-height: 20px;
            padding-top: 18px;
            padding-bottom: 10px;
        }
        p {
            margin: 0 0 10px;
        }
        header .fa {
            color: #28a7e9;
        }
        header span {
            font-weight: bold;
            padding-right: 10px;
            padding-left: 4px;
        }
        header a {
            color: #999;
            font-weight: 600;
        }
        header .social-icon {
            text-align: right;
        }
        .social-icon {
            position: relative;
            padding: 0;
            margin: 0;
        }
        .social-icon {
            position: relative;
            padding: 0;
            margin: 0;
        }
        .social-icon{
            list-style-type: none;
        }
        .social-icon li {
            display: inline-block;
            list-style: none;

            padding-right: 5px;
        }
        header .social-icon li a {
            border: none;
            width: 20px;
            height: 20px;
            line-height: 20px;
            text-align: center;
            text-decoration: none;
        }
        header .social-icon li .fa {
            color: #FFFFFF;
        }
        #home {
            background: url(./images/home-bg.jpg) no-repeat;
            background-size: cover;
            padding-top: 160px;
            padding-bottom: 100px;
            min-height: 650px;
        }
        #home h1 span {
            color: #28a7e9;
            font-weight: bold;
        }
        #home .btn {
            background: transparent;
            border-radius: 2px;
            color: #fff;
            font-size: 16px;
            font-weight: bold;
            margin-top: 20px;
            width: 180px;
            height: 60px;
            padding-top: 18px;
            -webkit-transition: all 0.4s ease-in-out;
            transition: all 0.4s ease-in-out;
        }
        h2 span {
            color: #28a7e9;
            padding: 0 10px 0 10px;
            font-weight: bold;
        }
        #about h2 {
            text-align: center;
            font-size: 40px;
            padding-bottom: 40px;
        }
        #about .media-heading-wrapper {
            padding-bottom: 32px;
        }
        #about .media-heading-wrappe .pull-left {
            float: left;
        }
        #about .media-heading-wrapper .fa {
            border: 1px solid #fff;
            border-radius: 2px;
            color: #fff;
            font-size: 24px;
            width: 60px;
            height: 60px;
            line-height: 60px;
            text-align: center;
            margin-bottom: 20px;
            margin-right: 20px;
        }
        #about .media-heading-wrapper h3 {
            font-size: 18px;
            font-weight: bold;
            padding-top: 20px;
            padding-left: 52px;
        }
        #team, #service, #portfolio, #contact {
            padding-top: 60px;
            padding-bottom: 40px;
        }
        h2 {
            text-align: center;
            font-size: 40px;
            padding-bottom: 40px;
            padding-top: 40px;
            text-transform: uppercase;
        }
        #team .team-wrapper {
            background: #404040;
            padding-bottom: 10px;
            -webkit-transition: all 0.4s ease-in-out;
            transition: all 0.4s ease-in-out;
            position: relative;
        }
        #team .team-wrapper img{
            max-width: 100%;
            max-height: 100%;
        }
        #team .team-wrapper .team-des {
            padding: 20px;
        }
        #team .team-wrapper .team-des  h4 {
            font-size: 18px;
        }
        #team .team-wrapper .team-des span {
            color: #28a7e9;
            display: block;
            font-weight: bold;
            padding-bottom: 12px;
        }
        #service .fa {
            border: 1px solid #fff;
            border-radius: 2px;
            color: #fff;
            font-size: 50px;
            width: 100px;
            height: 100px;
            line-height: 100px;
            text-align: center;
        }
        #service h4 {
            color: #28a7e9;
            font-weight: 600;
            padding-top: 10px;
            padding-bottom: 14px;
        }
        #service .active {
            background: #505050;
            padding: 40px;

        }
         h4 {
            font-size: 18px;
        }
        #contact label {
            font-weight: 500;
        }
        #contact .form-control {
            background: transparent;
            border: 1px solid #28a7e9;
            border-radius: 2px;
            box-shadow: none;
            color: #fff;
            margin-top: 6px;
            margin-bottom: 16px;
        }
        #contact address {
            border-bottom: 1px solid #505050;
            padding-top: 30px;
        }
        #contact address .address-title {
            font-weight: bold;
            font-size: 20px;
            padding-bottom: 10px;
        }
        #contact address span {
            display: block;
            padding-bottom: 30px;
        }
        #contact address .fa {
            border: 1px solid #fff;
            border-radius: 2px;
            width: 40px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            margin-right: 10px;
            margin-bottom: 10px;
        }
        .social-icon {
            position: relative;
            padding: 0;
            margin: 0;
        }
        .social-icon h4 {
            display: inline-block;
            padding-right: 20px;
        }
        .social-icon li a {
            border: 1px solid #fff;
            border-radius: 2px;
            color: #fff;
            width: 40px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            text-decoration: none;
            -webkit-transition: all 0.4s ease-in-out;
            transition: all 0.4s ease-in-out;
            margin-right: 10px;
        }
        #copyright{
            background-color: #000000;
            padding: 15px;
        }
        #copyright p {
            font-weight: 400;
        }

效果：