1. body class="container"

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>class test</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
</head>
<!-- body에 class element를 적용한 경우 -->
<body class="container">
    <div>
        <h1>h1 Bootstrap heading(36px)</h1>
        <h2>h1 Bootstrap heading(30px)</h2>
        <h3>h1 Bootstrap heading(24px)</h3>
        <h4>h1 Bootstrap heading(18px)</h4>
        <h5>h1 Bootstrap heading(14px)</h5>
        <h6>h1 Bootstrap heading(12px)</h6>
    </div>
</body>
</html>
 cs

 

 

 

2. div class="container"

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>class test</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
</head>
<body>
<!--div에 class element를 적용한 경우 -->
    <div class="container">
        <h1>h1 Bootstrap heading(36px)</h1>
        <h2>h1 Bootstrap heading(30px)</h2>
        <h3>h1 Bootstrap heading(24px)</h3>
        <h4>h1 Bootstrap heading(18px)</h4>
        <h5>h1 Bootstrap heading(14px)</h5>
        <h6>h1 Bootstrap heading(12px)</h6>
    </div>
</body>
</html>
 cs

 

 

부트스트랩 적용시 class 요소를 body에 붙여도, div에 붙여도 둘 다 정상적으로 동작하는 것을 확인할 수 있다. 

저작자표시 비영리 변경금지

'FrontEnd > CSS & HTML' 카테고리의 다른 글

HTML :: 하이퍼링크로 팝업창 열기  (0) 2016.05.12
HTML :: <pre>  (0) 2016.04.02
HTML :: select optgroup  (0) 2016.03.10
HTML :: id vs name  (0) 2016.03.01

+ Recent posts

티스토리툴바