プログラミングの勉強 独学でも十分可能とても楽しい!毎日コツコツ!Bootstrapでウェブサイトを作る!

Programming

プログラミングの勉強 独学でも十分可能とても楽しい!毎日コツコツ!Bootstrapでウェブサイトを作る!
Bootstrapでウェブサイトを作ってみました。簡単なサイトでまだ完成していませんが、コツコツノロノロとキーを打って作ってみました。

ドットインストールの講義を聴きながらなのでまだまだ実力が伴っていませんが、ウェブサイトがこんな感じで出来上がってゆくんだという感覚が少しづつすかめてきたように思えます。

<!doctype html>
<html lang=”en”>
  <head>
    <!– Required meta TAGSs –>
    <meta charset=”utf-8″>
    <meta name=”viewport” content=”width=device-width, initial-scale=1, shrink-to-fit=no”>

    <!– Bootstrap CSS –>
    <link rel=”stylesheet” href=”https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css” integrity=”sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS” crossorigin=”anonymous”>

    <title>Hello, world!</title>
    <style>
    .cover{
      background:url(img/bg.png);
      background-size:cover;
    }
    </style>
  </head>
  <body>
    <header>
      <div class=”cover text-white text-center py-5″>
        <h1 class=”display-4 md-4″>Thailand Goods</h1>
        <a href=”” class=”btn btn-primary btn-lg”>Get It Now!</a>
      </div>
    </header>
    <main>
      <section class=”py-5″>
        <h2 class=”text-center mb-5″>Knick Knack</h2>
        <div class=”container”>
          <div class=”mb-5 row”>
            <div class=”col-sm-8″>
              <h3><FONT COLOR=”#FA5882″>cute</FONT></h3>
              <p>I can’t help stopping by those knick-knack stores when I see them.I can’t help stopping by those knick-knack stores when I see them.</p>
            </div>
            <div class=”col-sm-4″>
                <img src=”img/thaigoods1.jpg” class=”w-100 rounded-circle”>
            </div>
          </div>
          <div class=”row”>
            <div class=”col-sm-8 order-sm-2″>
              <h3><FONT COLOR=”#FA5882″>interesting</FONT></h3>
              <p>I can’t help stopping by those knick-knack stores when I see them.I can’t help stopping by those knick-knack stores when I see them.</p>
            </div>
            <div class=”col-sm-4 order-sm-1″>
              <img src=”img/thaigoods2.jpg” class=”w-100 rounded-circle”>
            </div>
          </div>
        </div>
      </section>
      <selection class=”bg-light text-center py-5″>
        <h2 class=”mb-5″>Thai Goods</h2>
        <div class=”container”>
          <table class=”table table-hover”>
          <thead>
            <tr><th>Goods A</th><th>Goods B</th></th>
            </thead>
        <tbody>
          <tr><td>Goods Aa</td><td>Goods Ba</td></tr>
          <tr><td>Goods Ab</td><td>Goods Bb</td></tr>
          <tr><td>Goods Ac</td><td>Goods Bc</td></tr>
        </tbody>
      </table>
    </div>
  </section>
  <section class=”py-5″>
    <h2 class=”mb-5 text-center”>category</h2>
    <div class=”container”>
      <ul class=”nav nav-tabs”>
        <li class=”nav-item”><a href=”#accessory” class=”nav-link active” data-toggle=”tab”>accessory</a></li>
        <li class=”nav-item”><a href=”#bag” class=”nav-link” data-toggle=”tab”>bag</a></li>
      </ul>
      <div class=”tab-content py-4″>
        <div id=”accessory” class=”tab-pane active”>
          <p>I can’t help stopping by those knick-knack stores when I see them.I can’t help stopping by those knick-knack stores when I see them.</p>
        </div>
        <div id=”bag” class=”tab-pane”>
          <p>I can’t help stopping by those knick-knack stores when I see them.I can’t help stopping by those knick-knack stores when I see them.</p>
        </div>
      </div>

    </main>
    <footer>
    </footer>
    <!– Optional JavaScript –>
    <!– jQuery first, then Popper.js, then Bootstrap JS –>
    <script src=”https://code.jquery.com/jquery-3.3.1.slim.min.js” integrity=”sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo” crossorigin=”anonymous”></script>
    <script src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js” integrity=”sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut” crossorigin=”anonymous”></script>
    <script src=”https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js” integrity=”sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k” crossorigin=”anonymous”></script>
  </body>
</html>
まだフッターが出来ていませんがこんな感じになっています。

タイトルなし

今日はここま
でではまた( ´∀`)つ

コメント

Translate »