Bootstrap은 웹 프론트 엔드 페이지를 구축하기위한 간단하고 유연한 HTML5 및 CSS3 기반 HTML5 및 CSS3 기반 HTML, CSS 및 JavaScript 도구 세트입니다. 친근한 학습 곡선, 우수한 호환성, 반응 형 디자인, 12 그리드 그리드, 스타일 마법사 문서, 맞춤형 jQuery 플러그인, 완전한 클래스 라이브러리, 적은 기능을 기반으로합니다. 부트 스트랩은 웹 개발을 더 빠르고 쉽게 만듭니다.
1. 부트 스트랩 다운로드
공식 웹 사이트 : http://getbootstrap.com/; 초보자 시작 : http://getbootstrap.com/getting-started/
공식 웹 사이트에서 부트 스트랩 및 부트 스트랩 소스 코드를 다운로드 할 수 있습니다. 다운로드하지 않으려면 Bootstrap에서 제공 한 CDN을 사용할 수도 있습니다.
2. 부트 스트랩 파일 구조
부트 스트랩/
CSS/
bootstrap.css
bootstrap.css.map
bootstrap.min.css
│ │ ─신 ─ bootstrap.min.css.map
bootstrap-theme.css
bootstrap-theme.css.map
bootstrap-theme.min.css
bootstrap-theme.min.css.map
JS/
bootstrap.js
bootstrap.min.js
Fonts/
Glyphicons-Halflings-Regular.eot
Glyphicons-Halflings-Regular.svg
Glyphicons-Halflings-Regular.ttf
Glyphicons-Halflings-Regular.woff
Glyphics-Halflings-Regular.woff2
3. Bootstrap의 HTML 표준 템플릿
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <!-IE에서 최신 렌더링 모드를 실행합니다-> <meta http-equiv = "x-ua-catible"컨텐츠 = "ie = edge"> <!-Mobile Browsing Display, Width width it the the the the the the the the the width 초기 스케일 = 1 스케일링 스케일 설정-> <meta name = "viewport"content = "width = device-width, 초기 스케일 = 1"> <title> bootstrap의 HTML 표준 템플릿 </title> <!-Bootstrap의 핵심 CSS를 소개합니다. href = "http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> <!-자신의 스타일 파일-> <link href = "css/style.css"rel = "Stylesheet"> <! 브라우저. 필요하지 않으면 제거 할 수 있습니다-> <!-[LT IE 9]> <script src = "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"> </script> <script src = "https://oss.maxcdn.com/libs/respent.js/1.4.2/respond.min.js"> </script> <! 먼저 jquery를 호출해야합니다-> <script src = "http://libs.baidu.com/jquery/1.9.0/jquery.min.js"> </script> <!-부트 스트랩 또는 JS 플러그인을 포함하여-> <script src = "http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"> </script> </body> </html>
4. 부트 스트랩 제목
일반적인 HTML 페이지와 마찬가지로 Bootstrap은 태그 H1에서 H6을 사용하는 제목을 정의하지만 Bootstrap은 기본 스타일을 무시하여 모든 브라우저에 표시되는 효과가 동일합니다. 정의의 특정 규칙은 다음 표에 나와 있습니다.
<!-Bootstrap의 타이틀-> <h1> Title 1 </h1> <h2> Title 2 </h2> <!-Bootstrap은 <small> 태그를 사용하여 자막을 만듭니다-> <h1> Title 1 <Small> 자막 </h1> <h2> title 2 <Small> 하위 타이틀 </h2> <! 같은 스타일 -> <div> Title 1 </div> <div> Title 2 </div> <div> Title 3 </div>
참고 : 자막 선 높이는 1이고, 글꼴 중량은 굵게, 색상은 회색입니다 (#999). H1 ~ H3의 자막은 제목의 65%이고 H4 ~ H6의 자막은 제목의 75%입니다. 자세한 내용은 bootstrap.css 파일의 407 ~ 443 행을 참조하십시오.
5. 부트 스트랩 컨텐츠
1) 내용을 강조하십시오
실제 프로젝트에서 중요한 텍스트의 경우 강조 표시 될 것으로 예상되는 부분은 다른 스타일로 취급됩니다. Bootstrap은 또한이 부분에서 약간의 가벼운 처리를 만들었습니다.
단락 P를 강조하기 위해 클래스 이름 ".lead"를 추가함으로써 그 기능은 텍스트 글꼴 크기를 늘리고 텍스트를 굵게 표시하고 그에 따라 선 높이와 여백을 처리하는 것입니다. 사용법은 다음과 같습니다.
<p> 정상 텍스트 </p>
<p> 텍스트 황제 </p>
2) 색상을 통해 강조를 표현하십시오
예를 들어:
<!-아래의 일반 텍스트는 Brown->입니다
<p> 정상 텍스트 </p>
3) 대담하고 이탤릭체
Bold는 B- 라벨 또는 강한 레이블을 사용하는 데 사용됩니다. 이탤릭체는 EM-Label 또는 I-Label을 사용하는 데 사용됩니다.
<!-BOLD-> <P> 정상 텍스트 <B> BOLD </b> 정상 텍스트 </p> <p> 정상 텍스트 <strong> bold </strong> 정상 텍스트 </p> <!-이탈리아-> <p> 정상 텍스트 <em> 이탈리아 </p> <p> 정상 텍스트 </p> 정상 텍스트 </p>
4) 텍스트 정렬
부트 스트랩은 네 가지 클래스 이름을 정의하여 정렬 스타일의 텍스트를 제어합니다.
<p> 나는 왼쪽에있다 </p> <p> 나는 센터에있다 </p> <p> 나는 오른쪽에있다 </p> <p> 나는 양쪽 끝에 정렬되었다 </p>
6. 부트 스트랩 목록
Bootstrap은 일반적인 사용에 따라 6 가지 형태의 목록을 제공합니다 : 일반 목록, 주문 목록, 포인트 설명 목록, 인라인 목록, 정의 목록 및 수평 정의 목록.
1) 일반 목록
<!-일반 목록-> <ul> <li> 정상 목록 1 </li> <li> 정상 목록 2 </li> </ul>
2) 주문 목록
<!-정렬 된 목록-> <ol> <li> 정렬 된 목록 1 </li> <li> 정렬 된 목록 2 </li> </ol> <!-분류 목록 중첩-> <ol> <li> 정렬 된 목록 1 </li> <li> 정렬 된 목록 2 <li> 정렬 된 목록 2.1 </li> <li> 정렬 목록 2.2 </li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li>
3) 목록으로 이동하십시오
기본 목록 스타일을 제거 할 수 있도록 클래스 이름 ".list-unstyled"를 비정규 목록에 추가하십시오.
<ol> <li> 정렬 된 목록 1 </li> <li> 정렬 된 목록 2 </li> </ol>
4) 인라인 목록 (수평 내비게이션 제작을 위해 출생)
Destined List와 마찬가지로 인라인 목록은 클래스 이름 ".list-inline"을 추가하여 수직 목록으로 수직 목록을 바꾸고 총알 (숫자)을 제거하여 수평 디스플레이를 유지하여 구현됩니다.
<ul> <li> 내비게이션 바 엔트리 1 </li> <li> 내비게이션 바 엔트리 2 </li> </ul>
5) 정의 목록
부트 스트랩 정의 목록은 단순히 라인 간격, 여백 및 글꼴 대담 효과를 조정합니다.
<dl> <dt> 베이징 </dt> <dd> 중국의 수도. </dd> <dt> 상하이 </dt> <dd> 국립 센트럴 시티, Megacity. </dd> </dl>
6) 수평 정의 목록
수평 정의 목록은 인라인 목록과 같습니다. 부트 스트랩은 클래스 이름 ".dl-horizontal"을 DL 태그에 추가하여 수평 디스플레이 효과를 달성 할 수 있습니다.
<dl> <dt> 베이징 </dt> <dd> 중국의 수도. </dd> <dt> 상하이 </dt> <dd> 국립 센트럴 시티, Megacity. </dd> </dl>
7. 부트 스트랩 테이블
Bootstrap은 1 개의 기본 스타일과 4 개의 추가 스타일과 반응 형 테이블을 갖춘 테이블을 제공합니다. 세부 사항은 다음과 같습니다.
<! docType html> <html> <head> <meta charset = "utf-8"> <title> 기본 테이블 </title> <link rel = "stylesheet"href = "http://netdna.bootstrapcdn.com/bootstrap/3.1.1.1/csss/boottrap.min.css"> <head> <head> 테이블 </h3> <!-bootstrap.css 파일 라인 1402 ~ 줄 1441-> <table> <tr> <th> 테이블 제목 </th> <th> 테이블 제목 </th> <th> 테이블 제목 </th> </td> <td> 탁자 <td> 테이블 <td> 테이블 <td> 테이블 </td> 테이블 제목 </th> <td> <td> 셀 </td> </tr> <td> <td> 테이블 셀 </td> <td> 테이블 셀 </td> <td> 테이블 셀 </td> </td> </tbody> </table> <h3> 얼룩말 교차 테이블 </h3> <!-메인 소스 뷰 bootstrap.csss 1465 ~ <teed> <theed> <theed> Title </th> <th> 테이블 제목 </th> <th> 테이블 제목 </th> </tr> </thead> <tbody> <tr> <td> 테이블 셀 </td> <td> 테이블 셀 </td> <td> 테이블 셀 </td> </td> </td> </tdoid> <td> 테이블 </td> <td> <td> 셀 </td> <td> 테이블 세포 </td> <td> 테이블 세포 </td> </tr> <tr> <td> 테이블 세포 </td> 테이블 셀 </td> <td> 테이블 셀 </td> </tr> </tbody> </td> </td> </td> </td> </td> </td> </h3> </h3> <! 1464-> <table> <thead> <tr> <th> 테이블 제목 </th> <th> 테이블 제목 </th> <th> 테이블 제목 </th> </th> </th> </th> </th> </th> </td> <td> <td> 테이블 셀 </td> </tr> </td> </td> <td> 테이블> 테이블> Cell </td> </tr> <td> <td> 테이블 세포 </td> <td> 테이블 셀 </td> </tr> </tbody> </table> <h3> 마우스 강조 표시된 테이블을 일시 중지 </h3> <!-주소를 보는 메인 소스 코드 1469 ~ line 1472-> <Thead> <Thead> <Thead> Title </th> <th> 테이블 제목 </th> <th> 테이블 제목 </th> </tr> </tbody> <tbody> <tr> <td> 테이블 셀 </td> <td> 테이블 셀 </td> <td> 테이블 셀 </td> </td> <td> <td> 테이블 </td> </tbody> <H3> Compact Table </h3> <!-주요 소스 코드는 bootstrap.css 파일 라인 1442 ~ <Table> <thead> <tr> <th> 테이블 제목 </th> <th> 테이블 제목 </th> <th> 테이블 제목 </th> </tr> </thead> <tbody> <td> 테이블 </td> <td>를 봅니다. Cell </td> <td> 테이블 세포 </td> </tr> <td> <td> 테이블 세포 </td> <td> 테이블 세포 </td> <td> 테이블 셀 </td> </tbody> </table> <h3> 응답 테이블 </h3> <!-Bootstrap은 클래스 이름을 가진 컨테이너를 제공합니다. 이 컨테이너에 배치 된 테이블에는 반응이 효과-> <div> <table> <thead> <t> <th> 테이블 제목 </th> <th> 테이블 제목 </th> <th> 테이블 제목 </th> </tr> </thead> <tbles> <ttr> <ttr> <td> 테이블 </td> <td> <td> 테이블 세포 </td> <td> <td> <td> Cell </td> <td> 테이블 세포 </td> </tr> </tbody> </table> </div> </body> </html>
코드 의이 부분에는 부트 스트랩에 일반적으로 사용되는 테이블이 포함되어 있으며 렌더링은 다음과 같습니다.
Bootstrap은 테이블의 행 요소 TR에 대한 5 가지 클래스 이름을 제공합니다 (해당 소스 코드의 경우 Bootstrap.css 파일에서 1484 행까지 1583 행을 확인하십시오). 각 클래스 이름은 행의 다른 배경색을 제어합니다. 특정 설명은 다음 표에 나와 있습니다.
사용하기가 매우 간단합니다. 효과를 달성하기 위해 위의 테이블의 해당 클래스 이름 만 추가하면됩니다.
<tr> <td>… </td> </tr>
알아채다:
1. 정지 상태를 달성하려면 <pable> 태그에 테이블 호버 클래스를 추가해야합니다.
2. ". Active"외에도 다른 4 개의 클래스 이름과 ".table-hover"를 사용할 때 부트 스트랩은 부유 상태에서 이러한 스타일에 해당하는 스타일 설정을 만듭니다. 따라서 TR 요소에 다른 색상 스타일을 추가 해야하는 경우 ".table-hover"테이블에서 해당 조정을해야합니다.
여전히 심도있게 배우고 싶다면 여기를 클릭하여 두 가지 흥미로운 주제를 배우고 첨부 할 수 있습니다. 부트 스트랩 학습 자습서 부트 스트랩 실용 튜토리얼
일련의 기사 :
처음으로 Magical Bootstrap Grid System //www.vevb.com/article/89333.htm에 연락했습니다.
마법의 부트 스트랩 양식 //www.vevb.com/article/89330.htm에 처음 접촉했습니다.
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.