響應式選項卡式佈局可能嗎？

是否可以做到這種佈局，你會怎麼做？容器有邊框，只是不在標籤所在的頂部。這裏只有選定的選項卡有頂部邊框。標籤的文字應居中，左對齊也可以。但第一個選項卡的文本不能在圖像之前開始（左側應該有相同的空間）。響應式選項卡式佈局可能嗎？

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>

來源

2013-09-27 DarsVaeda

有沒有嘗試過任何的CSS呢？如果你告訴我們你已經嘗試了什麼，那會很好。這種佈局絕對是可能的，但如果我開始正確的解決方案，我覺得我在這裏做家庭作業。 –

對不起，這裏是我停下來，因爲我不確定是否有可能：http://jsfiddle.net/qmPDG/ – DarsVaeda

這種佈局是可能的，但如前所述，您需要發佈您的CSS。

看看Twitter Bootstrap，它允許您將選項卡式內容放入響應式框架中。

您需要添加一些JS才能使其運行，您可以通過添加「bootstrap.min.js」來完成此操作，也可以通過單獨添加選項卡腳本來完成此操作。這裏是直接鏈接到標籤JS文檔http://getbootstrap.com/2.3.2/javascript.html#tabs

來源

2013-09-27 10:11:43 terrorfall

您的結構可以用於任何標籤界面或手風琴。請爲您的標籤提供您的CSS。您可以使用這篇文章中提到的引導標籤。還有一些其他選項卡式解決方案，如基礎選項卡和jQuery ui選項卡。如果您正在尋找高級響應式選項卡式解決方案，請查看zozo選項卡，其中有很多示例。

http://zozoui.com/tabs

歡呼

FariDesign

來源

2013-11-04 13:16:23 FariDesign

謝謝，我添加了我的代碼作爲評論。另外我不想使用JavaScript。 – DarsVaeda

響應式選項卡式佈局可能嗎？

回答

相關問題