マテリアライズからフッタCSSのみを取得

Question

私は自分のCSSとブートストラップのv4でWebページを持っていますが、マテリアライズのフッタを使用したいのですが、ブートストラップとの衝突を避けるためにCSSコード全体を使用したくありません。 CSSのこの部分だけを得る方法はありますか？

Answer 1

これには他のコードがあるかどうかわかりません。 mdbootstrapなどを試すことができます。しかしここに私が作ったスニペットがあります。

HTML

<!--Footer--> 
<footer class="page-footer blue center-on-small-only"> 
    <!--Footer Links--> 
    <div class="container-fluid"> 
    <div class="row"> 
     <!--First column--> 
     <div class="col-md-3 offset-md-1"> 
     <h3 class="title">Footer Content</h3> 
     <p>Here you can use rows and columns here to organize your footer content.</p> 
     </div> 
     <!--/.First column--> 
     <hr class="hidden-md-up"> 
     <!--Second column--> 
     <div class="col-md-2 offset-md-1"> 
     <h5 class="title">Links</h5> 
     <ul> 
      <li><a href="#!">Link 1</a></li> 
      <li><a href="#!">Link 2</a></li> 
      <li><a href="#!">Link 3</a></li> 
      <li><a href="#!">Link 4</a></li> 
     </ul> 
     </div> 
     <!--/.Second column--> 
     <hr class="hidden-md-up"> 
     <!--Third column--> 
     <div class="col-md-2"> 
     <h5 class="title">Links</h5> 
     <ul> 
      <li><a href="#!">Link 1</a></li> 
      <li><a href="#!">Link 2</a></li> 
      <li><a href="#!">Link 3</a></li> 
      <li><a href="#!">Link 4</a></li> 
     </ul> 
     </div> 
     <!--/.Third column--> 
     <hr class="hidden-md-up"> 
     <!--Fourth column--> 
     <div class="col-md-2"> 
     <h5 class="title">Links</h5> 
     <ul> 
      <li><a href="#!">Link 1</a></li> 
      <li><a href="#!">Link 2</a></li> 
      <li><a href="#!">Link 3</a></li> 
      <li><a href="#!">Link 4</a></li> 
     </ul> 
     </div> 
     <!--/.Fourth column--> 
    </div> 
    </div> 
    <!--/.Footer Links--> 
    <!--Copyright--> 
    <div class="footer-copyright"> 
    <div class="container-fluid"> 
     © 2017 Copyright: <a href="https://stackoverflow.com/users/4004879/jayakrishnan">jayakrishnancn.co.nf </a> 
    </div> 
    </div> 
    <!--/.Copyright--> 
</footer> 
<!--/.Footer--> 

CSS

.blue { 
    background: #ee6e73; 
} 

.page-footer { 
    color: #fff; 
} 
.page-footer .title { 
    line-height: 2em; 
} 
.page-footer .container-fluid { 
    padding: 10px; 
} 
.page-footer li, .page-footer ul { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
} 
.page-footer a { 
    color: #fff; 
    text-decoration: none; 
} 
.page-footer .footer-copyright { 
    background: rgba(51, 51, 51, 0.08); 
    padding: 10px 0px; 
}