Thema: Tabs einsetzen


Hinweis: Die linke und rechte Seiten sind jeweils der Code in HTML und das Layout im Browser.

1. Code für Basic Tabs


<ul class='nav nav-tabs'>
    <li class='active'><a href='#home' data-toggle='tab'>Home</a>
    </li>
    <li><a href='#profile' data-toggle='tab'>Profile</a>
    </li>
    <li><a href='#messages' data-toggle='tab'>Messages</a>
    </li>
    <li><a href='#settings' data-toggle='tab'>Settings</a>
    </li>
</ul>
<!-- Tab panes -->
<div class='tab-content'>
    <div class='tab-pane fade in active' id='home'>
        <h4>Home Tab</h4>
        <p>Text 1</p>
    </div>
    <div class='tab-pane fade' id='profile'>
        <h4>Profile Tab</h4>
        <p>Text 2</p>
    </div>
    <div class='tab-pane fade' id='messages'>
        <h4>Messages Tab</h4>
        <p>Text 3</p>
    </div>
    <div class='tab-pane fade' id='settings'>
        <h4>Settings Tab</h4>
        <p>Text 4</p>
    </div>
</div>

1. Ausgabe für Basic Tabs

Basic Tabs

Home Tab

Text 1

Profile Tab

Text 2

Messages Tab

Text 3

Settings Tab

Text 4


2. Code für Pills Tabs


<ul class='nav nav-pills'>
    <li class='active'><a href='#home-pills' data-toggle='tab'>Home</a>
    </li>
    <li><a href='#profile-pills' data-toggle='tab'>Profile</a>
    </li>
    <li><a href='#messages-pills' data-toggle='tab'>Messages</a>
    </li>
    <li><a href='#settings-pills' data-toggle='tab'>Settings</a>
    </li>
</ul>
<!-- Tab panes -->
<div class='tab-content'>
    <div class='tab-pane fade in active' id='home-pills'>
        <h4>Home Tab</h4>
        <p>Text 1</p>
    </div>
    <div class='tab-pane fade' id='profile-pills'>
        <h4>Profile Tab</h4>
        <p>Text 2</p>
    </div>
    <div class='tab-pane fade' id='messages-pills'>
        <h4>Messages Tab</h4>
        <p>Text 3</p>
    </div>
    <div class='tab-pane fade' id='settings.pills'>
        <h4>Settings Tab</h4>
        <p>Text 4</p>
    </div>
</div>

2. Ausgabe für Pills Tabs

Pills Tabs

Home Tab

Text 1

Profile Tab

Text 2

Messages Tab

Text 3

Settings Tab

Text 4


3. Code für Tabbed Panel Default


<div class='panel tabbed-panel panel-default'>
  <div class='panel-heading clearfix'>
      <div class='panel-title pull-left'>Tabbed Panel Default</div>
      <div class='pull-right'>
          <ul class='nav nav-tabs'>
              <li class='active'><a href='#tab-default-1' data-toggle='tab'>Page 1</a></li>
              <li><a href='#tab-default-2' data-toggle='tab'>Page 2</a></li>
              <li><a href='#tab-default-3' data-toggle='tab'>Page 3</a></li>
              <li class='dropdown'>
                  <a href='#' data-toggle='dropdown'>More <span class='caret'></span></a>
                  <ul class='dropdown-menu' role='menu'>
                      <li><a href='#tab-default-4' data-toggle='tab'>Page 4</a></li>
                      <li><a href='#tab-default-5' data-toggle='tab'>Page 5</a></li>
                  </ul>
              </li>
          </ul>
      </div>
  </div>
  <div class='panel-body'>
      <div class='tab-content'>
          <div class='tab-pane fade in active' id='tab-default-1'>Page 1</div>
          <div class='tab-pane fade' id='tab-default-2'>Page 2</div>
          <div class='tab-pane fade' id='tab-default-3'>Page 3</div>
          <div class='tab-pane fade' id='tab-default-4'>Page 4</div>
          <div class='tab-pane fade' id='tab-default-5'>Page 5</div>
      </div>
  </div>
</div>

3. Ausgabe für Tabbed Panel Default

Tabbed Panel Default
Page 1
Page 2
Page 3
Page 4
Page 5

Hinweis: Wenn Sie im Code statt primary dann info, success, warning und danger einsetzen, werden dann die Punkte 5, 6, 7 und 8 dargestellt.

4. Code für Tabbed Panel Primary


<div class='panel tabbed-panel panel-primary'>
  <div class='panel-heading clearfix'>
      <div class='panel-title pull-left'>Tabbed Panel Primary</div>
      <div class='pull-right'>
          <ul class='nav nav-tabs'>
              <li class='active'><a href='#tab-primary-1' data-toggle='tab'>Page 1</a></li>
              <li><a href='#tab-primary-2' data-toggle='tab'>Page 2</a></li>
              <li><a href='#tab-primary-3' data-toggle='tab'>Page 3</a></li>
              <li class='dropdown'>
                  <a href='#' data-toggle='dropdown'>More <span class='caret'></span></a>
                  <ul class='dropdown-menu' role='menu'>
                      <li><a href='#tab-primary-4' data-toggle='tab'>Page 4</a></li>
                      <li><a href='#tab-primary-5' data-toggle='tab'>Page 5</a></li>
                  </ul>
              </li>
          </ul>
      </div>
  </div>
  <div class='panel-body'>
      <div class='tab-content'>
          <div class='tab-pane fade in active' id='tab-primary-1'>Page 1</div>
          <div class='tab-pane fade' id='tab-primary-2'>Page 2</div>
          <div class='tab-pane fade' id='tab-primary-3'>Page 3</div>
          <div class='tab-pane fade' id='tab-primary-4'>Page 4</div>
          <div class='tab-pane fade' id='tab-primary-5'>Page 5</div>
      </div>
  </div>
</div>

4. Ausgabe für Tabbed Panel Primary

Tabbed Panel Primary
Page 1
Page 2
Page 3
Page 4
Page 5

5. Ausgabe für Tabbed Panel Info

Tabbed Panel Info
Page 1
Page 2
Page 3
Page 4
Page 5

6. Ausgabe für Tabbed Panel Success

Tabbed Panel Success
Page 1
Page 2
Page 3
Page 4
Page 5

7. Ausgabe für Tabbed Panel Warning

Tabbed Panel Warning
Page 1
Page 2
Page 3
Page 4
Page 5

8. Ausgabe für Tabbed Panel Danger

Tabbed Panel Danger
Page 1
Page 2
Page 3
Page 4
Page 5


9. Code für Collapsible Accordion Panel Group


<div class='panel-group' id='accordion'>
    <div class='panel panel-info'>
        <div class='panel-heading'>
            <h4 class='panel-title'>
                <a data-toggle='collapse' data-parent='#accordion' href='#collapseOne'>Page 1</a>
            </h4>
        </div>
        <div id='collapseOne' class='panel-collapse collapse in'>
            <div class='panel-body'>
                <h4>Page 1</h4>    	
            </div>
        </div>
    </div>
    <div class='panel panel-info'>
        <div class='panel-heading'>
            <h4 class='panel-title'>
                <a data-toggle='collapse' data-parent='#accordion' href='#collapseTwo'>Page 2</a>
            </h4>
        </div>
        <div id='collapseTwo' class='panel-collapse collapse'>
            <div class='panel-body'>
                <h4>Page 2</h4>    
            </div>
        </div>
    </div>
    <div class='panel panel-info'>
        <div class='panel-heading'>
            <h4 class='panel-title'>
                <a data-toggle='collapse' data-parent='#accordion' href='#collapseThree'>Page 3</a>
            </h4>
        </div>
        <div id='collapseThree' class='panel-collapse collapse'>
            <div class='panel-body'>
                <h4>Page 3</h4>
            </div>
        </div>
    </div>
</div>

9. Ausgabe für Collapsible Accordion Panel Group

Page 1

Page 2

Page 3