Bootstrap 3.0 학습 1 라운드 (입문)

머리말
지난 절 에서http://www.cnblogs.com/aehyok/p/3381651.html주로 Bootstrap 을 간단하게 소 개 했 습 니 다.... 에서http://www.bootcss.com/중국어 망 은 현재 두 버 전에 대해 문서 설명 을 하 는 것 을 발견 하기 어렵 지 않 은 데 두 버 전의 차이 가 매우 큰 것 같다.

하지만 비 주 얼 스튜디오 의 2013 년 얼마 전 업 데 이 트 를 보면 마이크로소프트 는 부 트 스 트랩 3 의 새 버 전 을 VS 에 넣 었 기 때문에 더 이상 할 말 이 없다. 부 트 스 트랩 3 를 배 우 는 것 도 걱정 이 없다.
여기 전에 도 VS 2013 업데이트 내용 에 대한 간단 한 소개 가 있 었 습 니 다.http://www.cnblogs.com/aehyok/p/3377774.html 
BootStrap 다운로드
홈 페이지 의 파일 은 상세 하고 간단 하 며 다운로드 에 도 다양한 방식 이 있다.우리 개발 자 에 게 가장 쉬 운 방법 은 컴 파일 과 압축 된 CSS, JavaScript 파일 을 직접 다운로드 하 는 것 입 니 다. 또한 글꼴 파일 도 포함 되 어 있 지만 문서 와 소스 파일 은 포함 되 지 않 습 니 다.압축 해제 패 키 지 를 열 면 세 개의 폴 더 css, fonts, js 를 포함 하고 있 습 니 다.
세 개의 폴 더 에 있 는 파일 을 볼 수 있 습 니 다.

이것 은 가장 기본 적 인 Bootstrap 조직 형식 입 니 다. 압축 되 지 않 은 파일 은 임의의 웹 프로젝트 에서 직접 사용 할 수 있 습 니 다.압축 (bootstrap. min. *) 과 압축 되 지 않 은 (bootstrap. *) CSS 와 JS 파일 을 제공 합 니 다.글꼴 아이콘 파일 은 Glyphicons 에서 나 옵 니 다.
  bower.json Bootstrap 이 지원 하 는 jQuery 버 전 을 보 여 줍 니 다.

 
의존 하 는 jQuery 라 이브 러 리 버 전 > = 1.9.0 을 볼 수 있 습 니 다.
다음은 방문 을 통 해http://jquery.com/ 

최신 버 전 2.03 을 다운로드 하 겠 습 니 다.
IE 로 직접 방문 가능http://code.jquery.com/jquery-2.0.3.min.js

Bootstrap 폴 더 아래 js 폴 더 에 따로 저장 합 니 다.
메모: 모든 Bootstrap 플러그 인 은 jQuery 에 의존 합 니 다.그리고 정식 프로젝트 에서 압축 된 버 전 을 추천 합 니 다. 부피 가 작 기 때 문 입 니 다.
웹 페이지 에서 Bootstrap 사용 하기
 우 리 는 가장 간단 한 기본 모델 을 만 들 었 다.


 
    Bootstrap
   
   
   
   
   
   
 
 
   

Hello, world!


   
   
 

1. 우선 웹 페이지 에 Bootstrap 스타일 파일 을 참조 할 수 있 습 니 다. 
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">

2. Bootstrap 구 조 를 사용 하여 자 바스 크 립 트 플러그 인 을 제공 해 야 한다 면, 구 조 된 js 파일 링크 를 웹 페이지 에 참조 해 야 합 니 다. 위 에서 도 자 바스 크 립 트 플러그 인 은 모두 jQuery 라 이브 러 리 에 의존 하고 있다 고 언급 한 적 이 있 습 니 다. 따라서 우 리 는 당연히 jquery 를 참조 하 는 라 이브 러 리 파일 을 링크 해 야 합 니 다.
    <script src="js/jquery-2.0.3.min.js"></script>
    <script src="js/bootstrap.min.js"></script>

3. view port 의 < meta > 탭 입 니 다. 이 탭 은 대부분의 모 바 일 장치 에 표 시 된 디 스 플레이 를 수정 할 수 있 습 니 다. 적당 한 그리 기와 터치 스크린 크기 를 확보 하기 위해 서 입 니 다.
<meta name="viewport" content="width=device-width, initial-scale=1.0">

4. html 5 의 새로운 탭 을 사용 합 니 다. IE9 이하 의 브 라 우 저 는 이 탭 을 지원 하지 않 고 이 탭 에 스타일 을 추가 할 수 없습니다.그러면 이 문 제 를 복구 하려 면 링크 가 인 용 된 파일 은 다음 과 같 습 니 다.
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->

사용자 IE 브 라 우 저의 버 전이 IE9 보다 작 으 면 이 두 개의 js 파일 라 이브 러 리 를 불 러 옵 니 다. 이 제 는 새로운 탭 을 사용 할 수 있 고 이 탭 에 스타일 을 추가 할 수 있 습 니 다.
이렇게 우리 의 가장 쉬 운 Hello World!페이지 가 사람들 앞 에 나 타 났 다.

총결산
 위 에서 도 응답 식 레이아웃 을 사용 합 니 다.물론 일부 사이트 에 서 는 응답 식 레이아웃 이 필요 하지 않 을 수도 있 습 니 다. 우 리 는 이 레이아웃 을 수 동 으로 사용 하지 않 아야 합 니 다. 이 문서 에 도 상세 한 설명 이 있 습 니 다.

 
다음 절 에 서 는 주로 Bootstrap 의 레이아웃 을 배 울 계획 입 니 다.

좋은 웹페이지 즐겨찾기