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 중국어 웹사이트의 기타 관련 기사를 참조하세요!