プログラミングの勉強 独学でも十分可能!Bootstrapでウェブサイトを作ってみた!

Programming

rawpixel-669604-unsplash

プログラミングの勉強 独学でも十分可能!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=”alert alert-info text-center mb-0 rounded-0 alert-dismissible fade show”>
        News!  News!  News!  News!  News!  News!  News!  News!
        <button class=”close” data-dismiss=”alert”>
          &times;
        </button>
      </div>
      <div class=”container”>
        <nav class=”navbar navbar-expand-sm navbar-light”>
          <a href=”” class=”navbar-brand”>Logo</a>
          <button class=”navbar-toggler”data-toggle=”collapse”data-target=”#menu”>
            <span class=”navbar-toggler-icon”></span>
          </button>
          <div id=”menu”class=”collapse navbar-collapse”>
          <ul class=”navbar-nav”>
            <li class=”nav-item”><a href=””class=”nav-link”>Link</a></li>
            <li class=”nav-item”><a href=””class=”nav-link”>Link</a></li>
            <li class=”nav-item”><a href=””class=”nav-link”>Link</a></li>
            <li class=”nav-item”><a href=””class=”nav-link”>Link</a></li>
            <li class=”nav-item”><a href=””class=”nav-link”>Link</a></li>
          </ul>
        </div>
      </nav>
    </div>
      <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 clas
s=”tab-content py-4″>
        <div id=”accessory” class=”tab-pane active”>
          <p>I can’t help stopping by those <span class=”font-weight-bold text-info” data-toggle=”tooltip” title=”This is awesome” data-placement=”bottom”> knick-knack </span> 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<span class=”font-weight-bold text-info” data-toggle=”tooltip” title=”This is awesome” data-placement=”bottom”> knick-knack </span>stores when I see them.I can’t help stopping by those knick-knack stores when I see them.</p>
        </div>
      </div>
    </section>
    <section class=”bg-light text-center py-5″>
      <a href=”” class=”btn btn-primary btn-lg”>Get It Now!</a>
    </section>

    </main>
    <footer class=”text-center text-muted py-4″>
      Copyright ZZZZ toshilog.site
    </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>

    <script>
    $(function() {
      ‘use strict’;
      $(‘[data-toggle=”tooltip”]’).tooltip();
    });
    </script>
  </body>
</html>

Firebaseでウェブサイトを公開してみた
試作品なのでサンプルみたいなウェブサイト
注意点
パブリックフォルダの中身が公開されるので公開したくない場合はpublicに入れないようにする!
試作品サイト

サイトをインターネット上に公開する方法ファイヤーベースを使う
ファイヤーベースのコンソールからプロジェクトを作る
プロジェクト名を作る
デスクトップ上に作ったプロジェクトと同じフォルダを作る
次にatomエディターを起動しドラックアンドドロップで作ったっフォルダを移す
atomエディタでpubulicフォルダを作ってあげるそしてhtml.indexファイルを作る

次にターミナルからファイヤーベースにログインしてあげる
firebase login リターン
プロジェクトフォルダの初期化をする CD Desktop リターン
CDでフォルダ名を入れてリターン

firebase list リターン
IDをコピー
そのあとにfirebase init リターン

そして firebase init –project=ここにコピーしたものを貼る そしてリターン

そののち、必要な項目をえらんで firebase deploy リターンとしてあげる

URLを発行してくれる

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

コメント

Translate »