index.vue

<template>
  <div>
    <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
      <a
        class="navbar-brand"
        href="#">Pllogg</a>
      <button
        class="navbar-toggler"
        type="button"
        data-toggle="collapse"
        data-target="#navbarsExampleDefault"
        　　　aria-controls="navbarsExampleDefault"
        aria-expanded="false"
        aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"/>
        　　　　  </button>
      <div
        id="navbarsExampleDefault"
        class="collapse navbar-collapse">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a
              class="nav-link"
              href="#">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a
              class="nav-link"
              href="#">Link</a>
          </li>
          <li class="nav-item">
            <a
              class="nav-link disabled"
              href="#">Disabled</a>
          </li>
          <li class="nav-item dropdown">
            <a
              id="dropdown01"
              class="nav-link dropdown-toggle"
              href="http://example.com"
              data-toggle="dropdown"
              aria-haspopup="true"
              aria-expanded="false">Dropdown</a>
            <div
              class="dropdown-menu"
              aria-labelledby="dropdown01">
              <a
                class="dropdown-item"
                href="#">Action</a>
              <a
                class="dropdown-item"
                href="#">Another action</a>
              <a
                class="dropdown-item"
                href="#">Something else here</a>
            </div>
          </li>
        </ul>
        <form class="form-inline my-3 my-lg-0">
          <input
            class="form-control mr-sm-2"
            type="text"
            placeholder="Search"
            aria-label="Search">
          <button
            class="btn btn-outline-success my-3 my-sm-0"
            type="submit">Search</button>
        </form>
      </div>
    </nav>
    <main role="main">
      <div class="jumbotron">
        <div class="container">
          <h1 class="display-3">Pllogg Blog</h1>
          <p>Nuxt.js | Pllogg</p>
          <p><a
            class="btn btn-primary btn-lg"
            href="#"
            role="button">Learn more &raquo;</a></p>
        </div>
      </div>
      <div class="container">
        <div class="row">
          <div class="col-md-4 my-3">
            <div class="card">
              <div class="card-body">
                <h4 class="card-title">テスト記事1</h4>
                <h6 class="card-subtitle mb-2 text-muted">テスト記事1</h6>
                <p class="card-text">
                  テスト記事1テスト記事1テスト記事1テスト記事1テスト記事1テスト記事1
                </p>
                <a
                  href="#!"
                  class="card-link">Another link</a>
              </div>
            </div>
          </div>
          <div class="col-md-4 my-3">
            <div class="card">
              <div class="card-body">
                <h4 class="card-title">テスト記事1</h4>
                <h6 class="card-subtitle mb-2 text-muted">テスト記事1</h6>
                <p class="card-text">
                  テスト記事1テスト記事1テスト記事1テスト記事1テスト記事1テスト記事1
                </p>
                <a
                  href="#!"
                  class="card-link">Another link</a>
              </div>
            </div>
          </div>
          <div class="col-md-4 my-3">
            <div class="card">
              <div class="card-body">
                <h4 class="card-title">テスト記事1</h4>
                <h6 class="card-subtitle mb-2 text-muted">テスト記事1</h6>
                <p class="card-text">
                  テスト記事1テスト記事1テスト記事1テスト記事1テスト記事1テスト記事1
                </p>
                <a
                  href="#!"
                  class="card-link">Another link</a>
              </div>
            </div>
          </div>
          <div class="col-md-4 my-3">
            <div class="card">
              <div class="card-body">
                <h4 class="card-title">テスト記事1</h4>
                <h6 class="card-subtitle mb-2 text-muted">テスト記事1</h6>
                <p class="card-text">
                  テスト記事1テスト記事1テスト記事1テスト記事1テスト記事1テスト記事1
                </p>
                <a
                  href="#!"
                  class="card-link">Another link</a>
              </div>
            </div>
          </div>
          <div class="col-md-4 my-3">
            <div class="card">
              <div class="card-body">
                <h4 class="card-title">テスト記事1</h4>
                <h6 class="card-subtitle mb-2 text-muted">テスト記事1</h6>
                <p class="card-text">
                  テスト記事1テスト記事1テスト記事1テスト記事1テスト記事1テスト記事1
                </p>
                <a
                  href="#!"
                  class="card-link">Another link</a>
              </div>
            </div>
          </div>
          <div class="col-md-4 my-3">
            <div class="card">
              <div class="card-body">
                <h4 class="card-title">テスト記事1</h4>
                <h6 class="card-subtitle mb-2 text-muted">テスト記事1</h6>
                <p class="card-text">
                  テスト記事1テスト記事1テスト記事1テスト記事1テスト記事1テスト記事1
                </p>
                <a
                  href="#!"
                  class="card-link">Another link</a>
              </div>
            </div>
          </div>
        </div>
        <hr>
      </div>
    </main>
    <footer class="container">
      <p>&copy; Company 2017-2018</p>
    </footer>
  </div>
</template>