부트스트랩의 세 가지 코어는 무엇입니까?

Bootstrap은 프런트엔드 개발을 더 빠르고 쉽게 만듭니다. 모든 개발자가 빠르게 시작할 수 있고, 모든 장치를 조정할 수 있으며, 모든 프로젝트에 적용할 수 있습니다.

Bootstrap에서 제공하는 CSS 스타일 시트를 직접 사용할 수도 있지만 Bootstrap의 소스 코드는 가장 널리 사용되는 CSS 전처리 스크립트인 Less 및 Sass를 기반으로 개발되었다는 점을 잊지 마세요. 미리 컴파일된 CSS 파일을 사용하여 빠르게 개발하거나 소스 코드에서 필요한 스타일을 사용자 정의할 수 있습니다. (추천 학습: Bootstrap 비디오 튜토리얼)

Bootstrap의 도움으로 귀하의 웹 사이트와 애플리케이션은 동일한 코드를 통해 휴대폰, 태블릿 및 PC 장치에 빠르고 효과적으로 적응할 수 있습니다. 이 모든 것이 신용의 CSS Media Query입니다. .

Bootstrap은 포괄적이고 아름다운 문서를 제공합니다. 여기에서 HTML 요소, HTML 및 CSS 구성 요소, jQuery 플러그인에 대한 자세한 문서를 모두 찾을 수 있습니다.

부트스트랩의 세 가지 핵심 구성 요소

기본 CSS: 전역 CSS 스타일 설정, 클래스를 통해 기본 HTML 요소 스타일 지정 및 향상 가능

구성 요소: 글꼴 아이콘을 포함한 수많은 재사용 구성 요소 드롭다운 메뉴, 탐색, 경고 표시줄, 팝업 상자 등

JS 플러그인: Bootstrap에는 Bootstrap의 구성 요소에 "생명"을 제공하는 13개의 jQuery 플러그인이 함께 제공됩니다.

모바일 우선

모바일 우선은 부트스트랩 3의 가장 중요한 변화입니다.

이전 Bootstrap 버전(2.x까지)에서는 전체 프로젝트를 모바일 친화적으로 만들기 위해 다른 CSS를 수동으로 참조해야 했습니다.

지금은 다릅니다. Bootstrap 3의 기본 CSS 자체는 모바일 친화적입니다.

Bootstrap 3은 모바일 우선, 데스크톱 둘째로 설계되었습니다. 점점 더 많은 사용자가 모바일 장치를 사용하고 있기 때문에 이는 실제로 매우 시의적절한 변화입니다.

Bootstrap으로 개발된 웹사이트를 모바일 친화적으로 만들고 적절한 그리기 및 터치스크린 크기 조정을 보장하려면 웹페이지 헤드에 뷰포트 메타 태그를 추가해야 합니다.

아래와 같이:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

width 속성은 장치의 너비를 제어합니다. 귀하의 웹 사이트가 다양한 화면 해상도를 가진 장치에서 볼 것이라고 가정하면, 이를 장치 너비로 설정하면 다른 장치에서도 올바르게 렌더링됩니다.

initial-scale=1.0은 웹페이지가 로드될 때 크기 조정 없이 1:1 비율로 렌더링되도록 보장합니다.

모바일 장치 브라우저에서는 뷰포트 메타 태그에 user-scalable=no를 추가하여 확대/축소 기능을 비활성화할 수 있습니다.

더 많은 Bootstrap 관련 기술 기사를 보려면 Bootstrap Tutorial 열을 방문하여 알아보세요!

위 내용은 부트스트랩의 세 가지 코어는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!