今回は僕が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週間程度の勉強でこのぐらいのもレベルまで行きました
独学では厳しい方にはこちらもどうぞ
2週間で学べる学習システム
コース選択の一番下に
Bootstrapトレーニングもあるみたいです。
