부트스트랩 Bootstrap 3 구성요소 Thumbnails,Alerts

게시자: 대문 demun 카테고리: 퍼블리셔/Bootstrap 2013.10.08 01:00

부트스트랩 Bootstrap 3 에서는 이미지, 비디오, 텍스트 등을 쉽게 그리드하려면 썸네일 컨포넌트와 부트스트랩의 그리드시스템을 이용하라고 합니다.

부트스트랩에서 썸네일은 최소한의 필수 마크업으로 인한 링크 이미지를 보여주기위해 고안되었다고 합니다.

아래는 기본 예제입니다.


링크 안에 이미지가 존재하는 형식입니다.




콘텐츠에 맞게 제작도 가능합니다.

약간의 추가 마크업으로 이미지와 텍스트, 그리고 버튼 등이 같은 너비에 보여지도록 가능합니다.


아래 코드를 보시면 아시겠지만 이미지 아래에 caption 이라는 클래스를 사용해서 컨텐츠를 삽입하면 됩니다.






Alerts (경고창)


alerts 는 일반적으로 경고창(알림)을 말합니다. 무언가 정보를 알릴때 팝업창으로 떠서 정보를 알릴때 사용하는데요. 이와 비슷한 기능들을 하는 것은 몇가지 모아놓아서 부트스트랩에서는 Alerts 라는 카테고리에 넣고 사용합니다.


또한 이벤트를 발생시키거나 하는것은 jQuery 플러그인을 사용해야 합니다.

그럼 어떤것들이 있는지 보겠습니다.


부트스트랩에서는 알림을 사용할때 기본적으로 4개의 클래스를 지원하고 있습니다.

기본 클래스는 .alert 이고 뒤에 4가지의 클래스를 붙여 사용합니다.



보시면 아시겠지만 성공, 정보, 경고, 위험등을 나타날때 사용하며 색상의 위의 이미지와 같습니다.

색상 또한 사용자정의에서 변경해서 원하는 색상으로 사용이 가능합니다.


사용하지 않는 경고(알림)

무슨말이냐면 alert 클래스를 사용합니다. 즉 경고를 사용하되 디폴트 스타일로 표현하고자 할때 사용합니다.

클래스는 동일하게 .alert 를 사용하고 디폴트로 사용하려면 .alert-dismissable 를 추가로 사용하면 됩니다.


우측에 마우스에 보면 닫기가 보이죠...




.alert 클래스에 사용되는 4개의 클래스들은 배경, 테두리, 컬러값을 사용합니다. 하지만 .alert-dismissable 를 사용하면 테두리를 기본값으로 사용하며, 배경과, 컬러값이 없어 디폴트로 사용하게 됩니다.


버튼을 사용할때는 반드시 data-dismiss="alert" 를 사용해야 합니다. 그래야 크로스브라우징이 된다고 합니다.


경고(Alert)내에 있는 링크

Alerts 내에 있는 링크에 대한 스타일 이야기 입니다.

경고내에서 사용하는 링크에 .alert-link 라는 클래스를 사용하면 해당 링크부분이 부분에 텍스트가 볼두(두껍게)처리되어 다른 텍스트와 구분되게 보여지게 합니다.






신고

댓글