집 > 기사 > 웹 프론트엔드 > Bootstrap 양식을 레이아웃하는 방법은 무엇입니까? Bootstrap 양식 레이아웃을 만드는 방법(코드 포함)

Bootstrap 양식을 레이아웃하는 방법은 무엇입니까? Bootstrap 양식 레이아웃을 만드는 방법(코드 포함)

PHPz원래의: 2018-08-03 16:22:574661검색

Bootstrap이란? Bootstrap은 웹 애플리케이션 및 웹 사이트의 신속한 개발을 위한 프런트 엔드 프레임워크입니다. 그러면 Bootstrap은 어떻게 양식을 생성합니까? Bootstrap은 몇 가지 간단한 HTML 태그와 확장 클래스를 사용하여 다양한 스타일의 양식을 생성합니다. Bootstrap이 양식을 생성하는 방법을 살펴보겠습니다.

부트스트랩 양식 레이아웃

[관련 동영상 추천: 부트스트랩 튜토리얼 】

Bootstrap은 세로 형식(기본값), 인라인 형식, 가로 형식, 세로 또는 기본 형식과 같은 유형의 양식 레이아웃을 제공합니다.

기본 양식 구조는 Bootstrap 고유의 형식입니다. , 개별 양식 컨트롤은 자동으로 일부 전역 스타일을 받습니다. 아래에는 기본 양식을 만드는 단계가 나와 있습니다.

Add role="form" to the parent

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

에 라벨과 컨트롤을 넣습니다. 이는 최적의 간격을 확보하는 데 필요합니다.

모든 텍스트 요소 , 및 <select>에 클래스 ="form-control"을 추가합니다. </select>

예:

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

<form role="form">
    <div class="form-group">
        <label for="name">名称</label>
        <input type="text" class="form-control" id="name" 
               placeholder="请输入名称">
    </div>
    <div class="form-group">
        <label for="inputfile">文件输入</label>
        <input type="file" id="inputfile">
        <p class="help-block">这里是块级帮助文本的实例。</p>
    </div>
    <div class="checkbox">
        <label>
            <input type="checkbox"> 选择打勾
        </label>
    </div>
    <button type="submit" class="btn btn-default">提交</button>
</form>
    
</body>
</html>

실행 결과는 다음과 같습니다.

Bootstrap 양식을 레이아웃하는 방법은 무엇입니까? Bootstrap 양식 레이아웃을 만드는 방법(코드 포함)

#🎜🎜 #

인라인 양식

양식을 만들어야 하는 경우 양식의 모든 요소는 인라인이고 왼쪽 정렬되며 레이블은 인라인인 경우 태그에 .form-inline 클래스를 추가하세요.

Instance

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

<form class="form-inline" role="form">
    <div class="form-group">
        <label class="sr-only" for="name">名称</label>
        <input type="text" class="form-control" id="name" 
               placeholder="请输入名称">
    </div>
    <div class="form-group">
        <label class="sr-only" for="inputfile">文件输入</label>
        <input type="file" id="inputfile">
    </div>
    <div class="checkbox">
        <label>
            <input type="checkbox"> 请打勾
        </label>
    </div>
    <button type="submit" class="btn btn-default">提交</button>
</form>

</body>
</html>

실행 결과는 다음과 같습니다.

Bootstrap 양식을 레이아웃하는 방법은 무엇입니까? Bootstrap 양식 레이아웃을 만드는 방법(코드 포함)

# 🎜🎜#
기본적으로 Bootstrap의 입력, 선택 및 텍스트 영역 너비는 100%입니다. 인라인 양식을 사용하는 경우 양식 컨트롤에서 너비를 설정해야 합니다.

.sr 전용 클래스를 사용하면 인라인 양식의 레이블을 숨길 수 있습니다.

가로형

가로형은 표시 개수뿐만 아니라 표현 방식에서도 다른 형식과 다릅니다. 가로로 배치된 양식을 만들려면 다음 단계를 따르세요.

클래스 .form-horizontal을 상위

요소에 추가합니다.

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

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

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

Instance

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title>Bootstrap 实例 - 水平表单</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">  
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/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은 텍스트, 비밀번호, 날짜/시간, 날짜/시간-로컬, 날짜, 월, 시간, 주, 숫자, 이메일, URL, 검색, 전화번호 및 색상을 포함한 모든 기본 HTML5 입력 유형을 지원합니다. 입력의 스타일을 완전히 지정하려면 적절한 유형 선언이 필요합니다.

Instance

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title>Bootstrap 实例 - 输入框</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">  
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<form role="form">
    <div class="form-group">
        <label for="name">标签</label>
        <input type="text" class="form-control" placeholder="文本输入">
    </div>
 </form>

</body>
</html>

실행 결과는 다음과 같습니다.

Bootstrap 양식을 레이아웃하는 방법은 무엇입니까? Bootstrap 양식 레이아웃을 만드는 방법(코드 포함)

Textarea )

여러 줄을 입력해야 하는 경우 텍스트 상자 텍스트 영역을 사용할 수 있습니다. 필요한 경우 행 속성을 변경합니다(행 수가 적을수록 상자가 작아지고, 행이 많을수록 상자가 커짐).

Instance

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title>Bootstrap 实例 - 文本框</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">  
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<form role="form">
    <div class="form-group">
        <label for="name">文本框</label>
        <textarea class="form-control" rows="3"></textarea>
    </div>
</form>

</body>
</html>

결과는 다음과 같습니다.

Bootstrap 양식을 레이아웃하는 방법은 무엇입니까? Bootstrap 양식 레이아웃을 만드는 방법(코드 포함)

확인란( 체크박스) 및 라디오 버튼(라디오)

체크박스와 라디오 버튼은 사용자가 일련의 사전 설정 옵션 중에서 선택할 수 있도록 하는 데 사용됩니다.

양식을 만들 때 사용자가 목록에서 여러 옵션을 선택할 수 있도록 하려면 확인란을 사용하세요. 사용자가 하나의 옵션만 선택하도록 제한하려면 라디오를 사용하세요.

일련의 체크박스와 라디오 버튼에 대해 .checkbox-inline 또는 .radio-inline 클래스를 사용하여 동일한 줄에 표시되도록 제어합니다.

다음 예에서는 두 가지 유형(기본값과 인라인)을 모두 보여줍니다.

Example

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title>Bootstrap 实例 - 复选框和单选按钮</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">  
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<label for="name">默认的复选框和单选按钮的实例</label>
<div class="checkbox">
    <label><input type="checkbox" value="">选项 1</label>
</div>
<div class="checkbox">
    <label><input type="checkbox" value="">选项 2</label>
</div>
<div class="radio">
    <label>
        <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> 选项 1
    </label>
</div>
<div class="radio">
    <label>
        <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">选项 2 - 选择它将会取消选择选项 1
    </label>
</div>
<label for="name">内联的复选框和单选按钮的实例</label>
<div>
    <label class="checkbox-inline">
        <input type="checkbox" id="inlineCheckbox1" value="option1"> 选项 1
    </label>
    <label class="checkbox-inline">
        <input type="checkbox" id="inlineCheckbox2" value="option2"> 选项 2
    </label>
    <label class="checkbox-inline">
        <input type="checkbox" id="inlineCheckbox3" value="option3"> 选项 3
    </label>
    <label class="radio-inline">
        <input type="radio" name="optionsRadiosinline" id="optionsRadios3" value="option1" checked> 选项 1
    </label>
    <label class="radio-inline">
        <input type="radio" name="optionsRadiosinline" id="optionsRadios4"  value="option2"> 选项 2
    </label>
</div>

</body>
</html>

실행 결과는 다음과 같습니다.

# 🎜🎜#

Bootstrap 양식을 레이아웃하는 방법은 무엇입니까? Bootstrap 양식 레이아웃을 만드는 방법(코드 포함)

선택 상자(선택)

사용 시 사용자가 여러 옵션 중에서 선택할 수 있도록 하려는 경우 선택 상자를 사용하지만 기본적으로 하나의 옵션만 선택할 수 있습니다.

목록 옵션을 표시하려면 을 사용하세요. 일반적으로 상태나 숫자 등 사용자에게 친숙한 옵션입니다.

사용자가 여러 옵션을 선택할 수 있도록 하려면 multiple="multiple"을 사용하세요.

下面的实例演示了这两种类型（select 和 multiple）：

例子：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Bootstrap 实例 - 选择框</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">  
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<form role="form">
    <div class="form-group">
        <label for="name">选择列表</label>
        <select class="form-control">
            <option>A</option>
            <option>B</option>
            <option>C</option>
            <option>D</option>
            <option>E</option>
        </select>
        <label for="name">可多选的选择列表</label>
        <select multiple class="form-control">
            <option>A</option>
            <option>B</option>
            <option>C</option>
            <option>D</option>
            <option>E</option>
        </select>
    </div>
</form>

</body>
</html>

运行结果如下：

Bootstrap 양식을 레이아웃하는 방법은 무엇입니까? Bootstrap 양식 레이아웃을 만드는 방법(코드 포함)

静态控件

当您需要在一个水平表单内的表单标签后放置纯文本时，请在

上使用 class .form-control-static。

实例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Bootstrap 实例 - 静态控件</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">  
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<form class="form-horizontal" role="form">
    <div class="form-group">
        <label class="col-sm-2 control-label">Email</label>
        <div class="col-sm-10">
            <p class="form-control-static">email@example.com</p>
        </div>
    </div>
    <div class="form-group">
        <label for="inputPassword" class="col-sm-2 control-label">密码</label>
        <div class="col-sm-10">
            <input type="password" class="form-control" id="inputPassword" 
                   placeholder="请输入密码">
        </div>
    </div>
</form>

</body>
</html>

运行结果如下：

Bootstrap 양식을 레이아웃하는 방법은 무엇입니까? Bootstrap 양식 레이아웃을 만드는 방법(코드 포함)

表单控件状态

除了 :focus 状态（即，用户点击 input 或使用 tab 键聚焦到 input 上），Bootstrap 还为禁用的输入框定义了样式，并提供了表单验证的 class。

输入框焦点

当输入框 input 接收到 :focus 时，输入框的轮廓会被移除，同时应用 box-shadow。

禁用的输入框 input

如果您想要禁用一个输入框 input，只需要简单地添加disabled 属性，这不仅会禁用输入框，还会改变输入框的样式以及当鼠标的指针悬停在元素上时鼠标指针的样式。

禁用的字段集 fieldset

对

添加 disabled 属性来禁用

内的所有控件。

验证状态

Bootstrap 包含了错误、警告和成功消息的验证样式。只需要对父元素简单地添加适当的 class（.has-warning、 .has-error 或 .has-success）即可使用验证状态。

下面的实例演示了所有控件状态：

实例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title>Bootstrap 实例 - 表单控件状态</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">  
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<form class="form-horizontal" role="form">
    <div class="form-group">
        <label class="col-sm-2 control-label">聚焦</label>
        <div class="col-sm-10">
            <input class="form-control" id="focusedInput" type="text"  value="该输入框获得焦点...">
        </div>
    </div>
    <div class="form-group">
        <label for="inputPassword" class="col-sm-2 control-label">
            禁用
        </label>
        <div class="col-sm-10">
            <input class="form-control" id="disabledInput" type="text" placeholder="该输入框禁止输入..." disabled>
        </div>
    </div>
    <fieldset disabled>
        <div class="form-group">
            <label for="disabledTextInput"  class="col-sm-2 control-label">禁用输入（Fieldset disabled）
            </label>
            <div class="col-sm-10">
                <input type="text" id="disabledTextInput" class="form-control"  placeholder="禁止输入">
            </div>
        </div>
        <div class="form-group">
            <label for="disabledSelect"  class="col-sm-2 control-label">禁用选择菜单（Fieldset disabled）
            </label>
            <div class="col-sm-10">
                <select id="disabledSelect" class="form-control">
                    <option>禁止选择</option>
                </select>
            </div>
        </div>
    </fieldset>
    <div class="form-group has-success">
        <label class="col-sm-2 control-label" for="inputSuccess">
            输入成功
        </label>
        <div class="col-sm-10">
            <input type="text" class="form-control" id="inputSuccess">
        </div>
    </div>
    <div class="form-group has-warning">
        <label class="col-sm-2 control-label" for="inputWarning">
            输入警告
        </label>
        <div class="col-sm-10">
            <input type="text" class="form-control" id="inputWarning">
        </div>
    </div>
    <div class="form-group has-error">
        <label class="col-sm-2 control-label" for="inputError">
            输入错误
        </label>
        <div class="col-sm-10">
            <input type="text" class="form-control" id="inputError">
        </div>
    </div>
</form>

</body>
</html>

运行结果如下：

Bootstrap 양식을 레이아웃하는 방법은 무엇입니까? Bootstrap 양식 레이아웃을 만드는 방법(코드 포함)

表单控件大小

您可以分别使用 class .input-lg 和 .col-lg-* 来设置表单的高度和宽度。下面的实例演示了这点：

实例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title>Bootstrap 实例 - 表单控件大小</title>
    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">  
    <script src="//cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="//cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<form role="form">
    <div class="form-group">
        <input class="form-control input-lg" type="text" placeholder=".input-lg">
    </div>
    <div class="form-group">
        <input class="form-control" type="text" placeholder="默认输入">
    </div>
    <div class="form-group">
        <input class="form-control input-sm" type="text" placeholder=".input-sm">
    </div>
    <div class="form-group">
    </div>
    <div class="form-group">
        <select class="form-control input-lg">
            <option value="">.input-lg</option>
        </select>
    </div>
    <div class="form-group">
        <select class="form-control">
            <option value="">默认选择</option>
        </select>
    </div>
    <div class="form-group">
        <select class="form-control input-sm">
            <option value="">.input-sm</option>
        </select>
    </div>

    <div class="row">
        <div class="col-lg-2">
            <input type="text" class="form-control" placeholder=".col-lg-2">
        </div>
        <div class="col-lg-3">
            <input type="text" class="form-control" placeholder=".col-lg-3">
        </div>
        <div class="col-lg-4">
            <input type="text" class="form-control" placeholder=".col-lg-4">
        </div>
    </div>
</form>

</body>
</html>

运行结果如下：

Bootstrap 양식을 레이아웃하는 방법은 무엇입니까? Bootstrap 양식 레이아웃을 만드는 방법(코드 포함)

表单帮助文本

Bootstrap 表单控件可以在输入框 input 上有一个块级帮助文本。为了添加一个占用整个宽度的内容块，请在后使用 .help-block。下面的实例演示了这点：

实例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title>Bootstrap 实例 - 表单帮助文本</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">  
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<form role="form">
    <span>帮助文本实例</span>
    <input class="form-control" type="text" placeholder="">
    <span class="help-block">一个较长的帮助文本块，超过一行，
        需要扩展到下一行。本实例中的帮助文本总共有两行。</span>
</form>

</body>
</html>

运行结果如下：

Bootstrap 양식을 레이아웃하는 방법은 무엇입니까? Bootstrap 양식 레이아웃을 만드는 방법(코드 포함)

Bootstrap 양식을 레이아웃하는 방법은 무엇입니까? Bootstrap 양식 레이아웃을 만드는 방법(코드 포함)

관련 기사