跳转至： 导航, 搜索

“BootStrap Panels”的版本间的差异

（Created page with " <div class="col-md-4"> <div class="panel panel-cocktail-border"> <div class="panel-heading"> <h3 class="panel-title">BootStrap Panel</h3> <..."）
 
小
 
（未显示同一用户的2个中间版本）
第1行： 第1行：
 +
__NOTOC__
 +
<div class="col-md-4">
 +
<div class="panel panel-cocktail-border">
 +
<div class="panel-heading"> <h3 class="panel-title">BootStrap Panel</h3> </div>
 +
<div class="panel-body"> <p class="bs">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis leo vehicula, fringilla nulla eu, sollicitudin turpis. Donec sed diam purus. Morbi sagittis urna sit amet egestas blandit. Maecenas at turpis quis nulla cursus lobortis. Curabitur nisl justo, mollis vel iaculis in, hendrerit rhoncus justo.</p> </div>
 +
<div class="panel-footer">Panel footer</div>
 +
</div>
 +
</div>
 +
<div class="col-md-4">
 +
<div class="panel panel-midnight-border">
 +
<div class="panel-heading"> <h3 class="panel-title">BootStrap Panel</h3> </div>
 +
<div class="panel-body"> <p class="bs">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis leo vehicula, fringilla nulla eu, sollicitudin turpis. Donec sed diam purus. Morbi sagittis urna sit amet egestas blandit. Maecenas at turpis quis nulla cursus lobortis. Curabitur nisl justo, mollis vel iaculis in, hendrerit rhoncus justo.</p> </div>
 +
<div class="panel-footer">Panel footer</div>
 +
</div>
 +
</div>
 +
<div class="col-md-4">
 +
<div class="panel panel-danger-border">
 +
<div class="panel-heading"> <h3 class="panel-title">BootStrap Panel</h3> </div>
 +
<div class="panel-body"> <p class="bs">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis leo vehicula, fringilla nulla eu, sollicitudin turpis. Donec sed diam purus. Morbi sagittis urna sit amet egestas blandit. Maecenas at turpis quis nulla cursus lobortis. Curabitur nisl justo, mollis vel iaculis in, hendrerit rhoncus justo.</p> </div>
 +
<div class="panel-footer">Panel footer</div>
 +
</div>
 +
</div>
 +
<div class="col-md-12">
 +
<div class="panel panel-primary-light-border">
 +
<div class="panel-heading"> <h3 class="panel-title">Plain head and footer (no border)</h3> </div>
 +
<div class="panel-body">
 +
<div class="col-md-4">
 +
<div class="panel panel-cocktail-white">
 +
                <div class="panel-heading">
 +
                    <h3 class="panel-title">Panel Title</h3>
 +
                </div>
 +
                <div class="panel-body">
 +
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis leo vehicula, fringilla nulla eu, sollicitudin turpis. Donec sed diam purus. Morbi sagittis urna sit amet egestas blandit. Maecenas at turpis quis nulla cursus lobortis. Curabitur nisl justo, mollis vel iaculis in, hendrerit rhoncus justo.</p>
 +
                </div>
 +
                <div class="panel-footer">Panel footer</div>
 +
            </div>
 +
            </div>
 +
<div class="col-md-4">
 +
<div class="panel panel-midnight-white">
 +
                <div class="panel-heading">
 +
                    <h3 class="panel-title">Panel Title</h3>
 +
                </div>
 +
                <div class="panel-body">
 +
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis leo vehicula, fringilla nulla eu, sollicitudin turpis. Donec sed diam purus. Morbi sagittis urna sit amet egestas blandit. Maecenas at turpis quis nulla cursus lobortis. Curabitur nisl justo, mollis vel iaculis in, hendrerit rhoncus justo.</p>
 +
                </div>
 +
                <div class="panel-footer">Panel footer</div>
 +
            </div>
 +
            </div>
 +
<div class="col-md-4">
 +
<div class="panel panel-danger-white">
 +
                <div class="panel-heading">
 +
                    <h3 class="panel-title">Panel Title</h3>
 +
                </div>
 +
                <div class="panel-body">
 +
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis leo vehicula, fringilla nulla eu, sollicitudin turpis. Donec sed diam purus. Morbi sagittis urna sit amet egestas blandit. Maecenas at turpis quis nulla cursus lobortis. Curabitur nisl justo, mollis vel iaculis in, hendrerit rhoncus justo.</p>
 +
                </div>
 +
                <div class="panel-footer">Panel footer</div>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
<div class="col-md-12">
 +
<div class="panel panel-primary-light-border">
 +
<div class="panel-heading"> <h3 class="panel-title">Plain head and footer (bordered)</h3> </div>
 +
<div class="panel-body">
 +
<div class="col-md-4">
 +
<div class="panel panel-cocktail-white-border">
 +
                <div class="panel-heading">
 +
                    <h3 class="panel-title">Panel Title</h3>
 +
                </div>
 +
                <div class="panel-body">
 +
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis leo vehicula, fringilla nulla eu, sollicitudin turpis. Donec sed diam purus. Morbi sagittis urna sit amet egestas blandit. Maecenas at turpis quis nulla cursus lobortis. Curabitur nisl justo, mollis vel iaculis in, hendrerit rhoncus justo.</p>
 +
                </div>
 +
                <div class="panel-footer">Panel footer</div>
 +
            </div>
 +
          </div>
 +
<div class="col-md-4">
 +
<div class="panel panel-midnight-white-border">
 +
                <div class="panel-heading">
 +
                    <h3 class="panel-title">Panel Title</h3>
 +
                </div>
 +
                <div class="panel-body">
 +
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis leo vehicula, fringilla nulla eu, sollicitudin turpis. Donec sed diam purus. Morbi sagittis urna sit amet egestas blandit. Maecenas at turpis quis nulla cursus lobortis. Curabitur nisl justo, mollis vel iaculis in, hendrerit rhoncus justo.</p>
 +
                </div>
 +
                <div class="panel-footer">Panel footer</div>
 +
            </div>
 +
          </div>
 +
<div class="col-md-4">
 +
<div class="panel panel-danger-white-border">
 +
                <div class="panel-heading">
 +
                    <h3 class="panel-title">Panel Title</h3>
 +
                </div>
 +
                <div class="panel-body">
 +
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis leo vehicula, fringilla nulla eu, sollicitudin turpis. Donec sed diam purus. Morbi sagittis urna sit amet egestas blandit. Maecenas at turpis quis nulla cursus lobortis. Curabitur nisl justo, mollis vel iaculis in, hendrerit rhoncus justo.</p>
 +
                </div>
 +
                <div class="panel-footer">Panel footer</div>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
<div class="tab-pane" id="application">
 +
      <div class="col-md-12">
 +
<div class="panel panel-primary-light-border">
 +
<div class="panel-heading"> <h3 class="panel-title">Coloured head and footer (bordered)</h3> </div>
 +
<div class="panel-body">
 +
<p>All 23 colours are available to panels, see our article of colour classes to change to your preference.</p>
 +
<p>Take note of the panel classes, these are what determine the border and header colours or the omission of!</p>
 +
<p>See Tips for more info.</p>
 +
<pre>
 
     <div class="col-md-4">
 
     <div class="col-md-4">
 
       <div class="panel panel-cocktail-border">
 
       <div class="panel panel-cocktail-border">
第12行： 第123行：
 
       </div>
 
       </div>
 
     </div>
 
     </div>
 +
</pre>
 +
</div>
 +
</div>
 +
</div>
 +
<div class="col-md-12">
 +
<div class="panel panel-primary-light-border">
 +
<div class="panel-heading"> <h3 class="panel-title">Plain head and footer (no border)</h3> </div>
 +
<div class="panel-body">
 +
<pre>
 +
    <div class="col-md-4">
 +
      <div class="panel panel-cocktail-white">
 +
        <div class="panel-heading">
 +
          <h3 class="panel-title">Panel Title</h3>
 +
        </div>
 +
        <div class="panel-body">
 +
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis leo vehicula, fringilla nulla eu, sollicitudin
 +
          turpis. Donec sed diam purus. Morbi sagittis urna sit amet egestas blandit. Maecenas at turpis quis nulla cursus
 +
          lobortis. Curabitur nisl justo, mollis vel iaculis in, hendrerit rhoncus justo.</p>
 +
        </div>
 +
        <div class="panel-footer">Panel footer</div>
 +
      </div>
 +
    </div>
 +
</pre>
 +
</div>
 +
</div>
 +
</div>
 +
<div class="col-md-12">
 +
<div class="panel panel-primary-light-border">
 +
<div class="panel-heading"> <h3 class="panel-title">Plain head and footer (bordered)</h3> </div>
 +
<div class="panel-body">
 +
<pre>
 +
    <div class="col-md-4">
 +
      <div class="panel panel-cocktail-light-border">
 +
        <div class="panel-heading">
 +
          <h3 class="panel-title">Panel Title</h3>
 +
        </div>
 +
        <div class="panel-body">
 +
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis leo vehicula, fringilla nulla eu, sollicitudin
 +
          turpis. Donec sed diam purus. Morbi sagittis urna sit amet egestas blandit. Maecenas at turpis quis nulla cursus
 +
          lobortis. Curabitur nisl justo, mollis vel iaculis in, hendrerit rhoncus justo.</p>
 +
        </div>
 +
        <div class="panel-footer">Panel footer</div>
 +
      </div>
 +
    </div>
 +
</pre>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
        <div class="tab-pane" id="tips">
 +
          <p>Take note of the panel classes, these are what determine the border and coloured header and footer.</p>
 +
          <p>I've attempted to make these classes simple to use, though even I found it confusing as there are several other options available in addition to the three most popular panels listed here.</p>
 +
          <p>The example below renders a cocktail colours panel, with a cocktail coloured border (see colour classes).</p>
 +
          <pre><div class="panel panel-cocktail-border"></div></pre>
 +
          <p>Next is a cocktain coloured panel with a white border (i.e. no border).</p>
 +
          <pre><div class="panel panel-cocktail-white"></pre>
 +
          <p>Next is a cocktail coloured panel with a cocktail coloured border, with no solid header and footer.</p>
 +
          <pre><div class="panel panel-cocktail-light-border"></pre>
 +
        </div>

2016年12月7日 (三) 10:55的最新版本

BootStrap Panel

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis leo vehicula, fringilla nulla eu, sollicitudin turpis. Donec sed diam purus. Morbi sagittis urna sit amet egestas blandit. Maecenas at turpis quis nulla cursus lobortis. Curabitur nisl justo, mollis vel iaculis in, hendrerit rhoncus justo.

Panel footer

BootStrap Panel

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis leo vehicula, fringilla nulla eu, sollicitudin turpis. Donec sed diam purus. Morbi sagittis urna sit amet egestas blandit. Maecenas at turpis quis nulla cursus lobortis. Curabitur nisl justo, mollis vel iaculis in, hendrerit rhoncus justo.

Panel footer

BootStrap Panel

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis leo vehicula, fringilla nulla eu, sollicitudin turpis. Donec sed diam purus. Morbi sagittis urna sit amet egestas blandit. Maecenas at turpis quis nulla cursus lobortis. Curabitur nisl justo, mollis vel iaculis in, hendrerit rhoncus justo.

Panel footer

Plain head and footer (no border)

Panel Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis leo vehicula, fringilla nulla eu, sollicitudin turpis. Donec sed diam purus. Morbi sagittis urna sit amet egestas blandit. Maecenas at turpis quis nulla cursus lobortis. Curabitur nisl justo, mollis vel iaculis in, hendrerit rhoncus justo.

Panel footer

Panel Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis leo vehicula, fringilla nulla eu, sollicitudin turpis. Donec sed diam purus. Morbi sagittis urna sit amet egestas blandit. Maecenas at turpis quis nulla cursus lobortis. Curabitur nisl justo, mollis vel iaculis in, hendrerit rhoncus justo.

Panel footer

Panel Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis leo vehicula, fringilla nulla eu, sollicitudin turpis. Donec sed diam purus. Morbi sagittis urna sit amet egestas blandit. Maecenas at turpis quis nulla cursus lobortis. Curabitur nisl justo, mollis vel iaculis in, hendrerit rhoncus justo.

Panel footer

Plain head and footer (bordered)

Panel Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis leo vehicula, fringilla nulla eu, sollicitudin turpis. Donec sed diam purus. Morbi sagittis urna sit amet egestas blandit. Maecenas at turpis quis nulla cursus lobortis. Curabitur nisl justo, mollis vel iaculis in, hendrerit rhoncus justo.

Panel footer

Panel Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis leo vehicula, fringilla nulla eu, sollicitudin turpis. Donec sed diam purus. Morbi sagittis urna sit amet egestas blandit. Maecenas at turpis quis nulla cursus lobortis. Curabitur nisl justo, mollis vel iaculis in, hendrerit rhoncus justo.

Panel footer

Panel Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis leo vehicula, fringilla nulla eu, sollicitudin turpis. Donec sed diam purus. Morbi sagittis urna sit amet egestas blandit. Maecenas at turpis quis nulla cursus lobortis. Curabitur nisl justo, mollis vel iaculis in, hendrerit rhoncus justo.

Panel footer

Coloured head and footer (bordered)

All 23 colours are available to panels, see our article of colour classes to change to your preference.

Take note of the panel classes, these are what determine the border and header colours or the omission of!

See Tips for more info.

    <div class="col-md-4">
      <div class="panel panel-cocktail-border">
        <div class="panel-heading">
          <h3 class="panel-title">BootStrap Panel</h3>
        </div>
        <div class="panel-body">
          <p class="bs">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis leo vehicula, fringilla nulla eu,
          sollicitudin turpis. Donec sed diam purus. Morbi sagittis urna sit amet egestas blandit. Maecenas at turpis quis nulla
          cursus lobortis. Curabitur nisl justo, mollis vel iaculis in, hendrerit rhoncus justo.</p>
        </div>
        <div class="panel-footer">Panel footer</div>
      </div>
    </div>

Plain head and footer (no border)

    <div class="col-md-4">
      <div class="panel panel-cocktail-white">
        <div class="panel-heading">
          <h3 class="panel-title">Panel Title</h3>
        </div>
        <div class="panel-body">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis leo vehicula, fringilla nulla eu, sollicitudin
          turpis. Donec sed diam purus. Morbi sagittis urna sit amet egestas blandit. Maecenas at turpis quis nulla cursus
          lobortis. Curabitur nisl justo, mollis vel iaculis in, hendrerit rhoncus justo.</p>
        </div>
        <div class="panel-footer">Panel footer</div>
      </div>
    </div>

Plain head and footer (bordered)

    <div class="col-md-4">
      <div class="panel panel-cocktail-light-border">
        <div class="panel-heading">
          <h3 class="panel-title">Panel Title</h3>
        </div>
        <div class="panel-body">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis leo vehicula, fringilla nulla eu, sollicitudin
          turpis. Donec sed diam purus. Morbi sagittis urna sit amet egestas blandit. Maecenas at turpis quis nulla cursus
          lobortis. Curabitur nisl justo, mollis vel iaculis in, hendrerit rhoncus justo.</p>
        </div>
        <div class="panel-footer">Panel footer</div>
      </div>
    </div>

Take note of the panel classes, these are what determine the border and coloured header and footer.

I've attempted to make these classes simple to use, though even I found it confusing as there are several other options available in addition to the three most popular panels listed here.

The example below renders a cocktail colours panel, with a cocktail coloured border (see colour classes).

<div class="panel panel-cocktail-border"></div>

Next is a cocktain coloured panel with a white border (i.e. no border).

<div class="panel panel-cocktail-white">

Next is a cocktail coloured panel with a cocktail coloured border, with no solid header and footer.

<div class="panel panel-cocktail-light-border">
取自“http://x.9tripod.com/wiki/zh/index.php?title=BootStrap_Panels&oldid=209”