BootStrap5(BS5) 공부하기 6

많은 페이지를 가진 사이트를 만들때, 부트스트랩을 이용해 pagination을 만들 수 있다.
pagination을 만들때, 다음과 같이 하면 된다.

  <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>
    <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>

누를 수 없는 버튼을 작성하려면 다음과 같이하면 된다. 아마 첫페이지라면 다음과 같이 이전페이지 버튼을 누를 수 없게 하면 될 것 같다.

  <ul class="pagination">
    <li class="page-item disabled"><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>

pagination의 사이즈를 조정하려면 다음과 같이 하면 된다.

<ul class="pagination pagination-lg">
<ul class="pagination pagination-sm">

pagination의 align을 조정하려면 다음과 같이 한다.

<ul class="pagination justify-content-center">
<ul class="pagination justify-content-end">

pagination과 비슷한 형태로는 breadcrumbs가 있다.

  <ul class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Photos</a></li>
    <li class="breadcrumb-item"><a href="#">Summer 2017</a></li>
    <li class="breadcrumb-item"><a href="#">Italy</a></li>
    <li class="breadcrumb-item active">Rome</li>
  </ul>

pagination과 같은 문법으로 작성한다.(a class="page-link"가 없음을 제외하고)

정렬되지 않은 리스트를 작성하려면 다음과 같이 한다.

  <ul class="list-group">
    <li class="list-group-item">First item</li>
    <li class="list-group-item">Second item</li>
    <li class="list-group-item">Third item</li>
  </ul>

현재의 아이템에 하이라이트를 주려면 active를 사용하면 된다.

  <ul class="list-group">
    <li class="list-group-item active">Active item</li>
    <li class="list-group-item">Second item</li>
    <li class="list-group-item">Third item</li>
  </ul>

리스트 그룹의 아이템에 링크를 걸어 생성하기 위해서는 ul 대신에 divd를 사용하고, li대신에 a를 사용하면 된다. hover시 효과로 회색 백그라운드를 주길 원하면 list-group-item-action을 사용하면 된다.

  <div class="list-group">
    <a href="#" class="list-group-item list-group-item-action">First item</a>
    <a href="#" class="list-group-item list-group-item-action">Second item</a>
    <a href="#" class="list-group-item list-group-item-action">Third item</a>
  </div>

disabled 아이템을 만들면 회색 텍스트로 작용하게 하고, link에 사용되면 hover 효과를 제거한다.

  <div class="list-group">
    <a href="#" class="list-group-item disabled">Disabled item</a>
    <a href="#" class="list-group-item disabled">Disabled item</a>
    <a href="#" class="list-group-item">Third item</a>
  </div>

리스트 그룹에서 border와 코너를 제거하고 싶으면 다음과 같이 하면 된다.

  <ul class="list-group list-group-flush">
    <li class="list-group-item">First item</li>
    <li class="list-group-item">Second item</li>
    <li class="list-group-item">Third item</li>
    <li class="list-group-item">Fourth item</li>
  </ul>

리스트 그룹에 번호를 매기고 싶으면(정렬된 리스트) 다음과 같이 하면 된다.

  <ol class="list-group list-group-numbered">
    <li class="list-group-item">First item</li>
    <li class="list-group-item">Second item</li>
    <li class="list-group-item">Third item</li>
  </ol>

리스트를 수평적으로 배열하길 원한다면 list-group-horizontal을 사용한다.

  <ul class="list-group list-group-horizontal">
    <li class="list-group-item">First item</li>
    <li class="list-group-item">Second item</li>
    <li class="list-group-item">Third item</li>
    <li class="list-group-item">Fourth item</li>
  </ul>

컨텍스트 클래스는 아이템에 색상을 추가할때 사용할 수 있다.

  <ul class="list-group">
    <li class="list-group-item list-group-item-success">Success item</li>
    <li class="list-group-item list-group-item-secondary">Secondary item</li>
    <li class="list-group-item list-group-item-info">Info item</li>
    <li class="list-group-item list-group-item-warning">Warning item</li>
    <li class="list-group-item list-group-item-danger">Danger item</li>
    <li class="list-group-item list-group-item-primary">Primary item</li>
    <li class="list-group-item list-group-item-dark">Dark item</li>
    <li class="list-group-item list-group-item-light">Light item</li>
  </ul>

링크가 걸린 아이템에 색상을 주고 싶다면 다음처럼 하면 된다.

  <div class="list-group">
    <a href="#" class="list-group-item list-group-item-action">Action item</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-success">Success item</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">Secondary item</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-info">Info item</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-warning">Warning item</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-danger">Danger item</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-primary">Primary item</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-dark">Dark item</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-light">Light item</a>
  </div>

리스트 그룹에 뱃지를 사용하고 싶으면 다음과 같이 한다.

  <ul class="list-group">
    <li class="list-group-item d-flex justify-content-between align-items-center">
      Inbox
      <span class="badge bg-primary rounded-pill">12</span>
    </li>
    <li class="list-group-item d-flex justify-content-between align-items-center">
      Ads
      <span class="badge bg-primary rounded-pill">50</span>
    </li>
    <li class="list-group-item d-flex justify-content-between align-items-center">
      Junk
      <span class="badge bg-primary rounded-pill">99</span>
    </li>
  </ul>

부트스트랩에서는 다음과 같은 형태의 카드를 만들 수 있다.

기본적인 카드는 card 클래스로 생성하고, 카드 안의 내용은 card-body로 조정한다.

  <div class="card">
    <div class="card-body">Basic card</div>
  </div>

card의 구조로 header, body, footer가 있는데, 다음과 같이 구현할 수 있다.

  <div class="card">
    <div class="card-header">Header</div>
    <div class="card-body">Content</div> 
    <div class="card-footer">Footer</div>
  </div>

부트스트랩의 다른 클래스들 처럼, bg 컨텍스트 색상을 줄 수 있다.

  <div class="card">
    <div class="card-body">Basic card</div>
  </div>
  <br>
  <div class="card bg-primary text-white">
    <div class="card-body">Primary card</div>
  </div>
  <br>
  <div class="card bg-success text-white">
    <div class="card-body">Success card</div>
  </div>
  <br>
  <div class="card bg-info text-white">
    <div class="card-body">Info card</div>
  </div>
  <br>
  <div class="card bg-warning text-white">
    <div class="card-body">Warning card</div>
  </div>
  <br>
  <div class="card bg-danger text-white">
    <div class="card-body">Danger card</div>
  </div>
  <br>
  <div class="card bg-secondary text-white">
    <div class="card-body">Secondary card</div>
  </div>
  <br>
  <div class="card bg-dark text-white">
    <div class="card-body">Dark card</div>
  </div>
  <br>
  <div class="card bg-light text-dark">
    <div class="card-body">Light card</div>
  </div>

card에도 title, text, link적용이 가능하다.

  <div class="card">
    <div class="card-body">
      <h4 class="card-title">Card title</h4>
      <p class="card-text">Some example text. Some example text.</p>
      <a href="#" class="card-link">Card link</a>
      <a href="#" class="card-link">Another link</a>
    </div>
  </div>

card내부에 이미지를 넣을때 card-img-top, card-img-bottom을 img 클래스에 적용할 수 있다.
주목할것은, card-body의 밖에 이미지를 넣어주어야 한다는 것이다.

<p>Image at the top (card-img-top):</p>
<div class="card" style="width:400px">
    <img class="card-img-top" src="../bootstrap4/img_avatar1.png" alt="Card image" style="width:100%">
    <div class="card-body">
      <h4 class="card-title">John Doe</h4>
      <p class="card-text">Some example text some example text. John Doe is an architect and engineer</p>
      <a href="#" class="btn btn-primary">See Profile</a>
    </div>
</div>

<p>Image at the bottom (card-img-bottom):</p>
<div class="card" style="width:400px">
    <div class="card-body">
      <h4 class="card-title">Jane Doe</h4>
      <p class="card-text">Some example text some example text. Jane Doe is an architect and engineer</p>
      <a href="#" class="btn btn-primary">See Profile</a>
    </div>
    <img class="card-img-bottom" src="../bootstrap4/img_avatar6.png" alt="Card image" style="width:100%">
</div>

이미지 위에 텍스트를 작성하고 싶으면, 이미지를 백그라운드로 하고 card-img-overlay를 사용한다.

  <div class="card img-fluid" style="width:500px">
    <img class="card-img-top" src="../bootstrap4/img_avatar1.png" alt="Card image" style="width:100%">
    <div class="card-img-overlay">
      <h4 class="card-title">John Doe</h4>
      <p class="card-text">Some example text some example text. Some example text some example text. Some example text some example text. Some example text some example text.</p>
      <a href="#" class="btn btn-primary">See Profile</a>
    </div>
  </div>