カテゴリー: bootstrap

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

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

せっかくなので、レスポンシブ対応の画像も追加
レスポンシブ対応するには
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　その２</h5>
            メッセージ その２
          </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　その２</h5>
            メッセージ その２
          </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>

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

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

Atom エディタを使い
左に画像、右に文章というtwitter のようなかんじで表示

media.html というファイルを作成し

html:5

でtab で展開すると

<!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>
</head>
<body>
  
</body>
</html>

というコードが一気に作成できる

次にbootstrap の css を適用するために

    <!-- 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">

を head の中へ記述

また javascript や jquery 関連を読み込む必要があるので

    <!-- 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 の閉じタグの前に記述

次に画像と文章の表示
https://getbootstrap.com/docs/4.0/layout/media-object/
にサンプルコードがリファレンスとして載っているので
これを参考に貼り付け

  <div class="media">
  <img class="d-flex mr-3" src="..." alt="Generic placeholder image">
  <div class="media-body">
    <h5 class="mt-0">Media heading</h5>
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
  </div>
</div>

のままだと長い上に画像がないので
src=”…” の部分には画像ファイルを指定し
文章は簡単なものに変更

せっかくなので画像を丸くしておきたいので

class=" rounded-circle"

を画像に指定

元の大きさだと大きすぎなので

width="64" height="64"

で縦横を調整

表示エリアを 

<div class="media">
</div>

で決めて、その中に記述する

今回のソースは

  <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>
    メッセージ
  </div>
</div>

というかんじ

これで左に画像、右に文章になる

mbs

そして

<div class="media-body">
</div>

が１つのメディア単位になっている
つまり、 media-body の中に media を用意すると入れ子になる

<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>
    メッセージ
    <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>
      メッセージ その２
    </div>
  </div>
</div>

とすると入れ子になる

mbs2

とりあえず全体のソースとしては

<!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>
  <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>
    メッセージ
    <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>
      メッセージ その２
    </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>

というかんじ