Use Bootstrap 3 to develop responsive website practice 04, use Panels to display content_html/css_WEB-ITnose

In Bootstrap pages, Panels are usually used to display the content of main functions. This part of the Html is:

        <div class="row" id="featureHeading">            <div class="col-md-12">                <h2 id="更多信息">更多信息</h2>                <p class="lead">                    广州恒大淘宝队的官方网站和微博同时发布了几张海报，预热本周三晚8点即将到来的亚冠1/4决赛第二回合。                </p>            </div>        </div><!--主要功能标题区域结束-->                <div class="row" id="features">            <div class="col-sm-4 feature">                <div class="panel">                    <div class="panel-heading">                        <h3 id="扭转乾坤期待胜利">扭转乾坤期待胜利</h3>                    </div>                    <img src="/static/imghwm/default1.png"  data-src="images/15.jpg"  class="lazy" alt="15"/>                    <p>                        8月27日晚20点，广州恒大将迎来亚冠联赛的一场生死战，主场与西悉尼流浪者队的第二回合比赛。                    </p>                    <a href="http://sports.sina.com.cn/" target="_blank" class="btn btn-warning btn-block">更多赛事</a>                </div>            </div>                        <div class="col-sm-4 feature">                <div class="panel">                    <div class="panel-heading">                        <h3 id="前场外援三箭齐发">前场外援三箭齐发</h3>                    </div>                    <img src="/static/imghwm/default1.png"  data-src="images/16.jpg"  class="lazy" alt="15"/>                    <p>                        本场比赛恒大的后防线人员变化最大的，因为张琳?、金英权同时停赛，里皮也只能让其他国内球员顶上这两个位置。                    </p>                    <a href="http://sports.sina.com.cn/" target="_blank" class="btn btn-success btn-block">更多赛事</a>                </div>            </div>            <div class="col-sm-4 feature">                <div class="panel">                    <div class="panel-heading">                        <h3 id="要-分钟出线">要90分钟出线</h3>                    </div>                    <img src="/static/imghwm/default1.png"  data-src="images/17.jpg"  class="lazy" alt="15"/>                    <p>                       助理教练马达洛尼代替出席，对于明天的比赛，马达洛尼也转述了主教练里皮的态度。我们有在明天拿下对手。                    </p>                    <a href="http://sports.sina.com.cn/" target="_blank" class="btn btn-info btn-block">更多赛事</a>                </div>            </div>        </div><!--主要功能区域结束-->

○ col-sm-4 attribute value: means that when the page width is greater than 768 pixels, it occupies 4 cells
○ is wrapped in div class="col-sm-4 feature">

□ If you make the image circular
-- Just add class="img-circle" to the image

<img class="img-circle lazy"  src="/static/imghwm/default1.png"  data-src="images/15.jpg"  alt="15"/><img class="img-circle lazy"  src="/static/imghwm/default1.png"  data-src="images/16.jpg"  alt="15"/><img class="img-circle lazy"  src="/static/imghwm/default1.png"  data-src="images/17.jpg"  alt="15"/>

□ If you want to make the content in the Panel look better
--Customize CSS

is customized in site.css in the css folder.

/*----------------------------------------     Panel 主要功能介绍    ------------------------------------*/#features {    text-align: center;}#features img {    margin: 0 0 20px;}

Reference:
Code a Responsive Website with Bootstrap 3 --by Brad Hussey
http://getbootstrap.com/
http://bootswatch.com/
http://www.tutorialspoint.com/
http://www.placehold.it/

"Using Bootstrap 3 to develop responsive website practice" series includes:

Using Bootstrap 3 to develop responsive website practice 01, preliminary preparation, navigation area, etc.

Using Bootstrap 3 to develop responsive website Practice 02, Carousel

Use Bootstrap 3 to develop a responsive website Practice 03, Content layout below the carousel

Use Bootstrap 3 to develop a responsive website Practice 04, Use Panels to display content