Bootstrap 3

[basic] BS3 - Input (BS입력창 = BS인풋) + Textarea (텍스트영역) + Checkbox(체크박스) + Radio(라디오) + Select(선택창)

1.

BS 지원 form 구성요소


input

textarea

checkbox

radio

select


※ 아래 예제 코드들을 <form> 태그 안에 넣어서 사용. 

 

1-1. 

BS - Input

 

1.

BS는 모든 HTML5 INPUT 타입 지원.
(예: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, color.) 지원. 


2.

입력 유형이 올바르게 선언되지 않으면 입력 스타일이 완전히 지정되지 않음.

 


 

<div class="form-group">

  <label for="usr">이름:</label>

  <input type="text" class="form-control" id="usr">

</div>

<div class="form-group">

  <label for="pwd">비밀번호:</label>

  <input type="password" class="form-control" id="pwd">

</div>

 

예제보기 

 

1-2. 

BS - Textarea

 

<div class="form-group">

  <label for="comment">코멘트:</label>

  <textarea class="form-control" rows="5" id="comment"></textarea>

</div>

 

예제보기 

 

1-3. 

BS - Checkbox

[Checkbox 수직정렬]

 

<div class="checkbox">

  <label><input type="checkbox" value="">Option 1</label>

</div>

<div class="checkbox">

  <label><input type="checkbox" value="">Option 2</label>

</div>

<div class="checkbox disabled">

  <label><input type="checkbox" value="" disabled>Option 3</label>

</div>

 

예제보기 


[Checkbox 수평정렬]

 

<label class="checkbox-inline"><input type="checkbox" value="">Option 1</label>

<label class="checkbox-inline"><input type="checkbox" value="">Option 2</label>

<label class="checkbox-inline"><input type="checkbox" value="">Option 3</label>

 

예제보기 

 

1-4. 

BS - Radio Button

[Radio 수직정렬]

 

<div class="radio">

  <label><input type="radio" name="hz" checked>Option 1</label>

</div>

<div class="radio">

  <label><input type="radio" name="hz">Option 2</label>

</div>

<div class="radio disabled">

  <label><input type="radio" name="hz" disabled>Option 3</label>

</div>

 

예제보기 


[Radio 수평정렬]

 

<label class="radio-inline"><input type="radio" name="hz" checked>Option 1</label>

<label class="radio-inline"><input type="radio" name="hz">Option 2</label>

<label class="radio-inline"><input type="radio" name="hz">Option 3</label>

 

예제보기 

 

1-5. 

BS - Select

[Option 하나만 선택]

 

<div class="container">

  <form>

    <div class="form-group">

      <label for="sel1">하나만 선택</label>

      <select class="form-control" id="sel1">

        <option>1</option>

        <option>2</option>

        <option>3</option>

        <option>4</option>

      </select>

 

    </div>

  </form>

</div>

 

예제보기 


[Option 여러 개 선택]

 

<div class="container">

  <form>

    <div class="form-group">

      <label for="sel2">여러 개 선택 (Shift키 누른 상태서 선택 가능)</label>

      <select multiple class="form-control" id="sel2">

        <option>1</option>

        <option>2</option>

        <option>3</option>

        <option>4</option>

        <option>5</option>

      </select>

    </div>

  </form>

</div>

 

예제보기 

 

 

input 포커스 시 윤곽선 제거

 

.form-control:focus {

  -webkit-box-shadow: none !important;

          box-shadow: none !important;

}

 

 

 

방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
basic BS3 - HOME (소개) - BS3 vs BS4 차이 (= BS차이)
basic BS3 - Start (시작) ★ - BS다운 / BSCDN / BS구문
basic BS3 - Grid (그리드) ★★★ - (BS3그리드 vs BS4그리드)
basic BS3 - Text/Typography(BS글자 = BS텍스트) (= BS4글자 vs BS3글자) BS글자색
basic BS3 - Table (BS테이블) - 테이블테두리 + 테이블배경색 + 반응형테이블
basic BS3 - Image (BS이미지) - 반응형이미지 + 반응형동영상 + 이미지정렬
basic BS3 - Jumbotron/page-header (BS점보트론 / BS페이지헤더) - 큰글씨, 글자키우기
basic BS3 - Well (BS웰 = BS회색상자) ★ - BS회색배경상자 (= BS회색박스 = BS웰클래스)
basic BS3 - Alert (BS경고 = BS얼럿 = BS경보) - 배경색 + 글자색 + 링크색 + 닫기 + 애니…
basic BS3 - Button (BS버튼) ★ - 버튼색깔 + 버튼크기 + 버튼활성화 + 버튼비활성화
basic BS3 - Button Group (BS버튼그룹) ★
basic BS3 - Icon (아이콘) - Glyphicon/Font Awesome/Google Material De…
basic BS3 - Progress Bar (BS진행바 = BS진행상태표시 = BS진도바 = BS프로그레스바) - I…
basic BS3 - Pagination (BS페이징 = BS페이지번호 = BS페이징 = BS패지네이션) + Bread…
basic BS3 - Pager (BS페이저) - 이전페이지/다음페이지 (= 앞으로가기/뒤로가기)
1/4
목록
 홈  PC버전 로그인 일본어
웹디자인언어
서버관리언어
고급코딩언어
그누보드 2
제작의뢰
Q&A
커뮤니티 2
웹유틸
회원센터
홈짱 PC버전 로그인