부트스트랩은 매일매일 배워야 할 테이블_자바스크립트 기술

이 글은 주로 표에 대한 설명입니다. 사실 웹사이트를 해본 사람들에게는 낯설지 않은 내용이기도 하고, 때로는 사용자나 상사의 요구로 인해 가장 많이 사용되는 표시라고도 할 수 있습니다. . 두통. 부트스트랩이 우리를 위해 어떤 종류의 테이블을 준비했는지 살펴볼까요? 아래와 같이:

1.기본 케이스
2. 스트라이프 테이블
3. 테두리가 있는 표
4. 마우스 오버
5. 압축표
6. 신분등급
7. 반응형
8. 요약

기본 케이스
f5d188ed2c074f8b944552db028f98a1 태그에 .table을 추가하면 약간의 패딩과 가로 구분선과 같은 기본 스타일이 제공됩니다. 이 접근 방식은 매우 중복되어 보입니다! ? 다만, 테이블 요소가 많이 사용되는 것 같고, 기본 스타일을 주면 달력, 날짜 선택 등 플러그인에 영향을 줄 수 있다는 점에서 스타일을 분리하기로 했습니다.

간단한 테이블 예시

 <div class="container">
 <table class="table"> 
  <caption>Table基本案例</caption> 
  <thead> 
  <tr> 
   <th>First Name</th> 
   <th>Last Name</th>
   <th>User Name</th> 
  </tr> 
  </thead> 
  <tbody> 
  <tr> 
   <td>aehyok</td> 
   <td>leo</td> 
   <td>@aehyok</td> 
  </tr>
  <tr> 
   <td>lynn</td> 
   <td>thl</td> 
   <td>@lynn</td> 
  </tr>
  </tbody> 
 </table> 
 </div>

줄무늬 테이블

92cee25da80fac49f6fb6eec5fd2c22a 내의 모든 항목에 얼룩말 줄무늬 스타일을 추가하려면 .table-striped를 사용하세요.
위 예제의 테이블 요소에 다른 스타일 클래스
를 추가하세요. 850aad7c9803f65863edd23ef123b2cc
현재 효과를 보면 아직 변화가 있는 부분이 있습니다.

테두리가 있는 표
.table-bordered를 사용하여 테이블과 그 안의 각 셀에 테두리를 추가합니다.
또는 첫 번째 예의 테이블 요소에 다른 스타일 클래스
를 추가하세요. 8e6a5157b5b720a6b30bc7886b8a1bae

마우스 오버
.table-hover를 사용하여 92cee25da80fac49f6fb6eec5fd2c22a의 각 행이 마우스 호버 상태에 반응하도록 합니다.
95df9d71803495963fc38c12f79bae2c
해당 선으로 마우스를 이동하면 효과가 나타납니다

콤팩트 테이블
테이블을 더 컴팩트하게 만들려면 .table-densed를 사용하세요. 그러면 셀의 패딩이 절반으로 줄어듭니다.
6fb72b45b3090d1a987b983bdf8118b2
이 효과는 그다지 명확하지 않습니다. 주로 셀 내용의 패딩이 절반으로 줄어들기 때문입니다.

상태 클래스
이러한 상태 클래스를 통해 라이센스가 부여된 셀에 대한 색상을 설정할 수 있습니다.

<table class="table table-condensed"> 
  <caption>Table</caption> 
  <thead> 
  <tr> 
   <th>#</th>
   <th>First Name</th> 
   <th>Last Name</th>
   <th>User Name</th> 
  </tr> 
  </thead> 
  <tbody> 
  <tr class="active"> 
   <td>1</td>
   <td>aehyok</td> 
   <td>leo</td> 
   <td>@aehyok</td> 
  </tr>
  <tr class="success"> 
   <td>2</td>
   <td>lynn</td> 
   <td>thl</td> 
   <td>@lynn</td> 
  </tr>
  <tr class="warning"> 
   <td>3</td> 
   <td>Amdy</td> 
   <td>Amy</td> 
   <td>@Amdy</td> 
  </tr>
  <tr class="danger"> 
   <td>4</td> 
   <td>Amdy</td> 
   <td>Amy</td> 
   <td>@Amdy</td> 
  </tr>
  <tr > 
   <td class="success">5</td> 
   <td class="danger">Amdy</td> 
   <td class="warning">Amy</td> 
   <td class="active">@Amdy</td> 
  </tr>
  </tbody> 
 </table> 

반응형
작은 화면 장치(768px 미만)에서 가로로 스크롤되는 반응형 테이블을 생성하려면 .table-반응형으로 .table을 래핑하세요. 화면 너비가 768px보다 크면 가로 스크롤 막대가 사라집니다. 

<div class="table-responsive">
 <table class="table"> 
  <caption>Table</caption> 
  <thead> 
  <tr> 
   <th>#</th>
   <th>First Name</th> 
   <th>Last Name</th>
   <th>User Name</th> 
  </tr> 
  </thead> 
  <tbody> 
  <tr class="active"> 
   <td>1</td>
   <td>aehyok</td> 
   <td>leo</td> 
   <td>@aehyok</td> 
  </tr>
  <tr class="success"> 
   <td>2</td>
   <td>lynn</td> 
   <td>thl</td> 
   <td>@lynn</td> 
  </tr>
  <tr class="warning"> 
   <td>3</td> 
   <td>Amdy</td> 
   <td>Amy</td> 
   <td>@Amdy</td> 
  </tr>
  <tr class="danger"> 
   <td>4</td> 
   <td>Amdy</td> 
   <td>Amy</td> 
   <td>@Amdy</td> 
  </tr>
  <tr > 
   <td class="success">5</td> 
   <td class="danger">Amdy</td> 
   <td class="warning">Amy</td> 
   <td class="active">@Amdy</td> 
  </tr>
  </tbody> 
 </table>
 </div>

스크롤바가 나타나는 것을 보세요.

몇 가지 간단한 스타일 클래스를 통해 페이지를 이 수준으로 변환할 수 있습니다. 이는 앞으로 더 이상 스타일 조정에 대해 걱정할 필요가 없다는 점입니다.

위는 가장 일반적으로 사용되는 부트스트랩 테이블 목록을 표시한 것입니다. 모든 분들의 학습에 도움이 되기를 바랍니다.