BootStrap Item 2 깊이 이해 - 간단 한 입문

9855 단어 입문 하 다bootstrap깊이 이해 하 다bootstrap 템 플 릿응답 식 프로 그래 밍
머리말
지난 절 에서http://blog.csdn.net/i10630226/article/details/49805123주로 Bootstrap 을 간단하게 소 개 했 습 니 다.... 에서http://www.bootcss.com/중국어 망 은 현재 두 버 전에 대해 문서 설명 을 하 는 것 을 발견 하기 어렵 지 않 은 데 두 버 전의 차이 가 매우 큰 것 같다.
深入理解BootStrap Item2 -- 简单入门_第1张图片
하지만 비 주 얼 스튜디오 의 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 버 전 을 보 여 줍 니 다.
深入理解BootStrap Item2 -- 简单入门_第2张图片
 
의존 하 는 jQuery 라 이브 러 리 버 전 > = 1.9.0 을 볼 수 있 습 니 다.
다음은 방문 을 통 해http://jquery.com/ 
深入理解BootStrap Item2 -- 简单入门_第3张图片
최신 버 전 2.03 을 다운로드 하 겠 습 니 다.
IE 로 직접 방문 가능http://code.jquery.com/jquery-2.0.3.min.js
深入理解BootStrap Item2 -- 简单入门_第4张图片
Bootstrap 폴 더 아래 js 폴 더 에 따로 저장 합 니 다.
메모: 모든 Bootstrap 플러그 인 은 jQuery 에 의존 합 니 다.그리고 정식 프로젝트 에서 압축 된 버 전 을 추천 합 니 다. 부피 가 작 기 때 문 입 니 다.
웹 페이지 에서 Bootstrap 사용 하기
 우 리 는 가장 간단 한 기본 모델 을 만 들 었 다.
<!DOCTYPE html> <html> <head> <title>Bootstrap</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[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]--> </head> <body> <h1>Hello, world!</h1> <script src="js/jquery-2.0.3.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>

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!페이지 가 사람들 앞 에 나 타 났 다.
총결산
 위 에서 도 응답 식 레이아웃 을 사용 합 니 다.물론 일부 사이트 에 서 는 응답 식 레이아웃 이 필요 하지 않 을 수도 있 습 니 다. 우 리 는 이 레이아웃 을 수 동 으로 사용 하지 않 아야 합 니 다. 이 문서 에 도 상세 한 설명 이 있 습 니 다.
React에서 AB 테스트를 실행하는 방법
HashMap 깊이 해석: HashMap 에 대해 철저히 알 게 해 드 립 니 다.

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage