การใช้ Bootstrap ร่วมกับ AngularJS

Bootstrap คือ CSS Framework หรือ หลายๆคนชอบเรียกกันว่า (Front-End Framework) เป็น Library หรือชุดคำสั่งสำเร็จรูปของ ภาษา CSS โดยความสามารถหลักๆของ Bootstrap นั้นก็มีมากมาย เช่น 

• CSS ที่รวมคำสั่งการใช้ CSS พื้นฐานต่างๆและยังมีส่วนของ Grids System ซึ่งช่วยให้เราทำการจัด Layout เว็บไซต์ได้อย่างง่ายขึ้น
• Components เป็นชุดคำสั่งสำหรับใช้ในการตกแต่งหน้าเว็บของเรามี class ช่วยเหลือต่างๆมากกมาย
• JavaScript และ Jquery ส่วนนี้จะเป็นการใช้งานร่วมกับ JavaScript และ Jquery โดยจะมีส่วนลูกเล่นต่างๆมากมายไม่ว่าจะเป็น Modal , Dropdown , Collapse อื่นๆ

จากความสามารถดังกล่าวเรานำเอา Bootstrap มาใช้ร่วมกับ AngularJS ได้ครับ เพื่อลดระยะเวลาการพัฒนาโปรแกรม ในบทความนี้จะเอาโคดตัวอย่างบทความก่อนหน้านั้นเรื่อง การใช้ Ajax ใน AngularJS มาปรับใช้ โดยลบโคดในส่วนของ Style และเพิ่ม stylesheet ของ Bootstrap ใน Header นะครับ

อ้างอิง url จากเว็บ http://getbootstrap.com/getting-started/#download-cdn
ตัวอย่าง

    
AngularJS Sample Application
    

    
    

    

    

        

            

                
Name
                
City
                
Country
                
Edit
            
            

                
{{ customer.Name }}
                
{{ customer.City }}
                
{{ customer.Country }}
                

                    
                
            
        
    

ผลลัพธ์

About Nop

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.