부트스트랩이 반응하나요?

부트스트랩은 반응이 좋습니다. Bootstrap은 다양한 화면에 대해 다양한 클래스 속성을 사용하는 반응형 모바일 장치 우선 유동 그리드 시스템을 제공합니다. 개발 중에는 걱정할 필요 없이 휴대폰, 태블릿 및 PC에서 사용할 수 있는 코드 세트만 작성할 수 있습니다. .미디어 쿼리를 사용하세요.

이 문서의 운영 환경: Windows 7 시스템, bootstrapv4.4.1 버전, Dell G3 컴퓨터.

반응성이란 무엇인가요?

반응형 웹 디자인은 사용자가 다양한 크기의 기기를 통해 웹 사이트를 탐색할 때 좋은 시각적 효과를 얻을 수 있도록 하는 방법입니다. 예를 들어, 먼저 컴퓨터 모니터에서 웹사이트를 탐색한 다음 스마트폰의 화면 크기는 컴퓨터 모니터보다 훨씬 작지만 둘의 사용자 경험은 거의 동일합니다. . 이는 웹사이트가 반응형 디자인에 있어 훌륭한 성과를 거두었음을 보여줍니다.

부트스트랩은 반응성이 있나요?

부트스트랩은 반응이 좋습니다.

Bootstrap은 반응성이 뛰어난 모바일 우선 유동 그리드 시스템을 제공합니다. 화면이나 뷰포트 크기가 증가하면 시스템이 자동으로 12개의 열로 나뉩니다. 그리드 시스템은 일련의 행과 열을 통해 페이지 레이아웃을 만드는 데 사용됩니다.

Bootstrap의 반응형 레이아웃은 그리드 시스템을 사용하고 다양한 화면에 대해 다양한 클래스 속성을 사용합니다. 개발 중에는 미디어 쿼리 사용을 고려할 필요 없이 휴대폰, 태블릿, PC에서 사용할 수 있는 하나의 코드 세트만 작성할 수 있습니다(기기마다 다른 코드 작성).

그리드 시스템의 구현 원리는 컨테이너의 크기를 정의하고 이를 12등분으로 나눈 다음(24개 또는 32개로 나눌 수도 있지만 12개가 가장 일반적임) 내부 및 내부를 조정하는 것입니다. 외부 여백을 제거하고 마지막으로 이를 미디어 쿼리와 결합하여 강력한 반응형 그리드 시스템을 도입했습니다. Bootstrap 프레임워크의 그리드 시스템은 컨테이너를 12개의 동일한 부분으로 나눕니다.

부트스트랩 그리드 시스템 작동 방식:

"행"은 적절한 정렬 및 패딩을 제공하기 위해 .container(고정 너비) 또는 .container-fluid(100% 너비)에 포함되어야 합니다.

"행"을 통해 가로 방향으로 "열" 집합을 만듭니다.

콘텐츠는 "열" 내에 배치되어야 하며 "열"만 행의 직접 하위 요소가 될 수 있습니다.

.row 및 .col-xs-4와 유사 그리드를 빠르게 생성하는 데 사용할 수 있는 사전 정의된 클래스입니다. 레이아웃 부트스트랩 소스 코드에 정의된 믹스인은 열을 생성하기 위해 "열"에 대한 패딩 속성을 설정하여 .row 요소에 음수 여백을 설정하여 의미 있는 레이아웃을 생성하는 데에도 사용할 수 있습니다. .container 요소에 대한 패딩 세트를 오프셋하면 "행"에 포함된 "열"도 간접적으로 오프셋됩니다.

여백의 음수 값은 다음 예가 강조 표시되는 이유입니다. 1에서 12까지의 값을 지정하여 표시됩니다. 예를 들어 3개의 .col-xs-4를 사용하여 3개의 동일한 너비 열을 생성할 수 있습니다.

"행"에 12개 이상의 "열"이 포함된 경우 , "열"이 위치한 요소는 전체적으로 새로운 행에 배열됩니다.

그리드 클래스는 화면 너비가 분할 지점 크기보다 크거나 같은 장치에 적합합니다. 클래스는 중단점 크기보다 크거나 같은 장치의 요소에 .col-md-* 래스터 클래스를 적용하고, 작은 화면 장치의 경우 래스터 클래스를 재정의합니다. .col-lg- 요소. * 존재하지 않으며 대형 화면 장치에도 영향을 미칩니다.

권장:

부트스트랩 비디오 튜토리얼

.

위 내용은 부트스트랩이 반응하나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!