bootstrap 그리드 시스템을 어떻게 사용합니까?

여기는 수진원 앞의 작은 교실입니다.
[bootstrap 그리드 시스템은 어떻게 사용합니까?]
1. 배경 소개
Bootstrap은 트위터에서 온 것으로 현재 가장 인기 있는 전단 프레임이다.Bootstrap은 HTML, CSS,
JAVASCRIPT의 간결하고 유연하여 웹 개발을 더욱 빠르게 합니다.
Bootstrap은 동적 CSS 언어less로 작성된 우아한 HTML과 CSS 규범을 제공합니다.Bootstrap이 밀면...
NASA의 MSNBC(마이크로소프트 전국 방송사)를 포함하여 GitHub에서 인기 있는 소스 개발 프로젝트가 되었다.
의 Breaking News에서 이 프로젝트를 사용했습니다.국내 일부 모바일 개발자에게 익숙한 프레임워크, 예를 들어 WeX5 프런트엔드
원본 프레임워크 등도 Bootstrap 원본 코드를 바탕으로 성능 최적화를 한 것이다.
최신 Bootstrap4는sass로 작성되었음을 설명해야 합니다.
2. 지식 분석
작업 원리
사용할 때 LESS(또는 Sass) 원본을 실제 상황에 따라 다시 컴파일하여 12라는 수치를 수정할 수 있다(즉 바꾸는 것이다
24나 32로 나눌 수 있다. 물론 너도 더 많이 나눌 수 있지만, 이렇게 사용하는 것은 권장하지 않는다.
규칙 사용
1. 행(.row)은 적절한 정렬 및 내부 간격(padding)을 지정하기 위해 컨테이너(.container)에 포함되어야 합니다.
2. 줄(.row)에 열(.column)을 추가할 수 있지만 열의 합은 평분의 총 열을 초과할 수 없다. 예를 들어 12.예:
3. 구체적인 내용은 열 용기(column) 안에 놓아야 하며, 열(column)만 줄 용기(.row)로 사용할 수 있다.
의 직접 하위 요소
4. 유사하다.row와.col-sm-4와 같은 미리 정의된 클래스는 격자 레이아웃을 신속하게 만들 수 있습니다.
5. 내부 간격(padding)을 설정하여 열과 열 사이의 간격을 생성합니다.그리고 첫 번째 열과 마지막 열에 음수를 설정합니다
의 외부 거리(margin)로 내부 거리(padding)의 영향을 상쇄
격자선 옵션
Bootstrap은 서로 다른 사이즈의 화면(핸드폰, 태블릿PC, PC 등 포함)에 대해 서로 다른 양식류를 설정하여 개발자를
개발자는 개발할 때 더 많은 선택을 할 수 있다.내 이해에 따르면 한 원소에 여러 개의 다른 위의 양식류를 사용한다면
요소는 서로 다른 사이즈에 따라 가장 적합한 스타일 종류를 선택합니다.예를 들면
요소에는 두 가지 스타일 클래스가 사용됩니다.col-md-와.col-lg.
화면의 폭이 768px(즉 작은 화면)보다 작을 때 열의 구분은 다음과 같다.col-xs-뒤에 있는 숫자를 기준으로 합니다.정의가 없으면col-xs-,
단열로 변하고 너비와row가 상당한 넓이가 768px와 992px 사이(즉 태블릿 스크린)일 때 열을 구분한다.col-sm-뒤
라는 숫자를 기준으로 삼았다.col-sm-를 정의하지 않으면.col-xs-를 기준으로 합니다.
992px와 1200px 사이 (즉 중간 화면) 의 넓이가 있을 때, 열의 구분은.col-md-뒤에 있는 숫자를 기준으로 합니다.하면, 만약, 만약...
col-md-,col-sm-또는col-xs-를 기준으로 합니다.
화면의 폭이 1200px(즉 큰 화면)보다 크면 열의 구분은 다음과 같다.col-lg-뒤에 있는 숫자를 기준으로 합니다.정의가 없으면col-md-
으로col-md-또는col-sm-또는col-xs-를 기준으로 합니다.
3. 자주 묻는 질문
어떻게 5열이 가득 차지할 폭을 설정합니까?
그리드 시스템의 15px는 어떤 작용을 합니까?
부동 문제 제거
4. 솔루션
열당 폭 20% 설정
즉 100% 를 열수로 나눈 것이다.
bootstrap 부동 제거
5. 코딩 실전 10칸을 그리드 시스템으로 개조
div class=“row logo”>

    














 
  
6.    
 css         ？
 
  
1   ，    HTML、css、JavaScript      
 
  
2          ，        
 
  
7.    
 
  
http://www.runoob.com/bootstrap/bootstrap-tutorial.html
 
  
https://www.cnblogs.com/chessYu/p/7337018.html
 
  
8.    
 
  
  bootstrap3 bootstrap4     ？
 
  
  bootstrap3 bootstrap4       4   flex  ，3   float  ，bootstrap4      (col-)，bootstrap3      (col-xs），bootstrap4        (col-xl-)，bootstrap4 offset   ，bootstrap3 push pull       
 
  
  container,row,col     ？          ？
 
  
  .container                  。 .row .col                 。