프로그래밍 언어349 [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. [bootstrap] 부트스트랩 – 선택적 아이콘 사용 인라인(inline) 방식 부트스트랩 선택적 아이콘 사용 인라인 예제입니다. 2016. 1. 28. [bootstrap] 부트스트랩 – 선택적 아이콘 사용(With optional icons) – 수평 배열 부트스트랩에서는 유효성 검증을 시각적으로 나타내기 위하여 아이콘을 추가할 수 있습니다. div 태그에 .has-feedback 선택자를 사용하고 부트스트랩 아이콘을 추가했습니다. 아이콘 코드에는 .form-control-feedback 선택자를 추가해서 색상이 변경되게 했으며 폼에 사용되는 .form-control 선택자가 있어야 제대로 표시됩니다. aria-describedby 는 웹 접근성 때문에 추가되었습니다. 2016. 1. 28. [bootstrap] 부트스트랩 – 선택적 아이콘 사용(With optional icons) 부트스트랩에서는 유효성 검증을 시각적으로 나타내기 위하여 아이콘을 추가할 수 있습니다. div 태그에 .has-feedback 선택자를 사용하고 부트스트랩 아이콘을 추가했습니다. 아이콘 코드에는 .form-control-feedback 선택자를 추가해서 색상이 변경되게 했으며 폼에 사용되는 .form-control 선택자가 있어야 제대로 표시됩니다. aria-describedby 는 웹 접근성 때문에 추가되었습니다. 2016. 1. 28. [bootstrap] 부트스트랩 – 폼 유효성 상태 (Validation states) 예정된 값이 입력되지 않았을 때 다양한 형태로 에러메시지를 내보내는데 사용합니다..has-error : 에러 .has-warning : 경고 .has-success : 성공 프로그래밍 방식으로 예정된 값이나 형식이 아닌 경우 클래스 선택자가 활성화 되게 해야 합니다..control-label : label 태그에 사용 .help-block : 메시지에 사용 2016. 1. 28. [bootstrap] 부트스트랩 – 읽기 전용 상태(Readonly state) 부트스트랩에서도 readonly 속성만 추가하시면 됩니다. 2016. 1. 28. [bootstrap] 부트스트랩 – 비활성 필드셋(Disabled fieldsets) … 필드셋의 모든 폼을 한번에 비활성화시킬 수 있습니다. 2016. 1. 28. [bootstrap] 부트스트랩 – 비활성 상태(Disabled state) 부트스트랩에서는 .disabled 클래스로 비활성화 시킬 수 있습니다. 2016. 1. 27. [bootstrap] 부트스트랩 – 정적인 콘트롤(Static control) 폼 입력 상자가 아닌 단순한 텍스트를 폼 요소로 표현하고자 할 때 사용합니다. 예를들면, 로그인된 사용자의 아이디나 이메일을 표시해 별도의 입력 절차를 거치지 않게 하는데 사용합니다. 정적인 컨트롤에는 p 태그와 .form-control-static 선택자를 사용합니다. 2016. 1. 27. 이전 1 ··· 10 11 12 13 14 15 16 ··· 24 다음