프로그래밍 언어/부트스트랩(Bootstrap)139 [bootstrap] 부트스트랩 – 캐럿(Carets) 드롭다운 메뉴에서 하위 메뉴가 있을 때 표시되게 합니다. 2016. 1. 30. [bootstrap] 부트스트랩 – 닫기 아이콘(Close icon) 모달이나 경고 메시지 박스를 닫을 때 사용하는 닫기 아이콘입니다. 2016. 1. 29. [bootstrap] 부트스트랩 – 글자에 배경색 넣기 부트스트랩에서 글자에 배경색을 넣는 클래스 종류입니다.… … … … … 결과는 아래에서 확인하세요~ 2016. 1. 29. [bootstrap] 부트스트랩 – 글자에 색상 넣기 부트스트랩에서 다음과 같이 글자에 색상을 추가할 수 있습니다.… … … … … … 2016. 1. 29. [bootstrap] 부트스트랩 – 반응형 이미지(Responsive Images) .img-reponsive 클래스를 사용하면 부트스트랩에서 이미지를 반응형으로 만들 수 있습니다. 또한, 아래와 같이 클래스를 추가해서 이미지의 형태를 정할 수 있습니다..img-rounded : 모서리를 둥글게 .img-thumbnail : 테두리 사용 .img-circle : 둥근 원 이미지 (둥근 정도는 원본이미지의 가로세로 비율에 따라 다릅니다.) 2016. 1. 29. [bootstrap] 부트스트랩 – 비활성 버튼(Disabled state) 버튼을 비활성하려면 disabled 속성이나 클래스를 사용하면 되는데요. button과 a 태그의 사용법이 다음과 같이 다릅니다.Button Link 2016. 1. 29. [bootstrap] 부트스트랩 – 활성 버튼(Active state) button이나 a 태그에 .active 선택자를 추가하면 버튼을 클릭할 때 느낌을 살릴 수 있습니다. a 태그를 이용해 버튼을 만들 때에는 이 요소가 버튼의 역할을 한다는 표시를 하기 위해 role 속성으로 button을 추가(role=”button”)합니다. 웹 접근성을 고려한 조치입니다. 2016. 1. 29. [bootstrap] 부트스트랩 – 부모 너비 전체(100%) 버튼(Block level button) 부모 너비 전체(100%)를 사용하는 버튼을 만들 때 사용합니다. .btn-block 선택자를 추가로 사용하면 됩니다. 2016. 1. 29. [bootstrap] 부트스트랩 – 버튼(Buttons)의 크기 조절 버튼의 크기를 변경하려면 기본적인 버튼 클래스에 아래와 같이 클래스를 추가하면 됩니다. 총 4가지 크기의 버튼이 있습니다.큰 버튼 기본 버튼 작은 버튼 아주 작은 버튼 2016. 1. 29. [bootstrap] 부트스트랩 – 아이콘(icon)이 있는 버튼(Buttons) 부트스트랩 버튼은 아이콘과 함께 이용하면 아주 유용합니다. 2016. 1. 29. [bootstrap] 부트스트랩 – 버튼(Buttons) 부트스트랩에서는 클래스만 추가함으로 버튼을 쉽게 구현할 수 있습니다. 버튼에 아이콘을 사용하면 더 예쁘게 바꿀수도 있습니다. 하지만, 여기에서는 기본 버튼과 링크만 간략하게 설명하겠습니다..btn-default : 기본 버튼 .btn-primary : 시각적으로 두드러진 색상이며 주요 작업 실행시 사용 .btn-success : 성공적인 또는 긍정적인 작업에 사용 .btn-info : 정보 제공 목적의 작업에 사용 .btn-warning : 이 버튼으로 인한 작업이 주의를 필요로 할 때 사용 .btn-danger : 위험하고 잠재적으로 부정적인 작업에 사용 .btn-link : 버튼이 아닌 링크 형태지만 버튼의 기능을 유지함 버튼은 다음과 같이 btn 클래스와 함께 사용해야 합니다.Default 웹 접근.. 2016. 1. 29. [bootstrap] 부트스트랩 – 도움말 텍스트(Help text) span 태그에 .help-block 선택자를 추가하면 도움말 텍스트를 만들 수 있습니다. 도움말 텍스트는 웹 접근성 측면에서 중요하므로 해당 폼 요소에 포커스 됐을 때 스크린 리더에 도움말이 노출될 수 있게 aria-describedby 속성을 추가합니다. .aria-describedby 속성의 값으로는 도움말의 id를 입력합니다. 2016. 1. 29. [bootstrap] 부트스트랩 – 수평 폼 그룹 크기 조절 레이블이 왼쪽에 있고, 폼 요소가 오른쪽에 배열된 수평 폼의 크기를 변경하려면 .form-group 선택자가 있는 태그에 .form-group-lg 또는 .form-group-sm 선택자를 추가로 사용합니다. .form-group 선택자에는 .row의 스타일이 설정돼 있습니다. 2016. 1. 28. [bootstrap] 부트스트랩 – 폼 크기 조절(Control sizing) 폼의 높이는 .input-lg 또는 .input-sm 선택자를 .form-control 선택자와 함께 입력합니다. 너비는 각 폼 요소를 div 태그로 감싸고 그리드 선택자를 추가해주면 됩니다. 2016. 1. 28. [bootstrap] 부트스트랩 – 선택적 아이콘 사용 – 레이블이 없는 상태 부트스트랩의 inputbox에 선택된 아이콘 표시를 하는 예제입니다. 레이블이 없습니다. 2016. 1. 28. 이전 1 ··· 3 4 5 6 7 8 9 10 다음