0_bootstrap case
start from scratch, 처음부터 차근차근 시작한다는 의미
Container
bootstrap은 jquery와 css에 기반하므로 관련 파일들을 html에 포함해야 한다.
헤드에 css 파일 추가, 하단에 jquery와 bootstrap.js을 순서지켜서 추가한다.
<div>..</div>로 둘러싸고 속성으로 class=“container”를 삽입한다.
<div class=“container”>…</div>가 된다.
Jumbotron
Jumbotron은 강조를 위한 영역 설정(그레이박스 및 커진 글씨체로 나타남)에 사용.
<div>의 속성에 class=“jumbotron” 추가
Button
버턴을 추가할 때(다른 형식도 비슷함) 속성 표시에 같은 단어가 두 번을 반복해서 나타남.
class = “btn btn-default”처럼 btn btn-…형태임. 따라서,
<button type=“button” class=“btn btn-default”> Text </button> 또는
<a href=“#” class=“btn btn-info btn-lg>Search</a> 등으로 링크 연결 버턴에 사용한다.
btn-default, btn-info, btn-warning,..등의 다양한 버턴이 있고 색 차이로 용도 표시.
btn-xs, btn-sm, btn-md, btn-lg 등으로 버턴 크기를 설정
Glyphicon, 상형문자
속성 표기에는 위와 비슷하게 같은 단어가 두번 표시됨.
class=“glyphicon glyphicon-print” 는 프린트모양 상형문자 추가
보통 <span>태그를 사용하여 속성으로 추가하면 된다.
위의 Search 단어 앞에다 추가하면
<a href=“#” class=“btn btn-info btn-lg”>
<span class=“glyphicon glyphicon-search”></span> Search</a>
*span 태그는 자체로는 아무일도 하지 않으나, 한 문장 단위에서 css 스타일 지정에 사용
Multicolumn
줄(row)과 칸(column)이 있으며, 각각의 설정이 필요하다.
한 줄 설정은 class=“row” 속성으로 <div>태그로 둘러쌈.
줄 내의 칸은 class=“col-xs-3” 등으로 사용. 전체 칸은 항상 12개이므로 개별 칸을 합쳤을 때 12가 되어야 함.
칸 폭은 xs, sm, md, lg 등으로 적용 기기에 따라 나누어 짐
<div class=“row></div>로 먼저 한 줄을 둘러 싼다. 이 안에 칸에 대한 것을 넣음. 예를 들면, <div class=“col-sm-4>문자 문자 ..</div> 는 4칸 짜리 설정이므로 이런 것이 3개가 들어가면 12가 된다.
Menu
html 자체가 가지는 기본 메뉴는 다음과 같다
<ul>
<li> <a href=“#”>Home </a></li>
<li> <a href=“#”>Menu 1</a></li>
<li> <a href=“#”>Menu 2</a></li>
</ul>
여기에 클래스를 추가한다. <ul class=“nav nav-tabs“>이다. 속성에 nav가 두 번 들어 갔다. nav-tabs외에 nav-pills(알약 디자인처럼 나열 표시하는 형식)의 두 가지 타입이 있다.
또 <li>탭에 class=“active”를 주면 화면 표시 때에 그 메뉴가 선택 됨.
메뉴 밑에 부 메뉴도 가능한데, 부메뉴 추가할 메뉴를 고르고 그 아래에 <li class=“dropdown”>을 사용한다.
<span class=“caret”>도 사용하는데 부메뉴 존재를 나타내는 펼침 표기인 삼각형 표시이다.
Navigation bar
페이지의 상단에 고정되어 있는 방향 바이다.
<nav class=“navbar navbar-default”> </nav>로 둘러싼다.
nav는 html5의 태그 중의 하나이다.
navbar-default 대신에 navbar-inverse를 사용하면 배경 값이 역으로 되어 색다른 디자인이 됨.
navbar-fixed-top(bottom)를 추가하면 화면 부분이 아래위로 스크롤되어도 navbar는 스크롤 안되고 상단에(하단에) 고정되는 효과를 가지게 할 수 있다.
navbar-right는 메뉴를 오른쪽 끝 단에 고정.
<ul class=“nav navbar-nav navbar-right>…</ul>처럼 사용 가능
class=“nav navbar-header”와 class=“nav navbar-nav”속성을 사용한다.
접을수 있는 방향 바를 만들기 위해서는 navbar-header 부분 수정
<div class=“nav navbar-header>
<button type=“button” class=“navbar-toggle” data-toggle=“collapse” data-target=“#myNavBar”>
<span class=“icon-bar”></span>
<span class=“icon-bar”></span>
<span class=“icon-bar”></span>
</button>
toggle은 토글된다는 의미, collapse는 접을 수 있음을 의미한다.
#이 붙은 것은 id표시고, 하단에 id가 myNavBar인 부분과 연동.
icon-bar는 줄 표시가 3개가 있고, 화면이 좁을 때는 메뉴대신에 줄 3개가 표시됨.
참고 할 만한 사이트
댓글 없음:
댓글 쓰기