2017年9月 – Linux & Android Dialy

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>

というかんじに

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

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

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

を追加

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

今回のソースは

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

次に、どの形式にするか選択がでるけど
ドキュメントには
During Postfix installation a configuration screen may appear. Select ‘Internet Site’ and press enter. Use your server’s external DNS for ‘mail name’ and press enter. If additional screens appear, continue to press enter to accept the defaults.

意味は
Postfixのインストール中に、設定画面が表示されることがあります。 [インターネットサイト]を選択し、Enterキーを押します。サーバーの外部DNSを「メール名」に使用し、Enterキーを押します。追加の画面が表示された場合は、enterを押してデフォルトを受け入れます。

となっているので
インターネット上サイトのまま
tabを押して了解で Enter

次にメール名だけど、ローカルのみの予定なので
今回はそのまま tab を押して了解で
Enter

次に Gitlab リポジトリを追加するので

curl -sS https://packages.gitlab.com/install/repositories/gitlab/gitlab-ce/script.deb.sh | sudo bash

次に

sudo apt-get install gitlab-ce

で Gitlab インストール

インストールされると

gitlab: Thank you for installing GitLab!
gitlab: To configure and start GitLab, RUN THE FOLLOWING COMMAND:

sudo gitlab-ctl reconfigure

gitlab: GitLab should be reachable at http://snowpool-Prime-Series
gitlab: Otherwise configure GitLab for your system by editing /etc/gitlab/gitlab.rb file
gitlab: And running reconfigure again.
gitlab: 
gitlab: For a comprehensive list of configuration options please see the Omnibus GitLab readme
gitlab: https://gitlab.com/gitlab-org/omnibus-gitlab/blob/master/README.md
gitlab: 
It looks like GitLab has not been configured yet; skipping the upgrade script.
W: Duplicate sources.list entry http://download.opensuse.org/repositories/isv:/ownCloud:/community/xUbuntu_14.04/  Packages (/var/lib/apt/lists/download.opensuse.org_repositories_isv:_ownCloud:_community_xUbuntu%5f14.04_Packages)

と表示される

Gitlab の初期設定と開始には

sudo gitlab-ctl reconfigure

を実行

これで
http://snowpool-prime-series:8080/
だとアクセスできず、
http://localhost:8080
ではレイアウトが崩れる

このため

sudo vim /etc/gitlab/gitlab.rb

で設定ファイルを開き

１３行目の

external_url 'http://snowpool-Prime-Series'

を

external_url 'http://１９２．１６８．１．２０６：８０００'

というように変更し

sudo gitlab-ctl reconfigure

を実行し設定を反映

これで再度アクセスすると無事にCSSが反映されていた

月別: 2017年9月

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

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

Gitlab のインストール