bootstrap で画像とメッセージを表示 その2

bootstrap で画像とメッセージを表示 その2

せっかくなので、レスポンシブ対応の画像も追加
レスポンシブ対応するには
class=”img-fluid” を設定すればOK

今回は

<img src="image1.jpg" alt="" class="img-fluid">

としてみた

古い情報だと
.img-responsive と書かれているので注意
変更点については
https://getbootstrap.com/docs/4.0/migration/#images
に記載あり

次にグリッドシステムで配置を調整
emmet で書くと

  div.container>div.row>div.col-md-8.col-md-offset-2

これをtab で展開すると

  <div class="container">
    <div class="row">
      <div class="col-md-8 col-md-offset-2">
        
      </div>
    </div>
  </div>

となるので、ここへ .media 部分のコードを移動

これで

  <div class="container">
    <div class="row">
      <div class="col-md-8 col-md-offset-2">
        <div class="media">
        <img class="d-flex mr-3  rounded-circle" src="image2.jpeg" alt="Generic placeholder image" width="64" height="64">
        <div class="media-body">
          <h5 class="mt-0">Media heading</h5>
          メッセージ

          <img src="image1.jpg" alt="" class="img-fluid">
          <div class="media">
          <img class="d-flex mr-3  rounded-circle" src="image2.jpeg" alt="Generic placeholder image" width="64" height="64">
          <div class="media-body">
            <h5 class="mt-0">Media heading その2</h5>
            メッセージ その2
          </div>
        </div>
      </div>
      </div>
      </div>
    </div>
  </div>

というかんじに

これで余白が調整され、中央にコンテンツ表示に

mbs4

次に画面上部にナビゲーションバーの設置

  <nav class="navbar navbar-light bg-light">
    <form class="form-inline">
      <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </nav>

を追加

これで上部に検索欄とボタンが設置される

mbs5

今回のソースは

<!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">
  <!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
  <title>Document</title>
</head>
<body>

  <nav class="navbar navbar-light bg-light">
    <form class="form-inline">
      <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </nav>

  <div class="container">
    <div class="row">
      <div class="col-md-8 col-md-offset-2">

        
        <div class="media">
        <img class="d-flex mr-3  rounded-circle" src="image2.jpeg" alt="Generic placeholder image" width="64" height="64">
        <div class="media-body">
          <h5 class="mt-0">Media heading</h5>
          メッセージ

          <img src="image1.jpg" alt="" class="img-fluid">
          <div class="media">
          <img class="d-flex mr-3  rounded-circle" src="image2.jpeg" alt="Generic placeholder image" width="64" height="64">
          <div class="media-body">
            <h5 class="mt-0">Media heading その2</h5>
            メッセージ その2
          </div>
        </div>
      </div>
      </div>
      </div>
    </div>
  </div>



<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

</body>
</html>

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です