bootstrap-第二屏BBS论坛区域(四)

效果图：

代码：

    <!--bbs start-->
    <section id="bbs">
        <div class="container">
            <div class="row">
                <div class="col-md-4">
                    <a href="www.maidiedu.com" target="_blank">
                    <img src="images/a.png" class="img-responsive" alt="Android">
                    <h3>Android开发</h3>
                    <p>Android开发技术交流、问题求助、实战案例分享</p>
                    </a>
                </div>
                <div class="col-md-4">
                    <a href="www.maidiedu.com" target="_blank">
                        <img src="images/b.png" class="img-responsive" alt="Android">
                        <h3>IOS开发</h3>
                        <p>iOS开发技术交流、海量iOS实战干货分享</p>
                    </a>
                </div>
                <div class="col-md-4">
                    <a href="www.maidiedu.com" target="_blank">
                        <img src="images/i.png" class="img-responsive" alt="Android">
                        <h3>嵌入式底层开发</h3>
                        <p>底层嵌入式开发、实战案例等技术交流讨论</p>
                    </a>
                </div>
            </div>
        </div>
    </section>
    <!--bbs end-->

设置CSS样式：

1.设置整个模块的上下内边距为80px，左右内边距为0，内容居中显示

#bbs{
    padding: 80px 0;
    text-align: center;
}

2.设置三个部分每个部分的内边距为15px

#bbs .col-md-4{
    padding: 15px;
}

3.设置获取到鼠标时的效果，颜色变为浅灰，四周加阴影

#bbs .col-md-4:hover{
    background: #f1f1f1;
    box-shadow: 1px 1px 4px #cccccc;
}

4.设置a标签的颜色为黑色，下划线为无

#bbs a{
    color: #262626;
    text-decoration: none;
}

5.设置图片的内边距上下为0，左右为auto

#bbs img{
    margin: 0 auto;
}

6.设置图片下标题h3的字体加粗

#bbs h3{
    font-weight: bold;
}