Bootstrap 양식을 레이아웃하는 방법은 무엇입니까? Bootstrap 양식 레이아웃을 만드는 방법(코드 포함)-HTML 튜토리얼-php.cn

집

웹 프론트엔드

HTML 튜토리얼

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

PHPz

Aug 03, 2018 pm 04:22 PM

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 양식 레이아웃을 만드는 방법(코드 포함)

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7700

자바 튜토리얼

1640

Cakephp 튜토리얼

1393

라라벨 튜토리얼

1287

PHP 튜토리얼

1230

Related knowledge

HTML은 초보자를 위해 쉽게 배우나요? Apr 07, 2025 am 12:11 AM

HTML은 간단하고 배우기 쉽고 결과를 빠르게 볼 수 있기 때문에 초보자에게 적합합니다. 1) HTML의 학습 곡선은 매끄럽고 시작하기 쉽습니다. 2) 기본 태그를 마스터하여 웹 페이지를 만들기 시작하십시오. 3) 유연성이 높고 CSS 및 JavaScript와 함께 사용할 수 있습니다. 4) 풍부한 학습 리소스와 현대 도구는 학습 과정을 지원합니다.

HTML, CSS 및 JavaScript의 역할 : 핵심 책임 Apr 08, 2025 pm 07:05 PM

HTML은 웹 구조를 정의하고 CSS는 스타일과 레이아웃을 담당하며 JavaScript는 동적 상호 작용을 제공합니다. 세 사람은 웹 개발에서 의무를 수행하고 화려한 웹 사이트를 공동으로 구축합니다.

HTML의 시작 태그의 예는 무엇입니까? Apr 06, 2025 am 12:04 AM

anexampleStartingtaginhtmlis, whithbeginsaparagraph.startingtagsareessentialinhtmlastheyinitiate rements, definetheirtypes, andarecrucialforstructurituringwebpages 및 smanstlingthedom.

HTML, CSS 및 JavaScript 이해 : 초보자 안내서 Apr 12, 2025 am 12:02 AM

WebDevelopmentReliesonHtml, CSS 및 JavaScript : 1) HtmlStructuresContent, 2) CSSSTYLESIT, 및 3) JAVASCRIPTADDSINGINTERACTIVITY, BASISOFMODERNWEBEXPERIENCES를 형성합니다.