日別アーカイブ: 2021年8月15日

Bootstrapのまとめ2(Jumbotoron)

コメントを残す

Bootstrapで実際に試してみる

実装イメージ

HTMLの記述

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>Bootstrap</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
</head>
 <body>
   <h1>Bootstrap</h1>
   <button type="button">ボタン</button>
   <button type="button" class="btn btn-primary">Primary</button>
   <button type="button" class="btn btn-success">Success</button>
   <button type="button" class="btn btn-outline-primary">Primary</button>
   <button type="button" class="btn btn-outline-success">Success</button>
   <button type="button" class="btn btn-primary btn-lg">Primary</button>
   <button type="button" class="btn btn-success btn-sm">Success</button>
   <button type="button" class="btn btn-success btn-sm" disabled>Success</button>
  <div class="container">
    <div class="jumbotron">
      <h1>Jumbotoron</h1>
      <p>Bootstrapへようこそ</p>
      <button class="btn btn-primary btn-lg">Sing Up</button>
    </div>
    <form>
      <div class="form-group">
        <label for="exampleInputEmail1">Email address</label>
        <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
        <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
       </div>
      <div class="form-group">
        <label for="exampleInputPassword1">Password</label>
         <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
      </div>
      <div class="form-check">
        <label class="form-check-label">
          <input type="checkbox" class="form-check-input">Check me out
        </label>
      </div>
       <button type="submit" class="btn btn-primary">Submit</button>
    </form>
   </div>
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
</body>
</html>

※ポイント

CSSに何も書かなくてもHTMLだけで実現できるのもメリット！