网格和列表视图的CSS切换

Question

我正在尝试创建网格或列表视图，例如Dropbox查看文件。 有谁有跟随CSS的样本？任何帮助或链接对我来说都是很好的开始。 或者他们只是用class="rows"制作 和<div class="row">列表视图 和<div class="row"> <div class="col-md-1"> </div></div>

Answer 1

https://www.w3schools.com/html/html_lists.asp
是不是只使用这个？并使用CSS为您设置样式？

Answer 2

看一下Bootstrap documentation的网格系统。

这是一个示例布局。

＆＃13;

＆＃13;

.col-xs-4 {
background-color:grey;
border:1px solid white;
text-align:center;
color:white;
}
.col-xs-6 {
background-color:blue;
border:1px solid white;
text-align:center;
color:white;
}
.col-xs-12 {
background-color:red;
border:1px solid white;
text-align:center;
color:white;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col-xs-4">.col-xs-4</div>
  <div class="col-xs-4">.col-xs-4</div>
  <div class="col-xs-4">.col-xs-4</div>
</div>
<div class="row">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>
<div class="row">
  <div class="col-xs-12">.col-xs-12</div>
</div>

＆＃13;

＆＃13;

＆＃13;