부트스트랩 Bootstrap 3 구성요소 Media object,List group

부트스트랩의 미디어객체는 다양한 유형 즉 블로그의 댓글이나 트위등에 사용하기 좋은 스타일입니다.

이미지를 왼쪽이나 오른쪽에 붙일 수도 있습니다.

.media 클래스를 사용하며 다음에 오는 요소로 왼쪽에 배치하고 싶으면 .pull-left 오른쪽으로는 .pull-right 클래스를 사용합니다.

기본 형태는 미디어 객체 즉 이미지, 동영상, 소리 등을 왼쪽이나 오른쪽에 배치합니다.

아래 예제는 64*64 의 이미지를 배치한 형태입니다.

리스트 형태.

댓글이나 기사목록등에 사용하면 좋은 형태입니다.

리스트 태그인 ol 또는 ul 에 .media-list 클래스로 감싸는 형태입니다.

List group

부트스트랩에서는 다양한 형태의 목록을 지원합니다.

기본 형태는 ul 등에 .list-group 클래스를 사용하며 테두리가 있는 형태의 리스트를 보여줍니다.

리스트에 몇개의 글이 있는지 표시하는 형태로 티스토리에서는 댓글 몇개, 트랙백 몇개등을 표시하거나 목록에서 글이 몇개 있다는 것등을 나타낼때 이런 형태의 뱃지를 사용합니다.

뱃지는 .badge 클래스를 사용하며, 리스트에서 사용하면 오른쪽에 위치하게 됩니다.

링크가 있는 항목의 경우 목록 태그인 ul li 대신에 앵커태그인 <a> 를 사용한다는 점이 특이합니다.

또한 활성화 항목을 표시하기 위해 .active 를 사용합니다.

목록이지만 ul 태그를 사용하지 않고 div 에 a 등을 사용하니 어떤 태그도 올 수 있습니다.

즉 블럭요소인 <div> 자식으로 어떤 요소도 올 수 있다는 것이죠.

demun(대문블로그)