Merge pull request #11 from azuki774/use-default-bs

通常のbootstrapを使うようにする

components/History.vue

@@ -25,8 +25,8 @@ recordList.value = data
 </script>
 
 <template>
-  <container>
-    <table class="table">
+  <div class="container-sm">
+    <table class="table table-striped table-sm">
       <thead>
         <tr>
           <th>ID</th>
@@ -46,5 +46,5 @@ recordList.value = data
         </tr>
       </tbody>
     </table>
-  </container>
+  </div>
 </template>

components/PostRecord.vue

@@ -46,29 +46,24 @@ const postButton = async (): Promise<void> => {
 </script>
 
 <template>
-  <container>
-    <Row justify-content="md-center">
-      <Col col="md-auto">
-      <BFormSelect v-model="selector" margin="b-4">
-        <b-option v-for="category in categoryList" :key="category.category_id">
-          {{ category.category_name }}
-        </b-option>
-      </BFormSelect>
-      </Col>
+  <div class="container text-center">
+    <div class="row justify-content-center">
+      <div class="col-2">
+        <select v-model="selector" class="form-select">
+          <option v-for="category in categoryList" :key="category.category_id">
+            {{ category.category_name }}
+          </option>
+        </select>
+      </div>
 
-      <Col col="md-auto">
-      <BFormFloating margin="b-2">
-        <BFormInput v-model="priceBox" type="number" placeholder="[email protected]" />
-        <BFormLabel for="floatingInput">
-          Price
-        </BFormLabel>
-      </BFormFloating>
-      </Col>
-    </Row>
+      <div class="col-2 mb-3">
+        <input v-model="priceBox" type="number" placeholder="Value" />
+      </div>
+    </div>
 
-    <Col display="grid" gap="2" margin="x-auto" col="6">
-    <b-button button="primary" size="lg" @click="postButton" name="postButton" class="sendbutton"
-      type="submit">Post</b-button>
-    </Col>
-  </container>
+    <div class="d-grid col-2 mx-auto">
+      <button class="btn btn-primary" @click="postButton" name="postButton" type="submit">Post</button>
+    </div>
+
+  </div>
 </template>