부트스트랩은 웹디자인을 쉽게하기 위해 미리 몇가지의 CSS의 클래스 선택자와 정의된 스타일시트, 자바스크립트 플러그인을 모은 강력한 프론트엔드 프레임워크입니다. <부트스트랩 소개와 다운로드 중 참조...>
참고로 이블로그 게시물은 한글부트스트랩3을 참고로 만들어 졌으며 제 블로그 공부용으로 작성한 것입니다.
Code 코드
인라인 Inline
<code> 로 짧은 코드를 표시하세요.
For example, <section> should be wrapped as inline.
For example, <code><section></code> should be wrapped as inline.
사용자 입력 User input
일반적으로 키보드 입력을 위해 나타내는 태그로 <kbd>를 사용하세요
To switch directories, type <kbd>cd</kbd> followed by the name of the directory.
기본 블록 Basic block
여러행의 코드를 위해 <pre> 를 사용하세요. 적절한 렌더링을 위해 어떤 꺽쇠 괄호는 부호화를 해야합니다.
<p>Sample text here...</p>
<pre><p>Sample text here...</p></pre>당신은 선택적으로 .pre-scrollable 를 추가할 수도 있습니다. 그건 최대 높이를 350px 로 설정하고 y축 스크롤바를 제공합니다.
<!DOCTYPE HTML> <html> <head> <title>Title of the document</title> </head> <body> <pre class=pre-scrollable> The content of the document...... </pre> </body> </html>
<pre class="pre-scrollable">
...
</pre>
Tables 테이블
기본 예제 Basic example
<table> 에 약간의 패딩과 수평 구분선이 있는 기본 스타일의 .table 클래스를 추가하세요. 그건 매우 불필요해 보이지만, 캘린더와 날짜선택기 같은 플러그인들을 위해 테이블이 널리 사용되는 것을 감안하여, 맞춤 테이블 스타일들을 분리하기로 했습니다.
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
<table class="table">
...
</table>
줄무늬 행 Striped rows
<tbody> 안에 테이블 행에 얼룩말같은 줄무늬를 추가하려면, .table-striped 를 사용하세요.
크로스브라우저 호환성
줄무늬 행 테이블은 :nth-child CSS 셀렉터로 꾸며지기 때문에, 인터넷 익스플로러 8 에서는 가능하지 않습니다.
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
<table class="table table-striped">
...
</table>
선있는 테이블 Bordered table
.table-bordered 을 추가하여 선있는 테이블을 만들수 있습니다.
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| Mark | Otto | @TwBootstrap | |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
<table class="table table-bordered">
...
</table>
행 hover Hover rows
<tbody> 안 테이블 행에 hover 상태를 확인할 수 있게끔 하려면 .table-hover 를 추가하세요.
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
<table class="table table-hover">
...
</table>
좁은폭 테이블 Condensed table
셀 패딩을 반으로 줄여 테이블을 좀 더 조밀하게 만드려면 .table-condensed 을 추가하세요.
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
<table class="table table-condensed">
...
</table>테이블 기본 패딩은 8px 이고, .table-condensed은 5px입니다.
맥락적인 클래스들 Contextual classes
테이블 행이나 셀에 색을 넣으려면 맥락적인 클래스들을 사용하세요.
| 클래스 | 설명 |
|---|---|
.active |
특정한 행이나 셀에 hover 했을 때와 같은 색을 입힙니다. |
.success |
성공적이거나 긍정적인 액션을 의미합니다. |
.warning |
주의가 필요한 경고를 의미합니다. |
.danger |
위험하거나 부정적일수 있는 액션을 의미합니다. |
| # | Column heading | Column heading | Column heading |
|---|---|---|---|
| 1 | Column content | Column content | Column content |
| 2 | Column content | Column content | Column content |
| 3 | Column content | Column content | Column content |
| 4 | Column content | Column content | Column content |
| 5 | Column content | Column content | Column content |
| 6 | Column content | Column content | Column content |
| 7 | Column content | Column content | Column content |
| 8 | Column content | Column content | Column content |
| 9 | Column content | Column content | Column content |
<!-- On rows -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>
<!-- On cells (`td` or `th`) -->
<tr>
<td class="active">...</td>
<td class="success">...</td>
<td class="warning">...</td>
<td class="danger">...</td>
<td class="info">...</td>
</tr>
반응형 테이블 Responsive tables
.table 을 .table-responsive 으로 감싸서 작은 기기에서는 수평 스크롤을 할 수 있는 반응형 테이블을 만듭니다(768px 이하). 768px 보다 큰 기기에서는 보기에 차이가 없습니다.
| # | Table heading | Table heading | Table heading | Table heading | Table heading | Table heading |
|---|---|---|---|---|---|---|
| 1 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell |
| 2 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell |
| 3 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell |
| # | Table heading | Table heading | Table heading | Table heading | Table heading | Table heading |
|---|---|---|---|---|---|---|
| 1 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell |
| 2 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell |
| 3 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell |
<div class="table-responsive">
<table class="table">
...
</table>
</div>
Thanks to
'라이브러리 > Bootstrap' 카테고리의 다른 글
| 부트스트랩 : 폼 (0) | 2014.04.13 |
|---|---|
| 부트스트랩 : 타이포그래피 (0) | 2014.03.26 |
| 부트스트랩 : 그리드 시스템 (0) | 2014.03.23 |
| 부트스트랩 : CSS 개요 (0) | 2014.03.23 |
| 부트스트랩 : 참고사항 (0) | 2014.03.21 |