부트 스트랩 프로필
목표
부트 스트랩 가장 인기있는 프런트 엔드 프레임 워크, 세 번째 버전 (v3.0.0)를 발표했다. 이 튜토리얼은 부트 스트랩 3 학습을 시작하는 당신을 데려 갈 것이다.
당신은 또한 레이아웃을 생성하기 위해 그리드를 사용하는 것과 다른 프레임 사용자 정의 프레임 기능을 사용하는 방법을 볼 수 있습니다, 네비게이션은 카로틴이, 드롭 다운 상자를 만드는 소셜 플러그인과 구글지도 및 기타 타사 플러그인을 추가하여, 탐색에 의해 생성된다.
부트 스트랩 무엇입니까
부트 스트랩은 웹 응용 프로그램 및 웹 사이트의 신속한 개발을위한 프런트 엔드 프레임 워크입니다.
현대 웹 개발에 필요한 거의 모든 웹 프로젝트에 여러 구성 요소가 있습니다.
그리드, 타이포그래피, 테이블, 폼, 버튼 및 대응 - 부트 스트랩이 기본 모든 모듈을 제공합니다.
또, 드롭 다운, 네비게이션, 조동사, Typehead, 페이지 매김, 카로틴, 이동 경로, 탭, 분할 화면, 헤더 등과 같은 다른 유용한 프런트 엔드 구성 요소가 많이있다.
다음으로, 당신은 웹 프로젝트를 구축하고 더 쉽고 빠르게 실행할 수 있습니다.
전체 프레임 워크 모듈을 기반으로하고 있기 때문에 또한, 당신은 사용자 정의 할 수있는 프로젝트의 시작 후 자신의 CSS, 심지어 큰 보정을 배치 할 수 있습니다.
그것은 몇 가지 모범 사례를 기반으로, 우리는 당신이 HTML과 자바 스크립트 / jQuery를의 기초를 마스터 한 후에는 웹 개발에이 기술을 적용 할 수 있습니다, 현대 웹 개발 기회를 배우기 시작하기에 좋은 장소라고 생각합니다.
일부 비평가하지만, 부트 스트랩에 의해 만들어진 모든 프로젝트가 동일한 봐, 당신은 HTML +가 웹 사이트를 구축 할 수 있습니다 CSS 지식에 대해 너무 많은 것을 알 필요가 없습니다. 그러나, 우리는 부트 스트랩은 당신이 고유하게 정의해야하는 다른 일반적인 것들과 같은 공통의 프레임 워크, 이해할 필요가있다. 사용자 정의 할 때, 당신은 거기에 좋은 HTML이 없습니다 + CSS 기반이 가능하지, 심도있는 연구가 필요합니다.
물론, 인사 선택 개발이지만, 부트 스트랩 노력 분명히 가치있는 프레임 워크를 사용하는 다른 많은 좋은 전면 프레임있다 제외한 부트 스트랩.
왜 이 프로젝트는해야 부트 스트랩을 사용합니까?
파일 구조를 다운로드 및 이해
당신은 선택할 수 있습니다 https://github.com/twbs/bootstrap/archive/v3.0.0.zip 또는 https://github.com/twbs/bootstrap/releases/download/v3.0.0/bootstrap-3.0.0-dist .ZIP 에 부트 스트랩 버전 3.0.0을 다운로드합니다. 우리는 첫 번째를 사용하고, 두 번째를 사용할 수 있습니다.
또, 다운로드 가능한 코드는, 부트 스트랩 코드 폴더를 통해 상기 제 다운로드 링크를 포함 제공한다. 이 팀은 또한 custom.css의 부트 스트랩 CSS를 정의하는 데 사용되는 원본이 포함되어 있습니다.
개봉 후에는 루트 폴더 부트 스트랩-3.0.0에서 일부 파일과 폴더를 찾을 수 있습니다.
주요 CSS 파일 - bootstrap.css 및 폴더 아래의 루트 폴더 '의 dist'폴더 'CSS'부트 스트랩-3.0.0 파일에있는 부트 스트랩 - min.css의 그것의 단순화 된 버전.
내부의 'DIST'에서,이 'JS'폴더가 기본 자바 스크립트 파일 bootstrap.js과 단순화 된 버전이 포함되어 있습니다.
루트에 파일을 별도의 '의 JS'폴더가 다른 파일 다른 자바 스크립트 플러그인이 포함되어있다.
'자산'내 루트 파일에서 다른 '의 JS'폴더를 찾을 수 있습니다. 이것은 IE8 지원을 얻기 위해, html5shiv.js의 HTML5 심과 장소입니다. IE8 멀티미디어 쿼리를 지원하는 respond.min.js 파일도 있습니다. 이 폴더는 부트 스트랩 따라 jquery.js를 플러그인 JS가 포함되어 있습니다.
같은 폴더에서,이 'ICO'폴더 모바일 장치 아이콘과 파비콘 아이콘의 다양한 포함되어 있습니다.
동일한 경로 'CSS'에서 폴더는 CSS 파일 문서가 포함되어 있습니다.
'_includes'그리고 '_layouts'폴더는 신속한 프로토 타입에 대한 유용한 디자인 될 수있는 문서의 일부 기본 레이아웃 구조가 포함되어 있습니다.
루트 폴더는 '덜'폴더에 몇 가지 .less 파일이 포함되어 있습니다. 당신이 개발 LESS 기준으로 할 경우,이 파일은 유용 할 수 있습니다.
루트 폴더에 어떤 파일이 있습니다. 일부 컴파일 bower.json, browserstack.json위한 정자 기반으로하는 몇몇의 기본 조형 HTML 파일에 사용된다. 또한,이 composer.json 및 YAML 파일 _config.yml.
또한 주어진 링크에서 다운로드, 당신은 또한 모든 CSS를 컴파일하려면 다음 명령을 사용할 수 있습니다, JS 파일 -
$ bower install bootstrap
당신은 망할 놈의 부트 스트랩 보고서를 복사 할 수 있습니다
git clone git://github.com/twbs/bootstrap.git
이 튜토리얼을 위해, 우리는 Zip 파일을 다운로드, 그것은 사용하지 않습니다.
이 튜토리얼을 배우고 나면, 우리는 그것이 어떻게 작동하는지보기 위해 프레임을 장착 이물 보시기 바랍니다.
NetDNA 지원 컴파일 및 부트 스트랩 CSS, JS 등의 주제 CSS의 단순화 된 버전. 당신은 그들에게 다음과 같은 문장을 인용 할 수 있습니다
<!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"> <!-- Optional theme --> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css"> <!-- Latest compiled and minified JavaScript --> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
부트 스트랩 v3.0.0를 사용하여 개발
기본 HTML
다음은 우리의 프로젝트에 대한 기본 HTML 구조입니다
<! DOCTYPE html로>
<HTML>
<헤드>
<제목> 부트 스트랩 V3 템플릿 </ 제목>
<메타 이름 = "뷰포트"내용 = "너비 = 장치 폭, 초기 규모 = 1.0">
<! - 부트 스트랩 ->
<링크 HREF = "부트 스트랩-3.0.0 / DIST / CSS / bootstrap.min.css"REL = "스타일"미디어 = "스크린">
<! - HTML5 심과 HTML5 요소와 미디어 쿼리의 Respond.js IE8 지원 ->
<! - [경우 LT IE 9]>
<스크립트 SRC = "부트 스트랩-3.0.0 / 자산 / JS / html5shiv.js"> </ script>
<스크립트 SRC = "부트 스트랩-3.0.0 / 자산 /의 JS / respond.min.js"> </ script>
<! [ENDIF] ->
</ 헤드>
<바디>
<H1> 안녕하세요, 세계! </ H1>
<! - (부트 스트랩의 자바 스크립트 플러그인에 필요한) JQuery와 ->
<스크립트 SRC = "// code.jquery.com/jquery.js"> </ script>
<! - 컴파일 된 모든 플러그인을 포함 (아래), 또는 필요에 따라 개별 파일을 포함 ->
<스크립트 SRC = "부트 스트랩-3.0.0 / DIST / JS / bootstrap.min.js"> </ script>
</ BODY>
</ HTML>
유의하시기 바랍니다 IE8 지원을 얻기위한 템플릿과 추가 html5shiv.js respond.min.js 그. 부트 스트랩에서 버전 3이 파일에 추가되었습니다.
우리는 트위터 - 부트 스트랩 웹 서버 폴더의 루트 폴더에 파일이 부트 스트랩-3.0.0 폴더를 배치하고있다. 우리가 만드는 모든 HTML 파일은 트위터 - 부트 스트랩에 배치됩니다. 그 이유는 우리의 개발 과정을 간소화하기 위해,이 점을 설명한다.
사용자 정의
우리는 다른 CSS 상자 스타일을 사용자 정의합니다. 따라서,의 파일을 파괴하지 않는 원래의 CSS의 기초 (부트 스트랩-3.0.0있는 DIST 폴더) 같은 폴더에, 우리는 custom.css라는 별도의 CSS 파일을 생성합니다. 다음 우리는 HTML 파일에 즉시 원래 CSS 파일 후 CSS 파일을 참조. 부트 스트랩 업그레이드하는 경우 이러한 방법으로, 우리는 우리가 변경할 기본 스타일을 재정의 할 수 있습니다, 그러나, 원래의 CSS 파일이 업데이트에 근거하여 우리의 관습을 파괴하지 않습니다. 우리는 또한 개발 과정에서이 방법을 따르는 것이 좋습니다.
탐색 만들기
시작 태그 후 몸 뒤에 HTML 파일의 탐색을 만들려면 다음 코드를 추가합니다.
<운항 클래스 = "네비게이션 바 네비게이션 바 - 역 Navbar를 고정 정상"역할 = "탐색">
<UL 클래스 = "탐색 네비게이션 바-탐색">
<리> <a href="new.html" class="navbar-brand">
<IMG SRC = "logo.png"> </A> </ 리>
<리 클래스 = "활성"> <a의보기 </a> 홈 </A> </ 리>
<리> <a의 href="price.html"> 가격 </A> </ 리>
<리> <a의 href="contact.html"> 연락 </A> </ 리>
<리 클래스 = "드롭 다운">
</a>에의 <b /> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 사회의 <b 클래스 = "캐럿">
<UL 클래스 = "드롭 다운 메뉴">
<리 클래스 = "사교"> <g : 플러스 원 주석 = "인라인"너비 = "150"> </ g : 플러스 원> </ 리>
<리 클래스 = "사교"> <DIV 클래스 = "FB-같은"데이터 HREF = "https://developers.facebook.com/docs/plugins/"데이터 폭 = "플러그인의 픽셀 폭"데이터 -height = "플러그인의 픽셀 높이"데이터 색상 구성표 = "빛"데이터 레이아웃 = "표준"데이터 액션 = 데이터 쇼 - 얼굴 = "true"로 데이터 전송 "과 같은"= "거짓"> < / DIV> </ 리>
<리 클래스 = "사교"> <a href="https://twitter.com/share" class="twitter-share-button"> 트윗 </a>를
! <스크립트> 기능 (D, S, ID) {var에 JS, FJS = d.getElementsByTagName (들) [0] (! d.getElementById (ID)); JS {JS = d.createElement (들)의 경우. ID = 아이디; js.src = "// platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}} (문서,"스크립트 ","트위터-WJS "); < / 스크립트> </ 리>
</ UL>
</ 리>
</ UL>
</ 탐색>
탐색을위한 컨테이너 계층 구조의 부트 스트랩 사용 '네비게이션 바'클래스입니다. 그러므로, 전체 탐색 탐색 요소를 보유하도록 할당된다.
우리는 탐색 모음의 기본 색, 빛의 사용 전에 어두운 대신 기본값을 변경하려면 '네비게이션 바 - 역'클래스를 사용하고 있습니다. 'Navbar를가 고정 탑'클래스는 보장 우리가 HTML 페이지에서 고정 된 위치의 상단에있는 탐색 막대를 아래로 스크롤 할 때.
역할을 사용할 때 탐색이 만들어 부트 스트랩 V3.0.0에서 = "탐색"새로운 기능입니다. 탐색 모음에 쉽게 액세스 등의 사용을 권장 부트 스트랩.
이 시점에서, 우리는 custom.css에서 문서의 본문 증가해야 '패딩 - 가기 : 픽셀 범위를' ''. 당신은 다를 수 있습니다 충전 픽셀의 상위로 몸에 추가 할 수 있지만 그렇게하지 않는 한, 네비게이션 바의 상단 부분은 후, 숨겨집니다.
컨테이너 탐색에서, 우리는 우리는 '탐색'과 '네비게이션 바 - 탐색'정렬되지 않은리스트의 클래스가 있습니다. 이 정렬되지 않은 목록에서 각 목록 항목은 탐색 링크가 포함되어 있습니다.
브랜드 이름을 표시하기위한 'Navbar의 브랜드'클래스입니다. 우리는 이미지를 사용했다. 상 높이의 높이 우리는 어떤 정의 할 기준선 탐색 바,보다 크므. '.navbar-탐색> 리>는'50 픽셀 원래 기본 20 픽셀에서 'line-height'속성은 16px 글꼴 크기를 변경합니다.
오른쪽에있는 링크, 우리는 드롭 다운 상자를 증가하고있다. 관련 리는 '드롭 다운'클래스에 추가를 들어, '드롭 다운 - 전환'두 개의 클래스 '캐럿'앵커를 추가 하였다. 우리의 프로젝트의 앵커 실제로 앵커 텍스트 사회가 포함되어 있습니다. 이 리는 정렬되지 않은 목록, 중첩 된 목록에있는 각 목록 항목은 다음 상자에 표시된 링크가 포함되어 포함되어 있습니다.
드롭 다운 상자에서 그 우리는 소셜 플러그인을 추가했습니다. 첫 번째는 리튬 Google 플러스 마크를 포함하고, 두 번째는 북 리 태그를 포함하며, 세 번째의 표시 리튬 태그 트위터 버튼 일부 JS 스크립트를 포함한다.
또한, 당신은 body 태그 한 후 시작해야합니다, 페이스 북 버튼 작동을 확인하기 위해 다음과 같은 마크 업 및 스크립팅을 추가
<사업부 아이디 = "FB-루트"> </ DIV>
(기능 (D, S, ID) {
var에 JS, FJS = d.getElementsByTagName (들) [0]
(d.getElementById (ID)) 반환하는 경우;
JS = d.createElement (들) js.id = 아이디;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore (JS, FJS);
} (문서, '스크립트', '페이스 북-jssdk'));
트위터 버튼을 작동하게하려면, 우리는 body 태그 전에 종료, 다음 스크립트를 추가
(함수 () {
var에 포 = document.createElement ( '스크립트'); po.type = '텍스트 / 자바 스크립트'; po.async = TRUE;
po.src = 'https://apis.google.com/js/plusone.js';
var에 S = document.getElementsByTagName ( '스크립트') [0] s.parentNode.insertBefore (포,들);
}) ();
우리는 사회 버튼의 '사교'클래스에 몇 가지 여분의 스타일을 추가하려면 다음 스타일을 사용합니다.
.socials {
패딩 : 10px;
}
이것은 우리의 탐색을 완료합니다.
카로틴에 의한 슬라이드 쇼 만들기
홈페이지 탐색 줄을 투영하기 위해, 슬라이드 쇼를 만들고, 다음 태그를 사용
<사업부 아이디 = "회전 목마 - 예 - 일반"클래스 = "회전 목마 슬라이드">
<! - 표시 ->
<안녕, 클래스 = "회전 목마 - 지표">
<리 데이터를 대상 = "# 회전 목마 - 예 - 일반"데이터 슬라이드에 = "0"클래스 = "활성"> </ 리>
<리 데이터를 대상 = "# 회전 목마 - 예 - 일반"데이터 슬라이드에 = "1"> </ 리>
<리 데이터를 대상 = "# 회전 목마 - 예 - 일반"데이터 슬라이드에 = "2"> </ 리>
</ 올>
<! - 슬라이드 래퍼 ->
<사업부 클래스 = "회전 목마 - 내부">
<사업부 클래스 = "항목 활성화">
<IMG SRC = "computer.jpg"고도 = "...">
<사업부 클래스 = "회전 목마 캡션">
<H1> 대형 데스크탑은 도처에있다 </ H1>
이제 30 일 평가판을 사용해보십시오 <P> < "BTN-LG BTN-성공 btn을"= 버튼 클래스> </ P>
</ DIV>
</ DIV>
<사업부 클래스 = "항목">
<IMG SRC = "mobile.jpg"고도 = "...">
<사업부 클래스 = "회전 목마 캡션">
<H1> 핸드폰 데스크톱을 상회하는 </ H1>
이제 30 일 평가판을 사용해보십시오 <P> < "BTN-LG BTN-성공 btn을"= 버튼 클래스> </ P>
</ DIV>
</ DIV>
<사업부 클래스 = "항목">
<IMG SRC = "cloud1.jpg"고도 = "...">
<사업부 클래스 = "회전 목마 캡션">
<H1은> 기업 클라우드 빠른 </ H1>를 계산 채택
이제 30 일 평가판을 사용해보십시오 <P> < "BTN-LG BTN-성공 btn을"= 버튼 클래스> </ P>
</ DIV>
</ DIV>
</ DIV>
<! - 컨트롤 ->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<스팬 클래스 = "아이콘 - 이전"> </ SPAN>
</a>를
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<스팬 클래스 = "아이콘 - 다음"> </ SPAN>
</a>를
</ DIV>
</ DIV>
카로틴 4 개의 섹션이있다. 는 '회전 목마 슬라이드'클래스 정의와 DIV 태그를 사용하여 메인 컨테이너입니다.
그런 다음 정렬 된 목록과 함께 '회전 목마 - 지표'클래스입니다. 각각의리스트 항목은 슬라이드를 나타낸다 올 실시. 페이지가로드 될 때, '활성'클래스와 기본 슬라이드 쇼로드. 렌더링 할 때, 당신은 작은 원의 제목에서 볼 수 있습니다.
그런 다음, 각 슬라이드 (이미지) div 태그의 '항목'클래스에 배치됩니다. 각 항목은 사업부의 '회전 목마 캡션'클래스와 중첩된다. 회전 목마 - 캡션 제목 태그와 함께 표시되는 이미지가 포함되어 있습니다. 단락은 H1과 버튼, 당신은 다른 자신의 마크를 포함 할 수 있습니다 포함되어 있습니다.
마지막 부분은 밀어 다음 / 이전 슬라이드를 제어하기 위해 사용된다. 이는 다음 '오른쪽'및 클래스 '컨베이어 제어'의 정의를 이용하여, 클래스의 정의에 '컨베이어 제어를'왼쪽 '을 사용하는 것이다.
'아이콘-이전'과 다음 및 이전 아이콘 '아이콘-다음'클래스입니다.
우리는 기본 카로틴의 일부 사용자 정의를 수행하고있다. 우리는 캡션, 지표 및 이전 / 다음 아이콘은 몇 픽셀의 기본 위치의 상단에 렌더링 바랍니다.
이를 위해, 우리는 파일 custom.css 다음과 같은 스타일을 추가
.carousel - 내부 .item의 .carousel 캡션 {
위치 : 절대;
상단 : 200 픽셀
}
.carousel-지표 {
위치 : 절대;
상단 : 400 픽셀;
}
.navbar {
마진 - 하단 : 0;
}
.navbar-탐색> 리>를 {
라인 - 높이 : 50 픽셀;
글꼴 크기 : 16px
}
우리는 또한 H1을 사용자 정의 30 픽셀의 그것에 아래쪽 여백을 추가합니다.
H1 {
마진 - 하단 : 30 픽셀
}
응답 이미지
당신은 슬라이드의 각 이미지, 우리는 'IMG 응답'클래스를 사용한 것으로 나타났습니다 수 있습니다. 이것은 부트 스트랩 v3.0.0의 새로운 기능입니다. img 태그 'IMG 응답'클래스를 사용하여, 부트 스트랩 이미지 응답 있도록.
그리드 만들기
다음 슬라이드에서는 콘텐츠를 배치하는 격자를 사용 하였다. 사업부의 '용기'클래스를 가짐으로써 그리드를 시작합니다. 우리가 대신 컨테이너가 하나의 클래스가 부트 스트랩, 이전 버전의, 반응 형 웹 사이트를 개발하기 위하여려고하고 있습니다, 디폴트는 반응이다.
사업부의 중첩 된 여러 '행'클래스 컨테이너 사업부 (세 가지의 첫 번째 행은 두 번째 줄이 여섯), 부트 스트랩 그리드 선을 만들 수 있습니다.
각 행은 열을 만들 사업부의 'COL-XY'클래스와 함께이 있습니다. x의 값이 될 수있다 : 큰 데스크톱 화면을 LG 위해 노트북 컴퓨터 작은 데스크톱 화면으로 멀티 태블릿 PC SM 모바일 장치 용 XS. 이것은 첫 번째 방법이다. 그리드의 열의 총 수는 더 이상 12 이하인 없어야 있지만 (Y)의 값은 양의 정수가 될 수있다. 우리의 프로젝트에서 간단하게하기 위해 우리는 LG 전자를 사용했다,하지만 우리는 아직했기 때문에, 당신은 비교를 위해 프로젝트 사이트를 보려면 휴대 전화 나 태블릿을받을 수 있습니다.
다음 튜토리얼에서, 우리는 그 매혹적인 응답을 탐구, 부트 스트랩 그리드 시스템에 대한 완전한 튜토리얼이있을 것이다.
이 예에서는 처음 세 행의 열 너비가 동일합니다, 그래서 우리는 모두를 위해 사용하는 열 'COL-LG-4'. 두 번째 행에서, 우리는 동일한 폭의 여섯 열을 원하는, 그래서 우리는 열 'COL-LG-2'의 모든 사용합니다.
다음 두 행의 격자를 포함하는 태그이며, 첫 번째 행은 세 가지가, 제 2 단째는 여섯있다.
<사업부 클래스 = "행 바론"> <사업부 클래스 = "COL-LG-2"> <P> <IMG의 SRC = "../ WP - 콘텐츠 / 업로드 / 10분의 2,013 / php.png"> </ P> </ DIV> <사업부 클래스 = "COL-LG-2"> <P> <IMG의 SRC = "../ WP - 콘텐츠 / 업로드 / 10분의 2,013 / mysql을-logo.jpg"> </ P> </ DIV> <사업부 클래스 = "COL-LG-2"> <P> <IMG의 SRC = "../ WP - 콘텐츠 / 업로드 / 10분의 2,013 / 자바 스크립트-logo.png"> </ P> </ DIV> <사업부 클래스 = "COL-LG-2"> <P> <IMG의 SRC = "../ WP - 콘텐츠 / 업로드 / 10분의 2,013 / java.jpg"> </ P> </ DIV> <사업부 클래스 = "COL-LG-2"> <P> <IMG의 SRC = "../ WP - 콘텐츠 / 업로드 / 10분의 2,013 / postgresql.png"> </ P> </ DIV> </ DIV>
우리는 시간과 다음 마크 꼬리말 격자의 끝을
<HR> <P> 할일 앱으로 2013-14 @ 저작권. </ P>
사용 표
우리의 프로젝트의 price.html 페이지에서 우리는 다음과 같이 표시 가격 목록을 렌더링하기 위해 양식을 사용
<표 클래스 = "테이블 테이블 경계">
<THEAD>
<TR>
<목> 기능 </ 일>
<목> 개인 </ 일>
<목> 작은 팀 </ 일>
<목> 중간 팀 </ 일>
<목> 기업 </ 일>
</ TR>
</ THEAD>
<TBODY>
<TR>
<TD> <H3> 사용자의 번호 </ H3> </ TD>
<TD> <스팬 클래스 = "배지"> 한 </ SPAN> </ TD>
<TD> <스팬 클래스 = "배지"> 다섯 </ SPAN> </ TD>
<TD> <스팬 클래스 = "배지"> 다섯 </ SPAN> </ TD>
<TD> <스팬 클래스 = "배지"> 무제한 </ SPAN> </ TD>
</ TR>
<TR>
<TD> <H3> 프로 훈련 </ H3> </ TD>
<TD> <스팬 클래스 = "배지"> 없음 </ SPAN> </ TD>
<TD> <스팬 클래스 = "배지"> 예 </ SPAN> </ TD>
<TD> <스팬 클래스 = "배지"> 예 </ SPAN> </ TD>
<TD> <스팬 클래스 = "배지"> 예 </ SPAN> </ TD>
</ TR>
<TR>
<TD> <H3> 포럼 지원 </ H3> </ TD>
<TD> <스팬 클래스 = "배지"> 예 </ SPAN> </ TD>
<TD> <스팬 클래스 = "배지"> 예 </ SPAN> </ TD>
<TD> <스팬 클래스 = "배지"> 예 </ SPAN> </ TD>
<TD> <스팬 클래스 = "배지"> 예 </ SPAN> </ TD>
</ TR>
<TR>
사람 지원 </ H3> </ TD>에서 <TD> <H3>
<TD> <스팬 클래스 = "배지"> 없음 </ SPAN> </ TD>
<TD> <스팬 클래스 = "배지"> 없음 </ SPAN> </ TD>
<TD> <스팬 클래스 = "배지"> 예 </ SPAN> </ TD>
<TD> <스팬 클래스 = "배지"> 예 </ SPAN> </ TD>
</ TR>
<TR>
<TD> <H3> 주간 웹 세미나 </ H3> </ TD>
<TD> <스팬 클래스 = "배지"> 없음 </ SPAN> </ TD>
<TD> <스팬 클래스 = "배지"> 없음 </ SPAN> </ TD>
<TD> <스팬 클래스 = "배지"> 예 </ SPAN> </ TD>
<TD> <스팬 클래스 = "배지"> 예 </ SPAN> </ TD>
</ TR>
<TR>
<TD> <H3> 가격 </ H3> </ TD>
<TD> <버튼 유형 = "버튼"클래스 = "btn을 BTN-경고 BTN-LG"> $ 9 / 월 </ 버튼> </ TD>
<TD> <버튼 유형 = "버튼"클래스 = "btn을 BTN-경고 BTN-LG"> $ 1019 / 월 </ 버튼> </ TD>
<TD> <버튼 유형 = "버튼"클래스 = "btn을 BTN-경고 BTN-LG"> $ 49 / 월 </ 버튼> </ TD>
<TD> <버튼 유형 = "버튼"클래스 = "btn을 BTN-경고 BTN-LG"> $ (99) / 월 </ 버튼> </ TD>
</ TR>
<TR>
<TD> </ TD>
<TD> 주문 </ 버튼> </ TD> <버튼 타입 = "버튼"클래스 = "BTN-LG-성공 BTN btn을">
<TD> </ 버튼> </ TD> 주문 <버튼 유형 = "버튼"클래스 = ""BTN-LG BTN-성공 btn을 ">
<TD> </ 버튼> </ TD> 주문 <버튼 유형 = "버튼"클래스 = ""BTN-LG BTN-성공 btn을 ">
<TD> </ 버튼> </ TD> 주문 <버튼 유형 = "버튼"클래스 = ""BTN-LG BTN-성공 btn을 ">
</ TR>
</ TBODY>
</ 테이블>
원래 CSS 파일 '테이블'과 '테이블 경계'두 클래스를 사용하여 부트 스트랩. 그러나 우리는 다르게 customize.css에서 일부 사용자 지정 CSS 파일을 추가하여 다음 표를 확인해야합니다
일 {
배경 색상 : # 428bca;
색상 : #의 ec8007;
Z- 인덱스 : 10;
텍스트 그림자 : 1 픽셀 x 1 픽셀 x 1 픽셀 #fff;
글꼴 크기 : 24 픽셀;
}
배지를 사용하여
우리는 테이블에 텍스트를 표시하는 '배지'클래스을 사용합니다. 우리는 배지 클래스 다음과 같은 사용자 정의 CSS를
.badge {
배경 색상 : # 428bca;
색상 : #fff;
글꼴 크기 : 22 픽셀;
}
이 페이지를 contact.html 페이지 위해, 우리는 customize.css에서 다른 CSS 규칙을 추가
.container> H1 {
텍스트 정렬 : 센터;
}
이 H1 중심에 있습니다.
양식을 사용하여
contact.html 파일에서, 우리는 첫 번째 열을 세 개의 열을 만들고, 우리는 양식을 삽입. 기본 스타일 시트를 사용합니다.
<Form 클래스 = "폼 수평"역할 = "양식">
<사업부 클래스 = "폼 그룹">
이메일 </ 라벨> <용 = "이메일"클래스 = "COL-LG-2 제어 레이블"레이블>
<사업부 클래스 = "COL-LG-10">
<입력 유형 = "이메일"클래스 = "폼 컨트롤"ID = "이메일"자리 = "이메일">
</ DIV>
</ DIV>
<사업부 클래스 = "폼 그룹">
이름 </ 라벨> <용 = "이름"클래스 = "COL-LG-2 제어 레이블"레이블>
<사업부 클래스 = "COL-LG-10">
<입력 유형 = "텍스트"클래스 = "폼 컨트롤"ID = "이름"자리 = "이름">
</ DIV>
</ DIV>
<사업부 클래스 = "폼 그룹">
< "국가"= 대한 레이블 클래스 = "COL-LG-2 제어 라벨"> 국가 </ 라벨>
<사업부 클래스 = "COL-LG-10">
<선택>
<옵션> 미국 </ 옵션>
<옵션> 인도 </ 옵션>
<옵션> 영국 </ 옵션>
<옵션> Autralia </ 옵션>
</ 선택>
</ DIV>
</ DIV>
<사업부 클래스 = "폼 그룹">
<= 레이블 "내림차순"클래스 = "COL-LG-2 제어 라벨"> 메시지 </ 라벨>
<사업부 클래스 = "COL-LG-10">
<텍스트 영역의 행 = "5"COLS = "50"> </ 텍스트 영역>
</ DIV>
</ DIV>
<사업부 클래스 = "폼 그룹">
<사업부 클래스 = "COL-LG-오프셋-2 COL-LG-10">
<버튼 유형 = "제출"클래스 = "btn을 BTN-기본"> 제출 </ 버튼>
</ DIV>
</ DIV>
</ FORM>
'양식 수평'클래스는 형태가 수평 정렬을 유지 할 수 있습니다. 접근의 용이성을 위해 점에 유의 역할 = "형태"를 추가하십시오. 이 새로운 기능의 버전 3.0.0입니다.
각 양식 컨트롤을 찾으려면, 부트 스트랩 3.0.0 새로운 '형태로 그룹'클래스를 사용합니다.
이 페이지에서 그리드의 두 번째 열은, 우리는 단순히 텍스트를 배치했다.
Google지도 추가
contact.html 페이지에서 그리드의 세 번째 열은, 우리는 구글지도 (Google지도)를 추가했습니다. 이를 위해 우리는 다음과 같은 태그를 사용
<사업부 아이디 = "map_canvas"> </ DIV> </ DIV>
다음 JS 헤더 안에 HTML 파일 헤더에 추가
함수 초기화 () {
VAR map_canvas = document.getElementById를 ( 'map_canvas');
var에 map_options의 = {
센터 : 새로운은 google.maps.LatLng (23.244066, 87.861276)
줌 : 8,
mapTypeId를 : google.maps.MapTypeId.ROADMAP
}
VAR지도 = 새로운 google.maps.Map (map_canvas, map_options)
}
google.maps.event.addDomListener (창 '로드', 초기화);
이전 JS 전에 말했다, 다음과 같은 스크립트 태그를 추가해야합니다
<스크립트 SRC = "http://maps.googleapis.com/maps/api/js?sensor=false"> </ script>
제대로지도를 렌더링하기 위해, 다음과 같은 스타일을 추가해야합니다 custom.css
#map_canvas {
폭 : 400 픽셀;
높이 : 400 픽셀;
}
이는 부트 스트랩 V3.0.0에 기초한 간단한 프로젝트를 생성하는 방법이다. 그러나 우리는 다음 장 더 자세히 설명 할 것, 표면을 만진.