부트스트랩의 장점과 단점은 무엇입니까?

부트스트랩의 장점과 단점은 무엇인가요?
Bootstrap은 html, css 및 javascript를 기반으로 하는 웹 애플리케이션 및 웹 사이트의 신속한 개발을 위한 프런트 엔드 프레임워크입니다.
장점은 다음과 같습니다: 모바일 장치 우선, 주류 브라우저 지원, 사용하기 쉬운, 반응형 디자인
단점: IE6을 지원하지 않음, 의미가 충분하지 않은 클래스의 과도한 사용, 부트스트랩을 사용하여 개발된 웹사이트는 심각하게 균질화되어 있습니다.

【관련 영상 추천: Bootstrap 튜토리얼】

Bootstrap은 반응성이 뛰어난 모바일 우선 유동 그리드 시스템을 제공합니다. 화면이나 뷰포트 크기가 증가하면 시스템이 자동으로 최대 12개의 열로 나누어집니다.

모바일 우선 전략

• Content

• 무엇이 가장 중요한지 결정하세요.

• Layout

• 폭이 작은 디자인을 우선시하세요.

• 기본 CSS는 모바일 우선이며 미디어 쿼리는 태블릿 및 데스크톱 컴퓨터용입니다.

• 점진적 향상

• 화면 크기가 커짐에 따라 요소를 추가하세요.

반응형 그리드 시스템 화면이나 뷰포트 크기가 커지면 시스템이 자동으로 최대 12개의 열로 나눕니다.

부트스트랩 그리드 시스템 작동 방식

그리드 시스템은 콘텐츠가 포함된 일련의 행과 열을 통해 페이지 레이아웃을 만듭니다. Bootstrap 그리드 시스템의 작동 방식은 다음과 같습니다.

• 행은 적절한 정렬과 패딩을 얻으려면 .container 클래스 내부에 배치되어야 합니다.

• 행을 사용하여 열의 수평 그룹을 만듭니다.

• 콘텐츠는 열 내에 배치되어야 하며 열만 행의 직접 하위 요소가 될 수 있습니다.

• 미리 정의된 그리드 클래스(예: .row 및 .col-xs-4)를 사용하여 그리드 레이아웃을 빠르게 생성할 수 있습니다. 더 의미 있는 레이아웃을 위해 LESS 믹스인 클래스를 사용할 수 있습니다.

• 열은 패딩을 사용하여 열 내용 사이에 간격을 만듭니다. 패딩은 첫 번째 열과 마지막 열의 행 오프셋을 나타내는 .rows의 여백의 음수를 취하여 얻습니다.

• 그리드 시스템은 확장하려는 12개의 사용 가능한 열을 지정하여 생성됩니다. 예를 들어 3개의 동일한 열을 만들려면 3개의 .col-xs-4을 사용하세요.

• 미디어 쿼리

  미디어 쿼리는 매우 멋진 "조건부 CSS 규칙"입니다. 특정 특정 조건에 따라 일부 CSS에서만 작동합니다. 해당 조건이 충족되면 해당 스타일이 적용됩니다.

  Bootstrap의 미디어 쿼리를 사용하면 뷰포트 크기에 따라 콘텐츠를 이동하고 표시하고 숨길 수 있습니다. 다음 미디어 쿼리는 LESS 파일에서 Bootstrap 그리드 시스템의 주요 중단점 임계값을 생성하는 데 사용됩니다.

  /* 超小设备（手机，小于 768px） */
  /* Bootstrap 中默认情况下没有媒体查询 */
  
  /* 小型设备（平板电脑，768px 起） */@media (min-width: @screen-sm-min) { ... }
  
  /* 中型设备（台式电脑，992px 起） */@media (min-width: @screen-md-min) { ... }
  
  /* 大型设备（大台式电脑，1200px 起） */@media (min-width: @screen-lg-min) { ... }

  로그인 후 복사

• 때때로 CSS의 영향을 더 작은 범위의 화면 크기로 제한하기 위해 미디어 쿼리 코드에 max-width를 포함하기도 합니다.

  @media (max-width: @screen-xs-max) { ... }
  @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
  @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
  @media (min-width: @screen-lg-min) { ... }

  로그인 후 복사

• 미디어 쿼리는 두 부분으로 구성됩니다. 먼저 장치 사양과 크기 규칙입니다. 위의 경우 다음과 같은 규칙이 설정되어 있습니다.

  다음 코드 줄을 살펴보겠습니다.

  @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }

  로그인 후 복사

• 기본 그리드 구조

  부트스트랩 그리드의 기본 구조는 다음과 같습니다.

  <div class="container">
     <div class="row">
        <div class="col-*-*"></div>
        <div class="col-*-*"></div>      
     </div>
     <div class="row">...</div></div><div class="container">....

  로그인 후 복사

Please 처음으로 블로그에 접속할 수 없다면 몇 가지 조언을 주세요

위 내용은 부트스트랩의 장점과 단점은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!