부트스트랩 프레임워크의 테이블 및 관련 스타일 사용에 대한 자세한 그래픽 설명-CSS 튜토리얼-php.cn

부트스트랩 프레임워크의 테이블 및 관련 스타일 사용에 대한 자세한 그래픽 설명

yulia

풀어 주다： 2018-10-16 10:56:56

원래의

7809명이 탐색했습니다.

부트스트랩 프레임워크는 사용 편의성, 아름다운 레이아웃, 반응형 레이아웃으로 인해 널리 사용됩니다. 이 기사에서는 부트스트랩 테이블 예제를 사용하여 부트스트랩에서 테이블을 사용하는 방법과 테이블의 관련 스타일에 대해 설명합니다. 특정 참조 값이 있으면 관심 있는 친구가 참조할 수 있습니다.

부트스트랩 프레임워크 레이아웃을 사용하기 전에 먼저 관련 jQuery, CSS 및 JS 파일을 소개해야 합니다. 확실하지 않은 경우 이전 기사인 HTML 페이지에서 부트스트랩 프레임워크를 사용하는 방법을 읽어보거나 다음을 참조하세요. 부트스트랩 비디오 튜토리얼 .

1. 기본 테이블

기본 레이아웃이 완성된 후

태그에 클래스명 .table을 추가하여 기본 테이블 스타일(소량의 패딩 및 가로 구분선)을 구현합니다.

부트스트랩 테이블 예시: 학생 통계 정보를 위해 6행 4열로 구성된 테이블을 만듭니다. 구체적인 코드는 다음과 같습니다.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title></title>
  <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
  <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
  <script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
 </head>
 <body>
  <table class="table" style="width: 800px;" >
         <thead>
             <tr><th>学号</th><th>姓名</th><th>年龄</th><th>地址</th></tr>
         </thead>
         <tbody>
             <tr><td>1</td><td>郭靖</td><td>25</td><td>安徽</td></tr>
             <tr><td>2</td><td>田秋元</td><td>23</td><td>上海</td></tr>
             <tr><td>3</td><td>杨容</td><td>24</td><td>江西</td></tr>
             <tr><td>4</td><td>许悦</td><td>21</td><td>浙江</td></tr>
             <tr><td>5</td><td>张柏芝</td><td>22</td><td>新疆</td></tr>
         </tbody>
     </table>
 </body>
</html>

로그인 후 복사

Rendering:

부트스트랩 프레임워크의 테이블 및 관련 스타일 사용에 대한 자세한 그래픽 설명

2. 줄무늬 테이블

기본 테이블을 기준으로 합니다. ,

태그에 클래스 이름 .table-striped를 추가하여 내의 각 행에 얼룩말 줄무늬 스타일을 추가합니다.

 <table class="table table-striped "   style="max-width:90%" >

로그인 후 복사

효과는 그림과 같습니다.

부트스트랩 프레임워크의 테이블 및 관련 스타일 사용에 대한 자세한 그래픽 설명

3. 테두리가 있는 테이블

태그에 클래스 클래스 이름을 추가합니다. 그 중 셀에 테두리를 추가합니다.

 <table class="table table-bordered "   style="max-width:90%" >

로그인 후 복사

효과는 그림과 같습니다:

부트스트랩 프레임워크의 테이블 및 관련 스타일 사용에 대한 자세한 그래픽 설명

4. 테이블을 마우스로 가리키세요

태그에 클래스 클래스 이름.table-hover를 추가하여 < ;tbody> 각 행은 마우스오버 상태에 반응합니다. 마우스가 첫 번째 행 위로 이동하면 첫 번째 행의 배경색이 회색으로 변경됩니다.

 <table class="table table-hover "   style="max-width:90%" >

로그인 후 복사

효과는 그림과 같습니다.

부트스트랩 프레임워크의 테이블 및 관련 스타일 사용에 대한 자세한 그래픽 설명

5. 압축 테이블

태그에 클래스 클래스 이름.table-confended를 추가하면 테이블이 더욱 컴팩트해집니다. 반으로 줄어들게 됩니다.

 <table class="table table-condensed "   style="max-width:90%" >

로그인 후 복사

위 그림을 비교하여 테이블 압축 효과를 확인하세요.

부트스트랩 프레임워크의 테이블 및 관련 스타일 사용에 대한 자세한 그래픽 설명 6,

6. 반응형 테이블

클래스 name.table이 포함된 요소를 클래스 name.table이 포함된 요소에 래핑합니다. 반응형 요소 내에서 반응형 테이블을 생성할 수 있습니다. 화면이 768px보다 작으면 가로로 스크롤됩니다. 화면이 768px보다 크면 가로 스크롤 막대가 사라집니다.

<table class="table" >
         <thead>
             <tr><th>学号</th><th>姓名</th><th>年龄</th><th>地址</th></tr>
         </thead>
         <tbody>
             <tr><td>1</td><td>郭靖</td><td>25</td><td>安徽</td></tr>
             <tr><td>2</td><td>田秋元</td><td>23</td><td>上海</td></tr>
             <tr><td>3</td><td>杨容</td><td>24</td><td>江西</td></tr>
             <tr><td>4</td><td>许悦</td><td>21</td><td>浙江</td></tr>
             <tr><td>5</td><td>张柏芝</td><td>22</td><td>新疆</td></tr>
             <tr><td>1</td><td>郭靖</td><td>25</td><td>安徽</td></tr>
             <tr><td>2</td><td>田秋元</td><td>23</td><td>上海</td></tr>
             <tr><td>3</td><td>杨容</td><td>24</td><td>江西</td></tr>
             <tr><td>4</td><td>许悦</td><td>21</td><td>浙江</td></tr>
             <tr><td>5</td><td>张柏芝</td><td>22</td><td>新疆</td></tr>
         </tbody>
</table>

로그인 후 복사

효과는 사진에 나와 있습니다.

부트스트랩 프레임워크의 테이블 및 관련 스타일 사용에 대한 자세한 그래픽 설명

위에서는 부트스트랩 테이블 예제를 사용하여 테이블 사용 및 관련 스타일을 소개합니다. 비교적 간단하다면 부트스트랩 프레임워크 공식 웹사이트를 방문해 보세요. : http://v3 .bootcss.com, 이 글이 도움이 되었으면 좋겠습니다! 더 많은 관련 튜토리얼을 보려면 Bootstrap 온라인 설명서

를 방문하세요.

위 내용은 부트스트랩 프레임워크의 테이블 및 관련 스타일 사용에 대한 자세한 그래픽 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!