“Foreground”的版本间差异

来自Kanade
(创建页面,内容为“<ul class="example-orbit" data-orbit> <li class="active"> slide 1 <div class="orbit-caption"> Caption One. </div>…”)
 
 
(未显示同一用户的2个中间版本)
第1行: 第1行:
 +
注意:在使用<code>&useskin=pivot</code> 或<code>&useskin=foreground</code> 皮肤,浏览本页以取得最佳排版效果。
 +
 +
== 标题文本 ==
 
<ul class="example-orbit" data-orbit>
 
<ul class="example-orbit" data-orbit>
 
   <li class="active">
 
   <li class="active">
第19行: 第22行:
 
   </li>
 
   </li>
 
</ul>
 
</ul>
 +
== Grid ==
 +
<div class="row">
 +
  <div class="small-2 large-4 columns">...</div>
 +
  <div class="small-4 large-4 columns">...</div>
 +
  <div class="small-6 large-4 columns">...</div>
 +
</div>
 +
<div class="row">
 +
  <div class="large-3 columns">...</div>
 +
  <div class="large-6 columns">...</div>
 +
  <div class="large-3 columns">...</div>
 +
</div>
 +
<div class="row">
 +
  <div class="small-6 large-2 columns">...</div>
 +
  <div class="small-6 large-8 columns">...</div>
 +
  <div class="small-12 large-2 columns">...</div>
 +
</div>
 +
<div class="row">
 +
  <div class="small-3 columns">...</div>
 +
  <div class="small-9 columns">...</div>
 +
</div>
 +
<div class="row">
 +
  <div class="large-4 columns">...</div>
 +
  <div class="large-8 columns">...</div>
 +
</div>
 +
<div class="row">
 +
  <div class="small-6 large-5 columns">...</div>
 +
  <div class="small-6 large-7 columns">...</div>
 +
</div>
 +
<div class="row">
 +
  <div class="large-6 columns">...</div>
 +
  <div class="large-6 columns">...</div>
 +
</div>
 +
== Tabs ==
 +
<ul class="tabs" data-tab>
 +
  <li class="tab-title active"><a href="#panel1">Tab 1</a></li>
 +
  <li class="tab-title"><a href="#panel2">Tab 2</a></li>
 +
  <li class="tab-title"><a href="#panel3">Tab 3</a></li>
 +
  <li class="tab-title"><a href="#panel4">Tab 4</a></li>
 +
</ul>
 +
<div class="tabs-content">
 +
  <div class="content active" id="panel1">
 +
    <p>This is the first panel of the basic tab example. You can place all sorts of content here including a grid.</p>
 +
  </div>
 +
  <div class="content" id="panel2">
 +
    <p>This is the second panel of the basic tab example. This is the second panel of the basic tab example.</p>
 +
  </div>
 +
  <div class="content" id="panel3">
 +
    <p>This is the third panel of the basic tab example. This is the third panel of the basic tab example.</p>
 +
  </div>
 +
  <div class="content" id="panel4">
 +
    <p>This is the fourth panel of the basic tab example. This is the fourth panel of the basic tab example.</p>
 +
  </div>
 +
</div>

2023年1月9日 (一) 13:03的最新版本

注意:在使用&useskin=pivot&useskin=foreground 皮肤,浏览本页以取得最佳排版效果。

标题文本

  • slide 1
         Caption One.
    
  • slide 2
         Caption Two.
    
  • slide 3
         Caption Three.
    

Grid

...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...

Tabs

  • <a href="#panel1">Tab 1</a>
  • <a href="#panel2">Tab 2</a>
  • <a href="#panel3">Tab 3</a>
  • <a href="#panel4">Tab 4</a>

This is the first panel of the basic tab example. You can place all sorts of content here including a grid.

This is the second panel of the basic tab example. This is the second panel of the basic tab example.

This is the third panel of the basic tab example. This is the third panel of the basic tab example.

This is the fourth panel of the basic tab example. This is the fourth panel of the basic tab example.