집 >웹 프론트엔드 >부트스트랩 튜토리얼 >Bootstrap의 그림 구성 요소와 개요 구성 요소에 대해 이야기해 보겠습니다.
Bootstrap의 그림 구성 요소와 개요 구성 요소에 대해 이야기해 보겠습니다.
- 青灯夜游앞으로
- 2021-11-19 19:32:332330검색
이 글에서는 Bootstrap의 그림 구성 요소와 개요 구성 요소를 살펴보고 반응형 그림, 그림 썸네일, 그림 태그 및 개요(그림)를 소개하겠습니다.
1 이미지
이 섹션에서는 이미지가 반응형 동작을 지원하도록 만드는 방법(상위 요소의 범위를 초과하지 않도록)과 클래스를 통해 일부 스타일을 추가하는 방법을 알아봅니다.
1.1 반응형 이미지
Bootstrap에서 제공하는 .img-fluid 클래스를 사용하여 이미지가 반응형 레이아웃을 지원하도록 만드세요. 원칙은 이미지에 max-width: 100%; 및 height: auto;를 부여하여 상위 요소에 따라 크기가 조정되는 것입니다. [관련 추천: "부트스트랩 튜토리얼"]
nbsp;html> <meta> <meta> <meta> <meta> <link> <title>图片演示</title> <div> <img alt="Bootstrap의 그림 구성 요소와 개요 구성 요소에 대해 이야기해 보겠습니다." > </div> <script></script>
위 컨테이너는 이미지를 중앙에 두고 모든 면에 여백을 두어 잘라낸 것입니다. 아래는 데모 영상입니다.
10.1.2 이미지 썸네일
일반 클래스에서 제공하는 border-radius 외에도 .img-thumbnail을 사용하여 1px 너비의 원형 테두리가 있는 이미지 모양을 제공할 수도 있습니다.
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
<style>
.div1{width: 300; height: 300px;text-align: center;padding-top: 50px;}
</style>
<title>图片演示</title>
</head>
<body>
<div class="div1">
<img src="pic/taohua.jpg" width="50%" class="img-thumbnail" alt="点击查看大图">
</div>
<script src="bootstrap5/bootstrap.bundle.min.js" ></script>
</body>
</html>이 컴포넌트도 반응형인데 스크린샷만 올렸습니다. 위 CSS 스타일은 이미지가 가장자리에 가까워지는 것을 방지하여 테두리가 보이지 않게 하는 것입니다. 컨테이너를 직접 사용하지 마세요. 모든 사람이 컨테이너도 컨테이너의 일부라고 생각할 수 있도록 하기 위한 것입니다.
1.3 그림 태그
그림 요소는 하나 이상의 source 요소와 미디어(미디어 쿼리)와 결합된 img 요소를 포함하여 사용되며, 화면과 일치하는 다양한 크기에 따라 다양한 그림이 표시됩니다. 일치하는 항목이 없거나 브라우저가 그림 속성을 지원하지 않으면 그림 요소에 대해 몇 개의 소스를 지정하더라도 하나만 사용됩니다. 그 중 또는 img가 표시됩니다.
<img alt="Bootstrap의 그림 구성 요소와 개요 구성 요소에 대해 이야기해 보겠습니다." > 요소를 사용하여 여러 <source></source> 요소를 지정하는 경우 .img-* 클래스를 < <code><picture></picture> 요소나 소스 요소 대신 ;img> 요소를 사용하세요. <img alt="Bootstrap의 그림 구성 요소와 개요 구성 요소에 대해 이야기해 보겠습니다." > 指定多个 <source></source> 元素的话，请确保将 .img-* 类添加到 <img alt="Bootstrap의 그림 구성 요소와 개요 구성 요소에 대해 이야기해 보겠습니다." > 元素而不是<picture></picture> 元素或者source元素上。
source元素排列是有顺序的。媒体查询的值，如果是max-width，则从小到大排序；如果是min-width，则按从大到小的顺序排列。下面是源码，源码中js代码是获取屏幕宽度，作为对照。
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
<title>图片演示</title>
</head>
<body>
<div class="container">
<p>
<span id="info"></span>
<script>
getwidth();
window.onresize = function(){
getwidth();
}
function getwidth(){
document.getElementById("info").innerHTML="宽度："+document.documentElement.clientWidth+"，高度："+document.documentElement.clientHeight;
}
</script>
</p>
<picture>
<source media="(max-width: 600px)" srcset="pic/girl1.jpg">
<source media="(max-width: 700px)" srcset="pic/girl2.jpg">
<img src="pic/taohua.jpg" class="img-thumbnail" alt="Bootstrap의 그림 구성 요소와 개요 구성 요소에 대해 이야기해 보겠습니다." >
</picture>
<picture>
<source media="(min-width: 700px)" srcset="pic/girl1.jpg">
<source media="(min-width: 600px)" srcset="pic/girl2.jpg">
<img src="pic/taohua.jpg" class="img-thumbnail" alt="Bootstrap의 그림 구성 요소와 개요 구성 요소에 대해 이야기해 보겠습니다." >
</picture>
</div>
<script src="bootstrap5/bootstrap.bundle.min.js" ></script>
</body>
</html>下面是演示
2 轮廓（Figures）
通过 Bootstrap 的轮廓（figure）组件来显示相关联的图片和文本。任何时候需要显示一段内容（例如带有可选标题的图片），请使用 <figure></figure>标签。
使用内置的.figure、.figure-img和.figure-caption类别，可提供HTML5 <figure></figure>和<figcaption></figcaption>标签一些基本样式设定。图片没有明确尺寸，请务必在<img alt="Bootstrap의 그림 구성 요소와 개요 구성 요소에 대해 이야기해 보겠습니다." >
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
<title>figure演示</title>
</head>
<body>
<div class="container">
<figure class="figure">
<img src="pic/taohua.jpg" class="figure-img img-fluid rounded" alt="...">
<figcaption class="figure-caption text-center">桃花朵朵开</figcaption>
</figure>
</div>
<script src="bootstrap5/bootstrap.bundle.min.js" ></script>
</body>
</html>여기 데모가 있습니다
그림 2개
Bootstrap의 그림 구성 요소를 사용하여 관련 그림과 텍스트를 표시하세요. 콘텐츠(예: 선택적 캡션이 있는 이미지)를 표시해야 할 때마다 <figure></figure> 태그를 사용하세요. 내장된 .Figure, .Figure-img 및 .Figure-caption 카테고리를 사용하여 HTML5 <figure></figure> 및 <figcaption></figcaption>에 대한 몇 가지 기본 스타일 설정을 제공하세요. > 태그 물론이죠. 이미지의 크기가 명확하지 않습니다. <img alt="Bootstrap의 그림 구성 요소와 개요 구성 요소에 대해 이야기해 보겠습니다." > 태그에 .img-fluid 카테고리를 추가하여 반응형 이미지로 설정하세요.
rrreee
img 태그의 rounded 클래스에 대한 간략한 설명은 이미지의 모서리가 둥글게 처리되어 있다는 의미이며, 필요하지 않으면 작성할 필요가 없습니다. figcaption 태그의 text-center 클래스는 이미지를 중앙 정렬하는 것입니다. text-end를 사용하여 이미지를 오른쪽으로 정렬할 수도 있습니다. 오늘 수업은 여기까지입니다.
저를 따라오세요🎜 Liu Liu가 쓴 원본 "Bootstrap 5 from Zero Basics to Mastery"의 섹션 11에서 Bootstrap의 테이블을 배우세요. 테이블은 용도가 다양하고 디자인하기가 꽤 까다롭습니다. 부트스트랩을 사용하면 멋진 테이블을 쉽게 만들 수 있습니다. 🎜🎜🎜이 글이 도움이 되셨다면 좋아요 꼭 눌러주세요! 🎜🎜🎜부트스트랩에 대한 자세한 내용을 보려면 🎜부트스트랩 기본 튜토리얼🎜을 방문하세요! ! 🎜위 내용은 Bootstrap의 그림 구성 요소와 개요 구성 요소에 대해 이야기해 보겠습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!