Bootstrap에서 테이블 스타일을 설정하는 방법-JS 튜토리얼-php.cn

Bootstrap 파일을 외부에서 가져와 테이블 스타일을 설정할 수 있습니다. 가져온 후 Bootstrap 파일에 테이블 스타일 클래스를 추가합니다. 특정 스타일을 추가하는 html 코드 이름

오늘은 Bootstrap을 통해 테이블 스타일을 빠르게 구축하는 방법을 소개하겠습니다. 이는 특정 참조 값이 있으며 모든 사람에게 도움이 되기를 바랍니다.

Bootstrap에서 테이블 스타일을 설정하는 방법

#🎜🎜 #

Bootstrap 의미:

Bootstrap은 웹 애플리케이션과 웹사이트의 신속한 개발을 위한 프런트 엔드 프레임워크입니다. 부트스트랩은 주로 HTML, CSS, JavaScript 언어 문서를 기반으로 합니다.

다음과 같은 기능이 있습니다:

CSS에는 전역 CSS 설정, 기본 HTML 요소 스타일 정의, 확장 가능한 클래스 및 기타 기능이 있습니다. 동시에 이미지 생성, 드롭다운 메뉴, 탐색, 경고 상자, 팝업 상자 등을 위한 재사용 가능한 구성 요소가 12개 이상 포함되어 있습니다. 부트스트랩에 포함된 JavaScript 플러그인에는 12개 이상의 사용자 정의 jQuery 플러그인이 포함되어 있습니다. 코드에서

을 직접 사용하여 Bootstrap을 통해 테이블 스타일을 빠르게 구축할 수 있습니다. #🎜🎜 ##🎜 🎜# (1) 외부에서 부트스트랩 파일 도입

<link type="text/css" rel="stylesheet" href=".\bootstrap-3.3.7-dist\css\bootstrap.css">
 <script type="text/javascript" src=".\bootstrap-3.3.7-dist\js\bootstrap.min.css"></script>

로그인 후 복사

(2) HTML 코드를 통해 테이블 생성

 <table>
            <thead>
                <tr>
                    <th>标题一</th>
                    <th>标题二</th>
                    <th>标题三</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>示例一</td>
                    <td>示例一</td>
                    <td>示例一</td></tr>
                <tr>
                    <td>示例二</td>
                    <td>示例二</td>
                    <td>示例二</td></tr>
                <tr>
                    <td>示例三</td>
                    <td>示例三</td>
                    <td>示例三</td></tr>
                </tbody>
        </table>

로그인 후 복사

Rendering:

# 🎜 🎜#

(3) 다음으로 Bootstrap을 외부에 도입하여 테이블 스타일을 빠르게 구축합니다 Image 10.jpg

# 🎜 🎜#.table

모든 <테이블>에 기본 스타일(가로 구분선만) 추가 .table- 줄무늬 에 얼룩말 줄무늬 추가(IE8에서는 지원되지 않음) .table-bordered.table-confided테이블을 더 컴팩트하게 만들기#🎜🎜 #

   <table class="table table-striped table-hover table-bordered .table-condensed"style="width:450px">
            <thead>
                <tr>
                    <th>标题一</th>
                    <th>标题二</th>
                    <th>标题三</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>示例一</td>
                    <td>示例一</td>
                    <td>示例一</td></tr>
                <tr>
                    <td>示例二</td>
                    <td>示例二</td>
                    <td>示例二</td></tr>
                <tr>
                    <td>示例三</td>
                    <td>示例三</td>
                    <td>示例三</td></tr>
                </tbody>
        </table>

로그인 후 복사

#🎜🎜 #렌더링: 또한 테이블에 배경색을 추가할 수도 있습니다. 구체적인 코드는 다음과 같습니다


	# 🎜🎜 # 모든 테이블 셀에 테두리 추가
.table-hover	호버 상태 내의 모든 행에 마우스 활성화#🎜🎜 #

.active

Bootstrap에서 테이블 스타일을 설정하는 방법 호버 색상을 특정 행이나 셀에 적용

.success 성공 또는 긍정적인 행동을 나타냅니다. .warning#🎜 🎜# 주의가 필요한 경고를 나타냅니다. #🎜🎜 #

  <table class="table table-striped table-hover table-bordered .table-condensed"style="width:450px">
            <thead>
                <tr class="active">
                    <th>标题一</th>
                    <th>标题二</th>
                    <th>标题三</th>
                </tr>
            </thead>
            <tbody>
                <tr class="success">
                    <td>示例一</td>
                    <td>示例一</td>
                    <td>示例一</td></tr>
                <tr class="warning">
                    <td>示例二</td>
                    <td>示例二</td>
                    <td>示例二</td></tr>
                <tr class="danger">
                    <td>示例三</td>
                    <td>示例三</td>
                    <td>示例三</td></tr>
                </tbody>
        </table>

로그인 후 복사

Rendering: Summary: 위 내용은 기사 전체 내용입니다. 이 기사가 빠른 생성 방법을 배우는 데 도움이 되기를 바랍니다. 외부에서 Bootstrap을 도입하여 테이블 스타일

위 내용은 Bootstrap에서 테이블 스타일을 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!