Bootstrap4 基本教程

Bootstrap4 画像の形状

画像は現代のウェブデザインで非常に一般的です。したがって、画像のスタイル設定と正しい位置付けは、ユーザーエクスペリエンスの向上に非常に重要です。

Bootstrapの内蔵クラスを使用すると、画像のスタイルを簡単に設定できます。例えば、角を丸くしたり、サムネイルのような効果を加えたりすることができます。

圆角图片

.rounded 类可以让图片显示圆角效果：

示例

!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>圆角图片</h2>
　　<p>.rounded　类可以让图片显示圆角效果：</p>　　　　　　　　　　　　
　　<img　src="https://ja.oldtoolbag.com/run/images/cinqueterre.jpg"　class="rounded"　alt="Cinque　Terre"　width="304"　height="236">　
</div>
</body>
</html>

テストを見てみる ‹/›

椭圆图片

.rounded-circle 类可以设置椭圆形图片:

示例

!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>椭圆图片</h2>
　　<p>.rounded-circle　类可以设置椭圆形图片:</p>　　　　　　　　　　　　
　　<img　src="https://ja.oldtoolbag.com/run/images/cinqueterre.jpg"　class="rounded-circle"　alt="Cinque　Terre">　
</div>
</body>
</html>

テストを見てみる ‹/›

缩略图

.img-thumbnail 类用于设置图片缩略图(图片有边框):

示例

!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>缩略图</h2>
　　<p>.img-thumbnail　类用于设置图片缩略图(图片有边框):</p>　　　　　　　　　　　　
　　<img　src="https://ja.oldtoolbag.com/run/images/cinqueterre.jpg"　class="img-thumbnail"　alt="Cinque　Terre">
</div>
</body>
</html>

テストを見てみる ‹/›

图片对齐方式

使用 .float-right 类来设置图片右对齐，使用 .float-left 类设置图片左对齐:

示例

!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>图片对齐方式</h2>
　　<p>使用　.float-right　类来设置图片右对齐，使用　.float-left　类设置图片左对齐:</p>
　　<img　src="https://ja.oldtoolbag.com/run/images/paris.jpg"　class="float-left">　
　　<img　src="https://ja.oldtoolbag.com/run/images/cinqueterre.jpg"　class="float-right">
</div>
</body>
</html>

テストを見てみる ‹/›

响应式图片

图像有各种各样的尺寸，我们需要根据屏幕的大小自动适应。

我们可以通过在 <img> 　标签中添加 .img-fluid 类来设置响应式图片。

.img-fluid 类设置了 max-width: 100%; 、 height: auto; :

示例

!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>リスポンシブな画像</h2>
　　<p>.img-fluid　クラスを使用してリスポンシブな画像を設定できます、ブラウザのサイズを変更して効果を確認してください:</p>
　　<img　src="https://ja.oldtoolbag.com/run/images/paris.jpg"　class="img-fluid">
</div>
</body>
</html>

テストを見てみる ‹/›

Bootstrap4 Jumbotron Bootstrap4 テーブル