Bootstrap Contents / image & media

- image

-> 부트스트랩은 pc 뿐만 아니라 어떤 종류의 디바이스든 간에 자동적으로 이미지의 사이즈를 맞추어 주는 클래스를 만들었다.

-> img-fluid 이다.

 

<img src="./img/img1.jpg" alt="Computer" class="img-fluid">

<div class="row">

            <div class="col-3">

                <h2>Thumbnail</h2>

                <img src="./img/img2.jpg" alt="" class="img-tumbnail">  <!--img-thumnail은 자동으로 img-fluid 개념이 포함-->

            </div>

            <div class="col-3">

                <h2>Rounded</h2>

                <img src="./img/img2.jpg" alt="" class="img" class="img-fluid rounded"> <!--여기선 img-fluid 입력-->

            </div>

            <div class="col-3">

                <h2>Image Shadow</h2>

                <img src="./img/img2.jpg" alt="" class="img-fluid rounded shadow-lg"> <!--둥근 이미지에 그림자 효과를 넣음-->

                <!--shadow shadow-sm shadow-lg 3종류 사용-->

            </div>

            <div class="col-3">

                <h2>Custom Circle</h2>

                <img src="./img/img2.jpg" alt="" class="img-fluid rounded-circle shadow-lg">

            </div>

  </div>

 

 

- Media Object

 

 <div class="media">

                    <img class="img-fluid rounded-circle shadow-lg mr-3" src="./img/img3.jpg" alt="Generic placeholder image" width="96px">

                    <div class="media-body">

                        <h5 class="mt-0">Media heading</h5>

                        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ea quia doloremque molestiae commodi explicabo modi, reprehenderit

                        quibusdam magni odit pariatur, ex recusandae unde est nisi dolores reiciendis, molestias quam vitae

                        mollitia provident! Eaque, commodi cum, quia, eius incidunt tempora cupiditate magnam consectetur

                        at quis sequi magni dolor placeat aperiam nobis.

                        <div class="media-footer">

                            <a href="#" class="btn btn-link float-right text-white" data-toggle="tooltip" data-placement="bottom" title="Reply to Comment">

                                <i class="fas fa-paper-plane"></i> Reply

                            </a>

                        </div>

                    </div>

                </div>

                <div class="media">

                    <img class="img-fluid rounded-circle shadow-lg mr-3" src="./img/img3.jpg" alt="Generic placeholder image" width="96px">

                    <div class="media-body">

                        <h5 class="mt-0">Media heading</h5>

                        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ea quia doloremque molestiae commodi explicabo modi, reprehenderit

                        quibusdam magni odit pariatur, ex recusandae unde est nisi dolores reiciendis, molestias quam vitae

                        mollitia provident! Eaque, commodi cum, quia, eius incidunt tempora cupiditate magnam consectetur

                        at quis sequi magni dolor placeat aperiam nobis.

                        <div class="media-footer">

                            <a href="#" class="btn btn-link float-right text-white" data-toggle="tooltip" data-placement="bottom" title="Reply to Comment">

                                <i class="fas fa-paper-plane"></i> Reply

                            </a>

                        </div>

                    </div>

                </div>