BootStrap의 Grid 시스템 정보

2522 단어 HTMLCSSBootstrap
이 글은 Aizu Advent Calender 2021 첫날의 글이다.
개시하다
최근에 웹 페이지를 만들고 있습니다.나는 Boot Strap으로 스펀지 모양의 사이트를 만들어 보았다.여러분께 소개하고 싶어서 이번 기사를 썼습니다.
BootStrapt란?
내비게이션 표시줄, 입력 폼 등 종류가 있어 종류 이름만 추가하면 사이트를 간단하게 만들 수 있다.
또 스펀지 모양의 사이트를 간단하게 만들 수 있다.
가져오기 방법
  • 모두가 좋아하는 CDN(다음 예)
  • npm,yarn 등의 봉인
  • 기타 홈페이지
  • 여기서부터 BootStrap 다운로드 시작
    이른바 Grid 시스템

  • 12열 시스템
    다음 그림에서 보듯이 창은 12열로 나뉜다.

    자신의 취향에 따라 열의 크기를 바꿀 수 있다.(열의 숫자)


  • 6단계 스펀지 케이크.
    기본 단점 6개를 준비했습니다.
    브레이크에 따라 메쉬의 레이아웃을 수정할 수 있습니다.

  • 단점은 sm(576px)이고 코드는 다음과 같다.
    See the Pen Untitled by suzu144 ( @mattya144 )
    on CodePen .








    BootStrap의 메쉬 시스템에 대해 조금 이해하셨습니까?

    처음 쓰는 기사인데 이해하기 어려운 부분이 있으니 양해해 주십시오🙇‍♀️🙇‍♀️



    참고자료


    BootStrap 공식 페이지


    좋은 웹페이지 즐겨찾기