Wheat Academy 부트스트랩 소개 비디오에 대한 권장 자료(코스웨어 소스 코드)

Bootstrap은 Twitter에서 출시한 가장 인기 있는 프런트 엔드 프레임워크 중 하나입니다. Bootstrap은 HTML, CSS 및 JAVASCRIPT를 기반으로 하며 일반적으로 사용되는 CSS 레이아웃, 일반적으로 사용되는 구성 요소 및 JavaScript 플러그인을 완전하고 완벽하게 캡슐화하므로 경험이 부족한 프런트엔드 엔지니어와 백엔드 개발 엔지니어가 신속하게 작업을 수행할 수 있습니다. 개발 효율성을 크게 향상시키고 프런트 엔드 팀의 CSS 및 JavaScript 작성을 어느 정도 표준화합니다. 즉, 부트스트랩을 배우면 반응형 웹 프로젝트를 쉽게 개발할 수 있습니다. "Wheat Academy 부트스트랩 소개 비디오 튜토리얼"은 부트스트랩을 쉽게 시작하는 데 도움이 될 것입니다.

강좌 재생 주소: http://www.php.cn/course/324.html

선생님의 강의 스타일:

선생님의 강의는 생생하고 재치 있고 재치 있습니다. 감동. 생생한 은유는 학생들에게 지혜의 문을 열어주는 마무리와 같습니다. 잘 배치된 유머는 마치 부드러운 와인 한 잔을 마시는 것과 같이 학생들에게 아는 듯한 미소를 가져다 주고, 사람들에게 철학자의 격언과 문화적 언급을 선사합니다. 내레이션에 때때로 삽입되어 사람들에게 생각과 경고를 제공합니다.

이 영상에서 더 어려운 점은 부트스트랩 그리드 시스템의 원리입니다:

Bootstrap에는 반응형 모바일 장치 우선 유동 그리드 시스템이 내장되어 있습니다. 화면 장치나 뷰포트 크기가 증가함에 따라 시스템이 작동합니다. 자동으로 최대 12개의 열로 나눕니다.

여기서 Bootstrap의 그리드 시스템을 레이아웃이라고 부릅니다. 일련의 행과 열 조합을 통해 페이지 레이아웃을 생성한 다음 생성한 레이아웃에 콘텐츠를 배치할 수 있습니다. 다음은 부트스트랩 그리드 시스템의 작동 원리에 대한 간략한 소개입니다.

그리드 시스템의 구현 원리는 매우 간단합니다. 컨테이너 크기를 정의하고 12등분으로 나누면 됩니다(24개 또는 24개로 나눌 수도 있음). 32부분이지만 12부분이 가장 일반적임), 내부 및 외부 여백을 조정하고 마지막으로 미디어 쿼리와 결합하여 강력한 반응형 그리드 시스템을 만듭니다. Bootstrap 프레임워크의 그리드 시스템은 컨테이너를 12개의 동일한 부분으로 나눕니다.

사용시 LESS(또는 Sass) 소스코드를 재컴파일하여 12라는 값을 실제 상황에 맞게 수정(즉, 24나 32로 변경 가능)할 ​​수 있습니다. 물론 더 나누어서 사용할 수도 있고, 하지만 이런 식으로 사용하는 것은 권장되지 않습니다.)

Bootstrap에는 반응형 모바일 장치 세트가 내장되어 있습니다.

1. 적절한 정렬과 패딩을 제공하려면 데이터 행(.row)이 컨테이너(.Container)에 포함되어야 합니다. 예:

<div class="<span style="color: rgb(178, 34, 34);">container</span>">
<span style="white-space: pre;">	
</span><div class="<span style="color: rgb(178, 34, 34);">row</span>"></div>
</div>

2 행(.row)에 열(.column)을 추가할 수 있지만 열 수의 합은 이등분된 열의 ​​총 수(예: 12)를 초과할 수 없습니다. 예:

<div class="container">
<div class="row">
  <div class="col-md-<span style="color: rgb(178, 34, 34);">4</span>"></div>
  <div class="col-md-<span style="color: rgb(178, 34, 34);">8</span>"></div>

3. 특정 콘텐츠는 열 컨테이너(column) 내에 배치되어야 하며 열(column)만 행 컨테이너(.row)의 직접 하위 요소로 사용할 수 있습니다.

4. 콘텐츠 패딩을 설정하면 열 사이에 공간이 생깁니다. 그런 다음 첫 번째 열과 마지막 열에 음수 여백을 설정하여 패딩 효과를 상쇄합니다

위 내용은 Wheat Academy 부트스트랩 소개 비디오에 대한 권장 자료(코스웨어 소스 코드)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!