Home > Web Front-end > HTML Tutorial > Use Bootstrap 3 to develop responsive website practice 04, use Panels to display content_html/css_WEB-ITnose

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

WBOY
Release: 2016-06-24 11:59:00
Original
1144 people have browsed it

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>更多信息</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 class="panel-title">扭转乾坤期待胜利</h3>                    </div>                    <img src="images/15.jpg" 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 class="panel-title">前场外援三箭齐发</h3>                    </div>                    <img src="images/16.jpg" 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 class="panel-title">要90分钟出线</h3>                    </div>                    <img src="images/17.jpg" alt="15"/>                    <p>                       助理教练马达洛尼代替出席,对于明天的比赛,马达洛尼也转述了主教练里皮的态度。我们有在明天拿下对手。                    </p>                    <a href="http://sports.sina.com.cn/" target="_blank" class="btn btn-info btn-block">更多赛事</a>                </div>            </div>        </div><!--主要功能区域结束-->
Copy after login

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

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

<img src="images/15.jpg" alt="15" class="img-circle"/><img src="images/16.jpg" alt="15" class="img-circle"/><img src="images/17.jpg" alt="15" class="img-circle"/>
Copy after login

□ 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;}
Copy after login


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

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template