이 포스트에서 우리는 Bootstrap 사이트의 레이아웃을 볼 것입니다 이 오픈 소스 프레임워크의 놀라운 기능을 선보입니다. ~ 안에 이전 기사 우리는 개발 환경과 작업을 용이하게 하는 데 필요한 플러그인을 설치했습니다.
콘텐츠 관리자로서 다음 사항을 기억하세요. Linux Adictos GitHub에 업로드한 예제의 코드를 삽입할 수 없습니다. 다운로드하려면 배포판에 Git 패키지를 설치한 후 다음 명령을 작성해야 합니다.
cd Documentos
git clone https://github.com/dggonzalez1971/bootstrap.git
새 파일을 다운로드하려면 이 두 명령을 주기적으로 실행해야 합니다.
코드 분석
이제 파일 탐색기에서 VSCodium으로 example2.html을 엽니다. (오른쪽 버튼으로 열기) 다음이 표시됩니다.
- 1행에서 브라우저에 문서 유형을 알려 문서를 렌더링하는 방법을 알도록 합니다.
- 2행은 브라우저에 특정 문자를 나타내는 방법과 위치 지정을 용이하게 하는 콘텐츠 언어를 검색 엔진에 나타내는 사이트의 언어를 나타냅니다. 우리 코드에서는 es로 정의되지만 스페인의 스페인어의 경우 es_ES 또는 아르헨티나의 스페인어의 경우 es_AR과 같은 지역적 변형이 있습니다.
- 3행부터 태그 사이에 메타데이터 컨테이너가 있습니다. 와이 . 메타데이터는 문서에 대한 정보를 제공합니다. 우리의 예에서:
- 4행은 문자 인코딩에 사용되는 표준을 나타냅니다. 악센트가 있는 문자나 특수 기호 대신 다이아몬드 내부에 물음표가 표시되는 경우를 본 적이 있을 것입니다. 브라우저가 부적절한 인코딩을 사용하기 때문입니다. 8행의 명령문은 이를 명시적으로 선언하여 이를 방지합니다.
- 5행에서 브라우저에 다양한 화면 형식에 적응하는 방법을 알려줍니다.
- 6행에서 설정한 제목은 브라우저의 상단 표시줄과 검색 엔진에 표시됩니다.
- 7행에서 스타일과 관련된 부트스트랩 프레임워크 요소를 찾을 위치를 브라우저에 알려줍니다.
- 10행부터 컨테이너가 시작됩니다. 본문에는 웹 페이지의 내용과 사이트에 상호 작용을 제공하는 부트스트랩 스크립트에 대한 링크가 포함됩니다.
- 13행은 문서의 끝을 나타냅니다.
부트스트랩 사이트 레이아웃
부트스트랩 사이트 레이아웃의 주요 개념
우리가 이전 기사에서 말했듯이, 부트스트랩은 모바일 우선 접근 방식을 취합니다. 이 접근 방식을 적용하면 가장 작은 화면 크기를 염두에 둔 장치로 디자인한 다음 레이어가 추가되어 다음 크기에 맞게 조정됩니다.
여기서 우리는 두 가지 핵심 개념을 고려해야 합니다.
- 중단점.
- 미디어 상담.
중단점은 레이아웃이 수정되는 화면 너비를 나타냅니다., 미디어 쿼리는 특정 브라우저 및 운영 체제 특성을 기반으로 스타일 매개변수를 적용합니다. 즉, 각 중단점에는 해당 스타일이 있습니다.
부트스트랩에는 고급 프로그래머가 수정할 수 있는 XNUMX개의 미리 정의된 중단점이 있습니다. 기본 포인트는 다음과 같습니다.
- 초소형: 사전 설정 식별자가 없으며 너비가 576픽셀 미만인 화면에 적용됩니다.
- Small: sm으로 식별되며 576픽셀 이상의 화면에 사용됩니다.
- Medium: md로 식별되며 768픽셀 이상의 화면에 사용됩니다.
- 길이: 992픽셀부터 화면에 사용되는 lg로 식별됩니다.
- Extra long: 식별자 lg를 가지며 1200픽셀부터 화면에 스타일을 적용합니다.
- Extra extra long: 식별자 xxl로 표시되며 1400픽셀부터 화면에 디자인을 적용하는 데 사용됩니다.
이 크기는 아무렇게나 선택한 것이 아닙니다. 각 중단점에는 너비가 12의 배수인 컨테이너가 포함될 수 있습니다. 또한 특정 장치를 대상으로 하는 것이 아니라 다른 범주의 장치 및 화면 크기에 맞게 조정됩니다.
다양한 화면 크기 내에서 컨테이너를 찾습니다. 이들은 특정 장치 또는 그래픽 창에서 사이트 콘텐츠를 호스팅, 채우고 정렬하는 역할을 합니다.
;