第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機立即綁定

Bootstrap教程(13)--圖像和縮略圖組

標簽:
Bootstrap

1. 概述

图片比文字传达信息更加直观、更加具象,具备不可代替的意义。

必不可少的,Bootstrap也为图像提供了一定支持,本篇就来具体介绍下。

2. 响应式图像

通过给图像设置.img-responsive类,即可将图像设置为响应式图像,可以自动适应容器的大小。

<img src="bootstrap-logo.jpg" alt="Bootstrap logo" class="img-responsive">

3. 图像样式

Bootstrap还为图像提供了三种常见的样式:

  1. .img-rounded:圆角图像
  2. .img-thumbnail:缩略图样式
  3. .img-circle:圆形样式

示例代码:

  	  <div class="row">
           <div class="col-md-4">
               <img src="bootstrap-logo.jpg" alt="Bootstrap logo" class="img-responsive">
           </div>
           <div class="col-md-4">
               <img src="bootstrap-logo.jpg" alt="Bootstrap logo" class="img-thumbnail">
           </div>
           <div class="col-md-4">
               <img src="bootstrap-logo.jpg" alt="Bootstrap logo" class="img-circle">
           </div>
       </div>

对应效果如下,注意缩略图是有一个边框效果的。
在这里插入图片描述

4. 缩略图组

除了可以将单一图像设置为缩略图,还可以将一组图像都设置为缩略图样式,此时需要为图像外围容器设置.thumbnail类。

示例代码:

 		<div class="row" style="margin-top:8px;">
            <div class="col-xs-4 ">
                <div class="thumbnail">
                    <img src="bootstrap-logo.jpg" alt="Bootstrap logo">
                </div>
            </div>
            <div class="col-xs-4 ">
                <div class="thumbnail">
                    <img src="bootstrap-logo.jpg" alt="Bootstrap logo">
                </div>
            </div>
            <div class="col-xs-4 ">
                <div class="thumbnail">
                    <img src="bootstrap-logo.jpg" alt="Bootstrap logo">
                </div>
            </div>
        </div>

效果如下:
图片描述

5. 小结

Bootstrap为图像和缩略图组提供了简单的样式类,主要是作为一个基础效果,其实还提供了一定的灵活度,程序开发人员可以在此基础上进一步定制。

點擊查看更多內容
TA 點贊

若覺得本文不錯,就分享一下吧!

評論

作者其他優(yōu)質文章

正在加載中
  • 推薦
  • 評論
  • 收藏
  • 共同學習,寫下你的評論
感謝您的支持,我會繼續(xù)努力的~
掃碼打賞,你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃,即可進行掃碼打賞哦
今天注冊有機會得

100積分直接送

付費專欄免費學

大額優(yōu)惠券免費領

立即參與 放棄機會
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網(wǎng)微信公眾號

舉報

0/150
提交
取消