프로그래밍 언어349 [bootstrap] 부트스트랩 – 선택 상자(selectbox) / 드롭다운(dropdown) selectbox의 부트스트랩 표현법입니다.… 한개만 선택시 … 여러개 선택시 2016. 1. 27. [bootstrap] 부트스트랩 – 레이블 텍스트가 없는 체크박스와 라디오버튼 체크박스나 라디오버튼에 레이블 텍스트가 없으면 웹 접근성에 위배되므로 HTML5의 aria- 속성을 이용합니다. 예제 소스처럼 만들면 되는데 부트스트랩에서는 인라인 방식으로는 지원하지 않고 블록 형태의 체크박스와 라디오 버튼만 가능합니다. 2016. 1. 27. [bootstrap] 부트스트랩 – 인라인 체크박스와 라디오버튼 (Inline checkbox & radio button) .checkbox-inline 또는 .radio-inline 클래스를 사용하시면 됩니다. 체크박스와 라디오버튼이 예쁘게 정렬됩니다. 2016. 1. 27. [bootstrap] 부트스트랩 – 체크박스와 라디오버튼 (checkbox & radio button) 체크박스는 목록에서 하나 이상의 옵션을 선택할 때 사용하고 라디오버튼은 여러 개의 항목 중에서 하나만 선택할 수 있는 html 폼 요소인데요..disabled : 사용할 수 없게 한다. .checkbox : checkbox에 사용하는 클래스 .radio : radio 버튼에 사용하는 클래스 둘 다 예제에 있는 소스처럼 와 태그로 감싸서 사용하시면 됩니다. 2016. 1. 27. [bootstrap] 부트스트랩 – textarea 태그 태그 안에 .form-control 클래스만 넣어주시면 됩니다. 2016. 1. 27. [bootstrap] 부트스트랩 – input 태그 input 태그의 다양한 예제들을 확인해 보세요~ HTML5의 모든 type을 지원합니다. 2016. 1. 27. [bootstrap] 부트스트랩 – 수평 폼(Horizontal Form) 레이블과 폼 요소가 가로로 배열된 형태입니다. .form-horizontal 선택자를 사용하고 label과 input 태그를 분리하기 위해서 그리드 선택자를 사용합니다. input 태그로 감싸고 이 div 태그와 label 태그에 그리드 선택자를 추가합니다. 2016. 1. 27. [bootstrap] 부트스트랩 – 인라인 폼(Inline form) 인라인폼은 가로로 배열된 형태로 태그에 .form-inline 클래스를 사용합니다. file input 에서 lable과 파일 선택 버튼이 세로로 되는데 가로로 보이게 하려면 이렇게 style=”display:inline-block”이라고 넣어주어야 합니다. 레이블이 있고 플레이스홀더의 내용이 중복되는데요. 이럴 경우 레이블을 제거해서 레이블이 나타나지 않게 할 수 있겠지만, 레이블이 없으면 스크린 리더를 사용하는 사용자는 어떤 내용인지 알 수 없게 되어 웹 접근성에 위배됩니다. 이럴 때에 lable 태그에 .sr-only 선택자를 사용합니다. 이 선택자를 사용하면 평상시에는 나타나지 않지만 스크린 리더가 읽을 수 있는 상태가 됩니다. (스크린 리더 : 시력에 장애가 있는 사람을 위해 글자를 읽어주는 기.. 2016. 1. 27. [bootstrap] 부트스트랩 – 폼(form)의 기본 형태 폼의 기본 형태는 다음과 같습니다. … 이 기본 형태 아래에 입력상자 같은 폼의 요소들을 추가하면 됩니다. .form-control 선택자는 입력상자의 스타일을 만들고 너비를 100%로 만들어주므로 input이나 textarea에는 반드시 사용하며, 같은 input 태그라도 type이 file일 때에는 필요하지 않습니다. 2016. 1. 26. [bootstrap] 부트스트랩 – 반응형 테이블 부트스트랩에서는 화면 폭이 좁을 때(768px 이하) 하단에 스크롤바가 나타나며 수평으로 스크롤해서 테이블을 볼 수 있게 했습니다. 태그 외곽에 태그로 감싸서 .table-responsive 클래스를 추가하면 반응형 테이블로 사용할 수 있습니다. … 2016. 1. 26. [bootstrap] 부트스트랩 – 테이블(table) 문맥 클래스(class) 부트스트랩은 에 몇 가지 색상이 있는 클래스를 정의해서 사용합니다. 이를 테이블 태그에 사용하면 행이 해당 색상으로 나타나게 됩니다..active : 특정 행이나 셀에 마우스 오버 색상 적용 .success : 성공 또는 긍정적인 작업 표시 .info : 중립적인 정보 변경이나 작업 표시 .warning : 주의를 필요로 ㅎ는 경고를 표시 .danger : 위험 또는 잠재적으로 부정적인 작업 표시 2016. 1. 26. [bootstrap] 부트스트랩 – .table-condensed 클래스 태그에 .table-condensed 클래스를 추가하면 셀 패딩이 반으로 감소돼 작은 크기의 테이블이 됩니다. 2016. 1. 26. [bootstrap] 부트스트랩 – .table-hover 클래스 태그에 .table-hover 클래스를 추가하면 테이블에 마우스를 올렸을 때 마우스 커서가 있는 행이 다른 색으로 변합니다. 즉, mouseover 효과가 생깁니다. 2016. 1. 26. [bootstrap] 부트스트랩 – .table-bordered 클래스 태그에 .table-bordered 선택자를 추가하면 모든 셀에 테두리가 만들어 집니다. 2016. 1. 26. [bootstrap] 부트스트랩 – .table-stripe 클래스 태그에 .table-stripe 선택자를 추가하면 한 줄 건너 배경색이 달라지는 스트라이프 형태의 테이블이 됩니다. 2016. 1. 26. 이전 1 ··· 11 12 13 14 15 16 17 ··· 24 다음