MaterialiseCSS中的面板或组框?

时间:2015-11-11 04:36:27

标签: html5 twitter-bootstrap css3 materialize

MaterialiseCSS中是否存在类似Bootstrap面板的内容?

这里的Bootstrap面板: http://www.w3schools.com/bootstrap/bootstrap_panels.asp

2 个答案:

答案 0 :(得分:2)

最接近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>

干杯

答案 1 :(得分:1)

面板和井在他们即将发布的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>

然而,如果您喜欢具有不同标题背景和不同身体背景的自举面板的外观和感觉,那么您将不得不坚持使用bootstrap而不是物质化