使用Bootstrap 3开发响应式网站实践06,使用ListGroup、Thumbnails展示内容_html/css

집

웹 프론트엔드

HTML 튜토리얼

使用Bootstrap 3开发响应式网站实践06,使用ListGroup、Thumbnails展示内容_html/css_WEB-ITnose

PHP中文网

Jun 24, 2016 am 11:58 AM

bootstrap 콘텐츠 전시하다 개발하다

当希望把同类型的内容以列表、区块展示的时候，ListGroup是不错的选择。

<div class="col-sm-6">                <h3>马云为恒大生死战开出男人奖 </h3>                <p>                    8月27日晚，广州恒大将迎来亚冠联赛生死战，主场迎战西悉尼流浪者队，由于一周之前已经在客场0-1负于对手，本场比赛恒大队必须置死地而后生在主场净胜对手两球。就在今天中午，前不久入主恒大的阿里巴巴老板马云来到球队，在鼓励球员的同时开出了2000万的男人奖。马云表示：无论输赢都会发放这笔奖金，只希望球员们像男人一样去战斗。                </p>                <h4>这里是ListGroup</h4>                                <div class="list-group">                    <a href="#" class="list-group-item">                        <h4 class="list-group-item-heading">无论输赢重奖2000万</h4>                        <p class="list-group-item-text">                            就在今天中午，前不久入主恒大的阿里巴巴老板马云来到球队，在鼓励球员的同时开出了2000万的男人奖。                        </p>                    </a>                    <a href="#" class="list-group-item">                        <h4 class="list-group-item-heading">许家印已经向马云发出了观看比赛的邀请</h4>                        <p class="list-group-item-text">                            不过，最终马云将用自己的实际行动给出了回答：这就是在27日晚上前往天河体育场观战，与恒大队一起战斗。                        </p>                    </a>                    <a href="#" class="list-group-item">                        <h4 class="list-group-item-heading">马云先是前往恒大足校进行了参观</h4>                        <p class="list-group-item-text">                            27日上午，马云先是前往恒大足校进行了参观。随后来到了恒大基地，与即将在晚上比赛的球员进行了见面。                        </p>                    </a>                </div>                                <h5>主场迎战西悉尼流浪者队</h5>                <p>                    27日上午，马云先是前往恒大足校进行了参观。随后来到了恒大基地，与即将在晚上比赛的球员进行了见面。马云的话语很简短：我知道这场比赛对所有人都非常重要，我希望你们像男人一样去战斗。所以，这场比赛我们将设立一个男人奖，无论输赢，都会奖励2000万。这也是马云入主恒大以来，第一次与全队进行见面，在生死战来临之时，马云并没有给球队提出成绩压力，只是用“像男人一样去战斗”的这样方式来激励球队，显然对恒大队是一个极大的鼓舞。(于静 发自广州)                </p>            </div><!--右半边结束-->

로그인 후 복사

○ 列表内容被搞过在

中
○ 列表项都是

□ Thumbnails展示内容

对于并列的内容，前面体验了使用Panels展示，但实际上，也可以使用Thumbnails展示。

<div class="row" id="moreProducts">            <div class="col-md-12">                <h3>了解更多的恒大信息</h3>                <div class="thumbnails row">                    <div class="col-md-6">                        <div class="thumbnail">                            <img src="images/21.jpg" width="100%"/>                            <div class="label label-success price"><span class="glyphicon glyphicon-tag"><sup>￥</sup>88</span></div>                            <div class="caption">                                <h3>恒大穿客场球衣</h3>                                <p>

로그인 후 복사

在26日下午进行的恒大西悉尼战前联席会上，恒大被告知需要身穿客场球衣在主场作战，原因是对手西悉尼的主客场球衣均以红色为主。然而恒大穿主场球衣并不是对手有意为难，而是亚足联的审核程序有误，导致问题的发生。

</p>                                                               <p>                                    <a href="#" class="btn btn-primary btn-small" target="_blank">恒大官网</a>                                                                         <a href="#" class="btn btn-small btn-link">了解更多</a>                                </p>                            </div>                        </div>                    </div>                                        <div class="col-md-6">                        <div class="thumbnail">                            <img src="images/22.jpg" width="100%"/>                            <div class="label label-info price"><span class="glyphicon glyphicon-tag"><sup>￥</sup>66</span></div>                            <div class="caption">                                <h3>中超争冠恒大暂优势明显</h3>                                <p>

로그인 후 복사

恒大的关注点都放在北京国安[微博]客场挑战山东鲁能[微博]的比赛上。在争冠之中掌握了绝对主动权。国安就可能赶上。

 </p>                                <p>                                    <a href="#" class="btn btn-primary btn-small" target="_blank">国安官网</a>                                                                         <a href="#" class="btn btn-small btn-link">了解更多</a>                                </p>                            </div>                        </div>                    </div>                </div>            </div>        </div>
 <!--更多产品区域结束-->

로그인 후 복사

所有的thumbnail被包裹在

中
○

下并不是每个thumbnail，而是

，占2个单元格
○ 每个thumbnail被包裹在

中

再调整标签的位置，把它调到图片的右上方。

/*----------------------------------------    Thumbnail 价格标签    ------------------------------------*/.thumbnails {    margin: 20px 0;}.thumbnail {    position: relative;}.thumbnail h3 {    font-size: 16px;    margin: 0 0 10px;    line-height: 20px;}.thumbnail .price {    font-size: 22px;    position: absolute;    top: -10px;    right: -10px;    padding: 10px;}.thumbnail .price sup {    font-weight: normal;    font-size: 12px;}.thumbnail span.glyphicon {    margin-right: 5px;}/*----------------------------------------    智能手机    ------------------------------------*/@media (max-width: 480px) {    .thumbnail .price {        font-size: 14px;    }    .thumbnail .price sup {        font-size: 10px;    }}/*----------------------------------------    平板    ------------------------------------*/@media (max-width: 768px) {    #myCarousel .item{ height: 310px;}}

로그인 후 복사

由于我们考虑了在智能手机中的CSS设置，所以，当页面宽度变小，价格标签的字体也相应变小，不至于不协调。

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

뜨거운 도구

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7518

Cakephp 튜토리얼

1378

Steam의 계정 이름 형식은 무엇입니까?

Win11 활성화 키 영구

NYT 연결 힌트와 답변

Related knowledge

부트 스트랩 검색 창을 얻는 방법 Apr 07, 2025 pm 03:33 PM

부트 스트랩을 사용하여 검색 표시 줄의 값을 얻는 방법 : 검색 표시 줄의 ID 또는 이름을 결정하십시오. JavaScript를 사용하여 DOM 요소를 얻으십시오. 요소의 값을 가져옵니다. 필요한 작업을 수행하십시오.

부트 스트랩의 수직 중심을 수행하는 방법 Apr 07, 2025 pm 03:21 PM

부트 스트랩을 사용하여 수직 센터링을 구현하여 : Flexbox Method : D-Flex, 정당화 컨텐츠 중심 및 정렬 중심 센터 클래스를 사용하여 Flexbox 컨테이너에 요소를 배치하십시오. Align-Items-Center 클래스 방법 : Flexbox를 지원하지 않는 브라우저의 경우 상위 요소의 높이가 정의 된 경우 Align-Items 중심 클래스를 사용하십시오.

부트 스트랩에 분할 라인을 작성하는 방법 Apr 07, 2025 pm 03:12 PM

부트 스트랩 분할 라인을 만드는 두 가지 방법이 있습니다 : 태그를 사용하여 수평 분할 라인이 생성됩니다. CSS 테두리 속성을 사용하여 사용자 정의 스타일 분할 라인을 만듭니다.

부트 스트랩에 사진을 삽입하는 방법 Apr 07, 2025 pm 03:30 PM

Bootstrap에 이미지를 삽입하는 방법에는 여러 가지가 있습니다. HTML IMG 태그를 사용하여 이미지를 직접 삽입하십시오. 부트 스트랩 이미지 구성 요소를 사용하면 반응 형 이미지와 더 많은 스타일을 제공 할 수 있습니다. 이미지 크기를 설정하고 IMG-Fluid 클래스를 사용하여 이미지를 적응할 수 있도록하십시오. IMG 통과 클래스를 사용하여 테두리를 설정하십시오. 둥근 모서리를 설정하고 IMG 라운드 클래스를 사용하십시오. 그림자를 설정하고 그림자 클래스를 사용하십시오. CSS 스타일을 사용하여 이미지를 조정하고 배치하십시오. 배경 이미지를 사용하여 배경 이미지 CSS 속성을 사용하십시오.

부트 스트랩 크기를 조정하는 방법 Apr 07, 2025 pm 03:18 PM

부트 스트랩에서 요소의 크기를 조정하려면 다음을 포함하여 차원 클래스를 사용할 수 있습니다.

부트 스트랩을위한 프레임 워크를 설정하는 방법 Apr 07, 2025 pm 03:27 PM

부트 스트랩 프레임 워크를 설정하려면 다음 단계를 따라야합니다. 1. CDN을 통해 부트 스트랩 파일 참조; 2. 자신의 서버에서 파일을 다운로드하여 호스팅하십시오. 3. HTML에 부트 스트랩 파일을 포함; 4. 필요에 따라 Sass/Less를 컴파일하십시오. 5. 사용자 정의 파일을 가져옵니다 (선택 사항). 설정이 완료되면 Bootstrap의 그리드 시스템, 구성 요소 및 스타일을 사용하여 반응 형 웹 사이트 및 응용 프로그램을 만들 수 있습니다.