响应标签布局可能吗?

时间:2013-09-27 09:48:35

标签: html css tabs responsive-design

是否可以进行此布局,您将如何进行? 容器有一个边框,而不是在标签的顶部。此处仅选定的选项卡具有顶部边框。选项卡的文本应居中,左对齐也可以。但是第一个标签的文字不能在图像之前开始(左边应该有相同的空格)。

the desired layout

目前html看起来像这样,但如果需要可以更改:

<section class="grid-100 grid-parent tabs">
    <header>
        <ul>
            <li class="selected">Tab1</li>
            <li>Tab2</li>
            <li>Tab3</li>
        </ul>
    </header>
    <article class="tab visible">content</article>
    <article class="tab">content</article>
    <article class="tab">content</article>
    </article>
</section>

2 个答案:

答案 0 :(得分:0)

这种布局是可行的,但如上所述,您需要发布CSS。

查看Twitter Bootstrap,它允许您将选项卡式内容放在响应式框架中。

你需要添加一些JS才能让它运行,你可以通过添加“bootstrap.min.js”或者只是自己添加标签脚本来实现。这是标签JS文档http://getbootstrap.com/2.3.2/javascript.html#tabs

的直接链接

答案 1 :(得分:0)

您的结构可用于任何标签界面或手风琴。请提供您的标签的CSS。您可以在本文中提及引导选项卡。有一些其他选项卡式解决方案,如基础选项卡和jQuery ui选项卡。如果您正在寻找高级响应式选项卡式解决方案,请查看zozo选项卡,其中包含大量示例。

http://zozoui.com/tabs

欢呼声

FariDesign