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