app list

app/apps.component.css

 :host {
     /*background-color: darkslategray;*/
-
     width: 280px;
-
     flex-shrink: 0;
     overflow-y: auto;
+    background-color: #f5f5f5;
+    border-right: 1px solid #eee;
 }
 
-.list-group-item {
-    border-radius: initial;
+a {
+    display: block;
+    padding: 10px 20px 10px 20px;
 }
+
+.active {
+    background-color: #428bca;
+}
+
+.active > a {
+    color: #fff;
+}
\ No newline at end of file

app/apps.component.html

-<div class="list-group">
-    <!--
-    <a href="#" class="list-group-item active">游戏王</a>
-    <a href="#" class="list-group-item list-group-item-action">绯想天</a>
-    <a href="#" class="list-group-item list-group-item-action disabled">永远消失的幻想乡</a>
-    -->
-    <a *ngFor="let app of apps"
-       (click)="selectApp(app.id)"
-       href="#"
-       class="list-group-item list-group-item-action"
-       [ngClass]="{active: app.id==routingService.app}"
+<ul class="nav nav-sidebar">
+    <li *ngFor="let app of apps" [class.active]="app.id==routingService.app"><a
+            (click)="selectApp(app.id)"
+            href="#"
     >
         {{app.name[app.locales[0]]}}
-    </a>
-</div>
\ No newline at end of file
+    </a></li>
+</ul>
+<!--<ul class="nav nav-sidebar">
+    <li><a href="">Nav item</a></li>
+    <li><a href="">Nav item again</a></li>
+    <li><a href="">One more nav</a></li>
+    <li><a href="">Another nav item</a></li>
+    <li><a href="">More navigation</a></li>
+</ul>
+<ul class="nav nav-sidebar">
+    <li><a href="">Nav item again</a></li>
+    <li><a href="">One more nav</a></li>
+    <li><a href="">Another nav item</a></li>
+</ul>-->
+
+
+<!--<div class="list-group">
+
+</div>-->
\ No newline at end of file