수업 container과 row. Bootstrap의 문서가이 부분에 대해 명확하지 않기 때문에 확실하지 않습니다.
저는 Bootstrap 3을 사용하고 있습니다.
답변:
containerrow요소 의 컨테이너입니다 .
row 요소는 열의 컨테이너입니다 (문서에서는 그리드 시스템이라고 함).
또한 container레이아웃의 반응 형 동작을 처리하는 콘텐츠의 여백을 설정합니다.
따라서 container클래스는 부트 스트랩 프로젝트의 스타일 지침에 따라 '박스형'콘텐츠를 만드는 데 자주 사용됩니다.
전체 너비 그리드를 만드는 "바로 사용"하려는 경우 row내부에 열이있는 요소 만 사용할 수 있습니다 (일반적인 총 12cols에 걸쳐 있음).
container및 row클래스는 본체 내부의 요소이다. 따라서 기본 레이아웃은 다음과 같습니다.
<html>
<body>
<div class="container">
<div class="row">
<div class="col-md-xx"></div>
...
</div>
<div class="row">
<div class="col-md-xx"></div>
...
</div>
</div>
</body>
</html>
박스형 반응 형 레이아웃의 경우.
를 생략하면 container전체 너비 레이아웃이 표시됩니다.
Jumbotron은 container행동 의 좋은 예입니다 . Jumbotron 요소를 요소에 넣으면 container둥근 테두리와 반응 형 너비에 따라 고정 너비가 있습니다. Jumbotron이 컨테이너 외부에 있으면 테두리없이 전체 너비로 확장됩니다.
row내부에 열이있는 요소 만 사용할 수 있습니다 (일반적인 총 12cols에 걸쳐 있음). 나는 당신이 사용할 수 있다고 생각 container-fluid하고 row-fluid이를 위해. (부트 스트랩 초보자는 소금 한 꼬집으로 가져
나는 똑같은 것에 대해 궁금했고 내가 bootstrap.css버전 3을 겪었다는 것을 이해하고 있었다 . 대답은 줄 번호에 있습니다. 1585 년에서 1605 년까지. 더 나은 이해를 위해 여기에 그 줄을 게시 할 것입니다.
.container
{
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
@media (min-width: 768px) {
.container {
width: 750px;
}
}
@media (min-width: 992px) {
.container {
width: 970px;
}
}
@media (min-width: 1200px) {
.container {
width: 1170px;
}
}
전체 코드는 자명합니다. 그러나,이에 정교하게, 용기가 걸릴 750px화면 너비 사이 인 경우 768px와 992px등 코드 쇼 등. 이제 1200 이상의 일반적인 화면 해상도의 경우 컨테이너 1170px는를 사용하지만 30 px( 15px+15px) 의 패딩을 빼면 남은 유효 공간은 다음과 같습니다.1140px 이며 왼쪽과 오른쪽의 여백이 자동으로 설정되어 화면 중앙에 있습니다.
이제의 경우 class="row"아래 코드가 있습니다.
.row {
margin-right: -15px;
margin-left: -15px;
}
따라서 행이 컨테이너 내부에 있으면 컨테이너에서 각 측면의 패딩이 15px 인 패딩을 효과적으로 잡아 내고 전체 공간을 사용합니다. 그러나 클래스 행이 body 태그 안에 있으면 음수 여백으로 인해 보이는 영역에서 브라우저의 왼쪽과 오른쪽으로 이동하는 경향이 있습니다.
명확 해 졌으면합니다.
컨테이너
컨테이너는 반응 형 너비에 대한 너비 제한을 제공합니다. 반응 형 크기가 변경되면 변경되는 컨테이너입니다. 행과 열은 모두 백분율 기반이므로 변경할 필요가 없습니다. 각면에 15px 여백이 있으며 행에 의해 취소됩니다.
행
행은 항상 컨테이너에 있어야합니다.
행은 열에 살 장소를 제공하며 이상적으로는 최대 12 개의 열을 추가 할 수 있습니다. 또한 모든 열이 왼쪽으로 떠 있기 때문에 래퍼 역할을합니다. 추가 행은 수레가 이상 할 때 겹치지 않습니다.
행에는 또한 양쪽에 15px의 음수 여백이 있습니다. 행을 구성하는 div는 일반적으로 컨테이너 패딩 내부에 제한되어 분홍색 영역의 가장자리에 닿지 만 그 너머에는 닿지 않습니다. 15px의 음수 여백은 15px 패딩 컨테이너 위로 행을 밀어내어 본질적으로 무효화합니다. 또한 행은 내부의 모든 div가 이전 및 다음 행과 분리 된 자체 행에 표시되도록합니다.
기둥
이제 열에 15px 패딩이 있습니다. 이 패딩은 행에 음의 여백이 있고 컨테이너에 양의 패딩이 있으므로 열이 실제로 행의 가장자리에 닿는 것을 의미합니다. 그러나 열의 패딩은 열 내부의 모든 것을 필요한 위치로 밀어 넣고 열 사이에 30px 거터를 제공합니다. 행 외부의 열을 사용하지 마십시오. 작동하지 않습니다.
자세한 내용은 이 기사 를 읽어 보시기 바랍니다 . 정말 명확하고 Bootstrap의 그리드 시스템이 어떻게 작동하는지 잘 설명합니다.
전통적인 CSS 방식에서는 아마도 다음 클래스를 사용할 것입니다.
wrapper, header, navigator, contents, footer
위 클래스의 사용법은 다음 예와 같을 수 있습니다.
<body>
<div class="wrapper">
<div class="header">
</div>
<div class="navigator">
</div>
<div class="content">
</div>
<div class="footer">
</div>
</div>
</body>
부트 스트랩에서는 원하는 경우 또는 위 템플릿에 익숙한 경우 다음 예제와 같은 부트 스트랩 클래스를 사용할 수 있습니다.
<body>
<div class="container">
<div class="col-md-12">
<h1>Header</h1>
<p>Header contents goes here</p>
</div>
<div class="col-md-12">
<nav role="navigation" class="nav navbar">
<h1>Navigation</h1>
<p>Navigation contents goes here</p>
</nav>
</div>
<div class="col-md-12">
<div class="pagination">
<h1>Page contents</h1>
<p>Webpage contents goes here</p>
</div>
</div>
<div class="col-lg-12">
<h1>Footer contents</h1>
<p>footer contents goes here</p>
</div>
</div>
</body>
행 클래스의 경우 페이지에 대한 테이블 형식 레이아웃을 디자인하려는 경우 행 클래스를 사용할 수 있지만 데이터를 테이블 형식으로 표시하려면 테이블 클래스를 사용해야하지만 테이블이 응답하지 않습니다.
데이터 테이블과 다른 테이블 형식 레이아웃을 만들려면 다음 예와 같이 행 클래스를 사용합니다.
<body>
<div class="container">
<div class="row">
<div class="col-sm-4" >.col-sm-4</div>
<div class="col-sm-4" >.col-sm-4</div>
<div class="col-sm-4" >.col-sm-4</div>
</div>
</div>
</body>