Bootstrap의 그리드 시스템 인 화면 폭 이상으로 col을 표시합니다.

목적



Bootstrap의 반응형 디자인에 대응한 그릿 시스템의 기재 방법을 응용하여, 어느 화면 폭 이상이 되면 해당 div를 표시하는 방법을 정리한다.
※그릿 시스템의 기본을 알고 싶은 분은 여기 를 참고해 주세요.
※응답 디자인의 기본을 알고 싶은 분은 여기 를 참고해 주세요.

누르는 포인트


  • col로 지정할 때 해당 요소를 표시하지 않는 d-none을 지정하여 정상 상태에서 요소의 내용을 표시하지 않는 상태를 만든다.
  • 표시하고 싶은 화면 폭의 타이밍과 표시 영역을 지정해 요소를 표시시킨다.
  • 어느 화면 이상에서 요소를 표시하고 싶을 때의 철칙 "항상 숨기기 설정으로 해두고 표시하고 싶은 화면 폭을 설정하여 표시시킨다".
  • d-none으로 숨기기
  • 비표시의 요소를 Medium(md)의 화면폭으로부터 해당 요소를 12 영역을 사용해 표시하고 싶을 때의 클래스명은 아래와 같다
    class="d-none col-md-12"
  • col이나 d를 사용하여 표시 영역을 지정할 때 화면 폭을 지정하지 않으면 모든 화면 폭으로 지정된 영역을 사용하여 표시하는 설정이 된다.

  • 그리드 시스템을 작성하는 방법의 예


  • 화면폭이 Medium(md) 이하일 때는 12분할된 안의 8영역을 사용한 「안녕」만 표시하고, Medium(md) 이상일 때 12분할된 안의 8영역과 4 영역을 사용하여 텍스트를 표시합니다.
  • 아래에 HTML 파일의 내용을 기재한다.
  • <div class="container">
      <div class="row">
        <div class="col-md-8">
          <h1>おはよう</h1>
        </div>
        <div class="d-none col-md-4">
          <h1>こんにちは</h1>
        </div>
      </div>
    </div>
    

    ↓ 미리보기



  • 화면폭이 Large(lg) 이하일 때에는 아무것도 표시하지 않고, Large(lg) 이상일 때 12분할된 안의 1영역과 1영역과 10영역을 사용하여 텍스트를 표시한다.
  • 아래에 HTML 파일의 내용을 기재한다
  • <div class="container">
      <div class="row">
        <div class="d-none col-lg-1">
          <h1>おはよう</h1>
        </div>
        <div class="d-none col-lg-1">
          <h1>こんにちは</h1>
        </div>
        <div class="d-none col-lg-10">
          <h1>こんばんは</h1>
        </div>
      </div>
    </div>
    

    ↓ 미리보기


    좋은 웹페이지 즐겨찾기