Bootstrap을 사용하여 양식 레이아웃을 만드는 방법

Bootstrap은 수직 양식, 수평 양식 및 인라인 양식의 세 가지 유형의 양식 레이아웃을 제공합니다. Bootstrap에서 JavaScript 및 CSS 파일을 외부적으로 도입하고 요소에 클래스 이름을 추가하여 양식 컨트롤을 설정합니다.

HTML 양식은 웹 페이지 및 애플리케이션을 사용하지만 CSS만 사용하여 양식 컨트롤을 하나씩 수동으로 설정하는 것은 번거롭고 지루한 경우가 많습니다. 요즘에는 부트스트랩의 출현으로 양식의 레이블, 입력 필드, 선택 상자 및 제출 상자와 같은 양식 컨트롤의 스타일링 및 정렬 프로세스가 크게 단순화되었습니다. 다음 기사에서는 Bootstrap의 양식 레이아웃 스타일을 자세히 소개합니다

[추천 과정: Bootstrap 과정]

Bootstrap에서 제공하는 양식 레이아웃에는 세 가지 유형이 있습니다.

• 세로형(기본 테이블 레이아웃)

• 가로형

• 인라인형

다음 글에서는 이러한 폼 레이아웃과 다양한 폼 관련 부트스트랩 컴포넌트를 하나씩 자세히 소개하겠습니다.

외부에서 Bootstrap 소개

<link rel="stylesheet" type="text/css" href=".\bootstrap-3.3.7-dist\css\bootstrap.css">
<script type="text/javascript" src=".\bootstrap-3.3.7-dist\js\bootstrap.min.js"></script>

수직 양식 레이아웃 만들기

이것은 기본 클래스를

요소나 마크업에 추가하지 않고 양식 컨트롤에 스타일을 적용하는 기본 Bootstrap 양식 레이아웃입니다. 큰 변화.

이 레이아웃의 양식 컨트롤에는 왼쪽 정렬 레이블이 맨 위에 쌓여 있습니다.

예:

<div style="margin:20px;">
    <form action="#" method="post">
        <div class="form-group">
            <label for="inputName">用户名</label>
            <input type="username" class="form-control" id="inputName" placeholder="username" required>
        </div>
        <div class="form-group">
            <label for="inputPassword">密码</label>
            <input type="password" class="form-control" id="inputPassword" placeholder="Password" required>
        </div>
        <div class="checkbox">
            <label><input type="checkbox">记住密码</label>
        </div>
        <button type="submit" class="btn btn-primary">登录</button>
    </form>
</div>

렌더링:

가로 테이블 레이아웃 만들기

가로 형식에서는 레이아웃 레이블이 오른쪽으로 정렬됩니다. 그리고 양식 컨트롤과 같은 줄에 나타나도록 왼쪽 부동(Float) 방향으로 이동합니다. 가로 형식 레이아웃에는 기본 형식 레이아웃에서 다양한 마크업 변경이 필요합니다. 다음은 수평 양식 레이아웃을 구현하는 구체적인 단계입니다.

(1) 양식 요소에 .form-horizontal 클래스를 추가합니다.

(2) div 요소에 패키징 태그 및 양식 컨트롤을 구현하고 .form-group을 추가합니다. class

( 3) Bootstrap의 사전 정의된 그리드 클래스를 사용하여 레이블 및 양식 컨트롤 정렬

(4) 레이블 요소의 클래스에 .control-label 추가

<div>
    <form class="form-horizontal" action="#" method="post">
        <div class="form-group">
            <label for="inputName" class="control-label col-xs-2">用户名</label>
            <div class="col-xs-10">
                <input type="username" class="form-control" id="inputName" placeholder="username" required>
            </div>
        </div>
        <div class="form-group">
            <label for="inputPassword" class="control-label col-xs-2">密码</label>
            <div class="col-xs-10">
                <input type="password" class="form-control" id="inputPassword" placeholder="Password" required>
            </div>
        </div>
        <div class="form-group">
            <div class="col-xs-offset-2 col-xs-10">
                <div class="checkbox">
                    <label><input type="checkbox">记住密码</label>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-xs-offset-2 col-xs-10">
                <button type="submit" class="btn btn-primary">登录</button>
            </div>
        </div>
    </form>
</div>

Rendering:

인라인 양식 레이아웃 만들기

양식을 만들 때 레이아웃을 압축하기 위해 양식 컨트롤을 나란히 배치해야 하는 경우가 있습니다. 이 효과를 얻으려면 양식 요소에 양식 인라인 클래스를 추가할 수 있습니다.

<div   style="max-width:90%">
    <form class="form-inline" action="#" method="post">
        <div class="form-group">
            <label class="sr-only" for="inputName">用户名</label>
            <input type="username" class="form-control" id="inputName" placeholder="username" required>
        </div>
        <div class="form-group">
            <label class="sr-only" for="inputPassword">密码</label>
            <input type="password" class="form-control" id="inputPassword" placeholder="Password" required>
        </div>
        <div class="checkbox">
            <label><input type="checkbox">记住密码</label>
        </div>
        <button type="submit" class="btn btn-primary">登录</button>
    </form>
</div>

Rendering:

요약: 위 내용은 이 글의 전체 내용입니다. 모든 분들이 Bootstrap의 양식 레이아웃 스타일을 배우는 데 도움이 되기를 바랍니다.

위 내용은 Bootstrap을 사용하여 양식 레이아웃을 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!