매일매일 배워야 할 부트스트랩 폼_자바스크립트 스킬
- WBOY원래의
- 2016-05-16 15:30:381300검색
이번 글에서는 폼에 대해 주로 설명하고 있는데, 사실 웹사이트를 해본 분들에게는 낯설지 않은 내용이며, 데이터 제출 시 가장 많이 사용하는 폼 폼이라고 할 수 있습니다. 이 글은 주로 내용을 설명합니다:
기본 케이스
2. 인라인 양식
3. 가로로 배열된 형태
4.지원되는 컨트롤
5. 정적 제어
6.제어상태
7. 크기 조절
8. 도움말 텍스트
기본 케이스
개별 양식 컨트롤에는 일부 전역 스타일이 자동으로 할당됩니다. .form-control이 설정된 모든 d5fd7aea971a85678ba271703566ebfd, 221f08282418e2996498697df914ce4e 요소는 기본적으로 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>
두 텍스트 상자의 너비는 실제로 100%입니다. 그리고 세 가지 양식 그룹이 있습니다.
인라인 양식
왼쪽 정렬 및 인라인 블록 수준 컨트롤에 대해 .form-inline을 설정하면 더 간결하게 정렬됩니다.
너비 설정 필요: Bootstrap에서는 입력, 선택 및 텍스트 영역이 기본적으로 100% 너비로 설정되어 있습니다. 인라인 양식을 사용하려면 사용 중인 양식 컨트롤에 맞게 너비를 구체적으로 설정해야 합니다.
라벨을 설정하세요. 각 입력 컨트롤에 라벨을 설정하지 않으면 스크린 리더가 이를 올바르게 읽을 수 없습니다. 이러한 인라인 양식의 경우 레이블에 .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>
가로로 배열된 형태
양식에 .form-horizontal을 추가하고 Bootstrap의 사전 설정된 그리드 클래스를 사용하면 레이블과 컨트롤 그룹을 수평으로 나란히 배치할 수 있습니다. 이렇게 하면 .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>
지원되는 컨트롤
지원되는 표준 양식 컨트롤은 양식 레이아웃 사례에 표시됩니다.
입력
대부분의 양식 컨트롤 및 텍스트 입력 필드 컨트롤. 텍스트, 비밀번호, 날짜/시간, 날짜/시간-로컬, 날짜, 월, 시간, 주, 숫자, 이메일, URL, 검색, 전화번호 및 색상 등 HTML5에서 지원하는 모든 유형이 포함됩니다.
참고: 유형이 올바르게 설정된 입력 컨트롤에만 올바른 스타일을 지정할 수 있습니다.
텍스트 상자 예시
텍스트 영역
여러 줄의 텍스트를 지원하는 양식 컨트롤입니다. 행 속성은 필요에 따라 변경할 수 있습니다.
<h1>textarea</h1> <textarea class="form-control" rows="3"></textarea>
체크박스와 라디오
확인란은 목록에서 하나 이상의 옵션을 선택하는 데 사용되는 반면 라디오는 여러 옵션 중에서 하나의 옵션만 선택하는 데 사용됩니다.
기본 모양(겹쳐져 있음)
<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>
인라인 체크박스
일련의 체크박스 또는 라디오 컨트롤에 .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>
同理Radio是一样的，只需要添加一下样式即可。
Select
<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>
静态控件
在水平布局的表单中，如果需要将一行纯文本放置于label的同一行，为e388a4556c0f65e1904146cc1a846bee元素添加.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>
控件状态
通过为控件和label设置一些基本状态，可以为用户提供回馈。
输入焦点
我们移除了某些表单控件的默认outline样式，并对其:focus状态赋予了box-shadow样式。
被禁用的输入框
为输入框设置disabled属性可以防止用户输入，并能改变一点外观，使其更直观。
被禁用的fieldset
为2b5469ab79cf842344327415c3b3bb95设置disabled属性可以禁用2b5469ab79cf842344327415c3b3bb95中包含的所有控件。
3499910bf9dac5ae3c52d5ede7383485标签的链接功能不受影响
这个class只改变2028f277e9e2cf0c34aa62efa6967f4b按钮的外观，并不能禁用其功能。建议自己通过JavaScript代码禁用链接功能。
跨浏览器兼容性
虽然Bootstrap会将这些样式应用到所有浏览器上，Internet Explorer 9及以下浏览器中的2b5469ab79cf842344327415c3b3bb95并不支持disabled属性。因此建议在这些浏览器上通过JavaScript代码来禁用fieldset
<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>
可将鼠标移到各个控件上进行查看效果。
校验状态
Bootstrap对表单控件的校验状态，如error、warning和success状态，都定义了样式。使用时，添加.has-warning、.has-error或.has-success到这些控件的父元素即可。任何包含在此元素之内的.control-label、.form-control和.help-block都将接受这些校验状态的样式。
<div class="form-group has-success"> <label class="control-label" for="inputSuccess">Input with success</label> <input type="text" class="form-control" id="inputSuccess"> </div> <div class="form-group has-warning"> <label class="control-label" for="inputWarning">Input with warning</label> <input type="text" class="form-control" id="inputWarning"> </div> <div class="form-group has-error"> <label class="control-label" for="inputError">Input with error</label> <input type="text" class="form-control" id="inputError"> </div>
控件尺寸
通过.input-lg之类的class可以为控件设置高度，通过.col-lg-*之类的class可以为控件设置宽度。
高度尺寸
创建大一些或小一些的表单控件以匹配按钮尺寸。
<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>
调整列尺寸
用栅格系统中的列包裹input或其任何父元素，都可很容易的为其设置宽度。
<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>
도움말 텍스트
양식 컨트롤에 대한 블록 수준 도움말 텍스트입니다.
이번 글에서는 버튼의 간단한 스타일 사용을 포함하여 폼의 다양한 컨트롤의 스타일 제어를 주로 설명합니다. 다음 글에서는 버튼의 스타일을 중점적으로 설명하겠습니다.
자세한 내용은 다음을 참조하세요.
Bootstrap 양식(양식 스타일) 사용 방법 종합 분석
Bootstrap 양식(양식 컨트롤) 사용 방법 종합 분석