Bootstrap 圖像

目標

在本教程中,我們將討論三個 Bootstrap 3 的 class 來為圖像添加樣式。同時,我們也會討論有關 Bootstrap 3 為響應式圖像所提供的內容。

一般的樣式

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

img {
  border: 0;
}

這是在 Bootstrap 3 的 CSS 中找到的第一個為圖像定義的 CSS 規則,當圖像呈現時用來移除邊框。

然後,在打印的媒體查詢內,規定了這些規則。

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

page-break-inside: avoid; 避免圖像內的分頁符。

max-width: 100% !important; 為圖像定義的樣式是顯而易見的。這裏它用於確定即使圖像的寬度超出了容器,它也能被限製在容器內顯示。它與 !important 一起使用,來覆蓋其他任何破壞這種樣式的樣式。有時候,開發人員想讓樣式更好地支持移動設備上圖像的友好呈現,會特別使用這兩個規則。

這裏還有另一個用於圖像的規則

img {
  vertical-align: middle;
}

由於這條規則,一個圖像會在 div 或者其他元素內垂直居中。如下麵實例所示。

實例

<!DOCTYPE html>
<html>
<head>
    <title>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支持 HTML5 原始和媒體查詢。 -->
    <!-- WARNING: Respond。如果通過file://查看頁麵js將不工作。 -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<p class="mdl"><img decoding="async" 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 (對Bootstrap的 JavaScript插件來說是必要的--->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- 包括所有已編譯的插件(如下),或者根據需要包括單個文件 -->
<script src="dist/js/bootstrap.min.js"></script>
</body>
</html>

點擊這裏,在線查看演示

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

特殊的樣式

Bootstrap 3 提供了三個 class 用於呈現帶有明確樣式的圖像。

img-rounded

您可以使用這個 class 來呈現帶有圓角的圖像。為了實現這點,Bootstrap 提供了 img-rounded class。該 class 的樣式如下定義

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

所以,它把 border-radius 屬性設置為帶有 6 像素值,用來定義相關圖像的圓角。下麵的實例演示了兩個相同的圖像,第一個圖像不帶 img-rounded class,第二個圖像帶有 img-rounded class。請注意,第二個圖像是圓角的。您可以 點擊這裏,在線查看實例

images with and without rounded corners

實例

<!DOCTYPE html>
<html>
<head>
    <title>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支持 HTML5 原始和媒體查詢。 -->
    <!-- WARNING: Respond。如果通過file://查看頁麵js將不工作。 -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<img decoding="async" src="rounded-corner-images.png" alt="image with rounded corners">
<img decoding="async" src="rounded-corner-images.png" alt="image with rounded corners" class="img-rounded">
<!-- jQuery (對Bootstrap的 JavaScript插件來說是必要的--->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- 包括所有已編譯的插件(如下),或者根據需要包括單個文件 -->
<script src="dist/js/bootstrap.min.js"></script>
</body>
</html>

img-thumbnail

這是另一個 Bootstrap 3 的 CSS class,它給圖像添加了一個縮略圖。該 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;
}

下麵是一個使用了該 class 的實例。您可以 點擊這裏,查看在線演示

two images without and with img-thumbnail

實例

<!DOCTYPE html>
<html>
<head>
    <title>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支持 HTML5 原始和媒體查詢。 -->
    <!-- WARNING: Respond。如果通過file://查看頁麵js將不工作。 -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<img decoding="async" src="image-with-thumbnail.png" alt="image without thumbnail corners">
<img decoding="async" src="image-with-thumbnail.png" alt="image with thumbnail corners" class="img-thumbnail">
<!-- jQuery (對Bootstrap的 JavaScript插件來說是必要的--->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- 包括所有已編譯的插件(如下),或者根據需要包括單個文件 -->
<script src="dist/js/bootstrap.min.js"></script>
</body>
</html>

img-circle

通過使用 border-radius 屬性,Bootstrap 3 創建了一個以圓形呈現的圖像。img-circle class 的 CSS 代碼如下

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

點擊這裏,在線查看實例。下麵是截屏和代碼。

image without and with img-circle

實例

<!DOCTYPE html>
<html>
<head>
    <title>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支持 HTML5 原始和媒體查詢。 -->
    <!-- WARNING: Respond。如果通過file://查看頁麵js將不工作。 -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<img decoding="async" src="image-with-circle.png" alt="image without circle shape">
<img decoding="async" src="image-with-circle.png" alt="image with circle shape" class="img-circle">
<!-- jQuery (對Bootstrap的 JavaScript插件來說是必要的--->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- 包括所有已編譯的插件(如下),或者根據需要包括單個文件 -->
<script src="dist/js/bootstrap.min.js"></script>
</body>
</html>

響應式圖像

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

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

它定義了圖像必須顯示為塊級元素,高度將與圖像高度相同,圖像的最大寬度是 100%,來限製圖像根據它所在的設備來呈現。

如需讓圖像默認具有響應特性,您可以添加這些 CSS 代碼到 img{ }

使用該 class 的實例如下。您可以 點擊這裏,在線查看演示

實例

<!DOCTYPE html>
<html>
<head>
    <title>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支持 HTML5 原始和媒體查詢。 -->
    <!-- WARNING: Respond。如果通過file://查看頁麵js將不工作。 -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<img decoding="async" src="image-with-circle.png" alt="without responsive image feature">
<img decoding="async" src="image-with-circle.png" alt="with responsive image feature" class="img-responsive">
<!-- jQuery (對Bootstrap的 JavaScript插件來說是必要的--->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- 包括所有已編譯的插件(如下),或者根據需要包括單個文件 -->
<script src="dist/js/bootstrap.min.js"></script>
</body>
</html>

這個向圖像添加響應特性的方法有局限性。

分別在大屏幕設備和移動設備(屏幕尺寸更小,可能會引發性能問題)上加載同樣大的高分辨率的圖像。由於瀏覽器會在 CSS 和 JS 加載之前預先加載圖像,在一個低速的網絡連接中,也會引發性能問題。試想一下,您有一個大圖像和其內的一個特定對象,當您在移動設備上查看圖像時,圖像會被縮小到一個較小的版本,這樣圖像看起來就會很小,簡稱 藝術指導 問題。

開發人員已經想出克服這些限製的解決方案。我們將看到一個 Marc GrabanskiChristopher Schmitt 使用 HiSRC 的實例。這是一個會自動創建圖像的低、中、高分辨率版本的 Jquery 插件,呈現的版本取決於顯示圖像設備的分辨率和帶寬。

在我們後邊的 響應式圖像教程 中,我們將詳細討論所有這些方法。

點擊這裏,在線查看演示。代碼如下:

實例

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap 3 使用HiSRC的響應式圖像實例</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支持 HTML5 原始和媒體查詢。 -->
    <!-- WARNING: Respond。如果通過file://查看頁麵js將不工作。 -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<img decoding="async" src="5216852563_eca0af1b0d_m.jpg" data-1x="5216852563_eca0af1b0d.jpg" data-2x="5216852563_90c3f9c402_o.jpg" class="hisrc" />
<!-- jQuery (對Bootstrap的 JavaScript插件來說是必要的--->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- 包括所有已編譯的插件(如下),或者根據需要包括單個文件 -->
<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>