Bootstrap 기본 강의

Bootstrap 플러그인

Bootstrap 그리드 시스템 예제: 모바일, 패드 컴퓨터, 데스크톱 컴퓨터

이미 본 중형 및 대형 장치 。이제 또 다른 예제를 보여드리겠습니다. 작은 모바일을 적용하도록 할 것입니다. 태블릿의 열을 25%/75%, 다음과 같은 옵션을 추가합니다：

<div>....</div>
<div>....</div>

지금까지 제공된 3 여러 가지 다른 열 레이아웃이 있으며, 세 가지 장치에 적합합니다. 모바일에서는 왼쪽 25% 오른쪽 75%의 레이아웃입니다. 태블릿에서는 50%/50%의 레이아웃입니다. 대형 뷰포트 장치에서는 33%/66%의 레이아웃을 확인하십시오. 아래 예제를 통해 검증하십시오。（각 열에 대해 스타일을 정의하여 피하실 수 있습니다。）

온라인 예제

예제

<!DOCTYPE　html>
<html>
<head>
　　　<title>Bootstrap　예제　-　모바일、패드 컴퓨터、데스크톱 컴퓨터</title>
　　　<link　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"　rel="stylesheet">
　　　<script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
　　　<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　　<h1>Hello, world!</h1>
　　　<div class="row">
　　　　　　<div class="col-sm-3　col-md-6　col-lg-8"　　
　　　　　　　　　style="background-color: #dedef8;　
　　　　　　　　　box-shadow: inset　1px　-1px　1px #444,　
　　　　　　　　　inset　-1px　1px　1px #444">
　　　　　　　　　Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do　
　　　　　　　　　　　　eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut　
　　　　　　　　　　　　enim ad minim veniam, quis nostrud exercitation ullamco laboris　
　　　　　　　　　　　　nisi ut aliquip ex ea commodo consequat.　
　　　　　　　　　</p>
　　　　　　　　　Sed ut perspiciatis unde omnis iste natus error sit voluptatem　
　　　　　　　　　　　　accusantium doloremque laudantium, totam rem aperiam, eaque ipsa　
　　　　　　　　　　　　quae ab illo inventore veritatis et quasi architecto beatae vitae　
　　　　　　　　　　　　dicta sunt explicabo.　
　　　　　　　　　</p>
　　　　　　</div>
　　　　　　<div class="col-sm-9　col-md-6　col-lg-4"　
　　　　　　　　　style="background-color: #dedef8;
　　　　　　　　　box-shadow: inset　1px　-1px　1px #444,　
　　　　　　　　　inset　-1px　1px　1px #444">
　　　　　　　　　Sed ut perspiciatis unde omnis iste natus error sit voluptatem　
　　　　　　　　　　　　accusantium doloremque laudantium.
　　　　　　　　　</p>
　　　　　　　　　Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,　
　　　　　　　　　　　　consectetur, adipisci velit, sed quia non numquam eiusmod　
　　　　　　　　　　　　tempora incidunt ut labore et dolore magnam aliquam quaerat　
　　　　　　　　　　　　voluptatem.　
　　　　　　　　　</p>
　　　	</div>
　　</div>
</div>
</body>
</html>

테스트를 보고 보세요 ‹/›

결과는 다음과 같습니다:

Bootstrap 그리드 시스템 예제: 중형 및 대형 장치