อิออนหัวและด้านล่าง
ส่วนหัว (หัว)
ประกอบส่วนหัวถูกกำหนดไว้ที่ด้านบนของหน้าจอคุณสามารถแพ็คเช่นชื่อและฟังก์ชั่นปุ่มรอบ
เริ่มต้นอิออนให้หลายชนิดของรูปแบบสีที่คุณสามารถเรียกชื่อสไตล์ที่แตกต่างของหลักสูตรที่คุณสามารถปรับแต่ง
แถบแสง
<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>
บาร์-Royal
<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>
ส่วนหัว sub (คำบรรยาย)
ย่อยหัวนอกจากนี้ยังได้รับการแก้ไขที่ด้านบนด้านล่างของส่วนหัวก็คือแม้ว่านี้ไม่ได้เขียนหัวตำบลหัวสไตล์นี้ยังมีส่วนหัวจากด้านบนของระยะทางที่ สไตล์สีกับส่วนหัว
<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>