Bootstrap4 기본 튜토리얼

Bootstrap4 教程

Bootstrap는 전 세계에서 가장 인기 있는 프론트엔드 컴포넌트 라이브러리로, 반응형 레이아웃과 모바일 기기 우선의 WEB 프로젝트를 개발하는 데 사용됩니다.

Bootstrap4 현재 Bootstrap는 가장 최신 버전으로, HTML, CSS, JS 개발을 위한 오픈 소스 도구 세트입니다. 제공하는 Sass 변수와 많은 mixin, 반응형 그리드 시스템, 확장 가능한 프리미엄 컴포넌트, jQuery 기반 강력한 플러그인 시스템을 사용하여 아이디어를 빠르게 원형으로 개발하거나 전체 앱을 구축할 수 있습니다.

이 튜토리얼을 읽는 사람이 누구인가?

HTML과 CSS의 기본 지식이 있으면 이 튜토리얼을 읽을 수 있습니다. 이 튜토리얼을 끝까지 공부하면, Bootstrap를 사용하여 웹 프로젝트를 개발하는 중급 수준에 도달할 수 있습니다.

이 튜토리얼을 읽기 전에 알아야 할 내용:

이 튜토리얼을 읽기 전에, HTML, CSS, JavaScript의 기본 지식이 필요합니다. 이 개념에 대해 잘 알지 못하신다면, 먼저 우리의 이 튜토리얼을 읽는 것을 추천합니다:

Bootstrap4 예제

예제

<!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap4　실례</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="jumbotron　text-center">
　　<h1>제 하나 번 Bootstrap 페이지</h1>
　　<p>브라우저 크기를 조정하여 효과를 확인하세요!/p>　
</div>
　
<div　class="container">
　　<div　class="row">
　　　　<div　class="col-sm-4">
　　　　　　<h3>제1열</h3>
　　　　　　<p>기본 튜토리얼</p>
　　　　　　<p>기본을 잘 배우면 더 멀리 가실 수 있습니다！！！</p>
　　　　</div>
　　　　<div　class="col-sm-4">
　　　　　　<h3>제2열</h3>
　　　　　　<p>기본 튜토리얼..</p>
　　　　　　<p>기본을 잘 배우면 더 멀리 가실 수 있습니다！！！</p>
　　　　</div>
　　　　<div　class="col-sm-4">
　　　　　　<h3>제3열</h3>　
　　　　　　<p>기본 튜토리얼..</p>
　　　　　　<p>기본을 잘 배우면 더 멀리 가실 수 있습니다！！！</p>
　　　　</div>
　　</div>
</div>
</body>
</html>

테스트 보기 ‹/›

Bootstrap4 　와 Bootstrap3

Bootstrap4 는 Bootstrap의 최신 버전으로 Bootstrap3 는 더 많은 구체적인 클래스를 가지고 있으며, 일부 관련 부분을 관련 구성 요소로 변환했습니다. 동시에 Bootstrap.min.css의 크기는 줄었습니다40% 이상.

Bootstrap4 IE에 대한 지원을 포기했습니다8 및 iOS 6 의 지원, 현재는 IE9 및 iOS 7 버전의 브라우저. 이전 브라우저가 필요한 경우, 다음을 사용하십시오 Bootstrap3.

주의: 기본적으로, Bootstrap 4은 모바일 우선 방법을 사용하여 응답합니다. Bootstrap 4.3은 Bootstrap의 최신, 가장 안정적인 버전입니다. 모든 주요 현대 브라우저는 Bootstrap를 지원합니다 4예를 들어 Google Chrome, Firefox, Safari, Internet Explorer 10및 더 높은 버전 등.