Bootstrap 圖像

2018-09-09 10:35 更新

Bootstrap 圖像

目標(biāo)

在本教程中，我們將討論三個(gè) Bootstrap 3 的 class 來為圖像添加樣式。同時(shí)，我們也會討論有關(guān) Bootstrap 3 為響應(yīng)式圖像所提供的內(nèi)容。

一般的樣式

在我們討論 Bootstrap 3 提供的定義圖像樣式的特殊的 class 之前，我們將看到 Bootstrap 3 提供的定義圖像的一般的樣式。

img {
  border: 0;
}

這是在 Bootstrap 3 的 CSS 中找到的第一個(gè)為圖像定義的 CSS 規(guī)則，當(dāng)圖像呈現(xiàn)時(shí)用來移除邊框。

然后，在打印的媒體查詢內(nèi)，規(guī)定了這些規(guī)則。

 img {
    page-break-inside: avoid;
  }
  img {
    max-width: 100% !important;
  }

page-break-inside: avoid; 避免圖像內(nèi)的分頁符。

max-width: 100% !important; 為圖像定義的樣式是顯而易見的。這里它用于確定即使圖像的寬度超出了容器，它也能被限制在容器內(nèi)顯示。它與 !important 一起使用，來覆蓋其他任何破壞這種樣式的樣式。有時(shí)候，開發(fā)人員想讓樣式更好地支持移動設(shè)備上圖像的友好呈現(xiàn)，會特別使用這兩個(gè)規(guī)則。

這里還有另一個(gè)用于圖像的規(guī)則

img {
  vertical-align: middle;
}

由于這條規(guī)則，一個(gè)圖像會在 div 或者其他元素內(nèi)垂直居中。如下面實(shí)例所示。

<!DOCTYPE html>
<html>
  <head>
    <title>example of rendering images in Bootstrap 3</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="dist/css/bootstrap.min.css" rel="stylesheet" media="screen">
    <style>
    body {
    padding: 50px
    }
     .mdl {
     background-color: silver;
     padding: 7px
    }
    </style>
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>       <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>       <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>     <![endif]-->
  </head>
  <body>
<p class="mdl"><img src="icon-default-screenshot.png">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://code.jquery.com/jquery.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="dist/js/bootstrap.min.js"></script>
  </body>
</html>

點(diǎn)擊這里，在線查看演示。

請注意，如果需要根據(jù)上下文垂直居中圖像，則需要額外的樣式。

特殊的樣式

Bootstrap 3 提供了三個(gè) class 用于呈現(xiàn)帶有明確樣式的圖像。

img-rounded

您可以使用這個(gè) class 來呈現(xiàn)帶有圓角的圖像。為了實(shí)現(xiàn)這點(diǎn)，Bootstrap 提供了 img-rounded class。該 class 的樣式如下定義

.img-rounded {
  border-radius: 6px;
}

所以，它把 border-radius 屬性設(shè)置為帶有 6 像素值，用來定義相關(guān)圖像的圓角。下面的實(shí)例演示了兩個(gè)相同的圖像，第一個(gè)圖像不帶 img-rounded class，第二個(gè)圖像帶有 img-rounded class。請注意，第二個(gè)圖像是圓角的。您可以 點(diǎn)擊這里，在線查看實(shí)例。

images with and without rounded corners 
<!DOCTYPE html>
<html>
  <head>
    <title>example of rendering images with rounded corners with Bootstrap 3</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="dist/css/bootstrap.min.css" rel="stylesheet" media="screen">
    <style>
    body {
    padding: 50px
    }
    </style>
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>       <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>       <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>     <![endif]-->
  </head>
  <body>
<img src="rounded-corner-images.png" alt="image with rounded corners">
<img src="rounded-corner-images.png" alt="image with rounded corners" class="img-rounded">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://code.jquery.com/jquery.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="dist/js/bootstrap.min.js"></script>
  </body>
</html>

img-thumbnail

這是另一個(gè) Bootstrap 3 的 CSS class，它給圖像添加了一個(gè)縮略圖。該 class 的代碼顯示如下

.img-thumbnail {
  display: inline-block;
  height: auto;
  max-width: 100%;
  padding: 4px;
  line-height: 1.428571429;
  background-color: #ffffff;
  border: 1px solid #dddddd;
  border-radius: 4px;
  -webkit-transition: all 0.2s ease-in-out;
          transition: all 0.2s ease-in-out;
}

下面是一個(gè)使用了該 class 的實(shí)例。您可以 點(diǎn)擊這里，查看在線演示。

two images without and with img-thumbnail 
<!DOCTYPE html>
<html>
  <head>
    <title>Images thumbnail with Bootstrap 3</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="dist/css/bootstrap.min.css" rel="stylesheet" media="screen">
    <style>
    body {
    padding: 50px
    }
    </style>
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>       <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>       <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>     <![endif]-->
  </head>
  <body>
<img src="image-with-thumbnail.png" alt="image without thumbnail corners">
<img src="image-with-thumbnail.png" alt="image with thumbnail corners" class="img-thumbnail">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://code.jquery.com/jquery.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="dist/js/bootstrap.min.js"></script>
  </body>
</html>

img-circle

通過使用 border-radius 屬性，Bootstrap 3 創(chuàng)建了一個(gè)以圓形呈現(xiàn)的圖像。img-circle class 的 CSS 代碼如下

.img-circle {
  border-radius: 50%;
}

點(diǎn)擊這里，在線查看實(shí)例。下面是截屏和代碼。

image without and with img-circle 
<!DOCTYPE html>
<html>
  <head>
    <title>Images with circle with Bootstrap 3</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="dist/css/bootstrap.min.css" rel="stylesheet" media="screen">
    <style>
    body {
    padding: 50px
    }
    </style>
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>       <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>       <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>     <![endif]-->
  </head>
  <body>
<img src="image-with-circle.png" alt="image without circle shape">
<img src="image-with-circle.png" alt="image with circle shape" class="img-circle">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://code.jquery.com/jquery.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="dist/js/bootstrap.min.js"></script>
  </body>
</html>

響應(yīng)式圖像

Bootstrap 3 沒有提供立即可用的響應(yīng)式圖像。您必須添加 img-responsive class 到圖像上讓它具有響應(yīng)性。該 class 的 CSS 代碼如下。

.img-responsive {
  display: block;
  height: auto;
  max-width: 100%;
}

它定義了圖像必須顯示為塊級元素，高度將與圖像高度相同，圖像的最大寬度是 100%，來限制圖像根據(jù)它所在的設(shè)備來呈現(xiàn)。

如需讓圖像默認(rèn)具有響應(yīng)特性，您可以添加這些 CSS 代碼到 img{ }。

使用該 class 的實(shí)例如下。您可以 點(diǎn)擊這里，在線查看演示。

<!DOCTYPE html>
<html>
  <head>
    <title>Responsive image example with Bootstrap 3</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="dist/css/bootstrap.min.css" rel="stylesheet" media="screen">
    <style>
    body {
    padding: 50px
    }
    img {
    margin-bottom:30px
    }
    </style>
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>       <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>       <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>     <![endif]-->
  </head>
  <body>
<img src="image-with-circle.png" alt="without responsive image feature">
<img src="image-with-circle.png" alt="with responsive image feature" class="img-responsive">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://code.jquery.com/jquery.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="dist/js/bootstrap.min.js"></script>
  </body>
</html>

這個(gè)向圖像添加響應(yīng)特性的方法有局限性。

分別在大屏幕設(shè)備和移動設(shè)備（屏幕尺寸更小，可能會引發(fā)性能問題）上加載同樣大的高分辨率的圖像。由于瀏覽器會在 CSS 和 JS 加載之前預(yù)先加載圖像，在一個(gè)低速的網(wǎng)絡(luò)連接中，也會引發(fā)性能問題。試想一下，您有一個(gè)大圖像和其內(nèi)的一個(gè)特定對象，當(dāng)您在移動設(shè)備上查看圖像時(shí)，圖像會被縮小到一個(gè)較小的版本，這樣圖像看起來就會很小，簡稱 藝術(shù)指導(dǎo) 問題。

開發(fā)人員已經(jīng)想出克服這些限制的解決方案。我們將看到一個(gè) Marc Grabanski 和 Christopher Schmitt 使用 HiSRC 的實(shí)例。這是一個(gè)會自動創(chuàng)建圖像的低、中、高分辨率版本的 Jquery 插件，呈現(xiàn)的版本取決于顯示圖像設(shè)備的分辨率和帶寬。

在我們后邊的 響應(yīng)式圖像教程 中，我們將詳細(xì)討論所有這些方法。

點(diǎn)擊這里，在線查看演示。代碼如下：

<!DOCTYPE html>
<html>
  <head>
    <title>Responsive image with HiSRC example with Bootstrap 3</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="dist/css/bootstrap.min.css" rel="stylesheet" media="screen">
    <style>
    body {
    padding: 50px
    }
    img {
    margin-bottom:30px
    }
    </style>
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>       <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>       <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>     <![endif]-->
  </head>
  <body>
<img src="5216852563_eca0af1b0d_m.jpg" data-1x="5216852563_eca0af1b0d.jpg" data-2x="5216852563_90c3f9c402_o.jpg" class="hisrc" />
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://code.jquery.com/jquery.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="dist/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
  $(".hisrc").hisrc();
});
</script>
<p>Photo courtesy: /http://www.flickr.com/photos/cubagallery/</p>
  </body>
</html>
以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號