如何构建自定义网格或查找现有网格

Question

这是来自 Silver Light 应用程序的网格。我正在用 ASP.NET MVC 编写另一个需要具有相同外观的应用程序，所以我问这是否可以在 Telerik 或 Bootstrap 或 jQuery UI 中找到？如果我必须完全定制它，那么我什至从哪里开始？

Answer 1

这是可以代表这种盒子的抽象标记。

<div id="criteria_container" class="search_box">
  <div id="criteria_operations">
    <span id="criteria_add" class="criteria_op">+</span>
    <span id="criteria_subtract" class="criteria_op">-</span>
    <span id="criteria_swap" class="criteria_op">></span>
  </div>
  <div id="criteria_box">
    <div id="criteria_header">Search Criteria</div>
    <div id="criteria_results"></div>
  </div>
</div>

然后，作为开始的地方。

虽然我没有级联任何 CSS 样式，但您可能想要。在您这样做之前，请注意许多人对样式的嵌套提出了质疑，因为semantic issue 和某些应用程序中的潜在低效率。

 #criteria_container {
   width: 600px;
   height: 100px;
   border: solid 1px black;
 }

 #criteria_operations {
   width: 10px;
   height: 100%;
   float: left;
   background-color: #aaaaaa;
   border: solid 1px black;
 }

 #criteria_header {
   text-align: center;
   background-color: #aaaaaa;
   border: solid 1px black;
 }

 .criteria_op {
 }

 #criteria_box {
   width: 588px;
   float: right;
 }