미티어에 메타리얼 부트스트랩 디자인을 적용하는 방법을 알아보겠습니다.

” style=”margin-right: 0px; margin-bottom: 1em; margin-left: 0px; word-wrap: break-word; color: rgb(34, 34, 34); font-family: ‘Roboto Condensed’, Tauri, ‘Lucida Grande’, ‘Lucida Sans Unicode’, ‘Lucida Sans’, AppleSDGothicNeo-Medium, ‘Segoe UI’, ‘Malgun Gothic’, Verdana, Tahoma, sans-serif; font-size: 15px; line-height: normal;”>미티어에 메타리얼 부트스트랩 디자인을 적용하는 방법을 알아보겠습니다.

Create Example application

cd material
meteor

Material Bootstrap Design

https://github.com/FezVrasta/bootstrap-material-design

” style=”margin: 1em 0px; word-wrap: break-word; color: rgb(34, 34, 34); font-family: ‘Roboto Condensed’, Tauri, ‘Lucida Grande’, ‘Lucida Sans Unicode’, ‘Lucida Sans’, AppleSDGothicNeo-Medium, ‘Segoe UI’, ‘Malgun Gothic’, Verdana, Tahoma, sans-serif; font-size: 15px; line-height: normal;”>https://github.com/FezVrasta/bootstrap-material-design

How to install

‘s package version selections:

fezvrasta:bootstrap-material-design added, version 0.2.1
twbs:bootstrap added, version 3.3.1

fezvrasta:bootstrap-material-design: FezVrasta’s Bootstrap theme implementing Google‘s Material (Paper) Design

Example

http://fezvrasta.github.io/bootstrap-material-design/
http://fezvrasta.github.io/bootstrap-material-design/bootstrap-elements.html

Button

&lt;h1 class="header"&gt;Button&lt;/h1&gt; &lt;div class="sample1"&gt; &lt;h2&gt;Normal buttons&lt;/h2&gt; &lt;button class="btn btn-default"&gt;Button&lt;/button&gt; &lt;button class="btn btn-primary"&gt;Colored&lt;/button&gt; &lt;button class="btn btn-default" disabled=""&gt;Disabled&lt;/button&gt; &lt;button class="btn btn-default btn-link"&gt;Noink&lt;/button&gt; &lt;/div&gt; &lt;div class="sample1"&gt; &lt;h2&gt;Flat buttons&lt;/h2&gt; &lt;button class="btn btn-default btn-flat"&gt;Button&lt;/button&gt; &lt;button class="btn btn-primary btn-flat"&gt;Colored&lt;/button&gt; &lt;button class="btn btn-default btn-flat" disabled=""&gt;Disabled&lt;/button&gt; &lt;button class="btn btn-default btn-flat btn-link"&gt;Noink&lt;/button&gt; &lt;/div&gt; &lt;div class="sample2"&gt; &lt;h2&gt;Raised buttons&lt;/h2&gt; &lt;button class="btn btn-default btn-raised"&gt;Button&lt;/button&gt; &lt;button class="btn btn-primary btn-raised"&gt;Colored&lt;/button&gt; &lt;button class="btn btn-default btn-raised" disabled=""&gt;Disabled&lt;/button&gt; &lt;button class="btn btn-default btn-raised btn-link"&gt;Noink&lt;/button&gt; &lt;/div&gt; &lt;div class="sample3"&gt; &lt;h2&gt;Custom button content&lt;/h2&gt; &lt;button class="btn btn-primary btn-flat"&gt;&lt;i class="mdi-navigation-check"&gt;&lt;/i&gt; Ok&lt;/button&gt; &lt;button class="btn btn-default btn-flat"&gt;&lt;i class="mdi-navigation-close"&gt;&lt;/i&gt; Cancel&lt;/button&gt; &lt;/div&gt; &lt;style&gt; #button h2 { padding: 14px; margin: 0; font-size: 16px; font-weight: 400; } &lt;/style&gt;

"><h1 class="header">Button</h1> <div class="sample1"> <h2>Normal buttons</h2> <button class="btn btn-default">Button</button> <button class="btn btn-primary">Colored</button> <button class="btn btn-default" disabled="">Disabled</button> <button class="btn btn-default btn-link">Noink</button> </div> <div class="sample1"> <h2>Flat buttons</h2> <button class="btn btn-default btn-flat">Button</button> <button class="btn btn-primary btn-flat">Colored</button> <button class="btn btn-default btn-flat" disabled="">Disabled</button> <button class="btn btn-default btn-flat btn-link">Noink</button> </div> <div class="sample2"> <h2>Raised buttons</h2> <button class="btn btn-default btn-raised">Button</button> <button class="btn btn-primary btn-raised">Colored</button> <button class="btn btn-default btn-raised" disabled="">Disabled</button> <button class="btn btn-default btn-raised btn-link">Noink</button> </div> <div class="sample3"> <h2>Custom button content</h2> <button class="btn btn-primary btn-flat"><i class="mdi-navigation-check"></i> Ok</button> <button class="btn btn-default btn-flat"><i class="mdi-navigation-close"></i> Cancel</button> </div>

<style> #button h2 { padding: 14px; margin: 0; font-size: 16px; font-weight: 400; } </style>” style=”border-radius: 3px; word-wrap: break-word; border: 1px solid rgb(204, 204, 204); overflow: auto; color: rgb(34, 34, 34); font-size: 15px; line-height: normal;”><h1 class="header">Button</h1> <div class="sample1"> <h2>Normal buttons</h2> <button class="btn btn-default">Button</button> <button class="btn btn-primary">Colored</button> <button class="btn btn-default" disabled="">Disabled</button> <button class="btn btn-default btn-link">Noink</button> </div> <div class="sample1"> <h2>Flat buttons</h2> <button class="btn btn-default btn-flat">Button</button> <button class="btn btn-primary btn-flat">Colored</button> <button class="btn btn-default btn-flat" disabled="">Disabled</button> <button class="btn btn-default btn-flat btn-link">Noink</button> </div> <div class="sample2"> <h2>Raised buttons</h2> <button class="btn btn-default btn-raised">Button</button> <button class="btn btn-primary btn-raised">Colored</button> <button class="btn btn-default btn-raised" disabled="">Disabled</button> <button class="btn btn-default btn-raised btn-link">Noink</button> </div> <div class="sample3"> <h2>Custom button content</h2> <button class="btn btn-primary btn-flat"><i class="mdi-navigation-check"></i> Ok</button> <button class="btn btn-default btn-flat"><i class="mdi-navigation-close"></i> Cancel</button> </div>

<style> #button h2 { padding: 14px; margin: 0; font-size: 16px; font-weight: 400; } </style>

Checkbox

&lt;h1 class="header"&gt;Checkbox&lt;/h1&gt; &lt;!-- Simple checkbox with label --&gt; &lt;div class="sample1"&gt; &lt;div class="checkbox"&gt; &lt;label&gt; &lt;input type="checkbox"&gt; Notifications &lt;/label&gt; &lt;/div&gt; &lt;p class="hint"&gt;Notify me about updates to apps or games that I've downloaded&lt;/p&gt; &lt;/div&gt; &lt;!-- Simple checkbox with label, checked --&gt; &lt;div class="sample1"&gt; &lt;div class="checkbox"&gt; &lt;label&gt; &lt;input type="checkbox" checked=""&gt; Auto-updates &lt;/label&gt; &lt;/div&gt; &lt;p class="hint"&gt;Auto-update apps over wifi only&lt;/p&gt; &lt;/div&gt; &lt;!-- Simple checkbox with label --&gt; &lt;div class="sample1"&gt; &lt;div class="checkbox"&gt; &lt;label&gt; &lt;input type="checkbox"&gt; Clear search history &lt;/label&gt; &lt;/div&gt; &lt;p class="hint"&gt;Remove all the searches you have ever performed&lt;/p&gt; &lt;/div&gt; &lt;h2&gt;Sound&lt;/h2&gt; &lt;!-- Checkboxes with labels on the left --&gt; &lt;div class="sample2"&gt; &lt;div class="text"&gt;Touch sounds&lt;/div&gt; &lt;div class="checkbox checkbox-primary"&gt; &lt;label&gt; &lt;input type="checkbox" checked=""&gt; &lt;/label&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="sample2"&gt; &lt;div class="text"&gt;Screen lock sound&lt;/div&gt; &lt;div class="checkbox checkbox-primary"&gt; &lt;label&gt; &lt;input type="checkbox"&gt; &lt;/label&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="sample2"&gt; &lt;div class="text"&gt;Vibrate on touch&lt;/div&gt; &lt;div class="checkbox checkbox-primary"&gt; &lt;label&gt; &lt;input type="checkbox"&gt; &lt;/label&gt; &lt;/div&gt; &lt;/div&gt; &lt;!-- Custom page style --&gt; &lt;style&gt; #checkbox .sample1 label { font-weight: bold; } #checkbox .hint { padding-left: 45px; padding-top: 20px; font-weight: 400; } #checkbox .sample1 { padding-bottom: 20px; } #checkbox h2 { font-size: 18.7199993133545px; font-weight: bold; margin-bottom: 30px; } #checkbox .sample2 { width: 300px; clear: both; font-weight: 400; } #checkbox .sample2 .text { padding: 10px 0; display: inline-block; } #checkbox .sample2 .checkbox { float: right; } &lt;/style&gt;

"><h1 class="header">Checkbox</h1>


&lt;!-- Simple checkbox with label --&gt;

&lt;div class="sample1"&gt;

  &lt;div class="checkbox"&gt;

    &lt;label&gt;

      &lt;input type="checkbox"&gt; Notifications

    &lt;/label&gt;

  &lt;/div&gt;

  &lt;p class="hint"&gt;Notify me about updates to apps or games that I've downloaded&lt;/p&gt;

&lt;/div&gt;
&lt;!-- Simple checkbox with label, checked --&gt;

&lt;div class="sample1"&gt;

  &lt;div class="checkbox"&gt;

    &lt;label&gt;

      &lt;input type="checkbox" checked=""&gt; Auto-updates

    &lt;/label&gt;

  &lt;/div&gt;

  &lt;p class="hint"&gt;Auto-update apps over wifi only&lt;/p&gt;

&lt;/div&gt;
&lt;!-- Simple checkbox with label --&gt;

&lt;div class="sample1"&gt;

  &lt;div class="checkbox"&gt;

    &lt;label&gt;

      &lt;input type="checkbox"&gt; Clear search history

    &lt;/label&gt;

  &lt;/div&gt;

  &lt;p class="hint"&gt;Remove all the searches you have ever performed&lt;/p&gt;

&lt;/div&gt;
&lt;h2&gt;Sound&lt;/h2&gt;
&lt;!-- Checkboxes with labels on the left --&gt;

&lt;div class="sample2"&gt;

  &lt;div class="text"&gt;Touch sounds&lt;/div&gt;

  &lt;div class="checkbox checkbox-primary"&gt;

    &lt;label&gt;

      &lt;input type="checkbox" checked=""&gt;

    &lt;/label&gt;

  &lt;/div&gt;

&lt;/div&gt;

&lt;div class="sample2"&gt;

  &lt;div class="text"&gt;Screen lock sound&lt;/div&gt;

  &lt;div class="checkbox checkbox-primary"&gt;

    &lt;label&gt;

      &lt;input type="checkbox"&gt;

    &lt;/label&gt;

  &lt;/div&gt;

&lt;/div&gt;

&lt;div class="sample2"&gt;

  &lt;div class="text"&gt;Vibrate on touch&lt;/div&gt;

  &lt;div class="checkbox checkbox-primary"&gt;

    &lt;label&gt;

      &lt;input type="checkbox"&gt;

    &lt;/label&gt;

  &lt;/div&gt;

&lt;/div&gt;
&lt;!-- Custom page style --&gt;

&lt;style&gt;

  #checkbox .sample1 label {

    font-weight: bold;

  }

  #checkbox .hint {

    padding-left: 45px;

    padding-top: 20px;

    font-weight: 400;

  }

  #checkbox .sample1 {

    padding-bottom: 20px;

  }
  #checkbox h2 {

    font-size: 18.7199993133545px;

    font-weight: bold;

    margin-bottom: 30px;

  }
  #checkbox .sample2 {

    width: 300px;

    clear: both;

    font-weight: 400;

  }

#checkbox .sample2 .text { padding: 10px 0; display: inline-block; } #checkbox .sample2 .checkbox { float: right; } </style>” style=”border-radius: 3px; word-wrap: break-word; border: 1px solid rgb(204, 204, 204); overflow: auto; color: rgb(34, 34, 34); font-size: 15px; line-height: normal;”><h1 class="header">Checkbox</h1>


<!-- Simple checkbox with label -->

<div class="sample1">

  <div class="checkbox">

    <label>

      <input type="checkbox"> Notifications

    </label>

  </div>

  <p class="hint">Notify me about updates to apps or games that I've downloaded</p>

</div>
<!-- Simple checkbox with label, checked -->

<div class="sample1">

  <div class="checkbox">

    <label>

      <input type="checkbox" checked=""> Auto-updates

    </label>

  </div>

  <p class="hint">Auto-update apps over wifi only</p>

</div>
<!-- Simple checkbox with label -->

<div class="sample1">

  <div class="checkbox">

    <label>

      <input type="checkbox"> Clear search history

    </label>

  </div>

  <p class="hint">Remove all the searches you have ever performed</p>

</div>
<h2>Sound</h2>
<!-- Checkboxes with labels on the left -->

<div class="sample2">

  <div class="text">Touch sounds</div>

  <div class="checkbox checkbox-primary">

    <label>

      <input type="checkbox" checked="">

    </label>

  </div>

</div>

<div class="sample2">

  <div class="text">Screen lock sound</div>

  <div class="checkbox checkbox-primary">

    <label>

      <input type="checkbox">

    </label>

  </div>

</div>

<div class="sample2">

  <div class="text">Vibrate on touch</div>

  <div class="checkbox checkbox-primary">

    <label>

      <input type="checkbox">

    </label>

  </div>

</div>
<!-- Custom page style -->

<style>

  #checkbox .sample1 label {

    font-weight: bold;

  }

  #checkbox .hint {

    padding-left: 45px;

    padding-top: 20px;

    font-weight: 400;

  }

  #checkbox .sample1 {

    padding-bottom: 20px;

  }
  #checkbox h2 {

    font-size: 18.7199993133545px;

    font-weight: bold;

    margin-bottom: 30px;

  }
  #checkbox .sample2 {

    width: 300px;

    clear: both;

    font-weight: 400;

  }

#checkbox .sample2 .text { padding: 10px 0; display: inline-block; } #checkbox .sample2 .checkbox { float: right; } </style>

Issue

이슈를 해결하기 위해서 다시 README 파일을 꼼꼼하게 읽다보면 test.html 에서 css, js를 추가하라고 적혀있습니다.
그리고 도큐먼트가 다 읽어진 상태에 $.material.init() 를 하라고 나와있습니다.

” style=”margin-right: 0px; margin-bottom: 1em; margin-left: 0px; word-wrap: break-word; color: rgb(34, 34, 34); font-family: ‘Roboto Condensed’, Tauri, ‘Lucida Grande’, ‘Lucida Sans Unicode’, ‘Lucida Sans’, AppleSDGothicNeo-Medium, ‘Segoe UI’, ‘Malgun Gothic’, Verdana, Tahoma, sans-serif; font-size: 15px; line-height: normal;”>이슈를 해결하기 위해서 다시 README 파일을 꼼꼼하게 읽다보면 test.html 에서 css, js를 추가하라고 적혀있습니다.
그리고 도큐먼트가 다 읽어진 상태에 $.material.init() 를 하라고 나와있습니다.

https://github.com/FezVrasta/bootstrap-material-design#getting-started

https://github.com/FezVrasta/bootstrap-material-design/blob/master/dist/test.html

document).ready(function() {

    $.material.init();

  });

</script>

…


How to Solve it
if (Meteor.isClient) {

  Template.body.rendered = function () {

    $(function() {

      $.material.init();

    });

  };

}

…
코드를 적용하고 나서 다시 페이지를 확인하면 그림처럼 제대로 체크박스가 나오는 것을 확인할 수 있습니다. 
” style=”margin: 1em 0px; word-wrap: break-word; color: rgb(34, 34, 34); font-family: ‘Roboto Condensed’, Tauri, ‘Lucida Grande’, ‘Lucida Sans Unicode’, ‘Lucida Sans’, AppleSDGothicNeo-Medium, ‘Segoe UI’, ‘Malgun Gothic’, Verdana, Tahoma, sans-serif; font-size: 15px; line-height: normal; text-align: center; clear: none; float: none;”>
$.material.init()가 호출되면 ripple.js가 checkbox 등에 추가적으로 html 테그를 추가해주는 것을 코드를 까보면 확인할 수 있습니다. 
” style=”margin: 1em 0px; word-wrap: break-word; color: rgb(34, 34, 34); font-family: ‘Roboto Condensed’, Tauri, ‘Lucida Grande’, ‘Lucida Sans Unicode’, ‘Lucida Sans’, AppleSDGothicNeo-Medium, ‘Segoe UI’, ‘Malgun Gothic’, Verdana, Tahoma, sans-serif; font-size: 15px; line-height: normal;”>$.material.init()가 호출되면 ripple.js가 checkbox 등에 추가적으로 html 테그를 추가하는 것을 코드를 까면 나옵니다.

이상한모임

How to add Material Bootstrap design to Meteor

Create Example application

Material Bootstrap Design

How to install

Example

Button

How to Solve it

How to add Material Bootstrap design to Meteor

How to add Material Bootstrap design to Meteor

Create Example application

Material Bootstrap Design

How to install

Example

Button

How to Solve it

Share this:

Related posts:

함께 성장하고 싶은 PM 을 만나고 싶습니다.

2022년의 마침표를 찍기 위하여

글이 읽히지 않는 사람들이 이렇게 많다니