집 >웹 프론트엔드 >부트스트랩 튜토리얼 >부트스트랩 양식을 중앙에 배치하는 방법
부트스트랩 양식을 중앙에 배치하는 방법
- (*-*)浩원래의
- 2019-07-19 11:08:2313410검색
Bootstrap은 간단한 HTML 태그와 확장 클래스를 통해 다양한 스타일의 양식을 만들 수 있습니다.
Bootstrap은 다양한 형태의 레이아웃을 제공하지만 가장 일반적으로 사용되는 것은 수평 형태라고도 불리는 중앙 정렬 형태입니다.
가로형은 마크 수뿐만 아니라 형태 표현에서도 다른 형태와 다릅니다. (권장 학습: 부트스트랩 비디오 튜토리얼)
가로 레이아웃 양식을 만들려면 다음 단계를 따르세요.
부모
.form-group 클래스를 사용하여 레이블에 클래스 .control-label을 추가합니다. 예: 더 많은 Bootstrap 관련 기술 기사를 보려면 Bootstrap Tutorial 칼럼을 방문하여 알아보세요! 위 내용은 부트스트랩 양식을 중앙에 배치하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!<!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>