bootstrap实战（三）- 并列显示三图，图片随浏览器缩放

技术要点：

1. 并列使用col-md-4，例如<div class="col-md-4">

2.图片缩放使用class="img-responsive"，例如 <img src="image/bbs2.png" class="img-responsive" alt="">

3.取消链接下划线 #bbs a{text-decoration: none;}

4.选中显示区域边框

#bbs .col-md-4:hover{

padding: 15px;

background:#f1f1f1;

box-shadow:1px 1px 4px #ccc;

}

1.效果

2. html代码

 <div id="bbs">
        <div class="container">
            <div class="row">
                <a href="http://www.baidu.com" target="_blank">
                <div class="col-md-4">
                    <img src="image/bbs1.png" class="img-responsive" alt="">
                    <h3>前端学习</h3>
                    <p>学习bootstrap,vue</p>
                </div>
            </a>
            <a href="http://www.baidu.com" target="_blank">
                <div class="col-md-4">
                    <img src="image/bbs2.png" class="img-responsive" alt="">
                    <h3>后端学习</h3>
                    <p>学习springboot,springCloud</p>
                </div>
            </a>
            <a href="http://www.baidu.com" target="_blank">
                <div class="col-md-4">
                    <img src="image/bbs3.png" class="img-responsive" alt="">
                    <h3>全栈开发</h3>
                    <p>学习全部技术</p>
                </div> 
             </a>
            </div>
      
        </div>
    </div>

3. css

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

#bbs img{
    margin:0 auto;
}

#bbs h3{
    font-weight:bold;
}

#bbs a{
    color: #212121;
    text-decoration: none;
}
#bbs .col-md-4{
    padding: 15px;
}
#bbs .col-md-4:hover{
    padding: 15px;
    background:#f1f1f1;
    box-shadow:1px 1px 4px #ccc;
}