반응 형 레이아웃을 지원하는 프론트 엔드 플러그인으로서 Bootstrap은 중요한 역할을합니다. 휴대 전화, 태블릿 또는 PC에서 웹을 탐색하든 좋은 결과를 얻을 수 있습니다. 이 모든 것은 Bootstrap에 의해 우리에게 가져옵니다!
오늘 나는 주로 페이지의 레이아웃에 대해 이야기 할 것입니다. 이것은 가장 기본적인 것입니다. 사이트를 디자인 할 때는 전역 및 통합 표준 페이지를 설계해야합니다. 우리는이 종류의 페이지 레이아웃 페이지를 호출하고 페이지에 반영되는 것은 레이아웃 요소이며, 물론 부트 스트랩에는 필수 불가능합니다.
부트 스트랩의 레이아웃은 래스터 시스템, 즉 행과 열로 구성됩니다. 사용하면 페이지 컨텐츠 및 래스터 시스템을 위해 .Container 컨테이너를 랩핑해야합니다.
A. 컨테이너 클래스는 고정형 컨테이너 및 응답 형 레이아웃을 지원하는 컨테이너에 사용됩니다.
<div> ... </div> .Container-fluid 클래스는 폭 100%의 컨테이너에 사용되며 모든 뷰포트를 점유합니다. <div> ... </div>
부트 스트랩에서 행과 열은 행과 col로 표시되며 최대 12 개의 열 단위가 있습니다. Col-MD-1은 한 단위의 너비를 나타내고 Col-MD-7은 7 개의 단위의 너비를 나타냅니다. 그들은 최대 12 개 단위로 함께 추가됩니다.
<div> <div> .col-md-1 </div> <div> .col-md-1 </div> <div> .col-md-1 </div> <div> .col-md-1 </div> <div> .col-md-1 </div> <div> .col-md-1 </di v> <div> .col-md-1 </div> <div> .col-md-1 </div> <div> .col-md-1 </div> <div> .col-md-1 </div> <div> .col-md-1 </div> <div> .col-md-1 </div> < div> .col-md-1 </div> <div> .col-md-1 </div> <div> .col-md-1 </div> </div> <div> .col-md-8 </div> <div> .col-md-4 </div > </div> <div> <div> .col-md-4 </div> </div> <div> <div> .col-md-4 </div> <div> .col-md-4 </div> <div> .col-md-4 </div> </div>
두 번째 및 세 번째 줄은 비슷한 효과를 보여줍니다
세 개의 중첩 된 열, 열에 열이있을 수 있습니다 . 이 둥지에서 MD를 SM으로 변경해야합니다.
<div> <div> 레벨 1 : .col-sm-9 <div> <div> 레벨 2 : .col-xs-8 .col-sm-6 </div> <div> 레벨 2 : .col-xs-4 .col-sm-6 </div> </div>
효과는 이것과 유사합니다
위는 편집자가 소개 한 부트 스트랩 페이지 레이아웃에 대한 기본 지식입니다. 나는 그것이 당신에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!