부트스트랩 반응형 레이아웃을 만드는 방법

Bootstrap의 반응형 레이아웃은 그리드 시스템을 사용하고 다양한 화면에 대해 다양한 클래스 속성을 사용합니다.

개발 중에는 미디어 쿼리 사용을 고려할 필요 없이 휴대폰, 태블릿, PC에서 사용하기 위해 하나의 코드 세트만 작성할 수 있습니다(기기마다 다른 코드 작성). (권장 학습: Bootstrap 비디오 튜토리얼)

Bootstrap 공식 설명: Bootstrap은 반응성이 뛰어난 모바일 우선 유동 그리드 시스템을 제공합니다. 화면이나 뷰포트 크기가 증가하면 시스템이 자동으로 이를 12개의 긴 열로 나눕니다. . 그리드 시스템은 일련의 행과 열을 통해 페이지 레이아웃을 만드는 데 사용됩니다.

부트스트랩 반응형 레이아웃을 사용하면

먼저 헤드에 메타 태그를 도입하고 viewpirt 속성, 콘텐츠 속성을 추가해야 합니다. 콘텐츠의 너비는 장치 너비와 같습니다. 초기 크기: 첫 번째 페이지가 표시될 때 가시 영역의 크기가 조정됩니다. 값이 1이면 크기 조정 없이 페이지가 실제 크기에 따라 표시됩니다. maximum-scale: 사용자가 확대/축소할 수 있는 최소 비율입니다. -scalable: 사용자가 수동으로 확대/축소할 수 있는지 여부.

코드는 다음과 같습니다.

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 
<link rel="stylesheet" type="text/css" href="/stylesheets/bootstrap.min.css">

다음은 초소형 휴대폰 화면(iphone5s)과 PC 화면(>=1200px)을 대상으로 부트스트랩 레이아웃을 사용한 페이지(로그인 폼 인터페이스)입니다. col-xs-12: 작은 화면이 12열을 차지, col-lg-5: 큰 화면이 5열을 차지, col-lg-offset-3: 대형 화면이 3열을 들여쓰기합니다.

이것은 비교적 간단한 예입니다. 태블릿과 같은 다른 화면에 적용하려면 col-md-* 속성을 추가하고, 대형 화면 휴대폰에서는 col-sm-* 속성을 추가할 수 있습니다.

<div class="container-fluid login">
  <div class="row">
    <div class="col-xs-12 col-sm-12 col-md-8 col-lg-5 col-lg-offset-3">
      <form class="form-horizontal loginForm">
        <h3 class="form-signin-heading">用户登录</h3>
        <div class="form-group">
          <label for="email" class="col-sm-2 col-xs-3 control-label">邮箱</label>
          <div class="col-sm-8 col-xs-8">
            <input type="text" class="form-control" name="email" placeholder="请输入邮箱">
              <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
            </div>
        </div>
        <div class="form-group">
          <label for="password" class="col-sm-2 col-xs-3 control-label">密码</label>
          <div class="col-sm-8 col-xs-8">
            <input type="password" class="form-control" name="password" placeholder="请输入密码">
              <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
            </div>
        </div>
        <div class="form-group">
          <div class="col-sm-offset-2 col-sm-4 col-xs-4 ">
            <div class="checkbox">
              <label>
                <input type="checkbox">记住我 </label>
            </div>
          </div>
          <div class="col-sm-4 col-xs-4 control-label" >
            <a href="resetPwd.html" id="forget">忘记密码？</a>
          </div>
        </div>
        <div class="form-group">
          <div class="col-sm-12 col-lg-12">
            <button type="button" class="btn btn-primary btn-block" id="submit">登录</button>
          </div>
        </div>
      </form>
    </div>
  </div>

Bootstrap과 관련된 더 많은 기술 기사를 보려면 Bootstrap Tutorial 칼럼을 방문하여 알아보세요!

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