이 글에서는 Bootstrap의 그림 구성 요소와 개요 구성 요소를 살펴보고 반응형 그림, 그림 썸네일, 그림 태그 및 개요(그림)를 소개하겠습니다.
1 이미지
이 섹션에서는 이미지가 반응형 동작을 지원하도록 만드는 방법(상위 요소의 범위를 초과하지 않도록)과 클래스를 통해 일부 스타일을 추가하는 방법을 알아봅니다.
1.1 반응형 이미지
Bootstrap에서 제공하는 .img-fluid 클래스를 사용하여 이미지가 반응형 레이아웃을 지원하도록 만드세요. 원칙은 이미지에 max-width: 100%; 및 height: auto;를 부여하여 상위 요소에 따라 크기가 조정되는 것입니다. [관련 추천: "부트스트랩 튜토리얼"]
nbsp;html> <meta> <meta> <meta> <meta> <link> <title>图片演示</title> <div> <img src="/static/imghwm/default1.png" data-src="pic/taohua.jpg" class="lazy" 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 class="img-thumbnail lazy" src="/static/imghwm/default1.png" data-src="pic/taohua.jpg" style="max-width:90%" alt="点击查看大图">
</div>
<script src="bootstrap5/bootstrap.bundle.min.js" ></script>
</body>
</html>이 컴포넌트도 반응형인데 스크린샷만 올렸습니다. 위 CSS 스타일은 이미지가 가장자리에 가까워지는 것을 방지하여 테두리가 보이지 않게 하는 것입니다. 컨테이너를 직접 사용하지 마세요. 모든 사람이 컨테이너도 컨테이너의 일부라고 생각할 수 있도록 하기 위한 것입니다.
1.3 그림 태그
그림 요소는 하나 이상의 source 요소와 미디어(미디어 쿼리)와 결합된 img 요소를 포함하여 사용되며, 화면과 일치하는 다양한 크기에 따라 다양한 그림이 표시됩니다. 일치하는 항목이 없거나 브라우저가 그림 속성을 지원하지 않으면 그림 요소에 대해 몇 개의 소스를 지정하더라도 하나만 사용됩니다. 그 중 또는 img가 표시됩니다.
<img class="img-thumbnail lazy" src="/static/imghwm/default1.png" data-src="pic/taohua.jpg" alt="Bootstrap의 그림 구성 요소와 개요 구성 요소에 대해 이야기해 보겠습니다." > 요소를 사용하여 여러 <source></source> 요소를 지정하는 경우 .img-* 클래스를 < <code><picture></picture> 요소나 소스 요소 대신 ;img> 요소를 사용하세요. <img class="img-thumbnail lazy" src="/static/imghwm/default1.png" data-src="pic/taohua.jpg" alt="Bootstrap의 그림 구성 요소와 개요 구성 요소에 대해 이야기해 보겠습니다." > 指定多个 <source></source> 元素的话，请确保将 .img-* 类添加到 <img class="img-thumbnail lazy" src="/static/imghwm/default1.png" data-src="pic/taohua.jpg" alt="Bootstrap의 그림 구성 요소와 개요 구성 요소에 대해 이야기해 보겠습니다." > 元素而不是<picture></picture> 元素或者source元素上。
source元素排列是有顺序的。媒体查询的值，如果是max-width，则从小到大排序；如果是min-width，则按从大到小的顺序排列。下面是源码，源码中js代码是获取屏幕宽度，作为对照。
nbsp;html>
<meta>
<meta>
<meta>
<meta>
<link>
<title>图片演示</title>
<div>
<p>
<span></span>
<script>
getwidth();
window.onresize = function(){
getwidth();
}
function getwidth(){
document.getElementById("info").innerHTML="宽度："+document.documentElement.clientWidth+"，高度："+document.documentElement.clientHeight;
}
</script>
</p>
<picture>
<source>
<source>
<img class="img-thumbnail lazy" src="/static/imghwm/default1.png" data-src="pic/taohua.jpg" alt="Bootstrap의 그림 구성 요소와 개요 구성 요소에 대해 이야기해 보겠습니다." >
</source></source></picture>
<picture>
<source>
<source>
<img class="img-thumbnail lazy" src="/static/imghwm/default1.png" data-src="pic/taohua.jpg" alt="Bootstrap의 그림 구성 요소와 개요 구성 요소에 대해 이야기해 보겠습니다." >
</source></source></picture>
</div>
<script></script>
下面是演示
2 轮廓（Figures）
通过 Bootstrap 的轮廓（figure）组件来显示相关联的图片和文本。任何时候需要显示一段内容（例如带有可选标题的图片），请使用 <figure></figure>标签。
使用内置的.figure、.figure-img和.figure-caption类别，可提供HTML5 <figure></figure>和<figcaption></figcaption>标签一些基本样式设定。图片没有明确尺寸，请务必在<img class="figure-img img-fluid rounded lazy" src="/static/imghwm/default1.png" data-src="pic/taohua.jpg" alt="Bootstrap의 그림 구성 요소와 개요 구성 요소에 대해 이야기해 보겠습니다." >
nbsp;html> <meta> <meta> <meta> <meta> <link> <title>figure演示</title> <div> <figure> <img class="figure-img img-fluid rounded lazy" src="/static/imghwm/default1.png" data-src="pic/taohua.jpg" alt="Bootstrap의 그림 구성 요소와 개요 구성 요소에 대해 이야기해 보겠습니다." > <figcaption>桃花朵朵开</figcaption> </figure> </div> <script></script>여기 데모가 있습니다
그림 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
0에서 부트 스트랩까지 : 신속하게 시작합니다Apr 27, 2025 am 12:07 AMBootstrap은 HTML, CSS 및 JavaScript를 기반으로 한 오픈 소스 프론트 엔드 프레임 워크로, 개발자가 반응 형 웹 사이트를 신속하게 구축 할 수 있도록 설계되었습니다. 디자인 철학은 "모바일 우선"이며 그리드 시스템, 버튼, 양식, 내비게이션 바 등과 같은 풍부한 사전 정의 된 구성 요소 및 도구를 제공하고 프론트 엔드 개발 프로세스 단순화, 개발 효율성 향상 및 웹 사이트의 응답 성 및 일관성을 제공합니다. 부트 스트랩을 사용하면 간단한 페이지로 시작하여 카드 및 모달 박스와 같은 고급 구성 요소를 점차적으로 추가 할 수 있습니다. 성능을 최적화하기위한 모범 사례에는 부트 스트랩 사용자 정의, CDN 사용 및 클래스 이름의 과도한 사용이 포함됩니다.
React and Bootstrap : 사용자 인터페이스 설계 향상Apr 26, 2025 am 12:18 AMReact 및 Bootstrap을 원활하게 통합하여 사용자 인터페이스 설계를 향상시킬 수 있습니다. 1) 종속성 패키지 설치 : NPMINSTALLBOOTSTRAPREACT-BOOTSTRAP. 2) CSS 파일을 가져옵니다 : import'Bootstrap/dist/css/bootstrap.min.css '. 3) 버튼 및 탐색 막대와 같은 부트 스트랩 구성 요소를 사용하십시오. 이 조합을 통해 개발자는 React의 유연성 및 Bootstrap의 스타일 라이브러리를 활용하여 아름답고 효율적인 사용자 인터페이스를 만들 수 있습니다.
부트 스트랩을 React에 통합 : 실용 가이드Apr 25, 2025 am 12:04 AM부트 스트랩을 React 프로젝트에 통합하는 단계에는 다음이 포함됩니다. 1. 부트 스트랩 패키지 설치, 2. CSS 파일 가져 오기, 3. 부트 스트랩 클래스 이름을 스타일 요소에 사용하십시오. 이 통합은 REACT의 구성 요소화 및 부트 스트랩의 스타일 시스템을 사용하여 효율적인 UI 개발을 달성합니다.
부트 스트랩은 무엇에 사용됩니까? 실용적인 설명Apr 24, 2025 am 12:16 AMBootStrapisApowerfulframeworkstimplifiescreatingresponsive, mobile-firstwebsites.itoffers : 1) Agridsystemforadaptablelayouts, 2) pre-styledements-buttonsandforms 및 3) javascromponentssuchascarouselsforenhancedinteractifice.
부트 스트랩 : 레이아웃에서 구성 요소까지Apr 23, 2025 am 12:06 AMBootstrap은 Twitter에서 개발 한 프론트 엔드 프레임 워크로 HTML, CSS 및 JavaScript를 통합하여 개발자가 반응 형 웹 사이트를 신속하게 구축 할 수 있도록 도와줍니다. 핵심 기능에는 다음이 포함됩니다. 그리드 시스템 및 레이아웃 : 12 열 설계, Flexbox 레이아웃 사용 및 다양한 장치 크기의 반응 형 페이지를 지원하는 것이 포함됩니다. 구성 요소 및 스타일 : 버튼, 모달 박스 등과 같은 풍부한 구성 요소 라이브러리를 제공하며 클래스 이름을 추가하여 아름다운 효과를 얻을 수 있습니다. 작동 방식 : CSS 및 JavaScript에 의존하면 CSS는 적은 또는 SASS 전 처리기를 사용하며 JavaScript는 jQuery를 사용하여 대화식 및 동적 효과를 달성합니다. 이러한 기능을 통해 부트 스트랩은 개발을 크게 향상시킵니다
부트 스트랩이란 무엇입니까? 초보자를위한 소개Apr 22, 2025 am 12:07 AMbootstrapisafreecssframework that thatwebdevelopmentbyprovingpre-styledcomponentsandjavascriptplugins.it'sidealforcreatingresponsive, mobile-firstwebsites, powerfilectiblegridsystemforlayoutSandasupportiveCommunityOrlynityAndOcustomization.
Bootstrap Demystified : 간단한 설명Apr 21, 2025 am 12:13 AMBootstrapisAfree, Open-SourcecsSframeworkthathelpScreateResponsive, mobile-firstwebsites.1) itofferSagridsystemforlayoutFlexibility, 2) incespre-styledcomponentsforquickDesign 및 3) ishighlyCustomaMaSavoidGenericLooks, ButRequirsTOTET
부트 스트랩 대 반응 : 올바른 접근법 선택Apr 20, 2025 am 12:09 AM부트 스트랩은 빠른 건설 및 소규모 프로젝트에 적합하지만 React는 복잡하고 대화식 응용 프로그램에 적합합니다. 1) Bootstrap은 사전 정의 된 CSS 및 JavaScript 구성 요소를 제공하여 반응 형 인터페이스 개발을 단순화합니다. 2) React는 구성 요소 개발 및 가상 DOM을 통해 성능과 상호 작용을 향상시킵니다.
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!
인기 기사
뜨거운 도구
Atom Editor Mac 버전 다운로드
가장 인기 있는 오픈 소스 편집기
드림위버 CS6
시각적 웹 개발 도구
에디트플러스 중국어 크랙 버전
작은 크기, 구문 강조, 코드 프롬프트 기능을 지원하지 않음
Dreamweaver Mac版
시각적 웹 개발 도구
SublimeText3 영어 버전
권장 사항: Win 버전, 코드 프롬프트 지원!
