增加bootstrap样式

randyou · randyou · commit 1d80b921b0b6 · 2017-04-23T17:13:14.000+08:00
diff --git a/index.html b/index.html
@@ -1,11 +1,16 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <title>notesapp</title>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-  </head>
-  <body>
-    <div id="app"></div> 
-  </body>
+
+<head>
+  <title>notesapp</title>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
+    crossorigin="anonymous">
+</head>
+
+<body>
+  <div id="app"></div>
+</body>
+
 </html>
diff --git a/src/components/NotesList.vue b/src/components/NotesList.vue
@@ -2,8 +2,8 @@
     <div id="notesList">
         <h2>NOTES | COLIGO</h2>
         <div id="notesButton">
-            <button v-bind:class="{active:show === 'all'}" v-on:click="showAll">All Notes</button>
-            <button v-bind:class="{active:show === 'favorites'}" v-on:click="showFavorites">Favorites</button>
+            <button class="btn btn-default" v-bind:class="{active:show === 'all'}" v-on:click="showAll">All Notes</button>
+            <button class="btn btn-default" v-bind:class="{active:show === 'favorites'}" v-on:click="showFavorites">Favorites</button>
         </div>
         <div id="listContainer">
             <div v-on:click="updateActiveNote(note)" class="g" v-bind:class="{active:activeNote === note}" v-for="note in filterNotes">
diff --git a/src/components/Toolbar.vue b/src/components/Toolbar.vue
@@ -1,8 +1,8 @@
 <template>
     <div id='toolbar'>
-        <div v-on:click="addNote">add</div>
-        <div v-bind:class="{favorite:favorite}" v-on:click="toggleFavorite">favorite</div>
-        <div v-on:click="deleteNote">delete</div>
+        <div class="glyphicon glyphicon-plus" v-on:click="addNote"></div>
+        <div class="glyphicon" v-bind:class="{'glyphicon-star-empty':!favorite,'glyphicon-star':favorite}" v-on:click="toggleFavorite "></div>
+        <div class="glyphicon glyphicon-remove" v-on:click="deleteNote "></div>
     </div>
 </template>
 
@@ -36,10 +36,14 @@ export default {
     height: 100%;
     flex-direction: column;
     background-color: #30414D;
-    color: #767676;
+    color: darkcyan;
 }
 
-.favorite {
-    color: red;
+#toolbar div {
+    font-size: 30px;
+    margin: 35px 0px 0px 25px;
+    cursor: pointer;
+    opacity: 0.8;
+    transition: opacity 0.5s ease;
 }
 </style>
