Bootstrap 그리드 시스템에 대해 배웠습니다.

bootstrap의 그리드 시스템이란?



그리드 시스템이란?


  • 화면 가로폭을 12개의 가이드라인(그리드)으로 나누기

  • 그리드 시스템의 장점


  • 반응형 디자인과 잘 어울립니다
  • 정보를 정리하기 쉽습니다

  • 그리드 시스템의 요소



  • container
  • 전체 요소를 둘러싸는 클래스.
  • container 안에 row, col를 저장한다.
  • 사이즈가 5단계 있다. (자세한 내용은 링크 참조)
  • container-fluid는 화면 폭에 따라 달라집니다



  • 행을 나타내는 클래스.
  • row 안에 col를 기재한다.


  • col
  • 열을 나타내는 클래스.
  • col 뒤에 -(하이픈)로 문자열을 연결하여 "이 화면에서는 이 개수의 그리드"라는 것을 지정합니다.


  • 참고 기사



    container-fluid·row·col로 페이지를 둘러싼다



    col-12로 두 개의 둘러싸인 패턴


  • 코드
  • ## /views/big/new.html.erb
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <h1>Bootstrap 使ってみた</h1>
            </div>
            <div class="col-12">
                <h1>Bootstrap 使ってみた</h1>
            </div>
        </div>
    </div>
    
  • 화면



  • col-6으로 두 개의 둘러싸인 패턴


  • 코드
  • <div class="container-fluid">
        <div class="row">
            <div class="col-6">
                <h1>Bootstrap 使ってみた</h1>
            </div>
            <div class="col-6">
                <h1>Bootstrap 使ってみた</h1>
            </div>
        </div>
    </div>
    
  • 화면


  • 해설


  • col12 ✕ 2의 경우, 12를 오버하기 위해, 자동으로 2행이 된다.
  • col6 ✕ 2의 경우 12 이내이므로 자동으로 한 줄이됩니다.
  • 좋은 웹페이지 즐겨찾기