Bootstrap의 버튼 스타일 및 이미지 스타일 소개

이 글에서는 부트스트랩에서 버튼과 폼을 결합한 스타일과 그림 스타일을 소개하겠습니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다. 부트스트랩 관련 비디오 튜토리얼을 더 배우고 얻으려면 부트스트랩 튜토리얼을 방문하세요!

부트스트랩 버튼 스타일

1. 양식 그룹

.form-group: 양식을 그룹화합니다

.form-control: 스타일을 너비 100%, 둥근 테두리, 적절한 파란색 음영으로 설정합니다. ...

형식:

<form>
   <p class="form-group">
   <label></label>
   <input type="text" class="form-control"/>
   </p>
</form>

참고: 입력 상자의 유형이 올바르게 설정된 경우에만 올바른 스타일이 부여될 수 있습니다.

2. 인라인 양식

.form-inline: 양식을 왼쪽 정렬하여 일렬로 정렬합니다.

형식:

<form class="form-inline">
   <input type="text" class="form-control"/>
   <input type="text" class="form-control"/>
</form>

3 양식 그룹화

.input-group: 및 양식 -group 그룹화할 때 사용하는 기능과 동일합니다.

.input-group-addon: 그룹화할 요소

Format:

<form>
   <p class="input-group">
   <p class="input-group-addon">合组</p>
   <input type="text" class="form-control"/>
   </p>
</form>

4 가로 배열

.form-horizontal: 가로 배열 형식, 통해 양식에 .form-horizontal 클래스를 추가하고 Bootstrap의 미리 설정된 그리드 클래스를 사용하여 레이블 레이블과 컨트롤 그룹을 수평으로 나란히 배치합니다. 이렇게 하면 .form-group의 동작이 그리드 시스템의 행처럼 동작하도록 변경되므로 추가로 .row

Format:

<form class="form-horizontal">
   <p class="form-group">
   <label></label>
   <input.../>
   </p>
</form>

5을 추가할 필요가 없습니다.

. checkbox: 체크박스의 상위 요소로 사용되어 체크박스를 블록 수준 요소로 전환합니다.

.checkbox-inline: 체크박스의 상위 요소로 사용하여 체크박스를 한 줄로 만듭니다.

.radio: 체크박스의 상위 요소로 사용됩니다. 라디오 버튼 상자의 상위 요소를 사용하여 라디오 버튼 상자를 블록 수준 요소로 전환

.radio-inline : 라디오 버튼 상자를 라인으로 만들기 위해 라디오 버튼 상자의 상위 요소로 사용

형식:

<form>
   <p class="radio">
   <label>
   <input type="radio" name="check" id="" value="" />选择1
   </label>
   </p>
   <p class="radio">
   <label>
   <input type="radio" name="check" id="" value="" />选择2
   </label>
   </p>
</form>

6. 드롭다운 목록

.from-control: 스타일을 너비 100%, 둥근 테두리, 적절한 파란색 그림자로 설정합니다...

형식:

<form>
   <select class="form-control">
   <option>下拉列表1</option>
   <option>下拉列表2</option>
   </select>
</form>

7 유효성 검사 상태

포커스를 받을 때 테두리 및 그림자 색상을 변경합니다

.has-error: 오류는 빨간색

.has-success: 성공은 녹색

.has-warning: 경고는 노란색

.control-label: 해당 상태 라벨 동기화

Format:

<form>
   <p class="form-group has-warning">
   <label for="user" class="control-label">用户</label>
   <input type="text" class="form-control" id="user" placeholder="请输入用户名"/>
   </p>
</form>

control-label 이 클래스는 라벨 동기화 상태

8입니다. 추가 아이콘 추가

.has-feedback: 위치 설정

.form-control-feedback: 요소 설정, has-feedback 클래스

.glyphicon glyphicon-ok: 아이콘 확인

.glyphicon-warning-sign: 경고 아이콘

glyphicon-remove: 오류 아이콘

....

형식:

<p class="form-group has-feedback">
   <input type="text" class="form-control">
   <span class="glyphicon glyphicon-ok form-control-feedback"></span>
</p>

给 span 设置 form-control-feedback 这个类，让它相对于 has-feedback 进行定位，定位到input 框里面的右侧

9. 控制输入框大小

.input-lg : 大输入框

.input-small : 小输入框

.form-group-lg : 大输入框

.form-group-sm : 小输入框

格式 ：

<input type="text" class="form-control input-sm">

或者直接给父元素设置

<p class="form-group-lg"></p>

响应式图片：

.img-responive : 图片会跟随屏幕的缩放而缩放

.img-rounded : 圆角矩形图片

.img-circle : 圆形图片

.img-thumbnail : 给图片加一个边框

위 내용은 Bootstrap의 버튼 스타일 및 이미지 스타일 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!