How to create a form layout using Bootstrap

Bootstrap provides three types of form layouts: vertical forms, horizontal forms, and inline forms; they are set by externally introducing JavaScript and CSS files in Bootstrap and adding class names to elements. Form controls

HTML forms are an integral part of web pages and applications, but manually setting up form controls one by one using only CSS is often cumbersome and tedious. Nowadays, with the emergence of bootstrap, the styling and alignment process of form controls such as labels, input fields, selection boxes and submit boxes in the form has been greatly simplified. Next, in the article, we will introduce the form layout style in Bootstrap in detail

[Recommended course: Bootstrap course]

There are three different types of form layouts provided in Bootstrap:

• Vertical form (default table layout)

• Horizontal form

• Inline form

In the following article, I will introduce these form layouts and details in detail one by one. Various form-related Bootstrap components

Externally introduce 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>

Create vertical form layout

This is the default Bootstrap form layout where styles are applied to form controls without adding any base classes to the

element or any major changes in markup.

The form controls in this layout have left-aligned labels stacked on top

Example:

<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>

Rendering:

Creating a landscape table layout

In landscape format, layout labels are right-aligned and floated to the left so that they appear on the same line as the form controls. Landscape form layout requires various markup changes in the default form layout. The following are the specific steps to implement horizontal form layout:

(1) Add the .form-horizontal class to the form element

(2) Implement packaging tags and form controls in the div element and add .form-group class

(3) Use Bootstrap’s predefined grid class to align labels and form controls

(4) Add .control-label to

<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:

Create inline form layout

Sometimes in When creating a form, place form controls side by side to compress the layout. If you want to achieve this effect you can add the form-inline class to the form element.

<div style="margin: 30px;">
    <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:

Summary: The above is the entire content of this article. I hope you can learn the form layout style in Bootstrap. Helps.

The above is the detailed content of How to create a form layout using Bootstrap. For more information, please follow other related articles on the PHP Chinese website!