Bootstrap 기본 튜토리얼

Bootstrap 플러그인

Bootstrap 이미지

이 장에서는 Bootstrap가 이미지에 대한 지원을 배웁니다. Bootstrap는 이미지에 간단한 스타일을 적용할 수 있는 세 가지 클래스를 제공합니다：

.img-둥글게를 추가합니다。 border-radius:6px 를 추가하여 이미지 모서리를 둥글게 합니다。
.img-원형를 추가합니다。 border-radius:50% 전체 이미지를 원형으로 만듭니다。
.img-스ライ드：빈칸(padding)과 회색 테두리를 추가합니다。

다음 예제를 보세요:

온라인 예제

예제

!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Bootstrap 예제　-　그래픽</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<img src="/실행/images/download.png" class="img-둥글게">
<img src="/실행/images/download.png" class="img-원형">
<img src="/실행/images/download.png" class="img-thumbnail">
</body>
</html>

테스트 봐라 ‹/›

결과는 다음과 같습니다：

<img> 클래스

다음 클래스는 어떤 이미지에도 사용할 수 있습니다。

클래스	설명	예제
.img-둥글게	이미지에 둥글게 모서리를 추가합니다 (IE8 지원하지 않습니다)	시도해 보세요
.img-원형	이미지를 원형으로 만듭니다 (IE8 지원하지 않습니다)	시도해 보세요
.img-스ライ드	스ライ드 기능	시도해 보세요
.img-반응형	이미지 반응형 (부모 요소로 확장됩니다)	시도해 보세요

반응형 이미지

<img> 태그에 .img-responsive 클래스를 사용하여 이미지가 반응형 디자인을 지원하도록 합니다。　이미지는 부모 요소로 확장됩니다.

.img-responsive 클래스는 max-width: 100%;와 height: auto; 스타일을 이미지에 적용합니다：

온라인 예제

예제

!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>기본 튜토리얼 웹(oldtoolbag.com)</title>　
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
	<h2>이미지</h2>
	<p>　<img-responsive 클래스는 이미지가 반응형을 지원하도록 하여, 부모 요소에 잘 확장됩니다(윈도우 크기를 변경하여 효과를 확인하세요):</p>　　　　　　　　　　　　　　　　　　
	<img　src="cinqueterre.jpg"　class="img-responsive"　alt="Cinque Terre"　width="304"　height="236">　
</div>
</body>
</html>

테스트 봐라 ‹/›

Bootstrap 보조 클래스 Bootstrap 버튼