css - 如何使用bootstrap和css实现图片中的布局？

Question

我正在使用 angular2 前端开发一个应用程序。鉴于我的设计，我不能使用表格。不确定如何使用面板或卡片来实现此目的。请帮忙。

编辑:我尝试过不同的东西，但我知道我无法接近它。

<div class="panel panel-default">
    <div class="panel-heading">title [Ref: 1/07/17]</div>
    <div class="panel-body">
        <div class="row">
            <div class="col-sm-3">
                <img class="picture-frame" src="{{picture}}" />
            </div>
            <div class="col-sm-4">
                <p>
                    Description goes here.
                </p>
            </div>
            <div class="col-sm-5">
                <p>
                    Address goes here
                </p>

            </div>
        </div>

    </div>
    <div class="panel-footer">
        <button class="btn btn-info"><span class="glyphicon glyphicon-edit"></span></button>
        <button class="btn btn-danger"><span class="glyphicon glyphicon-remove"></span></button>
    </div>
</div>

Answer 1

实际上，使用 bootstrap 和 CSS 一切皆有可能，当然还有布局。

图片中使用的所谓布局也称为 Material 设计。您还注意到您使用了 angular。 Angular 有一个名为 AngularJS Material 的插件。

查看此网站，它可能对您有用:https://material.angularjs.org/latest/

查看下面的演示。仅使用 bootstrap 和 CSS。我自己创建了 Material 类。因为只用 CSS 来实现这样的布局并不难。

body, html {
  background-color: #ededed !important;
  padding: 20px 5px;
}

.flex-container {
  /* We first create a flex layout context */
  display: flex;
  
  /* Then we define the flow direction and if we allow the items to wrap 
   * Remember this is the same as:
   * flex-direction: row;
   * flex-wrap: wrap;
   */
  flex-flow: row wrap;
  
  /* Just like `vertical-align: middle` */
  align-items: center; 
  justify-content: center;
}

.material-row {
  background-color: #fff;
  margin-bottom: 15px;
  
  box-shadow: 0 2px 1px #ccc;
  -moz-box-shadow: 0 2px 1px #ccc;
  -webkit-box-shadow: 0 2px 1px #ccc;
}

.right-column {
  padding: 15px;
  border-left: 3px solid #ededed;
}

.left-column .fa {
  color: #337ab7;
  font-size: 34px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="container">

  <div class="row flex-container material-row">
    <div class="col-sm-2 col-xs-2 left-column text-center">
      <i class="fa fa-globe" aria-hidden="true"></i>
    </div>
    <div class="col-sm-10 col-xs-10 right-column">
      <strong><a href="#">Default.aspx</a></strong>
      <p>Some long description here</p>
      <a href="#">Show folder</a>
    </div>
  </div>
  <div class="row flex-container material-row">
    <div class="col-sm-2 col-xs-2 left-column text-center">
      <i class="fa fa-file-text-o" aria-hidden="true"></i>
    </div>
    <div class="col-sm-10 col-xs-10 right-column">
      <strong><a href="#">Content.aspx</a></strong>
      <p>Some long description <br/>here</p>
      <a href="#">Show folder</a>
    </div>
  </div>

</div>

也许这个链接也可能有用:https://material.io/guidelines/material-design/introduction.html