부트 스트랩 그리드 시스템

컴프

프로필 보기 이 회원 글보기 이 회원의 댓글보기

· 8년 전 · 조회 2509 2509

부트 스트랩 그리드 시스템

부트 스트랩의 그리드 시스템은 페이지 전체에 최대 12 개의 컬럼을 허용합니다.

12 개의 열을 모두 개별적으로 사용하지 않으려면 열을 그룹화하여 더 넓은 열을 만들 수 있습니다.

스팬 1

기간 4

스팬 8

기간 6

스팬 12

부트 스트랩의 그리드 시스템이 반응하며 화면 크기에 따라 열이 자동으로 재 배열됩니다.

그리드 클래스

부트 스트랩 그리드 시스템에는 네 가지 클래스가 있습니다.

xs (전화 용)
sm (태블릿 용)
md (데스크톱 용)
lg (대형 데스크탑의 경우)

위의 클래스를 결합하여보다 동적이고 유연한 레이아웃을 만들 수 있습니다.

부트 스트랩 그리드의 기본 구조

다음은 부트 스트랩 그리드의 기본 구조입니다.

<div class="row">
  <div class="col-*-*"></div>
</div>
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>
<div class="row">
  ...
</div>

먼저; 행 ( <div class="row">)을 만듭니다 . 그런 다음 원하는 수의 열 (적절한 .col-*-*클래스가있는 태그)을 추가하십시오 . 에있는 숫자는 .col-*-*각 행에 대해 항상 최대 12 개가되어야합니다.

아래에서는 기본적인 부트 스트랩 그리드 레이아웃 예제를 수집했습니다.

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

게시판 목록

퍼블리셔팁

퍼블리싱과 관련된 유용한 정보를 공유하세요.
질문은 상단의 QA에서 해주시기 바랍니다.

글쓰기

번호	분류	제목	글쓴이	날짜	조회
167	HTML	다운로드 이어 받기 및 전송속도 제한 구현	웹티알 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	5345
166	HTML	URL옆에 뜨는 숏컷아이콘만들기. [3]	엔시닷컴 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	5401
165	HTML	기본적인 페이징	거친들판 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3899
164	HTML	만 19세 확인하기 [3]	rolo 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3836
163	HTML	금액에 점찍고 한글 표시하기	알라뷰 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3685
162	HTML	간단하게 만들어본 프레임워크 [5]	유창화 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	5855
161	HTML	IeTagConvertor	いろは 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3286
160	HTML	PHP에서 홈페이지 주소 검사	port 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3572
159	기타	HTML와 CSS의 쓰임(짧은글) [1]	자바콩 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	4078
158	HTML	자바스크립트에서 변수 없애기	port 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3601
157	HTML	포토샵 PSD파일과 일러스트 AI파일 윈도우탐색기로 미리보기 .. [4]	웹미소 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	10823
156	HTML	보안, 접근 제한 설정 access.conf	산하 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	4535
155	HTML	union top n 가져오기 [1]	AGAWEB 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3845
154	HTML	주민번호 앞자리에서 뒷자리로 자동이동 \| +JavaScript	AGAWEB 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3782
153	HTML	[자바스크립트] 오늘 날짜 함수	AGAWEB 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	4888
152	HTML	[자바스크립트] 라디오 버튼 비활성	AGAWEB 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	5174
151	HTML	익스플로러 6의 이미지 도구모음(저장버튼 등) 뜨는 것 막기.	AGAWEB 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3419
150	HTML	새로고침(F5), 전체창(F11) 막기	AGAWEB 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3792
149	HTML	프레임 소스보기 막기	AGAWEB 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	4236
148	HTML	[Javascript] TEXTAREA에서 특정 문자열 선택 하기	AGAWEB 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	7178
147	HTML	FODORA 에서 영문 LINUX 상태에서 한글 입력방법 [2]	AGAWEB 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	4525
146	HTML	유용한 PHP성능 개선을 위한 팁	AGAWEB 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3914
145	HTML	포토샵 화면이 좁을경우.. [3]	AGAWEB 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3955
144	HTML	sql2005 fulltext PDF 검색	AGAWEB 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3667
143	HTML	홈페이지 메인에 많이 사용되는 리스트 클래스	은이워니 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	5129
142	HTML	홈페이지 카운터는 클래스 모드로 만들어 봤습니다.	은이워니 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3520
141	HTML	콤보박스 출력용 함수	은이워니 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3978
140	HTML	파일업로드 클래스~~	은이워니 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	5491
139	HTML	날짜비교 함수 [1]	은이워니 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	4999
138	HTML	PHP에서 특정 폴더를 못읽어 들인다고 할 경우 [1]	오운현 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3277