부트 스트랩 그리드 시스템 예 : 중형 및 대형 장비
에서 예 : 스택 레벨 , 우리는 기본 그리드 시스템을 보았다. 여기서 우리는 두 개의 사업부를 사용하고 50 % / 50 % 분할의 뷰포트 폭의 중간에 :
<사업부 클래스 = "COL-MD-6"> ... </ DIV> <사업부 클래스 = "COL-MD-6"> .... </ DIV>
그러나, 대규모 장비, 33 % / 66 %로 최종 설계에. 그래서 우리는 브레이크 포인트의 열 너비를 변경 할 준비가되어 할 필요가 :
<사업부 클래스 = "COL-MD-6 COL-LG-4"> ... </ DIV> <사업부 클래스 = "COL-MD-6 COL-LG-8"> ... </ DIV>
이제 부트 스트랩은 중간 크기의 장비,MD와 클래스를 검색하고이를사용합니다. 대규모 설비에서,LG 전자와 클래스를 검색하고이를사용합니다. 이 예에서, 33 % / 66 %로 50 % / 50 % 분할에서 우리 두 사업부. 확인을 위해 아래의 예를 참조하십시오. (여기서, 열은 당신이 이렇게 피할 각 스타일 수 있습니다 정의되어 있습니다.)
<! DOCTYPE html로>
<HTML>
<헤드>
<제목> 부트 스트랩 예 - 중형 및 대형 장비를 </ 제목>
<링크 HREF = "/ 부트 스트랩 / CSS / bootstrap.min.css"REL = "스타일 시트">
<스크립트 SRC = "/ 스크립트 / jquery.min.js"> </ script>
<스크립트 SRC = "/ 부트 스트랩 / JS / bootstrap.min.js"> </ script>
</ 헤드>
<바디>
<사업부 클래스 = "컨테이너">
<H1> 안녕하세요, 세계! </ H1>
<사업부 클래스 = "행">
<사업부 클래스 = "COL-MD-6 COL-LG-4"스타일 = "배경 색 : #의 dedef8;
상자 그림자 : 삽입 1 픽셀 -1px 1 픽셀 # 444, 삽입 -1px 1 픽셀 x 1 픽셀 # 444; ">
<P> LOREM의 ipsum의 슬픔이 AMET 앉아, consectetur adipisicing ELIT 수행 SED
eiusmod labore 등 dolore 마그나 aliqua incididunt 유타를 tempor. UT를
enim 광고 미님 veniam, quis의 nostrud exercitation의 ullamco의 LABORIS
에 NiSi 유타 aliquip 전직 개의 commodo의 consequat.
</ P>
<P> Sed의 유타 perspiciatis 운데 하나 하나 ISTE natus 오류 앉아 voluptatem
accusantium doloremque laudantium, totam 렘 aperiam, eaque IPSA
quae AB를 illo inventore veritatis 등 준 architecto의 beatae 이력서
dicta의 sunt의 explicabo.
</ P>
</ DIV>
<사업부 클래스 = "COL-MD-6 COL-LG 전자-8"스타일 = "배경 색 : #의 dedef8;
상자 그림자 : 삽입 1 픽셀 -1px 1 픽셀 # 444, 삽입 -1px 1 픽셀 x 1 픽셀 # 444; ">
<P> Sed의 유타 perspiciatis 운데 하나 하나 ISTE natus 오류 앉아 voluptatem
accusantium doloremque laudantium.
</ P>
<P> Neque porro quisquam 동부 표준시, 간략히 dolorem ipsum의 quia 슬픔은, AMET 앉아
consectetur, adipisci velit, 나오지도 quia 비 numquam eius MODI
TEMPORA incidunt 유타 labore 등 dolore magnam aliquam quaerat
voluptatem.
</ P>
</ DIV>
</ DIV>
</ BODY>
</ HTML>
결과는 다음과 같다 :
