MaterializeCSS 中的面板或组框？答案

【问题标题】：Panel or group box in MaterializeCSS?MaterializeCSS 中的面板或组框？
【发布时间】：2015-11-11 04:36:27
【问题描述】：

MaterializeCSS 中有类似 Bootstrap 面板的东西吗？

此处的引导面板： http://www.w3schools.com/bootstrap/bootstrap_panels.asp

【问题讨论】：

标签： html twitter-bootstrap css materialize

【解决方案1】：

最接近 Bootstrap 的 panel 将在 Materialize CSS 中称为 card-panel。

例子：

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.2/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.2/css/materialize.min.css" rel="stylesheet"/>
    
<!--Card Panel-->
<div class="card-panel">
    <span class="black-text">A Basic Panel</span>
</div>

干杯

【讨论】：

【解决方案2】：

Panel 和 well 在他们即将推出的 v4.0 中被 bootstrap 所取代

Bootstrap Developer Explains Here..

基本上，卡片是面板的更好替代品，您可以在其中获得相同的结果。

<div class="row">
    <div class="col s4">
        <div class="card darken-1">
             <div class="card-content   ">
                 <span class="card-title">Card Title</span>
                    <p>I am a very simple card. 
                       I am good at containing small bits of information.
                       I am convenient because I require little markup to
                       use effectively.
                     </p>
              </div>
              <div class="card-action">
                  <a href="#">This is a link</a>
                  <a href="#">This is a link</a>
             </div>
      </div>
</div>

但是，如果您喜欢具有不同标题背景和不同正文背景的引导面板的外观和感觉，那么您必须坚持使用引导程序而不是 materializecss

【讨论】：