โดย Patipat » 03/08/2019 5:09 pm
ในการทำปุ่ม กด ให้มีความสวยงามนั้น ก็จะไม่พ้นเรื่อง
CSSเลยครับ แต่ว่า ปุ่มที่เราทำนั้นอาจจะกำหนดด้วย class ของ bootstrap ต่าง ๆหรือว่า กำหนดด้วย css ตัวเอง แต่ในบทความนี้ผมได้ทำ
Override Template มาหนึ่ง Template นะครับ แล้วจะทำปุ่ม btn (button) โดยกำหนดคลาสจาก
bootstrap ครับ โดยเราแค่ใส่คลาส
เช่น เราทำปุ่ม <span class="btn btn-pramary"> ปุ่ม </span> ก็จะได้ปุ่ม Primary มาหนึ่งปุ่มแล้วนะครับ แต่ว่าผมได้เจอปัญหาก็คือ ใส่ class="btn btn-primaty" ไปแล้วปุ่มไม่ขึ้นเลยครับ ก็เลยอยากจะแชร์ความรู้ อาจจะเป็นแนวทางในการแก้ไขปัญหาหนึ่งก็ได้ครับ
พอผมใส่ class ในปุ่ม Delete ครับ โดยที่ยังไม่ได้แก้บัค ก็จะไม่ขึ้นภาพ ครับ
โค้ด: เลือกทั้งหมด
<a class="button-img" href = "<?php print $prod['remove_to_cart'] ?>" onclick="document.updateCart.submit(<?php print _MZC_REMOVE_TO_CART; ?>);">
<center>
<span style="font-size: 15px" class="btn btn-primary"> // class ที่ใส่ไปนะครับ class="btn btn-primary"
<i class="fa fa-shopping-cart" aria-hidden="true"></i>
</span>
</center>
</a>
- Selection_999(581).png (51.21 KiB) Viewed 1078 times
ใช้เครื่องมือ Inspector ของ Firefox หรือ Google Chrome เพื่อดูว่า ทำไมปุ่มไม่ขึ้น แล้วเราก็เจอครับ ว่า display ของ class ที่แสดงเป็น none อยู่
- Selection_999(583).png (75.53 KiB) Viewed 1078 times
หลังจากนั้นให้เราเปลี่ยน display:none; เป็น display:-webkit-inline-box; เท่านี้ปุ่มก็ขึ้นแล้วครับ
- Selection_999(584).png (88.37 KiB) Viewed 1078 times
ในการทำปุ่ม กด ให้มีความสวยงามนั้น ก็จะไม่พ้นเรื่อง[url=https://mindphp.com/%E0%B8%84%E0%B8%B9%E0%B9%88%E0%B8%A1%E0%B8%B7%E0%B8%AD/73-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3/2193-css-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3.html]CSS[/url]เลยครับ แต่ว่า ปุ่มที่เราทำนั้นอาจจะกำหนดด้วย class ของ bootstrap ต่าง ๆหรือว่า กำหนดด้วย css ตัวเอง แต่ในบทความนี้ผมได้ทำ [url=https://www.mindphp.com/%E0%B8%84%E0%B8%B9%E0%B9%88%E0%B8%A1%E0%B8%B7%E0%B8%AD/73-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3/3513-override-template-joomla.html]Override Template[/url] มาหนึ่ง Template นะครับ แล้วจะทำปุ่ม btn (button) โดยกำหนดคลาสจาก [url=https://www.mindphp.com/%E0%B8%84%E0%B8%B9%E0%B9%88%E0%B8%A1%E0%B8%B7%E0%B8%AD/73-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3/3963-bootstrap.html]bootstrap[/url] ครับ โดยเราแค่ใส่คลาส
เช่น เราทำปุ่ม <span class="btn btn-pramary"> ปุ่ม </span> ก็จะได้ปุ่ม Primary มาหนึ่งปุ่มแล้วนะครับ แต่ว่าผมได้เจอปัญหาก็คือ ใส่ class="btn btn-primaty" ไปแล้วปุ่มไม่ขึ้นเลยครับ ก็เลยอยากจะแชร์ความรู้ อาจจะเป็นแนวทางในการแก้ไขปัญหาหนึ่งก็ได้ครับ
พอผมใส่ class ในปุ่ม Delete ครับ โดยที่ยังไม่ได้แก้บัค ก็จะไม่ขึ้นภาพ ครับ
[code]<a class="button-img" href = "<?php print $prod['remove_to_cart'] ?>" onclick="document.updateCart.submit(<?php print _MZC_REMOVE_TO_CART; ?>);">
<center>
<span style="font-size: 15px" class="btn btn-primary"> // class ที่ใส่ไปนะครับ class="btn btn-primary"
<i class="fa fa-shopping-cart" aria-hidden="true"></i>
</span>
</center>
</a>[/code]
[attachment=2]Selection_999(581).png[/attachment]
ใช้เครื่องมือ Inspector ของ Firefox หรือ Google Chrome เพื่อดูว่า ทำไมปุ่มไม่ขึ้น แล้วเราก็เจอครับ ว่า display ของ class ที่แสดงเป็น none อยู่
[attachment=1]Selection_999(583).png[/attachment]
หลังจากนั้นให้เราเปลี่ยน display:none; เป็น display:-webkit-inline-box; เท่านี้ปุ่มก็ขึ้นแล้วครับ
[attachment=0]Selection_999(584).png[/attachment]