부트스트랩 양식 구성 요소 튜토리얼 자세한 설명

양식의 공통 요소로는 주로 텍스트 입력 상자, 드롭다운 선택 상자, 라디오 버튼, 체크 상자, 텍스트 필드, 버튼 등이 있습니다. 다양한 부트스트랩 버전은 다음과 같습니다.

LESS: form.less

SASS: _forms.scss

Bootstrap은 양식의 필드 세트, 범례 및 레이블 태그만 사용자 정의합니다

fieldset {
min-width: 0;
padding: 0;
margin: 0;
border: 0;
}
legend {
display: block;
width: 100%;
padding: 0;
margin-bottom: 20px;
font-size: 21px;
line-height: inherit;
color: #333;
border: 0;
border-bottom: 1px solid #e5e5e5;
}
label {
display: inline-block;
margin-bottom: 5px;
font-weight: bold;
}

로그인 후 복사

이러한 요소 외에도 input, select, textarea 및 기타 요소도 있습니다. 부트스트랩 프레임워크에는 클래스 이름 .form-control을 사용자 정의하여 효과를 얻습니다.

1. 너비가 100%가 됩니다.

2. 연한 회색(#ccc) 테두리를 설정합니다

3. 4px의 둥근 모서리

4. 그림자 효과를 설정하고 요소에 초점이 맞춰지면 그림자와 테두리 효과가 변경됩니다

5. 자리 표시자의 색상을 #999로 설정합니다

인라인 양식

입력 앞에 레이블을 추가하려는 경우 입력이 다른 줄로 줄 바꿈됩니다. 이러한 레이블을 추가해야 하고 입력이 줄 바꿈되지 않도록 하려면 레이블을 삽입해야 합니다. 예:

<div class="form-group ">
<label class="sr-only">邮箱地址</label>
</div>
<div class="form-group">
<input type="email" class="form-control" placeholder="请输入邮箱号">
</div>

로그인 후 복사

효과는 다음과 같습니다.

인라인 양식 효과를 얻으려면 클래스 이름 .form-inline을 양식 요소에 추가하면 됩니다.

폼 컨트롤을 인라인 블록 요소(display: inline-block)로 설정하면 폼 컨트롤을 한 줄에 표시할 수 있습니다.

예:

<form class="form-inline">
<div class="form-group">
<label class="sr-only">邮箱</label>
<input class="form-control" type="email" placeholder="请输入邮箱号">
</div>
<div class="form-group">
<label class="sr-only">密码</label>
<input type="password" class="form-control" placeholder="请输入密码">
</div>
<div class="checkbox">
<label>
<input type="checkbox" > 记住密码
</label>
</div>
<div class="form-group">
<button class="btn btn-default">进入邮箱</button>
</div>
</form>

로그인 후 복사

효과는 다음과 같습니다.

위 그림의 효과를 보면 코드에 레이블이 있고 컨테이너.form-group에 배치되지 않으며 입력이 새 줄로 줄바꿈되지 않는다는 것을 알 수 있습니다. 이상한 점은 라벨의 내용이 표시되지 않는다는 것입니다! 실제로 레이블 레이블을 자세히 살펴보면 레이블을 숨기는 클래스 이름 .sr-only가 추가되어 소스 코드를 살펴보겠습니다.

.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}

로그인 후 복사

이제 라벨 태그도 추가되고, 라벨을 숨기기 위해 .sr 전용 클래스명도 추가됐으니 불필요한 걸까요? ? ? 그러나 이것이 바로 부트스트랩 프레임워크의 장점 중 하나입니다. 입력 제어에 대한 레이블이 설정되어 있지 않으면 화면 판독기가 이를 올바르게 인식할 수 없습니다. 동시에 장애인을 위한 몇 가지 고려 사항이 만들어졌습니다.

가로형

부트스트랩에서 수평 형태 효과를 얻으려면 다음 두 가지 조건을 충족해야 합니다.

1. 양식 요소에 클래스 이름 .form-horizontal
을 사용합니다.

2. 부트스트랩 프레임워크를 사용한 그리드 시스템(상세설명: 부트스트랩 그리드 시스템에 대한 자세한 설명)

form 요소에 클래스 이름 .form-horizontal을 사용하면 주로 다음과 같은 기능을 수행합니다.

1. 양식 컨트롤의 패딩 및 여백 값을 설정합니다

2. 그리드 시스템의 행과 유사하게 .from-group의 표현을 변경합니다

CSS 소스 코드:

.form-horizontal .control-label,
.form-horizontal .radio,
.form-horizontal .checkbox,
.form-horizontal .radio-inline,
.form-horizontal .checkbox-inline {
padding-top: 7px;
margin-top: 0;
margin-bottom: 0;
}
.form-horizontal .radio,
.form-horizontal .checkbox {
min-height: 27px;
}
.form-horizontal .form-group {
margin-right: -15px;
margin-left: -15px;
}
.form-horizontal .form-control-static {
padding-top: 7px;
}
@media (min-width: 768px) {
.form-horizontal .control-label {
text-align: right;
}
}
.form-horizontal .has-feedback .form-control-feedback {
top: 0;
right: 15px;
}

로그인 후 복사

예:

<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label">邮箱</label>
<div class="col-sm-10">
<input type="email" class="form-control" placeholder="请输入邮箱">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">密码</label>
<div class="col-sm-10">
<input type="password" class="form-control" placeholder="请输入密码">
</div>
</div>
<div class="form-group">
<div class="col-sm-10 col-sm-offset-2">
<label>
<input type="checkbox">记住密码
</label>
</div>
</div>
<div class="form-group">
<div class="col-sm-10 col-sm-offset-2">
<button class="btn btn-default">进入邮箱</button>
</div>
</div>
</form>

로그인 후 복사

효과는 다음과 같습니다.

한줄 입력창

부트스트랩에서 입력을 사용할 때는 유형 유형도 추가해야 합니다. 유형 유형을 지정하지 않으면 부트스트랩 프레임워크가 입력[유형] 형식으로 스타일을 정의하므로 올바른 스타일을 얻을 수 없습니다. ="?"](예: input[type="text"]
에 해당하는 텍스트 유형)

다양한 폼 스타일에서 컨트롤이 잘 보이도록 하려면 클래스 이름 .form-control을 추가해야 합니다

<form role="form">
<div class="form-group">
<input type="email" class="form-control" placeholder="enter email" >
</div>
</form>

로그인 후 복사

드롭다운 선택 상자 선택

다중 행 선택은 다중 속성 값을 다중으로 설정합니다

<form role="form">
<div class="form-group">
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="form-group">
<select multiple class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</form>

로그인 후 복사

텍스트 영역 텍스트 영역

텍스트 영역은 원래 영역과 동일하게 사용됩니다. 행을 설정하면 높이를 정의할 수 있고, 열을 설정하면 텍스트 영역 요소에 클래스 이름 .form-control을 추가할 수 있습니다. 부트스트랩 프레임워크의 .form이 -control 스타일의 대상 공간 너비가 100% 또는 자동이기 때문에 cols 속성을 설정해야 합니다

<form role="form">
<div class="form-group">
<textarea class="form-control" rows="3"></textarea>
</div>
</form>

로그인 후 복사

复选框checkbox和单选框radio

checkbox和radio与label标签配合使用会出现一些小问题（如对齐问题）

<form>
<div class="checkbox">
<label>
<input type="checkbox"> 记住密码
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" checked> 喜欢
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2">不喜欢
</label>
</div>
</form>

로그인 후 복사

1、不管是checkbox还是radio都使用label包起来了

2、checkbox连同label标签放在一个名为.checkbox的容器内

3、radio连同label标签放在一个名为.radio的容器内,bootstrap主要借助.checkbox和.radio样式来处理复选框、单选按钮与标签的对齐方式

.radio,
.checkbox {
display: block;
min-height: 20px;
padding-left: 20px;
margin-top: 10px;
margin-bottom: 10px;
}
.radio label,
.checkbox label {
display: inline;
font-weight: normal;
cursor: pointer;
}
.radio input[type="radio"],
.radio-inline input[type="radio"],
.checkbox input[type="checkbox"],
.checkbox-inline input[type="checkbox"] {
float: left;
margin-left: -20px;
}
.radio + .radio,
.checkbox + .checkbox {
margin-top: -5px;
}

로그인 후 복사

复选框和单选按钮水平排列

1、如果checkbox需要水平排列，只需要在label标签上添加类名.checkbox-inline

2、如果radio需要水平排列，只需在label标签上添加类名.radion-inline

下面是css源码：

.radio-inline,
.checkbox-inline {
display: inline-block;
padding-left: 20px;
margin-bottom: 0;
font-weight: normal;
vertical-align: middle;
cursor: pointer;
}
.radio-inline + .radio-inline,
.checkbox-inline + .checkbox-inline {
margin-top: 0;
margin-left: 10px;
} 
<div class="form-group">
<label class="radio-inline">
<input type="radio" name="sex"value="option1"> 男性
</label>
<label class="radio-inline">
<input type="radio" name="sex" value="option2"> 女性
</label>
<label class="radio-inline">
<input type="radio" name="sex" value="option3">中性
</label>
</div>

로그인 후 복사

表单控件状态

1、焦点状态：

焦点状态是通过伪类：focus来实现的，bootstrap表单控件中的焦点状态删除了outline的默认样式，重新添加阴影效果，下面是

css源码：

.form-control:focus {
border-color: #66afe9;
outline: 0;
-webkit-box-shadow: inset 0 1px 1pxrgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
box-shadow: inset 0 1px 1pxrgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
}

로그인 후 복사

从源码中可以看出，要让控件在焦点状态下有上面的样式效果需要给控件添加类名.form-control

<form class="form-horizontal">
<div class="form-group ">
<div class="col-xs-6">
<input type="text" class=" input-lg" placeholder="不是在焦点状态下的效果">
</div>
<div class="col-xs-6">
<input type="text" class="form-control input-lg" placeholder="在焦点状态下的效果">
</div>
</div>
</form>

로그인 후 복사

file、radio、checkbox控件在焦点状态下的效果也与普通的input控件不太一样，下面是源码

input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}

로그인 후 복사

2、禁用状态：

在相应得表单控件上添加属性disabled即可，下面是css源码：

.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
cursor: not-allowed;
background-color: #eee;
opacity: 1;
} 
input[type="radio"][disabled],
input[type="checkbox"][disabled],
.radio[disabled],
.radio-inline[disabled],
.checkbox[disabled],
.checkbox-inline[disabled],
fieldset[disabled] input[type="radio"],
fieldset[disabled] input[type="checkbox"],
fieldset[disabled] .radio,
fieldset[disabled] .radio-inline,
fieldset[disabled] .checkbox,
fieldset[disabled] .checkbox-inline {
cursor: not-allowed;
}

로그인 후 복사

例子：

<input type="text" class="form-control" placeholder="表单已禁用" disabled>

로그인 후 복사

如果fieldset设置了disabled属性，整个域都会处于被禁用状态

例子：

<form role="form">
<fieldset disabled>
<div class="form-group">
<label> 输入框已禁用</label>
<input type="text" class="form-control" placeholder="禁止输入内容">
</div>
<div class="form-group">
<label>下拉框已禁用</label>
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
<div class="checkbox">
<label >
<input type="checkbox">选项框被禁用了
</label>
</div>
<button type="submit" class="btn btn-primary">提交</button>
</fieldset>
</form>

로그인 후 복사

效果如下：（鼠标移上去的时候出现禁用的图标，这里是直接截的图看不到这个效果）

3、验证状态

bootstrap提供下面这几种效果：

1、.has-warning:警告状态黄色

2、 .has-error :错误状态红色

3、 .has-success:成功状态绿色

使用的时候只需在form-group容器上对应添加状态类名，三种状态下效果都是一样的，只是颜色不一样而已

例子：

<form>
<div class="form-group has-success">
<label>成功状态</label>
<input type="text" class="form-control" placeholder="成功状态">
</div>
<div class="form-group has-error">
<label>错误状态</label>
<input type="text" class="form-control" placeholder="错误状态">
</div>
<div class="form-group has-warning">
<label>警告状态</label>
<input type="text" class="form-control" placeholder="警告状态">
</div>
</form>

로그인 후 복사

效果如下：

有时候，在表单验证的时不同的状态会提供不同的icon，如果要在对应的状态下显示icon出来，只需要在对应的状态下添加类名.has-feedback ,注意它要和.has-error,.has-success,.has-warning一起使用。

bootstrap的小图标都是使用@font-face来制作的。如：

<span class=”glyphicon glyphicon-warning form-control-feedback”></span>

로그인 후 복사

例子：

<form>
<div class="form-group has-success has-feedback">
<label> 成功状态</label>
<input type="text" class="form-control" placeholder="成功状态">
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
<div class="form-group has-error has-feedback">
<label>错误状态</label>
<input type="text" class="form-control" placeholder="错误状态">
<span class="glyphicon glyphicon-remove form-control-feedback"></span>
</div>
<div class="form-group has-warning has-feedback">
<label>警告状态</label>
<input type="text" class="form-control" placeholder="警告状态">
<span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
</div>
</form>

로그인 후 복사

效果如下：

表单提示信息

一般在制作表单验证时，需要提供不同的提示信息，在bootstrap框架中使用.help-block，将提示信息以块状显示，并且显示在控件底部

下面是css源码：

.help-block {
display: block;
margin-top: 5px;
margin-bottom: 10px;
color: #737373;
}

로그인 후 복사

例子：

<form>
<div class="form-group has-success has-feedback">
<label>成功状态</label>
<input type="text" class="form-control" placeholder="成功状态">
<span class="help-block">输入的信息正确</span>
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
<div class="form-group has-error has-feedback">
<label>错误状态</label>
<input type="text" class="form-control" placeholder="错误状态">
<span class="help-block">输入的信息有误</span>
<span class="glyphicon glyphicon-remove form-control-feedback"></span>
</div>
<div class="form-group has-warning has-feedback">
<label>警告状态</label>
<input type="text" class="form-control" placeholder="警告状态">
<span class="help-block">请输入正确的信息</span>
<span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
</div>
</form>

로그인 후 복사

效果如下：

如果不想为bootstrap.css增加自己的代码，而且设计又有这种需要，可以借助bootstrap的网格系统,例如：

<form role="form">
<div class="form-group">
<label class="control-label" for="inputSuccess1">成功状态</label>
<div class="row">
<div class="col-xs-6">
<input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" >
</div>
<span class="col-xs-6 help-block">你输入的信息是正确的</span>
</div>
</div> 
</form>

로그인 후 복사

以上所述是小编给大家介绍的Bootstrap表单组件的相关内容，希望对大家有所帮助！