bootstrap图像image bootstrapimage|Bootstrap教程

本文概述

Bootstrap映像取整示例
Bootstrap图像圆示例
Bootstrap缩略图图像示例
自举响应图像

【bootstrap图像image】Bootstrap支持映像。 Bootstrap中有三个类，可用于将一些简单样式应用于图像。
以下类为图像添加样式：

班级	用途
.img-rounded	它添加了border-radius：6px来给图像加上圆角。
.img-circle	通过添加border-radius：500px, 可以使整个图像变圆。
.img-thumbnail	它添加了一些填充和灰色边框。

Bootstrap映像取整示例.img-rounded类用于向图像添加圆角（IE8不支持圆角）。
例：

< !DOCTYPE html> < html lang="en"> < head> < title>Bootstrap image< /title> < link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> < /head> < body> < div class="container"> < h2>Rounded Corners< /h2> < img src="http://www.srcmini.com/abc.jpg" class="img-rounded" alt="abc" width="300" height="250"> < /div>< script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">< /script> < script src="http://img.readke.com/220416/155JT530-2.jpg">< /script> < /body> < /html>

Bootstrap图像圆示例.img-circle类用于将图像成形为圆形（IE8不支持圆角）。
例：

< !DOCTYPE html> < html lang="en"> < head> < title>Bootstrap image< /title> < link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> < /head> < body> < div class="container"> < h2>Circle< /h2> < img src="http://www.srcmini.com/abc.jpg" class="img-circle" alt="abc"width="300" height="250"> < /div>< script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">< /script> < script src="http://img.readke.com/220416/155JT530-2.jpg">< /script> < /body> < /html>

Bootstrap缩略图图像示例.img-thumbnail类用于将图像成形为缩略图。
例：

< !DOCTYPE html> < html lang="en"> < head> < title>Bootstrap image< /title> < link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> < /head> < body> < div class="container"> < h2>Thumbnail< /h2> < img src="http://www.srcmini.com/abc.jpg" class="img-thumbnail" alt="abc" width="300" height="250"> < /div>< script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">< /script> < script src="http://img.readke.com/220416/155JT530-2.jpg">< /script> < /body> < /html>

自举响应图像响应图像可以自动调整自身以适合屏幕尺寸。你可以通过向< img> 标记添加.img响应类来创建响应图像。然后，图像将很好地缩放到父元素。
％20.img响应式％20class％20应用％20display：％20block; ％20and％20最大宽度：％20100％; ％20and％20height：％20auto; ％20to％20the％20image。
例：

< !DOCTYPE html> < html lang="en"> < head> < title>Bootstrap Example< /title> < meta charset="utf-8"> < meta name="viewport" content="width=device-width, initial-scale=1"> < link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> < /head> < body>< div class="container"> < h2>Responsive Image< /h2> < img class="img-responsive" src="http://www.srcmini.com/abc.jpg" alt="abc" width="460" height="345"> < /div> < script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">< /script> < script src="http://img.readke.com/220416/155JT530-2.jpg">< /script> < /body> < /html>

自举响应视频/嵌入
在Bootstrap中，你还可以添加视频并在任何设备上正确缩放它们。 .embed-active-item类用于创建响应视频。类可以直接应用于< iframe> ，< embed> ，< video> 和< object> 元素。
让我们举个例子：
在以下示例中，我们将.embed-sensitive-item类添加到< iframe> 标记中以使视频具有响应性。它可以根据父元素很好地缩放视频。
例：

< !DOCTYPE html> < html lang="en"> < head> < title>Bootstrap Example< /title> < meta charset="utf-8"> < meta name="viewport" content="width=device-width, initial-scale=1"> < link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> < /head> < body>< div class="container"> < h2>Responsive Embed< /h2> < div class="embed-responsive embed-responsive-16by9"> < iframe class="embed-responsive-item" src="https://www.youtube.com/embed/XGSy3_Czz8k">< /iframe> < /div> < /div> < script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">< /script> < script src="http://img.readke.com/220416/155JT530-2.jpg">< /script>< /body> < /html>

对齐图像用于使图像通过.float-right类向右浮动，或者通过.float-left类向左浮动。
例：

< !DOCTYPE html> < html lang="en"> < head> < title>Bootstrap Example< /title> < meta charset="utf-8"> < meta name="viewport" content="width=device-width, initial-scale=1"> < link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"> < script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">< /script> < script src="http://img.readke.com/220416/155JR291-16.jpg">< /script> < script src="http://img.readke.com/220416/155JS2a-17.jpg">< /script> < /head> < body>< div class="container"> < h2>Aligning images Example< /h2> < p>Use the float classes to float the image to the left or to the right:< /p> < img src="http://www.srcmini.com/good-morning.jpg" class="float-left" alt="abc" width="300" height="250"> < img src="http://www.srcmini.com/good-morning.jpg" class="float-right" alt="abc" width="300" height="250"> < /div>< /body> < /html>