vueをいじってcssもやってまーす

今日は、bootstraapをいじってみたー！！！

bootstrapのサイトでダウンロードした！！今回使ったのは、bootstrap-4.5.2-distってやつだけだったかなーあとは、yarn add bootstrapで入れた

このファイルの中の、cssとjsってファイルをpublicの中に移動した！！

index.htmlを書き換えた！！

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

参考にしたサイトデザイン知識がなくてもOK！Bootstrapの使い方【入門者向け】 | TechAcademyマガジン

about.vueをいろいろと変更

<template>
  <div class="container">
    <div class="table-responsive">
      <table class="table table-bordered">
        <thead>
          <tr>
            <th>#</th>
            <th>名前</th>
            <th>メールアドレス</th>
            <th>電話番号</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">1</th>
            <td>煌木 太郎</td>
            <td>taro.kirameki@example.com</td>
            <td>09011112222</td>
          </tr>
          <tr>
            <th scope="row">2</th>
            <td>煌木 次郎</td>
            <td>jiro.kirameki@example.com</td>
            <td>09033334444</td>
          </tr>
          <tr>
            <th scope="row">3</th>
            <td>煌木 花子</td>
            <td>hanako.kirameki@example.com</td>
            <td>09055556666</td>
          </tr>
        </tbody>
      </table>
    </div>
    <button type="button" class="btn btn-default">Default</button>
    <button type="button" class="btn btn-primary">Primary</button>
    <button type="button" class="btn btn-success">Success</button>
    <button type="button" class="btn btn-info">Info</button>
    <button type="button" class="btn btn-warning">Warning</button>
    <button type="button" class="btn btn-danger">Danger</button>
    <button type="button" class="btn btn-link">Link</button>
    <p>
      <button type="button" class="btn btn-primary btn-lg">Large button</button>
      <button type="button" class="btn btn-default btn-lg">Large button</button>
    </p>
    <p>
      <button type="button" class="btn btn-primary">Default button</button>
      <button type="button" class="btn btn-default">Default button</button>
    </p>
    <p>
      <button type="button" class="btn btn-primary btn-sm">Small button</button>
      <button type="button" class="btn btn-default btn-sm">Small button</button>
    </p>
    <p>
      <button type="button" class="btn btn-primary btn-xs">
        Extra small button
      </button>
      <button type="button" class="btn btn-default btn-xs">
        Extra small button
      </button>
    </p>
    <form>
      <div class="form-group">
        <label for="exampleInputEmail1">Email address</label>
        <input
          type="email"
          class="form-control"
          id="exampleInputEmail1"
          placeholder="Email"
        />
      </div>
      <div class="form-group">
        <label for="exampleInputPassword1">Password</label>
        <input
          type="password"
          class="form-control"
          id="exampleInputPassword1"
          placeholder="Password"
        />
      </div>
      <div class="form-group">
        <label for="exampleInputFile">File input</label>
        <input type="file" id="exampleInputFile" />
        <p class="help-block">Example block-level help text here.</p>
      </div>
      <div class="checkbox">
        <label> <input type="checkbox" /> Check me out </label>
      </div>
      <button type="submit" class="btn btn-default">Submit</button>
    </form>
  </div>
</template>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
export default {
  methods: {
    showEl: function() {
      console.log(this.$el);
    }
  }
};
</script>