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以及布局课程，一切皆有可能。

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

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

检查下方的演示。仅用于bootstrap和CSS。我自己创建了材料类。因为只用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

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

1 个答案: