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://ko.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://ko.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://ko.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://ko.oldtoolbag.com/run/images/paris.jpg"　class="float-left">　
　　<img src="https://ko.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://ko.oldtoolbag.com/run/images/paris.jpg" class="img-fluid">
</div>
</body>
</html>

테스트를 보세요.‹/›

Bootstrap4 Jumbotron Bootstrap4 테이블