부트스트랩 연구 노트

부트스트랩은 트위터에서 개발한 HTML, CSS, JavaScript 기반의 오픈 소스 프레임워크입니다. 가장 중요한 부분은 반응형 레이아웃입니다. (국내 문서 번역 공식 홈페이지 : http://www.bootcss.com/ 중국어 문서 및 관련 도구 다운로드)

• 1. 부트스트랩의 6가지 주요 기능:

1. 교차 기기, 브라우저는 모든 최신 브라우저와 호환됩니다

2. 반응형 레이아웃으로 PC에서 다양한 해상도를 지원하며, 패드, 휴대폰 등 단말장치와도 호환됩니다.

3. 개발자가 쉽게 호출할 수 있도록 탐색, 메뉴 레이블, 도구 모음 버튼 및 일련의 구성 요소를 포함한 포괄적인 구성 요소를 제공합니다.

4. 내장된 jQuery 플러그인을 통해 기존의 다양한 특수 효과를 쉽게 구현할 수 있습니다

5. HTML5 시맨틱 태그 및 CSS3 속성 지원

6. LESS 동적 스타일 지원: LESS는 변수, 중첩 및 작업 혼합 코딩을 사용하여 더 빠르고 유연한 CSS를 작성합니다.

• 2.부트스트랩 디렉터리 구조

압축해제 후 dist 폴더로 이동하세요

세 가지 주요 디렉토리 구조: Css JS 글꼴

3. 부트스트랩을 처음 사용하는 경우 index.html 파일을 생성하여 dist 아래에 넣습니다

<span style="color: #008080"> 1</span> <span style="color: #0000ff"><!</span><span style="color: #ff00ff">DOCTYPE html</span><span style="color: #0000ff">></span>
<span style="color: #008080"> 2</span> <span style="color: #0000ff"><</span><span style="color: #800000">html </span><span style="color: #ff0000">lang</span><span style="color: #0000ff">="zh-cn"</span><span style="color: #0000ff">></span>
<span style="color: #008080"> 3</span>   <span style="color: #0000ff"><</span><span style="color: #800000">head</span><span style="color: #0000ff">></span>
<span style="color: #008080"> 4</span>     <span style="color: #0000ff"><</span><span style="color: #800000">meta </span><span style="color: #ff0000">charset</span><span style="color: #0000ff">="utf-8"</span><span style="color: #0000ff">></span>
<span style="color: #008080"> 5</span>     <span style="color: #0000ff"><</span><span style="color: #800000">title</span><span style="color: #0000ff">></span>Bootstrap 101 Template<span style="color: #0000ff"></</span><span style="color: #800000">title</span><span style="color: #0000ff">></span>
<span style="color: #008080"> 6</span>     <span style="color: #0000ff"><</span><span style="color: #800000">link </span><span style="color: #ff0000">href</span><span style="color: #0000ff">="css/bootstrap.min.css"</span><span style="color: #ff0000"> rel</span><span style="color: #0000ff">="stylesheet"</span><span style="color: #0000ff">></span>
<span style="color: #008080"> 7</span>   <span style="color: #0000ff"></</span><span style="color: #800000">head</span><span style="color: #0000ff">></span>
<span style="color: #008080"> 8</span>   <span style="color: #0000ff"><</span><span style="color: #800000">body</span><span style="color: #0000ff">></span>
<span style="color: #008080"> 9</span>     <span style="color: #0000ff"><</span><span style="color: #800000">button </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="btn btn-info"</span><span style="color: #0000ff">></span>bootstrap<span style="color: #0000ff"></</span><span style="color: #800000">button</span><span style="color: #0000ff">></span>
<span style="color: #008080">10</span>  
<span style="color: #008080">11</span>     <span style="color: #008000"><!--</span><span style="color: #008000"> jQuery (necessary for Bootstrap's JavaScript plugins) </span><span style="color: #008000">--></span>
<span style="color: #008080">12</span>     <span style="color: #0000ff"><</span><span style="color: #800000">script </span><span style="color: #ff0000">src</span><span style="color: #0000ff">="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"</span><span style="color: #0000ff">></</span><span style="color: #800000">script</span><span style="color: #0000ff">></span>
<span style="color: #008080">13</span>     <span style="color: #008000"><!--</span><span style="color: #008000"> Include all compiled plugins (below), or include individual files as needed </span><span style="color: #008000">--></span>
<span style="color: #008080">14</span>     <span style="color: #0000ff"><</span><span style="color: #800000">script </span><span style="color: #ff0000">src</span><span style="color: #0000ff">="js/bootstrap.min.js"</span><span style="color: #0000ff">></</span><span style="color: #800000">script</span><span style="color: #0000ff">></span>
<span style="color: #008080">15</span>   <span style="color: #0000ff"></</span><span style="color: #800000">body</span><span style="color: #0000ff">></span>
<span style="color: #008080">16</span> <span style="color: #0000ff"></</span><span style="color: #800000">html</span><span style="color: #0000ff">></span>

코드 보기