부트스트랩 4 페이지 매김 기본 페이지 매김 기본 페이지 매김을 생성하려면 .pagination 클래스를 <ul> 요소에 추가해보자. 그런 다음 각 <li> 요소에 .page-item를 추가하고 내부의 각 <li> 링크에 .page-link 클래스를 추가하자. 예제 <ul class=”pagination”> <li class=”page-item”><a class=”page-link” href=”#”>Previous</a></li> <li class=”page-item”><a class=”page-link” href=”#”>1</a></li> <li class=”page-item”><a class=”page-link” href=”#”>2</a></li> <li class=”page-item”><a class=”page-link” href=”#”>3</a></li> <li class=”page-item”><a class=”page-link” href=”#”>Next</a></li> </ul> 활성 상태 .active 클래스는 현재 페이지를 “강조 표시”하는 데 사용된다. 예제 <ul class=”pagination”> <li class=”page-item”><a class=”page-link” href=”#”>Previous</a></li> <li class=”page-item”><a class=”page-link” href=”#”>1</a></li> <li class=”page-item active”><a class=”page-link” href=”#”>2</a></li>…

부트스트랩 4 스피너 스피너/로더를 만들려면 다음 .spinner-border 클래스를 사용하자. <div class=”spinner-border”></div> 컬러 스피너 스피너에 색상을 추가하려면 텍스트 색상 유틸리티를 사용하자. 예제 <div class=”spinner-border text-muted”></div> <div class=”spinner-border text-primary”></div> <div class=”spinner-border text-success”></div> <div class=”spinner-border text-info”></div> <div class=”spinner-border text-warning”></div> <div class=”spinner-border text-danger”></div> <div class=”spinner-border text-secondary”></div> <div class=”spinner-border text-dark”></div> <div class=”spinner-border text-light”></div> 성장하는 스피너 “스핀” 대신 스피너/로더를 늘리려면 이 .spinner-grow 클래스를 사용하자. 예제 <div class=”spinner-grow text-muted”></div> <div class=”spinner-grow text-primary”></div> <div class=”spinner-grow text-success”></div> <div class=”spinner-grow text-info”></div> <div class=”spinner-grow text-warning”></div> <div class=”spinner-grow text-danger”></div> <div class=”spinner-grow text-secondary”></div>…

부트스트랩 4 진행률 표시줄 진행률 표시줄을 사용하여 사용자에게 프로세스 진행 정도를 표시할 수 있다. 25% 완료 50% 완료 100% 완료 기본 진행 표시줄 기본 진행률 표시줄을 만들려면 컨테이너 요소에 .progress 클래스를 추가하고 해당 .progress-bar 클래스를 해당 하위 요소에 추가한다. 진행률 표시줄의 너비를 설정하려면 CSS width 속성을 사용하자. 예제 <span> 요소 내에서 상황에 맞는 클래스(예: .badge) 와 함께 .badge-secondary 클래스를 사용하여 직사각형 배지를 만든다. 배지는 상위 요소(있는 경우)의 크기에 맞게 크기가 조정된다. <div class=”progress”> <div class=”progress-bar” style=”width:70%”></div> </div> 진행률 표시줄 높이…

부트스트랩 4 배지 배지는 콘텐츠에 추가 정보를 추가하는 데 사용된다. 예제 <span> 요소 내에서 상황에 맞는 클래스(예: .badge) 와 함께 .badge-secondary 클래스를 사용하여 직사각형 배지를 만든다. 배지는 상위 요소(있는 경우)의 크기에 맞게 크기가 조정된다. <h1>Example heading <span class=”badge badge-secondary”>New</span></h1> <h2>Example heading <span class=”badge badge-secondary”>New</span></h2> <h3>Example heading <span class=”badge badge-secondary”>New</span></h3> <h4>Example heading <span class=”badge badge-secondary”>New</span></h4> <h5>Example heading <span class=”badge badge-secondary”>New</span></h5> <h6>Example heading <span class=”badge badge-secondary”>New</span></h6> 상황별 배지 배지 색상을 변경하려면 상황별 클래스(.badge-*)를 사용하자. 예제 <span class=”badge badge-primary”>Primary</span> <span class=”badge badge-secondary”>Secondary</span> <span…

부트스트랩 4 버튼 그룹 Bootstrap 4를 사용하면 일련의 버튼을 버튼 그룹에서 (한 줄에) 함께 그룹화할 수 있다. 애플 삼성 소니 .btn-group 클래스가 있는 <div> 요소를 사용하여 버튼 그룹을 만든다. 예제 <div class=”btn-group”> <button type=”button” class=”btn btn-primary”>Apple</button> <button type=”button” class=”btn btn-primary”>Samsung</button> <button type=”button” class=”btn btn-primary”>Sony</button> </div> ⭐ 그룹의 모든 버튼에 버튼 크기를 적용하는 대신 큰 버튼 그룹 .btn-group-lg 또는 작은 버튼 그룹에 .btn-group-sm 클래스를 사용하자. 예제 <div class=”btn-group btn-group-lg”> <button type=”button” class=”btn btn-primary”>Apple</button> <button type=”button” class=”btn btn-primary”>Samsung</button> <button type=”button” class=”btn btn-primary”>Sony</button>…

부트스트랩 4 버튼 Bootstrap 4는 다양한 스타일의 버튼을 제공한다. 예제 1 <button type=”button” class=”btn”>Basic</button> <button type=”button” class=”btn btn-primary”>Primary</button> <button type=”button” class=”btn btn-secondary”>Secondary</button> <button type=”button” class=”btn btn-success”>Success</button> <button type=”button” class=”btn btn-info”>Info</button> <button type=”button” class=”btn btn-warning”>Warning</button> <button type=”button” class=”btn btn-danger”>Danger</button> <button type=”button” class=”btn btn-dark”>Dark</button> <button type=”button” class=”btn btn-light”>Light</button> <button type=”button” class=”btn btn-link”>Link</button> 예제 2 <a href=”#” class=”btn btn-info” role=”button”>Link Button</a> <button type=”button” class=”btn btn-info”>Button</button> <input type=”button” class=”btn btn-info” value=”Input Button”> <input type=”submit” class=”btn btn-info” value=”Submit Button”> 버튼 개요 부트스트랩 4는 8개의 윤곽선/테두리…

부트스트랩 4 경고 Bootstrap 4는 사전 정의된 경고 메시지를 생성하는 쉬운 방법을 제공한다. × 성공! 이 경고 상자는 성공 또는 긍정적인 작업을 나타냅니다. × 정보! 이 경고 상자는 중립적인 정보 변경 또는 조치를 나타냅니다. × 경고! 이 경고 상자는 주의가 필요할 수 있는 경고를 나타냅니다. × 위험! 이 경고 상자는 위험하거나 잠재적으로 부정적인 조치를 나타냅니다. × 기본적인! 이 경고 상자는 중요한 작업을 나타냅니다. × 이차적인! 이 경고 상자는 덜 중요한 작업을 나타냅니다. × 어두운! 진한 회색 경고 상자. × 밝은!…

부트스트랩 4 점보트론 점보트론은 특별한 콘텐츠나 정보에 특별한 주의를 환기시키기 위한 큰 회색 상자를 나타낸다. ⭐ 점보트론 내부에는 다른 Bootstrap 요소/클래스를 포함하여 거의 모든 유효한 HTML을 넣을 수 있다. 부트스트랩 튜토리얼 Bootstrap은 웹에서 반응형 모바일 우선 프로젝트를 개발하기 위한 가장 널리 사용되는 HTML, CSS 및 JS 프레임워크다. .jumbotron 클래스가 있는 <div> 요소를 사용하여 점보트론을 만든다. 예제 <div class=”jumbotron”> <h1>Bootstrap Tutorial</h1> <p>Bootstrap is the most popular HTML, CSS…</p> </div> 전폭 점보트론 둥근 테두리가 없는 전폭 점보트론을 원할 경우 .jumbotron-fluid 클래스와 그…

부트스트랩 4 이미지 모양 둥근 모서리: 원: 썸네일:   둥근 모서리 .rounded 클래스는 이미지에 둥근 모서리를 추가한다. 예제 <img src=”cinqueterre.jpg” class=”rounded” alt=”Cinque Terre” width=”304″ height=”236″> 원 .rounded-circle 클래스는 이미지를 원으로 만든다. 예제 <img src=”https://www.w3schools.com/bootstrap4/cinqueterre.jpg” class=”rounded-circle” alt=”Cinque Terre”> 썸네일 .img-thumbnail 클래스는 이미지를 썸네일(테두리)로 만든다. 예제 <img src=”https://www.w3schools.com/bootstrap4/cinqueterre.jpg” class=”img-thumbnail” alt=”Cinque Terre”> 이미지 정렬 .float-right 클래스가 있는 경우 오른쪽에 이미지를 띄우거나 .float-left를 사용하여 왼쪽에 이미지를 띄운다. 예제 <img src=”https://www.w3schools.com/bootstrap4/paris.jpg” class=”float-left”> <img src=”https://www.w3schools.com/bootstrap4/paris.jpg” class=”float-right”> 중심 이미지 유틸리티 클래스 .mx-auto(margin:auto) 및 .d-block(display:block)를 이미지에 추가하여 이미지를…

Bootstrap 4 기본 테이블 기본 Bootstrap 4 테이블에는 가벼운 패딩과 수평 구분선이 있다. 클래스 .table는 테이블에 기본 스타일을 추가한다. 예제 <table class=”table” style=”width: 100%; margin-bottom: 1rem; “> <thead> <tr> <th style=”padding: 0.75rem; text-align: -webkit-match-parent; border-top: 1px solid #dee2e6; font-weight: bold; border-bottom: 2px solid #dee2e6;”>Firstname</th> <th style=”padding: 0.75rem; text-align: -webkit-match-parent; border-top: 1px solid #dee2e6; font-weight: bold; border-bottom: 2px solid #dee2e6;”>Lastname</th> <th style=”padding: 0.75rem; text-align: -webkit-match-parent; border-top: 1px solid #dee2e6; font-weight: bold; border-bottom: 2px solid #dee2e6;”>Email</th> </tr> </thead> <tbody> <tr> <td style=”padding:…