อิออนหัวและด้านล่าง

ส่วนหัว (หัว)

ประกอบส่วนหัวถูกกำหนดไว้ที่ด้านบนของหน้าจอคุณสามารถแพ็คเช่นชื่อและฟังก์ชั่นปุ่มรอบ

เริ่มต้นอิออนให้หลายชนิดของรูปแบบสีที่คุณสามารถเรียกชื่อสไตล์ที่แตกต่างของหลักสูตรที่คุณสามารถปรับแต่ง

แถบแสง

<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>

ลอง»