4646            < div  class ="page-header "> 
4747                < h1 > Contact List < small > Bean Validation Example</ small > </ h1 > 
4848            </ div > 
49-             < div  class ="span3 "> 
49+             < div  class ="col-md-3 "> 
5050                < form > 
5151                    < fieldset > 
5252                        < legend > Search</ legend > 
53-                         < div  class ="input-prepend input-append "> 
54-                             < div  class ="btn-group " ng-class ="{open: !searchCollapse} "> 
55-                                 < button  class ="btn dropdown-toggle " ng-click ="searchCollapse=!searchCollapse "> < i  class ="icon -{{searchIcon}} "> </ i >  < span  class ="caret "> </ span > </ button > 
53+                         < div  class ="btn-group btn-group btn-group-sm "  role =" group "> 
54+                             < div  class ="btn-group btn-group-sm  " ng-class ="{open: !searchCollapse} "> 
55+                                 < button  class ="btn dropdown-toggle " ng-click ="searchCollapse=!searchCollapse "> < i  class ="glyphicon glyphicon -{{searchIcon}} "> </ i >  < span  class ="caret "> </ span > </ button > 
5656                                < ul  class ="dropdown-menu "> 
57-                                     < li > < a  ng-click ="changeSearchType('name') "> < i  class ="icon -user "> </ i >  Name</ a > </ li > 
58-                                     < li > < a  ng-click ="changeSearchType('email') "> < i  class ="icon -envelope "> </ i >  Email</ a > </ li > 
59-                                     < li > < a  ng-click ="changeSearchType('phone') "> < i  class ="icon -home "> </ i >  Phone</ a > </ li > 
60-                                     < li > < a  ng-click ="changeSearchType('unknown') "> < i  class ="icon -question-sign "> </ i >  Invalid</ a > </ li > 
57+                                     < li > < a  ng-click ="changeSearchType('name') "> < i  class ="glyphicon glyphicon -user "> </ i >  Name</ a > </ li > 
58+                                     < li > < a  ng-click ="changeSearchType('email') "> < i  class ="glyphicon glyphicon -envelope "> </ i >  Email</ a > </ li > 
59+                                     < li > < a  ng-click ="changeSearchType('phone') "> < i  class ="glyphicon glyphicon -home "> </ i >  Phone</ a > </ li > 
60+                                     < li > < a  ng-click ="changeSearchType('unknown') "> < i  class ="glyphicon glyphicon -question-sign "> </ i >  Invalid</ a > </ li > 
6161                                </ ul > 
6262                            </ div > 
63-                             < input  class ="span2 " type ="text " ng-model ="searchValue " /> 
64-                             < button  class ="btn " type ="button " ng-click ="search() "> < i  class ="icon -search "> </ i > </ button > 
63+                             < input  class ="col-md-7 " type ="text " ng-model ="searchValue " /> 
64+                             < button  class ="btn " type ="button " ng-click ="search() "> < i  class ="glyphicon glyphicon -search "> </ i > </ button > 
6565                        </ div > 
6666                    </ fieldset > 
6767                </ form > 
6868                < form > 
6969                    < fieldset > 
7070                        < legend > Add Contact</ legend > 
71-                         < div  class ="input-prepend  "> 
72-                             < span  class ="add-on "> < i  class ="icon -user "> </ i > </ span > 
71+                         < div  class ="input-group  "> 
72+                             < span  class ="input-group-addon "> < i  class ="glyphicon glyphicon -user "> </ i > </ span > 
7373                            < input  type ="text " placeholder ="Name " ng-model ="contact.fullName " null-if-empty  /> 
7474                        </ div > 
75-                         < div  class ="input-prepend  "> 
76-                             < span  class ="add-on "> < i  class ="icon -envelope "> </ i > </ span > 
75+                         < div  class ="input-group  "> 
76+                             < span  class ="input-group-addon "> < i  class ="glyphicon glyphicon -envelope "> </ i > </ span > 
7777                            < input  type ="text " placeholder ="Email " ng-model ="contact.email " null-if-empty  /> 
7878                        </ div > 
79-                         < div  class ="input-prepend  "> 
80-                             < span  class ="add-on "> < i  class ="icon -home "> </ i > </ span > 
79+                         < div  class ="input-group  "> 
80+                             < span  class ="input-group-addon "> < i  class ="glyphicon glyphicon -home "> </ i > </ span > 
8181                            < input  type ="text " placeholder ="Phone " ng-model ="contact.phone " null-if-empty  /> 
8282                        </ div > 
8383                        < button  class ="btn " type ="submit " ng-click ="addContact() "> Add</ button > 
@@ -86,16 +86,16 @@ <h1>Contact List <small>Bean Validation Example</small></h1>
8686                < form > 
8787                    < fieldset > 
8888                        < legend > Refresh</ legend > 
89-                         < button  class ="btn " type ="submit " ng-click ="refresh() "> < i  class ="icon -refresh "> </ i >  Refresh</ button > 
89+                         < button  class ="btn " type ="submit " ng-click ="refresh() "> < i  class ="glyphicon glyphicon -refresh "> </ i >  Refresh</ button > 
9090                    </ fieldset > 
9191                </ form > 
9292            </ div > 
93-             < div  class ="span9 "> 
94-                 < div  ng-show ="errors[0] " class ="alert alert-error  "> 
93+             < div  class ="col-md-9 "> 
94+                 < div  ng-show ="errors[0] " class ="alert alert-danger  "> 
9595                    < button  type ="button " class ="close " ng-click ="clearErrors() "> ×</ button > 
9696                    < h4 > Errors! (HTTP {{httpStatus}})</ h4 > 
9797                    < br /> 
98-                     < ul  class ="unstyled "> 
98+                     < ul  class ="list- unstyled "> 
9999                        < li  ng-repeat ="error in errors "> {{error.path}} - {{error.message}}</ li > 
100100                    </ ul > 
101101                </ div > 
@@ -118,7 +118,7 @@ <h4>Errors! (HTTP {{httpStatus}})</h4>
118118                            < td > {{contact.fullName}}</ td > 
119119                            < td > {{contact.email}}</ td > 
120120                            < td > {{contact.phone}}</ td > 
121-                             < td > < a  ng-click ="removeContact(contact.id) "> < i  class ="icon -trash "> </ i > </ a > </ td > 
121+                             < td > < a  ng-click ="removeContact(contact.id) "> < i  class ="glyphicon glyphicon -trash "> </ i > </ a > </ td > 
122122                        </ tr > 
123123                    </ tbody > 
124124                </ table > 
0 commit comments