최신 웹 개발 튜토리얼
 

Bootstrap Get Started

❮ 이전 다음 장 ❯

무엇 Bootstrap ?

  • Bootstrap 빠르고 쉽게 웹 개발을위한 무료 프런트 엔드 프레임 워크입니다
  • Bootstrap 타이포그래피, 양식, 버튼, 테이블, 네비게이션, 조동사, 이미지 회전 목마 및 기타뿐만 아니라 선택 자바 스크립트 플러그인에 대한 HTML 및 CSS 기반의 디자인 템플릿이 포함되어
  • Bootstrap 또한 당신에게 쉽게 반응하는 디자인을 만들 수있는 기능을 제공합니다

반응 형 웹 디자인은 무엇인가?

반응 형 웹 디자인은 자동으로 큰 데스크톱에 작은 휴대폰에서, 모든 장치에 좋아 보이는 자신을 조정 웹 사이트를 만드는 방법에 대한 것입니다.

Bootstrap 역사

Bootstrap 트위터에 마크 오토 야곱 손튼에 의해 개발 및 GitHub의에 2011 년 8 월 오픈 소스 제품으로 출시되었습니다.

2014 년 6 월 Bootstrap GitHub의에서 1 위 프로젝트였다!

사용하는 이유 Bootstrap ?

의 장점 Bootstrap :

  • HTML과 CSS의 단지 기본 지식을 누구나가 사용할 수 있습니다 : 사용하기 쉬운 Bootstrap
  • 응답 기능 : Bootstrap 의 반응 CSS는 휴대 전화, 태블릿, 데스크톱 조정
  • 모바일 첫 번째 방법 :에서 Bootstrap 3, 모바일 최초의 스타일은 코어 프레임 워크의 일부입니다
  • 브라우저 호환성 : Bootstrap 모든 최신 브라우저 (크롬, 파이어 폭스, 인터넷 익스플로러, 사파리, 오페라)와 호환

어디에서 얻는 Bootstrap ?

사용을 시작하는 방법은 두 가지가 있습니다 Bootstrap 자신의 웹 사이트에이.

당신은 할 수 있습니다 :

  • 다운로드 Bootstrap 에서 getbootstrap.com
  • 포함 Bootstrap A로부터 CDN

다운로드 Bootstrap

다운로드 및 호스트하려면 Bootstrap 자신, 이동 getbootstrap.com , 거기의 지침을 따르십시오.

Bootstrap CDN

다운로드 및 호스팅하지 않으려면 Bootstrap 자신을, 당신은에서를 포함 할 수있다 CDN (콘텐츠 전송 네트워크).

MaxCDN는 대한 CDN 지원을 제공하는 Bootstrap 의 CSS와 자바 스크립트. 또한 jQuery를 포함한다 :

MaxCDN :

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

사용의 장점 Bootstrap CDN :
많은 사용자들이 이미에서 부트 스트랩을 다운로드 한 MaxCDN 다른 사이트를 방문 할 때. 그들은 빠른 로딩 시간 리드 사이트를 방문 할 때 그 결과, 캐시에서로드된다. 또한, 대부분의 CDN's 사용자가 그것에서 파일을 요청하면, 그것은 또한 빠른 로딩 시간에 이르게 그들에게 가장 가까운 서버에서 제공됩니다 있는지 확인합니다.

먼저 웹 페이지 만들기 Bootstrap

1. HTML5의 DOCTYPE 추가

Bootstrap HTML 요소와 HTML5의 문서 타입을 필요로 CSS 속성을 사용합니다.

항상 lang 속성과 올바른 문자 세트와 함께 페이지의 시작 부분에 HTML5의 문서 타입을 포함한다 :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
  </head>
</html>

2. Bootstrap 3은 모바일 최초

Bootstrap 3 모바일 장치에 반응하도록 설계되었습니다. 모바일 첫 번째 스타일은 코어 프레임 워크의 일부입니다.

다음 추가, 적절한 렌더링 및 터치 줌을 보장하기 위해 <meta> 내부에 태그를 <head> 요소 :

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

width=device-width 부분 (장치에 따라 달라집니다) 장치의 화면 폭을 따라 페이지의 폭을 설정합니다.

initial-scale=1 부분은 페이지가 처음 브라우저에 의해로드 된 초기 줌 레벨을 설정합니다.

3. 컨테이너

Bootstrap 또한 사이트 내용을 포장하기 위해 포함 된 요소가 필요합니다.

선택할 수있는 두 개의 컨테이너 클래스가 있습니다 :

  1. .container 클래스는 응답 고정 폭 컨테이너를 제공합니다
  2. .container-fluid 클래스는 뷰포트의 전체 폭에 걸쳐, 전체 폭 수용체를 제공한다

참고 : 컨테이너 (다른 컨테이너 내부에 컨테이너를 넣을 수 없습니다) 중첩되지 않습니다.

두 기본 Bootstrap 페이지

다음의 예는 기본에 대한 코드를 보여줍니다 Bootstrap (반응 형 고정 폭 컨테이너) 페이지 :

예

<!DOCTYPE html>
<html lang="en">
<head>
  <title> Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h1>My First Bootstrap Page</h1>
  <p>This is some text.</p>
</div>

</body>
</html>
»그것을 자신을 시도

다음의 예는 염기성의 코드 도시 Bootstrap (전체 폭 컨테이너) 페이지 :

예

<!DOCTYPE html>
<html lang="en">
<head>
  <title> Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">
  <h1>My First Bootstrap Page</h1>
  <p>This is some text.</p>
</div>

</body>
</html>
»그것을 자신을 시도

❮ 이전 다음 장 ❯