46
46
< div class ="page-header ">
47
47
< h1 > Contact List < small > Bean Validation Example</ small > </ h1 >
48
48
</ div >
49
- < div class ="span3 ">
49
+ < div class ="col-md-3 ">
50
50
< form >
51
51
< fieldset >
52
52
< 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 >
56
56
< 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 >
61
61
</ ul >
62
62
</ 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 >
65
65
</ div >
66
66
</ fieldset >
67
67
</ form >
68
68
< form >
69
69
< fieldset >
70
70
< 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 >
73
73
< input type ="text " placeholder ="Name " ng-model ="contact.fullName " null-if-empty />
74
74
</ 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 >
77
77
< input type ="text " placeholder ="Email " ng-model ="contact.email " null-if-empty />
78
78
</ 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 >
81
81
< input type ="text " placeholder ="Phone " ng-model ="contact.phone " null-if-empty />
82
82
</ div >
83
83
< button class ="btn " type ="submit " ng-click ="addContact() "> Add</ button >
@@ -86,16 +86,16 @@ <h1>Contact List <small>Bean Validation Example</small></h1>
86
86
< form >
87
87
< fieldset >
88
88
< 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 >
90
90
</ fieldset >
91
91
</ form >
92
92
</ 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 ">
95
95
< button type ="button " class ="close " ng-click ="clearErrors() "> ×</ button >
96
96
< h4 > Errors! (HTTP {{httpStatus}})</ h4 >
97
97
< br />
98
- < ul class ="unstyled ">
98
+ < ul class ="list- unstyled ">
99
99
< li ng-repeat ="error in errors "> {{error.path}} - {{error.message}}</ li >
100
100
</ ul >
101
101
</ div >
@@ -118,7 +118,7 @@ <h4>Errors! (HTTP {{httpStatus}})</h4>
118
118
< td > {{contact.fullName}}</ td >
119
119
< td > {{contact.email}}</ td >
120
120
< 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 >
122
122
</ tr >
123
123
</ tbody >
124
124
</ table >
0 commit comments