CSS

* {margin: 0; padding: 0;}

div {
  margin: 20px;
}

ul {
  list-style-type: none;
  width: 500px;
}

h3 {
  font: bold 20px/1.5 Helvetica, Verdana, sans-serif;
}

li img {
  float: left;
  margin: 0 15px 0 0;
}

li p {
  font: 200 12px/1.5 Georgia, Times New Roman, serif;
}

li {
  padding: 10px;
  overflow: auto;
}

li:hover {
  background: #eee;
  cursor: pointer;
}

HTML

<div>
  <ul>
    <li>
      <img src="http://lorempixum.com/100/100/nature/1" />
      <h3>Headline</h3>
      <p>Lorem ipsum dolor sit amet...</p>
    </li>

    <li>
      <img src="http://lorempixum.com/100/100/nature/2" />
      <h3>Headline</h3>
      <p>Lorem ipsum dolor sit amet...</p>
    </li>

    <li>
      <img src="http://lorempixum.com/100/100/nature/3" />
      <h3>Headline</h3>
      <p>Lorem ipsum dolor sit amet...</p>
    </li>

    <li>
      <img src="http://lorempixum.com/100/100/nature/4" />
      <h3>Headline</h3>
      <p>Lorem ipsum dolor sit amet...</p>
    </li>
  </ul>
</div>

html取自https://designshack.net/articles/css/5-simple-and-practical-css-list-styles-you-can-copy-and-paste/

每行

将有5张图片。现在告诉我如何用bootstrap css和angular ng-repeater实现相同的效果。如果可能的话，请给我一些示例代码，其中bootstrap和ng-repeater可用于开发一个库。感谢

修改

假设发布示例代码

var app=angular.module('imggallery',[]);
app.controller('imageCtrl',function($scope){
    $scope.img=[
        {headline:'Headline1',source:'images/table.jpg'},
        {headline:'Headline2',source:'images/paper.jpg'},
        {headline:'Headline3',source:'images/computer.jpg'},
        {headline:'Headline4',source:'images/ac.jpg'},
        {headline:'Headline5',source:'images/sofa.jpg'}
    ];
});


<div  ng-repeat="x in img">
     <img ng-src="{{x.source}}" >
 </div>`

假设img数组沿图像路径有200个数据。我只是不明白如何使用ng-repeat使用普通的html和css或使用bootstrap连续显示五个图像。

所以寻求一些帮助。感谢

Answer 1

像这样，

angular.module('myApp', []).controller('myCtrl', function($scope) {
  $scope.images = ["https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300","https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300","https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300","https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300","https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300","https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300","https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300","https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300"];
});

*{
  padding:0;
  margin:0;
  box-sizing:border-box;
}
li{
  display:inline-block;
  width:20%;
  padding:10px;
}
li img{
  width:100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app=myApp ng-controller=myCtrl>
  <ul>
    <li ng-repeat="j in images track by $index">
      <img src="{{j}}" />
    </li>
  </ul>
</div>

PS 我在ng-repeat中使用track by $index只是因为$scope.images中包含重复值，您可以将其删除。

Answer 2

如果您想使用Bootstrap来实现这一目标，您可以使用ngClass来应用每五个重复的元素：

col-xs-offset-1

此类在元素的左侧创建1 col的偏移量。

查看this plunker我是如何使用它的。

Angular：如何使用bootstrap和ng-repeater生成图库

CSS

HTML

修改

2 个答案: