이 글에서는Bootstrap의 그림 구성 요소와 개요 구성 요소를 살펴보고 반응형 그림, 그림 썸네일, 그림 태그 및 개요(그림)를 소개하겠습니다.

Bootstrap의 그림 구성 요소와 개요 구성 요소에 대해 이야기해 보겠습니다.

1 이미지

이 섹션에서는 이미지가 반응형 동작을 지원하도록 만드는 방법(상위 요소의 범위를 초과하지 않도록)과 클래스를 통해 일부 스타일을 추가하는 방법을 알아봅니다.

1.1 반응형 이미지

Bootstrap에서 제공하는 .img-fluid 클래스를 사용하여 이미지가 반응형 레이아웃을 지원하도록 만드세요. 원칙은 이미지에 max-width: 100%; 및 height: auto;를 부여하여 상위 요소에 따라 크기가 조정되는 것입니다. [관련 추천: "부트스트랩 튜토리얼"]

nbsp;html>      图片演示

로그인 후 복사

위 컨테이너는 이미지를 중앙에 두고 모든 면에 여백을 두어 잘라낸 것입니다. 아래는 데모 영상입니다.

Bootstrap의 그림 구성 요소와 개요 구성 요소에 대해 이야기해 보겠습니다.

10.1.2 이미지 썸네일

일반 클래스에서 제공하는 border-radius 외에도 .img-thumbnail을 사용하여 1px 너비의 원형 테두리가 있는 이미지 모양을 제공할 수도 있습니다.

         图片演示

로그인 후 복사

이 컴포넌트도 반응형인데 스크린샷만 올렸습니다. 위 CSS 스타일은 이미지가 가장자리에 가까워지는 것을 방지하여 테두리가 보이지 않게 하는 것입니다. 컨테이너를 직접 사용하지 마세요. 모든 사람이 컨테이너도 컨테이너의 일부라고 생각할 수 있도록 하기 위한 것입니다.

Bootstrap의 그림 구성 요소와 개요 구성 요소에 대해 이야기해 보겠습니다.

1.3 그림 태그

그림 요소는 하나 이상의 source 요소와 미디어(미디어 쿼리)와 결합된 img 요소를 포함하여 사용되며, 화면과 일치하는 다양한 크기에 따라 다양한 그림이 표시됩니다. 일치하는 항목이 없거나 브라우저가 그림 속성을 지원하지 않으면 그림 요소에 대해 몇 개의 소스를 지정하더라도 하나만 사용됩니다. 그 중 또는 img가 표시됩니다.

요소를 사용하여 여러요소를 지정하는 경우 .img-* 클래스를< 요소나 소스 요소 대신 ;img>요소를 사용하세요.指定多个元素的话，请确保将 .img-* 类添加到元素而不是元素或者source元素上。


       source元素排列是有顺序的。媒体查询的值，如果是max-width，则从小到大排序；如果是min-width，则按从大到小的顺序排列。下面是源码，源码中js代码是获取屏幕宽度，作为对照。
       
                图片演示 
      
           
   
        
         로그인 후 복사
        
       
       下面是演示
       
       2 轮廓（Figures）
       通过 Bootstrap 的轮廓（figure）组件来显示相关联的图片和文本。任何时候需要显示一段内容（例如带有可选标题的图片），请使用
标签。
       使用内置的.figure、.figure-img和.figure-caption类别，可提供HTML5
和标签一些基本样式设定。图片没有明确尺寸，请务必在소스 요소는 순서대로 배열되어 있습니다. 미디어 쿼리의 값이 max-width이면 작은 것부터 큰 것 순으로 정렬되고, min-width인 경우 큰 것부터 작은 것 순으로 정렬됩니다. 다음은 소스코드 중 js 코드를 비교하여 화면 너비를 구하는 것입니다.
       
       
                figure演示 
     桃花朵朵开
 
 
   
        
         로그인 후 복사
        
       여기 데모가 있습니다
       
       그림 2개
       Bootstrap의 그림 구성 요소를 사용하여 관련 그림과 텍스트를 표시하세요. 콘텐츠(예: 선택적 캡션이 있는 이미지)를 표시해야 할 때마다
       태그를 사용하세요.
       내장된 .Figure, .Figure-img 및 .Figure-caption 카테고리를 사용하여 HTML5
및에 대한 몇 가지 기본 스타일 설정을 제공하세요. > 태그 물론이죠. 이미지의 크기가 명확하지 않습니다.태그에 .img-fluid 카테고리를 추가하여 반응형 이미지로 설정하세요.실제로 개요 구성 요소는 그림에만 사용되는 것이 아닙니다. 이전 섹션의 텍스트 레이아웃 부분과 소스 인용 부분에서는 개요 구성 요소가 사용되었습니다.
       rrreee
       img 태그의 rounded 클래스에 대한 간략한 설명은 이미지의 모서리가 둥글게 처리되어 있다는 의미이며, 필요하지 않으면 작성할 필요가 없습니다. figcaption 태그의 text-center 클래스는 이미지를 중앙 정렬하는 것입니다. text-end를 사용하여 이미지를 오른쪽으로 정렬할 수도 있습니다.오늘 수업은 여기까지입니다.저를 따라오세요 Liu Liu가 쓴 원본 "Bootstrap 5 from Zero Basics to Mastery"의 섹션 11에서 Bootstrap의 테이블을 배우세요. 테이블은 용도가 다양하고 디자인하기가 꽤 까다롭습니다. 부트스트랩을 사용하면 멋진 테이블을 쉽게 만들 수 있습니다. 이 글이 도움이 되셨다면 좋아요 꼭 눌러주세요! 부트스트랩에 대한 자세한 내용을 보려면 부트스트랩 기본 튜토리얼을 방문하세요! !
       위 내용은 Bootstrap의 그림 구성 요소와 개요 구성 요소에 대해 이야기해 보겠습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!