【Bootstrap】그리드 시스템을 중첩으로 실현
세계에서 가장 인기있는 CSS 프레임 워크.
이 연예계 다음으로 전환이 심하다고 말해지는 IT 세계에서,
CSS 프레임워크 인기 왕좌에 Bootstrap은 개발 당초 2011년부터 계속 앉고 있습니다.
그리고 인기의 큰 이유 중 하나는 그리드 시스템입니다.
그렇습니다, 화면 크기에 따라 우냐우냐하는, 저것입니다.
(화면을 가로폭의 사이즈마다, 12분할로 하고, 지정한 숫자분의 범위를 확보하는 구조군요.)
이번에는 확보한 범위 내에서 한층 더 12분할을 하는 방법을 소개합니다.
먼저 화면을 평소와 같이 3분할로 합니다.
화면을 3분할하려면 전부 12분할 중 4분할분을 확보하면 OK네요.
bootstrap.html
<body>
<div class="container">
<div class="row">
<div class="col-4" style="background-color: blue; height:100vh">
</div>
<div class="col-4" style="background-color: white; height:100vh">
</div>
<div class="col-4" style="background-color: red; height:100vh">
</div>
</div>
</div>
</body>
자 이번에는 한층 더 이 중간의 하얀 부분을 3분할합니다.
우선, 3 분할하고 싶은 블록 요소안에, row 클래스의 블록 요소를 기술합니다.
bootstrap.html
<body>
<div class="container">
<div class="row">
<div class="col-4" style="background-color: blue; height:100vh">
</div>
<div class="col-4" style="background-color: white; height:100vh">
<div class="row">
</div>
</div>
<div class="col-4" style="background-color: red; height:100vh">
</div>
</div>
</div>
</body>
그리고, row 클래스의 블록 요소안에 3분할한 블록 요소를 기술합니다.
bootstrap.html
<body>
<div class="container">
<div class="row">
<div class="col-4" style="background-color: blue; height:100vh">
</div>
<div class="col-4" style="background-color: white; height:100vh">
<div class="row">
<div class="col-4" style="background-color: yellow; height:100vh">
</div>
<div class="col-4" style="background-color: red; height:100vh">
</div>
<div class="col-4" style="background-color: black; height:100vh">
</div>
</div>
</div>
<div class="col-4" style="background-color: red; height:100vh">
</div>
</div>
</div>
</body>
이것으로 완료됩니다.
짱! ! !
Reference
이 문제에 관하여(【Bootstrap】그리드 시스템을 중첩으로 실현), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/fusekichi/items/86c9ac20de79865227f5텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
