今回は僕がIT留学中に授業でBootstrapを使ったので

実際にBootstrapで作ったものを披露していきたいです。

Bootstrapで何ができるのか気になる方

記事を読むとBootstrapでの作品が見れる

初心者のBootstrapのポートフォリオ

Bootstrapで何ができるのか気になる方

Bootstrap は、スマートフォンなどのモバイル端末にも対応し、レスポンシブデザインを採用した HTML, CSS,

JavaScript フレームワークです。

  • Twitter 社で開発されました。
  • 最初は「Twitter Bootstrap」と呼ばれていましたが、現在は「Bootstrap」となりました。
  • スマートフォン、タブレット、デスクトップなどの画面の広さに応じて、横並びを縦並びにしたり、狭い画面ではサイドバーを表示しないなどを自動的に調整しすることができる。

Bootstrap作品ログインの画面

・ログインの画面

https://sosotake.com/Bootstrap/day2.2.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" 
    integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
    <div class="container" style="height: 100vh;">
        
        <div class="card w-50 mx-auto mt-5 text-center">
            <div class="card-header bg-danger text-light">
                <h6 class="display-4">
                    Logine Here
                </h6>
            </div>
            
            <div class="card-body">
                <form action="" method="post">
                    <div class="form-group">
                        <label for="">Enter Username</label>
                        <input type="text" name="username"placeholder="Enter Email" class="form-control">
                        <label for="">Enter Password</label>
                        <input type="password" name="password" class="form-control">
                        <br>
                        <button type="submit" class="btn btn-success btn-block">Login</button>
                        <!-- <br> -->
                        <!-- <br> -->
                        <!-- <button type="submit" class="btn btn-success">Login</button> -->
                        <!-- <br> -->
                        <button type="submit" class="btn btn-outline-success btn-block">Login</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</body>
</html>

Bootstrap作品テーブル

sosotake.xsrv.jp/Bootstrap/day2.3.php

<!doctype html>
<html lang="en">
  <head>
    <title>Title</title>
    <!-- Required meta tags -->
    <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.3.1/css/bootstrap.min.css" 
    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
  </head>
  <body>
      <nav class="navbar navbar-expand-lg navbar-dark bg-primary justify-content-between">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link" href="mainpage.php">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="tweet.php">Tweet</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="watch.php">Watch</a>
          </li>          
        </ul>
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link" href="login.php">Log in</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" name="logout" href="logout.php">Log out</a>
          </li>         
          <li class="nav-item">
            <a class="nav-link" name="logout" href="Register.php">Register</a>
          </li>
                

Bootstrap作品登録画面

・登録画面

sosotake.xsrv.jp/Bootstrap/Register.php

<!doctype html>
<html lang="en">
  <head>
    <title>Title</title>
    <!-- Required meta tags -->
    <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.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  </head>
  <body>
        <div class="container bg-warning">
            <form action="../userAction.php" method="post"> /can delite action

            <div class="card-header text-center mt-5">
                 <h1>Register</h1>
            </div>
                <div class="header-body mt-5">
                    <div class="form-group">
                        <div class="row">
                            <div class="col-6">
                                <label for="">First name</label>
                                <input type="text" name="firstname" class="form-control" id="" placeholder="firstname">
                            </div>
                            <div class="col-6">
                                <label for="">Last name</label>
                                <input type="text" name="lastname" class="form-control" id="" placeholder="lastname">
                            </div>
                        </div>
                        <br>
                            <label for="" >Adress</label>
                            <input type="text" name="adress" class="form-control" id="" placeholder="Adress">
                            <br>
                            <label for="" >Contact Number</label>
                            <input type="text" name="countactnumber" class="form-control" id="" placeholder="countactnumber">
                            <br>
                            <label for="" >Email</label>
                            <input type="text" name="email" class="form-control" id="" placeholder="Email">
                            <br>
                            <label for="">User name</label>
                            <input type="text" name="username" class="form-control" id="" placeholder="username">
                            <br>
                            <label for="" >Password</label>
                            <input type="text" name="password" class="form-control" id="" placeholder="password">
                            <br>
                            <button type="submit" name="register" class="col-6 btn btn-secondary btn-block">Submit</button>
                            <br>
                    </div>
                </div>
            </form>
        </div>
    <!-- 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.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

Bootstrap作品練習

・自由にいじってみた

sosotake.xsrv.jp/Bootstrap/day.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
    <div class="jumbotron">
        <h1 class="display-1">Im using bootstrap</h1>
        <h1 class="display-2">Im using bootstrap</h1>
        <h1 class="display-3">Im using bootstrap</h1>
        <h1 class="display-4">Im using bootstrap</h1>
        <p class="lead">hey there bruh</p>
    </div>
    

    <div class="container">
        <div class="jumbotron">
            <p class="text-right">lorem</p>
            <p class="text-center">ipsum</p>
            <p class="float-left">hey</p>
            <p class="float-right">there</p>
        </div>
        <div class="container">
            <div class="jumbotron">
                <h6 class="display-1">
                    padding and margins
                </h6>
                
                <h6 class="display-4 p-5 bg-warning">
                    this has a padding of 5
                </h6>

                <h6 class="display-4 bg-danger m-5">
                    this has a maring of 5
                </h6>
            </div>
        
        </div>    
        <div class="container">
            <div class="jumbotron">
                <img src="img_fa33d05c892dbc1fd57cef02ec15bc22625894.jpg"  class="img-thumbnail img-fluid" alt="">
            </div>
        
        </div>
        <div class="container">
            <img src="img_fa33d05c892dbc1fd57cef02ec15bc22625894.jpg"  style="height: 250px; widt:250px" class="img-thumbnail img-fluid 
            
           mx-auto d-block" alt="">  
        </div>
    </div>

</body>
</html>

Bootstrap勉強

ほぼ初心者でBootstrapをやってみましたが人に教えてもらいながらやれば

そんなに苦戦をしないでできると思いました。

HTML CSSをある程度学習し終えたレベルの人にはちょうど良いレベルだと思いました。

僕自身は2週間程度の勉強でこのぐらいのもレベルまで行きました

独学では厳しい方にはこちらもどうぞ

TechAcademy 無料体験

2週間で学べる学習システム

コース選択の一番下に

Bootstrapトレーニングもあるみたいです。

おすすめの記事