부트스트랩 학습 양식 형식 및 글꼴 아이콘

이 글에서는 BootStrap의 목록 그룹 구성 요소, 패널 구성 요소 및 반응형 임베디드 구성 요소를 소개합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다. 더 많은 부트스트랩 관련 비디오 튜토리얼을 배우고 얻으려면 bootstrap tutorial을 방문하세요!

양식 형식

.form-group: 양식 그룹(레이블 레이블과 입력 상자는 가능한 한 이 클래스로 둘러싸여야 합니다)

.form-control: 입력, 텍스트 영역 및 선택 요소의 경우 너비 속성은 기본적으로 width:100%로 설정됩니다. 둥근 테두리

.form-inline: Inline form, is for 폼 태그는 내부 상자가 값의 가로 배열이 되도록 설정됩니다.

.form-horizontal: 가로로 배열된 형식, .form-horizontal 클래스를 추가합니다. 양식 및 부트스트랩 사전 설정 사용 그리드 클래스를 사용하면 레이블 레이블과 컨트롤 그룹을 수평으로 나란히 배치할 수 있습니다. 이렇게 하면 .form-group의 동작이 변경되어 그리드 시스템의 행처럼 동작하므로 추가로 .row

.sr-only를 추가할 필요가 없습니다. main 라벨 설정 및 라벨 숨기기

간단한 로그인 상자

		<p class="container">
			<form action="#" method="post" class="form-horizontal">
				<p class="form-group">
				<label for="user" class="col-lg-2 control-label">用户名</label>
				<p class="col-lg-10"><input type="text" name="user" id="user" value="" class="form-control" /></p>
				</p>
				<p class="form-group">
				<label for="pd" class="col-lg-2 control-label">密码</label> 
				<p class="col-lg-10"><input type="password" name="pd" id="pd" value="" class="form-control" /></p>
				</p>
				<p class="form-group col-lg-5 col-lg-offset-5">
				<p class="col-lg-5 col-lg-offset-5"">
				<input type="checkbox" name="" id="cx" value="" />
				<label for="cx">是否同意</label>
				</p>
				<p class="col-lg-2 col-lg-offset-5">
				<button type="submit" class="btn btn-success">提交</button>
				</p>
			</form>
		</p>

여기의 컨트롤 라벨은 라벨 동기화 입력 스타일#🎜 🎜#

Font Icon

성능상의 이유로 모든 아이콘에는 기본 클래스와 해당 종류가 필요합니다. 다음 코드를 입력하면 어디서나 잘 작동합니다. 올바른 패딩을 설정하려면 아이콘과 텍스트 사이에 공백을 추가해야 합니다. 특정 글꼴 아이콘을 보려면 Bootstrap 중국어 웹사이트(https://v3.bootcss.com/comComponents/)를 방문하세요.

위 내용은 부트스트랩 학습 양식 형식 및 글꼴 아이콘의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!