<Bootstrap> 테이블 꾸미기

첫 부트스트랩 글에서 다루었듯이 이제 내가 쓸 테이블을 한번 꾸며보겠다. 

스타일이 입혀지는 과정을 한 단계씩 한번 밟아보겠다.

 

우선 기본적으로 우리가 쓸 데이터에 맞게 <td> 태그와 <tr> 태그를 작성해주자

 

 

당연하겠지만 아무 스타일도 입혀 놓지 않았기 때문에 무미건조한 테이블이 완성이 되었다.

 

부트스트랩 사용법은 전에도 말했듯이

본인이 사용할 스타일이 적용되어 있는 클래스명을 작성해주면 된다.

우선 보기 편하게 데이터를 추가적으로 더 넣어주고   "table" 이라는 클래스명을 붙여주고 변화를 살펴보자

 

 

벌써 클래스명을 입힌것만으로 큰 틀의 디자인이 바뀌었다!!..ㄷㄷ 추가적으로 "table-bordered" "table-hover", "table-striped" 등의 클래스명을 붙여주도록 하곘다. 

 

 

 

 

 

자세히 보면 홀수 번째 줄에 옅은 회색의 배경색이 구분되게 들어 갔고 "table-hover" 로 인해 마우스가 올라가면 색이 변하면서 이쁜 효과가 들어간 것을 확인 할수 있다.

 

게시판의 꽃! 이라고 할 수 있는 페이지 버튼도 쉽게 부트스트랩으로 꾸며 보자

 

 

 

 

 

 요런식으로 작성해주면 페이지 버튼도 간단히 만들어 줄 수 있는데 주의할 점이 나도 작성해보면서 겪은건데

<li>태그 안에 숫자를 <a>태그가 감싸고 있어야 한다. 아마도 저 pagination 클래스의 스타일이 페이징 기능을 담당하다보니 a 태그에 대해서 스타일이 맥여져 있는것 같다. 

 

느낀점!!

 

간단하게 큰 틀에 해당하는 디자인을 순식간에 꾸며 줄 수 있어서 좋은 것 같고 여기에서 본인의 스타일에 맞게 따로 스타일을 맥여주면 될 것 같다.