최고의 이온 머리와 바닥 튜토리얼 2024년, 이 튜토리얼에서는 헤더 (헤더),서브 헤더 (자막),바닥 글 (아래),를 배울 수 있습니다.
헤더 조립체가 화면 상단에 고정되는 경우에는 주변의 제목 및 기능 버튼으로 포장 할 수있다.
이온 기본 색상 스타일의 많은 종류를 제공, 다른 스타일의 이름을 호출 할 수 있습니다, 물론, 당신은 사용자 정의 할 수 있습니다.
<div class="bar bar-header bar-light"> <h1 class="title">bar-light</h1> </div>
<div class="bar bar-header bar-stable"> <h1 class="title">bar-stable</h1> </div>
<div class="bar bar-header bar-positive"> <h1 class="title">bar-positive</h1> </div>
<div class="bar bar-header bar-calm"> <h1 class="title">bar-calm</h1> </div>
<div class="bar bar-header bar-balanced"> <h1 class="title">bar-balanced</h1> </div>
<div class="bar bar-header bar-energized"> <h1 class="title">bar-energized</h1> </div>
<div class="bar bar-header bar-assertive"> <h1 class="title">bar-assertive</h1> </div>
<div class="bar bar-header bar-royal"> <h1 class="title">bar-royal</h1> </div>
<div class="bar bar-header bar-dark"> <h1 class="title">bar-dark</h1> </div>
서브 헤더도이 헤더를 작성하지 않은 경우에도, 그냥이 머리글 아래 상단에 고정되어, 서브 헤더이 스타일은 거리의 상단에서 헤더가 있습니다. 헤더와 컬러 스타일.
<div class="bar bar-header"> <h1 class="title">Header</h1> </div> <div class="bar bar-subheader"> <h2 class="title">Sub Header</h2> </div>
글 여러 컨텐트 유형을 포함 할 수있는 화면의 아래쪽에있다.
<div class="bar bar-footer bar-balanced"> <div class="title">Footer</div> </div>
위의 헤더, 바 - 바닥 글을 수행하기위한 유일한 스타일 이름 바 헤더와 바닥 글.
<div class="bar bar-footer"> <button class="button button-clear">Left</button> <div class="title">Title</div> <button class="button button-clear">Right</button> </div>
바닥에는 제목이 없다,하지만 그들은 오른쪽 버튼을 필요로하는 경우 또한, 당신은 같은 풀 권리를 추가하려면 오른쪽 버튼이 필요합니다
<div class="bar bar-footer"> <button class="button button-clear pull-right">Right</button> </div>