วิธีใช้ Icons by Glyphicons ใน Bootstrap

Booststap Knowledge ความรู้สำหรับการออกเว็บเพื่อให้แสดงผล ได้ดี ทุกหน้าจอ

Moderator: mindphp, ผู้ดูแลกระดาน

M008
PHP Hero Member
PHP Hero Member
โพสต์: 109
ลงทะเบียนเมื่อ: 03/05/2013 10:44 am

วิธีใช้ Icons by Glyphicons ใน Bootstrap

โพสต์ที่ยังไม่ได้อ่าน โดย M008 »

Icons by Glyphicons คือ ส่วนที่เป็น icons ใน Bootstrap ซึ่งมีให้เลือกใช้งานมากมาย เพื่อให้ปุ่มในหน้าเว็บ หรือ บาร์ต่างๆ มีความน่าสนใจมากยิ่งขึ้น
ตัวอย่างการเรียกใช้ icons
1. ปุ่มบน toobar
1.jpg
1.jpg (5.9 KiB) Viewed 4768 times

โค้ด: เลือกทั้งหมด

<div class="btn-toolbar">
  <div class="btn-group">
    <a class="btn" href="#"><i class="icon-align-left"></i></a>
    <a class="btn" href="#"><i class="icon-align-center"></i></a>
    <a class="btn" href="#"><i class="icon-align-right"></i></a>
    <a class="btn" href="#"><i class="icon-align-justify"></i></a>
  </div>
</div>
2.บนปุ่ม dropdown
2.jpg
2.jpg (6.32 KiB) Viewed 4768 times

โค้ด: เลือกทั้งหมด

<div class="btn-group">
  <a class="btn btn-primary" href="#"><i class="icon-user icon-white"></i> User</a>
  <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
  <ul class="dropdown-menu">
    <li><a href="#"><i class="icon-pencil"></i> Edit</a></li>
    <li><a href="#"><i class="icon-trash"></i> Delete</a></li>
    <li><a href="#"><i class="icon-ban-circle"></i> Ban</a></li>
    <li class="divider"></li>
    <li><a href="#"><i class="i"></i> Make admin</a></li>
  </ul>
</div>
3.icons จะปรับขนาดตามขนาดของปุ่ม
3.jpg
3.jpg (7.85 KiB) Viewed 4768 times

โค้ด: เลือกทั้งหมด

<a class="btn btn-large" href="#"><i class="icon-star"></i> Star</a>
<a class="btn btn-small" href="#"><i class="icon-star"></i> Star</a>
<a class="btn btn-mini" href="#"><i class="icon-star"></i> Star</a>
4.Navigation
4.jpg
4.jpg (23.32 KiB) Viewed 4768 times

โค้ด: เลือกทั้งหมด

<ul class="nav nav-list">
  <li class="active"><a href="#"><i class="icon-home icon-white"></i> Home</a></li>
  <li><a href="#"><i class="icon-book"></i> Library</a></li>
  <li><a href="#"><i class="icon-pencil"></i> Applications</a></li>
  <li><a href="#"><i class="i"></i> Misc</a></li>
</ul>
อ้างอิงจาก : http://twitter.github.io/bootstrap/
ภาพประจำตัวสมาชิก
boo_kyoshii
PHP Super Member
PHP Super Member
โพสต์: 343
ลงทะเบียนเมื่อ: 02/08/2013 10:08 am

Re: วิธีใช้ Icons by Glyphicons ใน Bootstrap

โพสต์ที่ยังไม่ได้อ่าน โดย boo_kyoshii »

ทดลองทำตามค่ะ
ผลที่ได้
ผลที่ได้
icon.jpg (15.04 KiB) Viewed 4566 times
testbootstrap.zip
ไฟล์ที่ทำทั้งหมดค่ะ
(87.81 KiB) ดาวน์โหลดแล้ว 333 ครั้ง
ตอบกลับโพส
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 61