모바일 우선
부트스트랩 2에서 우리는 모바일 친화적인 스타일을 프레임워크의 중요한 부분으로 추가했었습니다. 부트스트랩 3 에서는 시작부터 모바일 친화적으로 다시 만들었습니다. 모바일은 부가적인 부분이 아닌 핵심적인 부분으로 만들어졌습니다. 말하자면, 부트스트랩은 모바일 우선입니다. 모바일 우선 스타일은 전 독립된 파일들이 아닌 전 영역을 걸쳐 확인할 수 있습니다.
적절한 렌더링과 확대/축소를 위해, 당신의 <head> 에 viewport 메타태그를 추가하세요.
<meta name="viewport" content="width=device-width, initial-scale=1">
당신은 viewport 메타태그에 user-scalable=no 를 추가하여 모바일 기기에서 확대/축소 기능을 끌 수 있습니다. 확대/축소를 끈다는 것은, 사용자들이 오직 스크롤만 할 수 있음을 의미합니다. 그리고 당신의 사이트가 좀 더 네이티브 어플같이 느껴지도록 합니다. 종합적으로 봤을 때 우리는 모든 사이트에 이것을 추천하지 않습니다. 그러므로 조심히 사용하세요!
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">컨테이너
부트스트랩은 사이트 콘텐츠를 감싸고 그리드 시스템을 만들 컨테이너 요소가 필요합니다. 당신은 당신의 프로젝트에 2가지 콘테이너 중 하나를 선택할 수 있습니다. 주목할 점은, padding 등의 문제로 어느 것도 중첩할 수는 없다는 것이다.
반응형 고정폭 컨테이너를 위해 .container 를 사용하세요.
<div class="container">
...
</div>
당신의 뷰포트 전체 폭까지 늘어나는 최대폭 컨테이너를 위해 .container-fluid 을 사용하세요.
<div class="container-fluid">
...
</div>반응형 고정폭 콘테이너
클래스가 container인 div를 만들고 배경색을 회색으로 글자색을 흰색으로 지정합니다.
<head>
...
<style>
.container{
background-color:gray;
color:#fff;
}
</style>
</head>
<body>
<div class="container">
container
</div>
...
<body>
뷰포트 전체폭까지 늘어나는 콘테이너
<head>
...
<style>
.container-fluid{
background-color:gray;
color:#fff;
}
</style>
</head>
<body>
<div class="container-fluid">
container-fluid
</div>
...
<body>
'Bootstrap' 카테고리의 다른 글
| 03. [Bootstrap] 그리드 시스템 (0) | 2021.10.08 |
|---|---|
| 01. [Bootstrap] 기본 사용법 (0) | 2021.10.08 |