부트스트랩은 웹디자인을 쉽게하기 위해 미리 몇가지의 CSS의 클래스 선택자와 정의된 스타일시트, 자바스크립트 플러그인을 모은 강력한 프론트엔드 프레임워크입니다. <부트스트랩 소개와 다운로드 중 참조...>
참고로 이블로그 게시물은 한글부트스트랩3을 참고로 만들어 졌으며 제 블로그 공부용으로 작성한 것입니다.
Forms 폼
Basic example 기본 예제
각각의 폼콘트롤은 자동으로 약간의 전역 스타일링을 받아들입니다. .form-control 이 있는 모든 텍스트 기반의 <input>, <textarea> 그리고 <select> 요소는 기본적으로 width: 100%; 입니다. 최적의 여백을 위해 .form-group 으로 라벨과 콘트롤을 감싸세요.
<form role="form">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
인라인 폼 Inline form
조밀한 레이아웃을 위한 좌측 정렬된 inline-block 콘트롤을 위해 .form-inline 를 추가하세요. 또한, 이 '인라인 폼'은 최소 768px이상에서만 됩니다.
맞춤 너비가 필요합니다.
부트스트랩에서 input, select, textarea 는 기본적으로 100% 너비입니다. 인라인 폼에서 사용하려면, 폼콘트롤에 너비를 설정해주어야 합니다.
항상 라벨을 추가하세요.
모든 input 을 위한 라벨이 없다면 스크린 리더는 문제가 생길 것입니다. 인라인 폼에서 당신은 .sr-only 클래스를 사용하여 라벨을 숨길 수 있습니다.
<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail2">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword2">Password</label>
<input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-default">Sign in</button>
</form>수평 폼 Horizontal form
폼에 .form-horizontal 를 추가하여 수평 레이아웃을 만드세요. 이 안에서는 부트스트랩의 그리드 클래스를 사용하여 라벨과 폼콘트롤 그룹을 정렬합니다. 그리드행 역할은 .form-group 가 하기 때문에 .row 는 필요가 없습니다.
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>지원되는 콘트롤들 Supported controls
예제 폼에서 지원되는 표준 폼콘트롤의 예제들.
Inputs
가장 흔한 폼 콘트롤인 텍스트 기반 입력 필드입니다. HTML5 의 모든 타입을 지원합니다: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, color.
타입 선언이 필요합니다.
Input 은 type 이 제대로 선언되었을 때 완전한 스타일이 적용될 것입니다..
<input type="text" class="form-control" placeholder="Text input">Input groups 입력그룹
통합 텍스트 또는 텍스트 기반 <INPUT> 전 또는 후에 버튼을 추가하려면 입력 그룹 구성 요소를 확인하세요.
Textarea
여러 줄의 텍스트를 지원하는 폼콘트롤. 필요에 따라 rows 속성을 바꾸세요.
<textarea class="form-control" rows="3"></textarea>
체크박스와 라디오 Checkboxes and radios
체크박스는 목록에서 하나 혹은 몇개의 옵션을 선택하기 위함이고, 라디오는 여러개중 하나의 옵션을 선택하기 위함입니다.
기본
<div class="checkbox">
<label>
<input type="checkbox" value="">
Option one is this and that—be sure to include why it's great
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
Option one is this and that—be sure to include why it's great
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
Option two can be something else and selecting it will deselect option one
</label>
</div>인라인 체크박스 Inline checkboxes
일련의 체크박스나 라디오를 같은 줄에 보이게 하려면 .checkbox-inline 나 .radio-inline 클래스를 사용하세요.
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>셀렉트 Selects
기본 옵션을 사용하거나, 여러 옵션을 한번에 보여주기 위해 multiple 을 넣습니다.
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<select multiple class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>정적 콘트롤 Static control
수평 폼에서 텍스트를 넣고 싶을때는 <p> 에 .form-control-static 클래스를 사용하세요..
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<p class="form-control-static">email@example.com</p>
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
</div>
</form>입력 포커스 Input focus
우리는 :focus 를 위해 몇몇 폼콘트롤들의 기본 outline 스타일들을 제거하고 그 대신에 box-shadow 를 적용했습니다.
<input class=span>"form-control" id="focusedInput" type="text" value="Demonstrative focus state">입력 비활성화 Disabled inputs
사용자 입력을 막고 약간의 다른 모습을 적용하려면 input 에 disabled 속성을 추가하세요.
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>필드셋 비활성화 Disabled fieldsets
<fieldset> 내에 모든 콘트롤을 한번에 비활성화하려면 <fieldset> 에 disabled 속성을 추가하세요.
<a> 링크 기능성은 영향을 받지 않습니다.
이 클래스는 <a class="btn btn-default"> 버튼들의 기능성이 아닌 오직 모습만 변경합니다. 링크를 비활성화하려면 맞춤 자바스크립트를 사용하세요.
크로스브라우저 호환성
부트스트랩은 이 스타일들을 모든 브라우저에 적용하지만, 인터넷 익스플로러 9 와 그 이하에서는 실제로 <fieldset> 에서 disabled 속성을 지원하지 않습니다. 이 브라우저들의 필드셋을 비활성화하려면 맞춤 자바스크립트를 사용하세요.
<form role="form">
<fieldset disabled>
<div class="form-group">
<label for="disabledTextInput">Disabled input</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
</div>
<div class="form-group">
<label for="disabledSelect">Disabled select menu</label>
<select id="disabledSelect" class="form-control">
<option>Disabled select</option>
</select>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Can't check this
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</fieldset>
</form>검사 상태들 Validation states
부트스트랩은 폼콘트롤의 에러, 경고, 성공 상태를 위한 검사 스타일을 포함하고 있습니다. 사용하려면, 상위 요소에 .has-warning, .has-error, .has-success 를 추가하세요. 그 요소 내 모든 .control-label, .form-control, .help-block 은 검사 스타일을 이어받을 것입니다.
<div class="form-group has-success">
<label class="control-label" for="inputSuccess1">Input with success</label>
<input type="text" class="form-control" id="inputSuccess1">
</div>
<div class="form-group has-warning">
<label class="control-label" for="inputWarning1">Input with warning</label>
<input type="text" class="form-control" id="inputWarning1">
</div>
<div class="form-group has-error">
<label class="control-label" for="inputError1">Input with error</label>
<input type="text" class="form-control" id="inputError1">
</div>옵션 아이콘 With optional icons
별도의 클래스를 추가하고 오른쪽 아이콘을 선택 피드백 아이콘을 추가 할 수 있습니다. 추가된 .has-feedback의 css값으로 고정값인 top, right를 이용하여 input의 높이에 따라 수동으로 값을 주어야 할것 같습니다. 또한 기본 값으로 right로 되어 있습니다.
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess2">Input with success</label>
<input type="text" class="form-control" id="inputSuccess2">
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
<div class="form-group has-warning has-feedback">
<label class="control-label" for="inputWarning2">Input with warning</label>
<input type="text" class="form-control" id="inputWarning2">
<span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
</div>
<div class="form-group has-error has-feedback">
<label class="control-label" for="inputError2">Input with error</label>
<input type="text" class="form-control" id="inputError2">
<span class="glyphicon glyphicon-remove form-control-feedback"></span>
</div>여기 보여지는 코드와 이 블로그에 쓰여지는 코드는 다릅니다. 저의 맞게 수정하여 보여지는 화면 입니다.
수평 및 인라인 형태에서 옵션 아이콘사용하세요
<form class="form-horizontal" role="form">
<div class="form-group has-success has-feedback">
<label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="inputSuccess3">
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
</div>
</form><form class="form-inline" role="form">
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess4">Input with success</label>
<input type="text" class="form-control" id="inputSuccess4">
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
</form>폼콘트롤 크기조절 Control sizing
.input-lg 같은 클래스를 이용하여 높이를 설정하세요, 그리고 .col-lg-* 같은 그리드 컬럼 클래스를 사용하여 너비를 설정하세요.
높이 조절 Height sizing
버튼 크기에 어울리는 좀더 크거나 작은 폼콘트롤을 만드세요.
<input class="form-control input-lg" type="text" placeholder=".input-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control input-sm" type="text" placeholder=".input-sm">
<select class="form-control input-lg">...</select>
<select class="form-control">...</select>
<select class="form-control input-sm">...</select>여기 보여지는 코드와 이 블로그에 쓰여지는 코드는 다릅니다. 저의 맞게 수정하여 보여지는 화면 입니다.
컬럼 크기조절 Column sizing
쉽게 원하는 너비를 적용하려면, 그리드 컬럼이나 맞춤 상위 요소로 입력요소들을 감싸세요.
<div class="row">
<div class="col-xs-2">
<input type="text" class="form-control" placeholder=".col-xs-2">
</div>
<div class="col-xs-3">
<input type="text" class="form-control" placeholder=".col-xs-3">
</div>
<div class="col-xs-4">
<input type="text" class="form-control" placeholder=".col-xs-4">
</div>
</div>도움말 Help text
폼콘트롤을 위한 블록레벨의 도움말입니다.
<span class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
Thanks to
'라이브러리 > Bootstrap' 카테고리의 다른 글
| 부트스트랩 : 코드, 테이블 (2) | 2014.03.29 |
|---|---|
| 부트스트랩 : 타이포그래피 (0) | 2014.03.26 |
| 부트스트랩 : 그리드 시스템 (0) | 2014.03.23 |
| 부트스트랩 : CSS 개요 (0) | 2014.03.23 |
| 부트스트랩 : 참고사항 (0) | 2014.03.21 |