부트스트랩 양식을 중앙에 배치하는 방법-부트스트랩 튜토리얼-php.cn

부트스트랩 양식을 중앙에 배치하는 방법

(*-*)浩

풀어 주다： 2019-07-19 11:08:23

원래의

13419명이 탐색했습니다.

Bootstrap은 간단한 HTML 태그와 확장 클래스를 통해 다양한 스타일의 양식을 만들 수 있습니다.

부트스트랩 양식을 중앙에 배치하는 방법

Bootstrap은 다양한 형태의 레이아웃을 제공하지만 가장 일반적으로 사용되는 것은 수평 형태라고도 불리는 중앙 정렬 형태입니다.

가로형은 마크 수뿐만 아니라 형태 표현에서도 다른 형태와 다릅니다. (권장 학습: 부트스트랩 비디오 튜토리얼)

가로 레이아웃 양식을 만들려면 다음 단계를 따르세요.

부모

요소에 .form-horizontal 클래스를 추가하세요.

.form-group 클래스를 사용하여

에 라벨과 컨트롤을 넣습니다.

레이블에 클래스 .control-label을 추가합니다.

예:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 水平表单</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<form class="form-horizontal" role="form">
	<div class="form-group">
		<label for="firstname" class="col-sm-2 control-label">名字</label>
		<div class="col-sm-10">
			<input type="text" class="form-control" id="firstname" 
				   placeholder="请输入名字">
		</div>
	</div>
	<div class="form-group">
		<label for="lastname" class="col-sm-2 control-label">姓</label>
		<div class="col-sm-10">
			<input type="text" class="form-control" id="lastname" 
				   placeholder="请输入姓">
		</div>
	</div>
	<div class="form-group">
		<div class="col-sm-offset-2 col-sm-10">
			<div class="checkbox">
				<label>
					<input type="checkbox"> 请记住我
				</label>
			</div>
		</div>
	</div>
	<div class="form-group">
		<div class="col-sm-offset-2 col-sm-10">
			<button type="submit" class="btn btn-default">登录</button>
		</div>
	</div>
</form>

</body>
</html>

로그인 후 복사

더 많은 Bootstrap 관련 기술 기사를 보려면 Bootstrap Tutorial 칼럼을 방문하여 알아보세요!

위 내용은 부트스트랩 양식을 중앙에 배치하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!