0

我是foundation 4的新手，我们目前在我们的项目MVC4 + Foundation 4中使用foundation 4（通过NuGet包）

我们想在我们的观点上使用手风琴。

基础 4 提供部分；http://foundation.zurb.com/docs/components/section.html 但是因为这在网站上看起来太平淡了，我们查看了我们认为适合我们网站的foundation 3手风琴；http://foundation.zurb.com/old-docs/f3/elements.php。需要专家帮助了解我们如何使手风琴部分的外观和感觉类似于基础 3 中可用的部分。

我们知道foundation 4不再提供图像，那么我们如何实现右侧的小图标。

4

2 回答 2

0

SCSS 始终是最佳选择。但是，对于尚未准备好深入 SCSS 的其他人，您可以通过 CSS 来完成。在您的 CSS 文件中，只需包含以下内容：

.section-container.accordion > section > .title:after,
.section-container.accordion > .section > .title:after {
    content: '\25B8';
    position:absolute;
    right:10px;
    font-size:22px;
}
.section-container.accordion > section.active > .title:after,
.section-container.accordion > .section.active > .title:after {
    content: '\25BE';
    position:absolute;
    right:10px;
    font-size:22px;
}

当然，您可以根据需要更改字体大小，也可以简单地省略它。希望有帮助。

于 2013-10-31T08:30:59.183 回答
0

我不是专家，但如果我理解正确，您只想在右侧添加小三角形图像。首先，您使用的是 scss 文件吗？如果不是，您绝对应该在这里查看。您只需安装此Visual Studio 插件，然后下载zurb-foundation scss 文件并将其添加到您的项目中。

接下来，转到 _section.scss 文件并查找这部分代码：

@mixin section($section-type:accordion) {

  // Accordion styles
  @if $section-type == accordion {

    border-top: $section-border-size $section-border-style $section-border-color;
    position: relative;

    .title {
      top: 0;
      cursor: pointer;
      width: 100%;
      margin: 0;
      background-color: $section-title-bg;

      ***********************************
      *** add a background image here ***
      ***********************************

      a {
        padding: $section-padding;
        display: inline-block;
        color: $section-title-color;
        font-size: emCalc(14px);
        white-space: nowrap;
        width: 100%;
      }
      &:hover { background-color: darken($section-title-bg, $section-function-factor/2); }
    }

    .content {
      display: none;
      padding: $section-padding;
      background-color: $section-content-bg;

      &>*:last-child { margin-bottom: 0; }
      &>*:first-child { padding-top: 0; }
      &>*:last-child { padding-bottom: 0; }
    }


    &.active {
      .content { display: block; }
      .title { background: $section-title-bg-active; 

    **********************************************
    *** add the "active" background image here ***
    **********************************************
             }

    }


  }

添加三角形有两种方法，使用您选择的图像，或者更好的是，使用创建三角形的基础 css 函数！

@include css-triangle(5px, #aaaaaa, top);

注意我没有测试过修改基础部分，但我很确定这应该可以解决问题。

于 2013-04-28T22:48:46.917 回答