>웹 프론트엔드 >HTML 튜토리얼 >부트스트랩을 사용하여 양식을 만드는 방법

부트스트랩을 사용하여 양식을 만드는 방법

不言
不言원래의
2019-01-03 15:15:0611320검색

부트스트랩은 흔히 볼 수 있는 폼 유형을 쉽게 생성할 수 있고, 코딩도 매우 간단하므로 이번 글에서는 부트스트랩을 사용하여 폼을 생성하는 방법을 살펴보겠습니다.

부트스트랩을 사용하여 양식을 만드는 방법

양식 작성 방법

먼저

태그를 사용하여 양식을 설정한 다음 양식의 각 요소에 대해 class="form-group"을 설정합니다("와 같은 태그로 설정).
" 클래스="form-group"으로 설정하려는 범위). 마지막으로 태그에 class = "form-control"을 설정하여 완성하세요.

부트스트랩이 폼을 생성하는 구체적인 예를 살펴보겠습니다

코드는 다음과 같습니다

<!DOCTYPE html>
<html>
  <head>
  	<meta charset="utf-8">
    <title>sample</title>
    <script src="bootstrap-4.2.1-dist/js/bootstrap.min.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="bootstrap-4.2.1-dist/css/bootstrap.min.css" />
  </head>
  <body style="padding: 50px;">
    <form>
      <div class="form-group">
        <label for="email">电子邮箱</label>
        <input type="email" class="form-control" id="email" placeholder="电子邮箱">
      </div>
      <div class="form-group">
        <label for="pass">密码</label>
        <input type="password" class="form-control" id="pass" placeholder="密码">
      </div>
      <div>
      	<label for="file">文件上传:</label>

      	<input type="file" id="file">
      	<p class="help-block">显示文件帮助。</p>
      </div>
      <div class="check">
        <label>
          <input type="checkbox">确认
        </label>
      </div>
      <button type="submit" class="btu btn-default">发送</button>
    </form>
  </body>
</html>

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

부트스트랩을 사용하여 양식을 만드는 방법

인라인 폼도 생성 가능합니다.

태그에 class = "form-inline"만 추가하면 됩니다. 여기서는 자세히 설명하지 않겠습니다. 관심 있는 친구가 직접 시도해 보세요.

요약하자면 위 내용은 이 글의 전체 내용입니다. 더 흥미로운 내용을 보려면 PHP 중국어 웹사이트의 다른 관련 튜토리얼 컬럼을 주목하세요! ! !

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

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.