프로그래밍 언어/부트스트랩(Bootstrap)139 [bootstrap] 부트스트랩 – 목록 – 패널(Panels) 패널은 콘텐츠가 있는 박스 형태의 구성요소를 만들 때 사용합니다. Basic panel example .panel-heading을 사용해서 콘텐츠 영역과 분리된 제목 영역을 만들 수 있습니다. Panel heading without title Panel content .panel-footer를 사용해 푸터를 배치할 수도 있습니다. Panel content Panel footer 2016. 2. 3. [bootstrap] 부트스트랩 – 리스트 그룹(List group) – 콘텐츠 추가 목록에 콘텐츠를 추가한 예제입니다. 2016. 2. 3. [bootstrap] 부트스트랩 – 리스트 그룹(List group) – 색상 및 링크 목록에 색상 및 링크를 추가한 3가지 예제입니다. 참고하세요~ 2016. 2. 3. [bootstrap] 부트스트랩 – 리스트 그룹(List group) – 하이라이트 목록에 하이라이트 표시를 하려면 다음과 같이 .active를 넣어주세요. Cras justo odio Dapibus ac facilisis in 2016. 2. 3. [bootstrap] 부트스트랩 – 리스트 그룹(List group) – 배지 목록에 배지를 추가한 모습입니다. 14 Cras justo odio 2 Dapibus ac facilisis in 1 Morbi leo risus 2016. 2. 3. [bootstrap] 부트스트랩 – 리스트 그룹(List group) 사이드바의 메뉴나 카테고리 목록을 만들 때 유용합니다. Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum at eros 사용법은 위와 같이 ul, li 태그에 클래스만 넣어주면 됩니다. 2016. 2. 3. [bootstrap] 부트스트랩 – 프로그레스 바(Progress Bar) 60% Complete 부트스트랩에서 프로그래스 바를 나타내는 기본 소스는 위와 같습니다. 색상 선택자를 추가하면 여러가지 색상을 나타낼 수 있습니다..progress-bar-success .progress-bar-info .progress-bar-warning .progress-bar-danger 다음은 사선 줄무늬를 나타내는 선택자입니다..progress-bar-striped 줄무늬가 애니매이션 되는 모습을 보려면 .active 선택자를 추가하면 됩니다. 45% Complete 다음과 같이 하면 프로그레스 바 하나에 여러개의 색상을 나타낼수도 있습니다. 35% Complete (success) 20% Complete (warning) 10% Complete (danger) 2016. 2. 3. [bootstrap] 부트스트랩 – 알림메시지(alerts) – 링크 추가 메시지 내부에 링크를 추가할 때에는 .alert-link 선택자를 사용합니다.Well done! You successfully read this important alert message 2016. 2. 3. [bootstrap] 부트스트랩 – 알림메시지(alerts) Well done! You successfully read this important alert message. .alert 와 색상을 위한 선택자를 추가함으로 에러나 중요 알림 메시지를 출력할 수 있습니다. ×Close Warning! Better check yourself, you’re not looking too good. 알림메시지에 닫기 기능을 추가하려면 .alert-dismissible 선택자 하위에 .close 선택자가, data-dismiss=”alert” 속성이 있어야 합니다. 2016. 2. 3. [bootstrap] 부트스트랩 – 썸네일 … a 태그에 .thumnail 선택자를 넣어주고 holder.js 자바스크립트 플러그인을 사용하면 간단하게 더미 이미지를 만들 수 있는데요. http://imsky.github.io/holder 여기에서 holder.js 파일을 다운로드 받아서 사용하시면 됩니다. 2016. 2. 3. [bootstrap] 부트스트랩 – 페이지 헤더 .page-header 선택자를 사용하여 페이지나 글의 제목으로 사용합니다. .small 태그를 이용해 부제를 만들수도 있습니다. Example page header Subtext for header 2016. 2. 2. [bootstrap] 부트스트랩 – 점보트론 .jumbotron 선택자를 사용하며 내부의 모든 글자 크기가 커집니다.… 또한 .container와 .jumbotron의 위치에 따라 레이아웃이 달라집니다. … … 2016. 2. 2. [bootstrap] 부트스트랩 – 버튼 – 레이블(Lable)과 배지(Badge) 글자나 숫자를 하이라이트하기 위해 사용하며 글자는 레이블, 숫자는 배지를 사용합니다. 레이블은 span 태그에 .lable 선택자와 색상 변경을 위한 선택자를 사용합니다.Default Primary Success Info Warning Danger 배지는 선택자가 없으며, 버튼에 배지를 추가해 사용하면 버튼의 색상에 따라 배지의 배경색이 바뀝니다. 이것은 필(Pills)에도 적용됩니다. 배지를 필에 사용할 경우 선택된 필이 하이라이트 돼서 버튼 형태로 되면 배지의 배경 색도 흰색으로 바뀝니다. Inbox 42 Messages 4 숫자가 없을 경우, 예를 들어 읽을 메시지가 없으면 이 요소에 :empty 선택자를 사용하므로 IE8에서는 제대로 동작하지 않습니다. 2016. 2. 2. [bootstrap] 부트스트랩 – 이전, 다음 버튼 이전, 다음 버튼만 있는 간단한 형태의 페이지 처리입니다. ul 태그에 .pager 선택자를 사용합니다. 2016. 2. 2. [bootstrap] 부트스트랩 – .nav – 페이지 번호의 크기 조절하기 .pagination-lg와 .pagination-sm 두 개의 선택자로 크기를 조절합니다. 기본 크기를 포함해 총 3개의 사이즈가 있습니다.… … 2016. 2. 2. 이전 1 2 3 4 5 6 ··· 10 다음