그리드 시스템은 영어로 된 "그리드 시스템"이며 일부 사람들은이를 "그리드 시스템"으로 번역합니다. 고정 그리드 설계 레이아웃을 사용합니다. 그것의 스타일은 깔끔하고 간결합니다. 제 2 차 세계 대전 이후 매우 인기를 얻었으며 오늘날의 주류 스타일 중 하나가되었습니다.
1692 년에 새로 올라간 프랑스 왕 루이 14 세는 프랑스의 인쇄 수준이 불만족 스럽다고 느꼈기 때문에 인쇄를 관리하기 위해 왕실 특별위원회 설립을 명령했다. 그들의 첫 번째 임무는 과학적이고 합리적이며 가치있는 기능인 새로운 글꼴을 설계하는 것입니다. 위원회는 수학자 Nicolas Jaugeon에 의해 주도되었습니다. 그들은 로마 시체를 기반으로했으며 디자인 기준으로 사각형을 사용했습니다. 각 사각형 그리드는 64 개의 기본 정사각형 장치로 나누고 각 사각형 장치는 36 개의 작은 그리드로 나뉘 었습니다. 이러한 방식으로 인쇄 레이아웃은 2,304 개의 작은 그리드로 구성됩니다. 이 엄격한 기하학적 그리드 네트워크, 글꼴의 모양, 레이아웃 배열 및 통신 기능의 효과가 설계되었습니다. 이것은 글꼴과 레이아웃에 대한 과학적 실험을 수행하는 세계에서 가장 초기의 활동이며, 그리드 시스템의 가장 초기 프로토 타입이기도합니다.
웹 페이지 래스터 시스템의 정의는 다음과 같습니다. 일반 그리드 어레이를 사용하여 웹 페이지의 레이아웃 및 정보 배포를 안내하고 표준화합니다. 웹 래스터 시스템은 평면 래스터 시스템에서 개발되었습니다. 웹 디자인의 경우 그리드 시스템을 사용하면 웹 페이지의 정보를보다 아름답고 읽기 쉽게 만들 수있을뿐만 아니라 더 유용 할 수 있습니다. 또한 프론트 엔드 개발의 경우 웹 페이지가보다 유연하고 표준화됩니다.
Bootstrap은 반응 형 모바일 우선 스트리밍 그리드 시스템을 제공합니다. 화면 또는 뷰포트 크기가 증가함에 따라 시스템은 자동으로 최대 12 개의 열로 나뉩니다. 사전 정의 된 클래스와 더 많은 의미 론적 레이아웃을 생성하기위한 강력한 Mixins도 포함합니다.
다시 말해, 부트 스트랩은 요소의 너비를 12 부분으로 나눕니다. 우리는이 행에 요소를 12 개의 부분으로 나누어냅니다.
1. 기본 목표
다음 두 행을 만들면이 두 행에서 각 셀의 너비는 다른 장치로 인해 변경됩니다.
휴대 전화의 작은 화면에서 상향 A는 2 부에 대한 계정 10 부품에 대한 계정, 하향 A는 1 부에 대한 계정 10 부품 C에 대한 계정 1 부, ABC는이 12 개 부품을 공유합니다.
태블릿의 중간 화면에서 8 부에 대한 계정 4 부품에 대한 계정, AB는이 12 개의 부품을 공유하고, 10 부에 대한 계정은 1 부 1 부에 대한 1 파트 C 계정, ABC는이 12 개의 부품을 공유합니다.
PC의 대형 화면에서 AB는 8 주에 대한 4 B 계정 상승, AB는이 12 주를 주식하고, 1 B에 대한 1 B 계정 1에 대한 계정 1에 대한 계정은 1에 대한 ABC는이 12 주를 주식합니다.
2. 생산 과정
먼저 웹 폴더에서 부트 스트랩을 구성하고 공식 웹 사이트에서 구성 요소를 다운로드하십시오 (링크를 열려면 클릭하십시오). 프로덕션 환경에서 사용되는 부트 스트랩 버전 (링크를 열려면 클릭하십시오). Bootstrap3은 2와 호환되지 않습니다. 개발 문서에 따라 Bootstrap3을 직접 사용하는 것이 좋습니다. 부트 스트랩을 압축 해제 한 후, 얻은 3 개의 폴더 CS, 글꼴 및 JS를 사이트 디렉토리에 복사하십시오. Eclipse의 JSP 웹 프로젝트 인 경우 Webroot 폴더 아래에 넣으십시오.
코드는 다음과 같습니다. 자세한 내용은 주석을 참조하십시오.
<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w.w.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"><Html xmlns = "http://www.w3.org/1999/xhtml"> <head> <!-웹 인코딩, 사용될 외부 파일, 화면에 자동으로 조정-> <meta http-equiv = "content-type"content = "text/html; charset = utf-8"/> <링크 href = "css/bootstrap.css"rel = "stylesheet"media = "screen"> <meta name = "viewport"content = "width = device-width, 초기-스케일 = 1.0, 사용자-스케일 가능 = no"> <title> 그리드 시스템 </title> </head> <body> <!-패널을 사용하는 경우 부트 스트랩을 사용하지 않으면 부트 스트랩을 사용하지 않으면 Bootstrap을 사용하지 않으면 Bootstrap을 사용하지 않습니다. 화면-> <!-클래스 = "컨테이너"는 자동으로 중심-> <div> <!-라인 정의-> <div> <!-xs는 휴대 전화의 작은 화면을 나타내고, MD는 태블릿의 화면을 나타내고, lg은 PC의 큰 화면을 나타냅니다. 같은 쌍의 큰 화면은 12와 같아야합니다. -> <!-BG-WARNING은 밝은 노란색을 정의하는 배경색입니다-> <div> a </div> <div> b </div> </div> <div> <!-여기서 진실은 Col-xs-1+C의 Col-xs-1+B의 Col-XS-1+B와 동일합니다. -> <div> a </div> <div> b </div> <div> c </div> </div> </body> </html>