이 기사의 주요 목적을 통해 Twitter Bootstrap을 사용하여 20 분 이내에 사이트를 만드는 법을 배울 수 있습니다. 사이트를 구축하는 방법은 다음과 같습니다.
가장 먼저 할 말은 Twitter Bootstrap 이 매우 우수한 프론트 엔드 오픈 소스 프레임 워크라는 것입니다. 모든 주요 그룹에 대한 상세한 사용 사례를 제공하여 복사 및 붙여 넣기를 통해 디자인에 쉽게 부착 할 수 있습니다.
기본 HTML 템플릿
필요한 부트 스트랩 파일을 포함 할 수 있도록 기본 HTML 템플릿을 사용해야합니다. 다음은 Twitter Bootstrap 프로젝트의 시작 부분입니다.이 코드를 파일에 복사하고 INDEND.HTML의 이름을 지정하십시오.
<! doctype html> <head> <title> Twitter bootstrap 튜토리얼 - 응답 레이아웃 튜토리얼 </title> <Style type = 'text/css'> body {background -color : #ccc; } </style> </head> <body> </body> </html>이 코드에서는 페이지의 배경을 밝은 회색으로 만들기 위해 일부 CSS를 추가했습니다.이 방법으로 디자인에서 다른 열을 쉽게 볼 수 있기 때문에 이해하기 쉽습니다.
트위터 부트 스트랩 파일을 소개하십시오
Twitter bootstrap을 사용하려면 템플릿에 파일 만 소개하면됩니다. 파일을 소개하는 방법에는 여러 가지가 있습니다. 이러한 방법을 알고 싶다면 관련 문서를 참조하십시오.
이 튜토리얼의 시작점을 기반으로 파일을 다운로드하지 않고 CDN을 통해 Bootstrap-Combined.min.css 파일을 소개합니다.
코드 사본은 다음과 같습니다. href = "http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css"rel = "Stylesheet">
Twitter Bootstrap CSS는 템플릿에서 시행됩니다.
트위터 부트 스트랩의 컨테이너
부트 스트랩의 컨테이너 클래스는 매우 유용합니다. 페이지에 중앙 영역을 생성 한 다음 다른 위치의 내용을 내부에 넣을 수 있습니다. 컨테이너 클래스는 정적 너비와 매기 값이있는 중앙 DIV 상자를 만드는 것과 같습니다. Twitter 부트 스트랩의 컨테이너 클래스의 장점은 반응이 좋으며 실제 목적으로 현재 화면 너비를 기준으로 가장 좋은 너비를 계산한다는 것입니다.
본체 태그에서 컨테이너 클래스를 사용하여 div를 만듭니다. 페이지의 다른 코드의 메인 외부 래퍼 역할을합니다.
이 div의 높이를 조정하고 배경색을 흰색으로 설정하면 나타나는 효과는 다음과 같습니다.
제목 및 탐색
추가 HTML 코드를 추가 할 장소가 있으므로 제목 텍스트를 추가 한 다음 사이트의 기본 탐색 표시 줄을 만들 수 있습니다.
컨테이너 클래스의 div 태그에 선택한 텍스트 나 텍스트를 추가하십시오.
<H1> 트위터 부트 스트랩 튜토리얼 </h1>
지금은 새로운 것이 많지 않습니다. 제목 일뿐입니다. Twitter Bootstrap Navigation의 더 흥미로운 측면으로 이동합시다.
부트 스트랩에는 다양한 내비게이션 요소를 만들 수있는 NAV 클래스가 있습니다. H1 태그 다음에 다음 코드를 추가 할 수 있습니다.
<div class = 'navbar navbar inverse'> <div class = 'nav-collapse'style = "높이 : auto;"> <ul> <li> a href = "#"> home </a> </a> </li> <li> <a href = "#"> Page One </a> </li> <li> <a href = "#"> page </li>>>/li>>
Navbar 관련 클래스에는 내비게이션 바의 모든 스타일이 있습니다. Navbar Inverse 클래스를 추가하면 멋진 검은 색 스타일이 적용됩니다. 이는 Twitter 부트 스트랩의 일반적인 조합입니다. 이 스타일을 확장하여 고유 한 내비게이션을 만드는 것이 좋습니다. 그러나이 자습서에서는 여전히 기본 부트 스트랩 스타일을 사용합니다.
클래스 Navbar가있는 div에서 우리는 클래스 Nav-Collapse와 함께 또 다른 div를 추가하고 Inline Style Height : Auto; 이 페이지는이 페이지의 폭이 970px 미만인 브라우저 창에있을 때 압축 스위치 뷰를 제공 할 것이라고 Bootstrap에 알려줍니다.
index.html 파일을 저장하고 브라우저에서 열면 그림과 같이 브라우저 창의 너비를 조정할 때이 변경 사항을 볼 수 있습니다.
979px보다 큰 :
979px 미만 :
또한 HTML 이외의 목록 요소에 NAV 클래스를 추가하여 부트 스트랩 CSS 파일에서 더 많은 스타일을 적용하거나 "홈"목록 항목에 활성 클래스를 추가 할 수 있습니다.
Bootstrap Navigation에 관한 멋진 기사를 공유하십시오 : "매일 Bootstrap으로 배워야하는 탐색", "매일 Bootstrap으로 배워야하는 내비게이션"
주요 내용 및 사이드 바
우리는 사이트의 주요 탐색을 완료했으며 이제 더 많은 링크 나 탐색 경로를 지원하기 위해 기본 컨텐츠 영역과 사이드 바를 추가해야합니다. 내비게이션 바에 다음 코드를 추가하십시오.
<div id = 'content'class = 'row-fluid'> <div class = 'span9 main'> <h2> 주요 컨텐츠 섹션 </h2> </div> <div class = 'span3 sidebar'> <h2> sidebar </div> </div>
이것이 바로 Bootstrap의 래스터 시스템에 대해 이해해야 할 것입니다. 물론 공식 부트 스트랩 문서는 더 자세한 내용을 다루지 만 기본부터 시작하여 더 잘 이해할 수 있습니다.
래스터 시스템은 12 열 레이아웃을 사용하므로 페이지를 12 개의 동일한 열로 분할 할 수 있습니다. 공식 부트 스트랩 문서에서 얻은 다음 그림은 좋은 디스플레이를 제공합니다.
내비게이션 바에 방금 붙여 넣은 코드에서 Span9와 Span3이라는 클래스를 볼 수 있습니다. 페이지를 왼쪽의 9 개의 열 중 두 부분으로 나누고 오른쪽의 3 개의 열로 나뉘어 컨텐츠 영역과 사이드 바가 형성됩니다. 래스터 시스템을 사용하는 것 중 하나는 창 너비를 기준으로 열의 너비를 동적으로 계산하므로 화면 해상도에서 사이트를 작동시키기 위해 미디어 쿼리를 작성할 필요가 없다는 것입니다.
스팬 수를 변경하고 브라우저 크기를 조정하여 효과를 관찰 할 수 있습니다. 콘텐츠 영역이 724px 미만인 경우이 열은 수직으로 쌓입니다.
이제 우리는 메인 컨텐츠 영역에 H2 태그 뒤에 다음 텍스트 나 다른 텍스트를 넣습니다.
코드를 다음과 같이 복사하십시오. Ut Wisi enim ad 최소 Veniam, Quis nostrud 운동 Sta Ullamcorper Suscipit lobortis nisl ut aliquip ea commodo 결과. velit esse mulestie 결과, velul dolore eu feugiat nulla nulla vero et accumsan et iusto dignissim qui blandit guiltit lumtatum zzril delenit augue duis dolore te feugait nulla nulla hendio didissim quugait nulla nulla hendio didissim quugait nulla nulla hendio didissim quugait nulla. Nam Liber Temp Soluta nobis eleifend 옵션 congue nihil nihil im
<p> typi 비 습관 클라리 티 테타 im insitam; iis qui의 escus legitis는 eorum clariitatem을 제시합니다. 조사 결과 Clariitres Legende Me Lius Quod II Legunt Saepius. Claritas est etiam process dynamicus, qui equencer mutationem consuetudium legorum. mirum est는 quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum 형식 Seacula quarta decima et quinta decima 당 인간화 형식. eodem modo typi, qui nunc nobis videntur parum clari, futurum의 약탈자 Sollemnes. </p>
이제 사이트는 다음과 같이 표시됩니다.
사이드 바 탐색
Twitter bootstrap이 우리에게 제공하는 모든 탐색 요소 (twitter.github.com/bootstrap/components.html#navs)를 볼 수 있습니다.
수직 탭을 사용하여 추가 내비게이션 영역을 만듭니다. 다음 코드를 사이드 바의 H2 태그에 복사하여 붙여 넣습니다.
<ul> <li> <a href = '#'> 다른 링크 1 </a> </li> <li> <a href = '#'> 다른 링크 2 </a> </li> <li> <a href = '#'> 다른 링크 3 </a> </li> </ul>
이것은 간단한 디스플레이입니다! 위의 코드는 문자 그대로 클래스 Nav-TAB 및 NAV 스택이있는 순서가없는 목록이지만 우리를위한 탐색 패널을 만듭니다.
최종 효과를 살펴보면 Twitter Bootstrap을 기반으로 한 페이지가 완료되었습니다.
이 튜토리얼을 읽은 후에는 부트 스트랩을 사용하여 기본 반응 형 레이아웃 페이지를 만들고 그리드 시스템을 이해하며 부트 스트랩을 사용하여 탐색, 탐색 막대 및 반응 형 디자인의 기본 사항을 이해할 수 있어야합니다.
부트 스트랩에 대한 더 많은 내용은 특별 주제에서도 찾을 수 있습니다 : "Bootstrap Learning Tutorial"
위의 모든 것은 Twitter 부트 스트랩을 사용하는 데 필요한 지식입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 더 많은 시간을 보내고 완벽하게 만들 수 있기를 바랍니다. 가까운 시일 내에 부트 스트랩 전문가가 될 수 있습니다.