부트스트랩 Grid 이해하기....3
원래 이번엔 Typography(타이포 그라피)에 대해서 살펴 보려고 하였으나
그리드 시스템 이해를 숙지하고 뒤돌아서면 잊어버리니 사용법에 대해서 먼저 알아 보려고 합니다......ㅠㅠ
예제를 보여드리기 위해 급하게 계정을 하나 만들었네요....ㅎㅎ
지난시간 설명으로 인해 클래스 옵션에 대해서 웬만큼 아실테니 바로 사용 예제를 통하여 알아 보도록 하겠습니다.
아래 예제의 경우는 .col-sm-* 를 표현한 것 입니다.
아래의 예를 들어 .col-sm-4은 가로 해상도 768px 이상에서 행의 4/12를 가로 크기로 하겠다는 뜻입니다.
만약 가로 해상도가 768px 미만이라면 행 전체를 가로 크기로 합니다.
예제 링크는 http://boot.apachezone.com/col-sm-4.php
[code]
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>Hello World!</h1>
<p>Resize the browser window to see the effect.</p>
<div class="row">
<div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
<div class="col-sm-4" style="background-color:lavenderblush;">.col-sm-4</div>
<div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
</div>
</div>
[/code]
아래의 예는 col-sm-4와 col-sm-8 를 혼용해서 사용한 예입니다.
col-sm-8는 가로 해상도 768px 이상에서 행의 8/12와 4/12를 각각 가로 크기로 하겠다는 뜻입니다
예제 링크는 http://boot.apachezone.com/col-sm-4_8.php
[code]
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>Hello World!</h1>
<p>Resize the browser window to see the effect.</p>
<div class="row">
<div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
<div class="col-sm-8" style="background-color:lavenderblush;">.col-sm-8</div>
</div>
</div>
</body>
</html>
[/code]
위의 예제를 본것과 같이 .col-md-*, .col-lg-* 또한 해상도에 따라 차등 적용 하시면 됩니다.
.col-md-*은 가로 해상도 992px 이상에서 적용되며, .col-lg-*은 가로 해상도 1200px 이상에서 적용됩니다.
예를 들면 .col-md-6은 가로 해상도 992px 이상에서 행의 6/12을 가로 크기로 하겠다는 뜻입니다.
만약 가로 해상도가 992px 미만이라면 행 전체를 가로 크기로 하고,
.col-lg-6은 가로 해상도 1200px 이상에서 행의 6/12을 가로 크기로 하겠다는 뜻이고 가로 해상도가 1200px 미만이라면 행 전체를 가로 크기로 합니다.
아래 링크는 그리드 시스템의 클래스 옵션을 한눈에 살펴보기 위하여 만들어 보았습니다. 레이아웃의 해상도를 줄이거나 늘리면 변화를 확인 하실 수 있습니다.
http://boot.apachezone.com/grid-all.php
http://boot.apachezone.com/col-lg-4_col-sm-6.php
이제 그리드 시스템에 대해서 이해가 되셨는지 모르겠습니다....^^
다음 시간에는 정말 Typography(타이포 그라피)에 대해서 알아 보겠습니다.
참고 사이트 : http://www.w3schools.com/bootstrap
댓글 6개
여러번 봐야 이해될것 같습니다.
감사합니다.
1회 부터 쬐끔이라도 더 수준을 낮추어 줄수는 없으신가요 ?
머리통이 작아서.....