简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
집 > 웹 프론트엔드 > 부트스트랩 튜토리얼 > 본문

부트스트랩에서 반응형 레이아웃을 구현하는 방법

藏色散人
풀어 주다： 2023-02-09 11:38:34
원래의
5848명이 탐색했습니다.

그리드 시스템을 사용하여 부트스트랩에서 반응형 레이아웃을 구현할 수 있습니다. 구현 방법은 다음과 같습니다. 1. 일련의 행 및 열 조합을 통해 페이지 레이아웃을 만듭니다. 2. 다양한 화면 크기에 따라 다양한 그리드 옵션을 선택합니다. 조판.

부트스트랩에서 반응형 레이아웃을 구현하는 방법

이 튜토리얼의 운영 환경: Windows 7 시스템, 부트스트랩 3 버전, Dell G3 컴퓨터

bootstrap은 반응형 레이아웃을 구현합니다.

Bootstrap에서는 그리드 시스템을 사용하여 반응형 레이아웃을 구현할 수 있습니다.

Bootstrap은 화면이나 뷰포트 크기가 증가함에 따라 자동으로 최대 12개의 열로 분할되는 반응형 모바일 우선 유동 그리드 시스템을 제공합니다. 여기에는 사용하기 쉬운 사전 정의된 클래스와 더 의미 있는 레이아웃을 생성하기 위한 강력한 믹스인이 포함되어 있습니다.

그리드 시스템의 원리:

먼저 그리드 시스템은 행과 열의 일련의 조합을 통해 페이지 레이아웃을 만드는 데 사용됩니다. Bootstrap은 다양한 화면 크기에 따라 다양한 그리드 옵션을 선택합니다. 그리드 옵션에는 초소형 화면(휴대폰), 소형 화면(태블릿), 중형 화면(데스크톱), 대형 화면(초대형 데스크톱)의 4가지 옵션이 있습니다. 그리드 시스템은 12개의 열로 나누어져 있습니다. 즉, 각 행은 최대 12개의 열을 보유할 수 있습니다. .row에 포함된 열 수가 12개보다 크면(즉, 행의 그리드 셀이 12개 셀을 초과하는 경우) 자동으로 조판됩니다. 즉, 행은 최대 12개의 열만 읽을 수 있습니다. 자세한 분석은 나중에.

Bootstrap3에서 화면은 주로 세 가지 유형으로 나뉩니다(여기서는 행으로 설명):

.col-xs-* 초소형 화면, 휴대폰(너비

.col-sm- * 작은 화면 , 태블릿(너비 ≥ 768px)

.col-md- * 중형 화면, 데스크톱 모니터(너비 ≥ 992px)

어떤 종류의 화면에 있든 그리드 시스템이 자동으로 12열로 나눕니다

. col -xs-*, .col-sm- 및 .col-md- 뒤에 오는 매개변수는 현재 화면에서 차지하는 열 수를 나타냅니다.

부트스트랩에서 반응형 레이아웃을 구현하는 방법

그리드 시스템을 사용하는 경우 

<head>
    <meta charset="UTF-8">
     <title>Document</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="css/bootstrap.min.css">
     <!-- [if lt IE 9]>
         <script  src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
     <![endif] -->
</head>
로그인 후 복사

1 섹션에서 다음 처리를 수행해야 합니다. 적절한 그리기 및 터치 스크린 크기 조정을 보장하려면

width에 뷰포트 메타데이터 태그를 추가해야 합니다. =장치 너비와 동일한 너비의 장치 너비

initial-scale=1.0 초기 표시 크기 - 원래 크기, 즉 크기 조정 없음

2 bootstrap.css 파일 가져오기 [부트스트랩 코어 CSS 파일을 가져와야 함] , 가져오는 방법은 두 가지가 있습니다:

하나 예, 로컬 .css 파일을 직접 가져옵니다:

두 번째, CDN 가속 서비스 사용: 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
로그인 후 복사

3 호환성:

bootstrap은 CSS3을 기반으로 하며 IE8에서는 지원되지 않습니다.

IE8은 미디어 쿼리 지원을 달성하기 위해 Response.js의 협력이 필요합니다.

추천: "부트스트랩 비디오 튜토리얼" "css 비디오 튜토리얼"

위 내용은 부트스트랩에서 반응형 레이아웃을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
bootstrap
원천：php.cn
이전 기사：nuget 명령을 사용하여 부트스트랩을 설치하는 방법 다음 기사：부트스트랩 모달을 끄는 방법
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
페이지가 갑자기 CSS나 부트스트랩을 가져올 수 없습니다. 그래서 저는 페이지를 개발 중입니다. 어제 일부 작업을 했는데 잘 작동했고, 오늘은 나머지 작업을 계속했는데 모든 것이 괜찮습니다. 일반 HTML 페이지로 열려고...
에서 2024-04-06 21:58:04
0
1
800
CSS에서 페이지 하단의 신비한 공백을 해결하는 방법 Bootstrap과 D3를 사용하여 간단한 웹페이지를 구축하려고 하는데 하단의 공백을 모두 없애는 방법을 모르겠습니다. 나는 그것을 제거하고 싶다. 본문과 HTM...
에서 2024-04-06 20:22:15
0
1
454
CollapseDisplay 클래스를 사용하여 Bootstrap 아코디언 헤더의 모양을 사용자 정의하세요. 클래스 Collapseshow를 사용하여 패널의 카드 제목 스타일을 지정하고 싶습니다. 이 예에서는 첫 번째 패널입니다. CSS를 사용하여 .accordion.c...
에서 2024-04-06 12:53:11
0
1
376
웹 페이지 크기를 조정할 때 부트스트랩 스위치가 제대로 작동하지 않습니다. 这是代码：<navxmlns:sec="http://www.thymeleaf.org/extras/spring-security"class=&qu...
에서 2024-04-05 08:45:39
0
1
3443
Laravel의 Bootstrap 모드로 AWS PDF 파일 표시 https://xxx-xx-dev.s3.ap-south-1.amazonaws.com/std_check/6557122022151745398XtquBSY.pdf와 같...
에서 2024-04-04 22:16:18
0
1
1450
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트：공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！