Front-end
bootstrap grid
hyebin Lee
2022. 3. 14. 15:26
부트스트랩의 기본 개념 : 홈페이지 전체가 12개의 컬럼으로 구성되어있다.
<div class="container">
<div class="row">
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
</div>
</div>
container로 한번 감싸고, row 와 col이 들어간다.
위 코드는 col 이 4개씩 할당 받게 된다. 총 도합이 12개가 된다.
뒤에 숫자를 붙여서 작성할 수 있다.
<div class="row">
<div class="col-sm-8">col-sm-8</div>
<div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
</div>
sm은 스몰이고 , md, lg, 를 가장 많이 쓴다.
컨테이너 안에는 여러개의 줄이 포함될 수 있다. md를 사용하는 것이 좋다.
사이트 크기를 점점 줄이다가 768px이하가 되면 변화가 일어난다.
네개의 컬럼을 차지한 블럭이 일렬로 밑으로 나오게 된다. 즉 모바일 화면에서 보이게 된다.
만약 row가 12개가 넘어가면 다음 row로 표시된다.
앞칸을 비우고 싶다면 offset-md-4를 넣어준다.
<div className="row">
<Colstyled className="col-md-4 offset-md-4">hello</Colstyled>
<Colstyled className="col-md-4">hello</Colstyled>
</div>
여백을 없애고 싶으면 container-fluid <div className="container-fuid">
md 768이하면 sm로 넘어가고
sm576이하면 xs로 넘어가고
xs는 하나의 블럭으로 표시된다.