https://www.w3schools.com/bootstrap/bootstrap_images.asp
Bootstrap Images
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>04_image.html</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Rounded Corners</h2>
<p>The .img-rounded class adds rounded corners to an image (not available in IE8):</p>
<img src="../images/cosmos1.jpg" class="img-rounded" alt="Cinque Terre" width="304" height="236">
</div>
<div class="container">
<h2>Circle</h2>
<p>The .img-circle class shapes the image to a circle (not available in IE8):</p>
<img src="../images/cosmos1.jpg" class="img-circle" alt="Cinque Terre" width="304" height="236">
</div>
<div class="container">
<h2>Thumbnail</h2>
<p>The .img-thumbnail class creates a thumbnail of the image:</p>
<img src="../images/cosmos1.jpg" class="img-thumbnail" alt="Cinque Terre" width="304" height="236">
</div>
<div class="container">
<h2>Image</h2>
<p>The .img-responsive class makes the image scale nicely to the parent element (resize the browser window to see the effect):</p>
<img class="img-responsive" src="../images/cosmos1.jpg" alt="Chania" width="460" height="345">
</div>
<div class="container">
<h2>Image Gallery</h2>
<p>The .thumbnail class can be used to display an image gallery.</p>
<p>The .caption class adds proper padding and a dark grey color to text inside thumbnails.</p>
<p>Click on the images to enlarge them.</p>
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<a href="../images/cosmos1.jpg" target="_blank">
<img src="../images/cosmos1.jpg" alt="Lights" style="width:100%">
<div class="caption">
<p>Lorem ipsum donec id elit non mi porta gravida at eget metus.</p>
</div>
</a>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<a href="../images/cosmos1.jpg" target="_blank">
<img src="../images/cosmos1.jpg" alt="Nature" style="width:100%">
<div class="caption">
<p>Lorem ipsum donec id elit non mi porta gravida at eget metus.</p>
</div>
</a>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<a href="../images/cosmos1.jpg" target="_blank">
<img src="../images/cosmos1.jpg" alt="Fjords" style="width:100%">
<div class="caption">
<p>Lorem ipsum donec id elit non mi porta gravida at eget metus.</p>
</div>
</a>
</div>
</div>
</div>
</div>
<div class="container">
<h2>Responsive Embed</h2>
<p>Create a responsive video and scale it nicely to the parent element with an 16:9 aspect ratio</p>
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>
</div>
</body>
</html>Rounded Corners
The .img-rounded class adds rounded corners to an image (not available in IE8):
Circle
The .img-circle class shapes the image to a circle (not available in IE8):
Thumbnail
The .img-thumbnail class creates a thumbnail of the image:
Image
The .img-responsive class makes the image scale nicely to the parent element (resize the browser window to see the effect):
Image Gallery
The .thumbnail class can be used to display an image gallery.
The .caption class adds proper padding and a dark grey color to text inside thumbnails.
Click on the images to enlarge them.
Responsive Embed
Create a responsive video and scale it nicely to the parent element with an 16:9 aspect ratio
'웹개발 교육 > Bootstrap' 카테고리의 다른 글
| [45일] bootstrap (6) - input (0) | 2022.09.29 |
|---|---|
| [45일] bootstrap (5) - pagination (0) | 2022.09.29 |
| [45일] bootstrap (3) - table (0) | 2022.09.29 |
| [45일] bootstrap (2) - button (0) | 2022.09.29 |
| [45일] bootstrap (1) - bootstrap이란?, 설치 및 사용 방법 (0) | 2022.09.29 |
