Container in Bootstrap 4

얘들 아 내 채널 Ndev tuts에 오신 것을 환영합니다 컨테이너에 대해 이야기 해보 죠? 컨테이너는 부트 스트랩 컨테이너에서 가장 기본적인 레이아웃 요소입니다

반응 형 컨테이너는 센터링 할 수있는 수단을 제공하며 가로로 사이트의 콘텐츠 컨테이너는 중첩 될 수 있습니다 여기에서의 이미지를 볼 수 있습니다 부트 스트랩 컨테이너

컨테이너 유형 컨테이너에는 두 가지 유형이 있습니다 1 고정 폭 컨테이너 및 2 컨테이너와 유체

보자 그 (것)들과 사용하는시기가 다릅니다 너비가 고정 된 것에 대해 이야기 해 봅시다 컨테이너 응답 픽셀 너비에

container를 사용하십시오 그것의 최대를 의미한다 각 중단 점에서 너비가 변경됩니다 고정 된 너비의 이미지를 볼 수 있습니다 컨테이너

고정 너비의 데모를 보자 컨테이너 예제 시각적 인 스튜디오 코드를 여는 것 먼저 새로운 HTML을 작성하십시오 파일

여기에 동일한 초보 템플릿 코드가 재사용됩니다 이미 설치가 완료되었습니다 내 HTML 파일에 초보자 사원 코드가 있습니다 코드를 작성하는 body 태그에 fixedhtml

In 고정 폭 컨테이너는 컨테이너 클래스를 사용하여 설정됩니다 행은 적절한 정렬을 위해 고정 너비 컨테이너 내에 배치되어야하며 심 행과 그리드 시스템 다음 강의에서 설명하겠다 이미지 태그의 이미지 태그는 이미지에 표시 할 이미지 경로를 설정합니다 출력 화면 이미지 너비와 높이도 설정하십시오

그 다음에 파일을 저장하십시오 코드를 실행 해 봅시다 이것은 출력 화면입니다 우리는 여러 장치 또는 여러 화면이 필요하지 않습니다 웹 사이트 응답 성을 테스트하십시오 Chrome을 사용하여 직접 확인할 수 있습니다

개발자 도구 컨테이너의 응답 성을 확인합시다 부스터 고정 폭 컨테이너의 각 중단 점이 있습니다 이제 Chrome을 엽니 다 개발자 도구는 첫 번째 방법으로 수행 할 수있는 두 가지 방법이 있습니다

요소를 마우스 오른쪽 버튼으로 클릭하면 크롬 브라우저에서 마지막 옵션 요소를 검사하고 클릭하십시오 크롬 내부에 새로운 창이 열립니다 브라우저 이 작업을 따르지 않으려면 크롬 개발자 도구입니다 모든 단계를 누른 다음 단축키 ctrl + shift + I를 사용합니다

다른 단축키는 f12입니다 Chrome 개발자 도구를 직접 엽니 다 장치 도구 모음을 전환하려면 클릭하십시오 초대형 화면 크기에서 볼 수있는 현재 이러한 종류의 화면보기 1 3 3 0 픽셀이므로 부트 스트랩에서 화면 크기 해상도를 볼 것입니다 그리드 부분 튜토리얼

컨테이너 너비의 크기를 조정 해 봅시다 첫 번째 중단 점은 1 1입니다 7 5 픽셀 대형 장치 크기가 다시 화면 크기를 줄이면 두 번째 중단 점은 9 9 1 픽셀입니다 그것은 중간 장치입니다

그런 다음 다시 화면 크기와 세 번째 중단 점은 7 6 1 픽셀입니다 소형 장치 크기마다 화면 크기를 줄이는 시간이 생기면 새로운 중단 점이 생깁니다 컨테이너의 반응을 볼 수 있습니다 유체 폭 컨테이너 그것은 항상 100 % 폭을 의미합니다

여기 유체의 이미지를 볼 수 있습니다 폭 컨테이너 용기 컨테이너 용 유체 : 100 % 너비 뷰포트와 장치 크기의 전체 너비에 걸쳐 있습니다 유체 레이아웃에서는 크기가 픽셀 단위가 아닌 백분율로 지정됩니다 요소의 화면은 그대로 유지됩니다

그것은 매우 유연한 레이아웃 다음 고정 너비 레이아웃 데모 유체 너비 컨테이너 예제를 보겠습니다 모든 것을 반복하다 고정 폭 컨테이너 프로그램과 같은 단계는 코드 작성을 시작합니다 컨테이너 유체 클래스를 사용하여 설정된 컨테이너가있는 유체 저장 후 코드를 실행하자 이것이 출력 화면입니다