Bootstrap üzerine kullanacaksak;
-Normal bir html sayfası;
kütüphaneleri:
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.3.0/js/material.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.3.0/js/ripples.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.3.0/css/material.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.3.0/css/material-fullpalette.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.3.0/css/ripples.min.css">
body tagları içerisine istediğimiz componentin kodlarını kopyalayıp kodların sonuna;
<script type="text/javascript"> $.material.init()</script>
satırı eklememiz gerekiyor.
-Rails üzerindeki kullanımı:
gemfile=> gem 'bootstrap-material-design'
application.js=> //= require bootstrap-material-design
aplication. css=> *= require bootstrap-material-design
kütüphaneler kullanıma hazır.
örneğin navbar eklemek istersek, view/layout/ application.html.erb sayfasına head blogu içerisine yukarıdaki kütüphaneleri ekleyelim, body blogu içerisine internet sitesinden kopyalayabildiğimiz navbar komutlarını ekleyelim
<div class="navbar navbar-default shadow-z-3 ">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="javascript:void(0)">Brand</a>
</div>
<div class="navbar-collapse collapse navbar-responsive-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="javascript:void(0)">Active</a></li>
<li><a href="javascript:void(0)">Link</a></li>
<li class="dropdown">
<a href="bootstrap-elements.html" data-target="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="javascript:void(0)">Action</a></li>
<li><a href="javascript:void(0)">Another action</a></li>
<li><a href="javascript:void(0)">Something else here</a></li>
<li class="divider"></li>
<li class="dropdown-header">Dropdown header</li>
<li><a href="javascript:void(0)">Separated link</a></li>
<li><a href="javascript:void(0)">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<input class="form-control col-lg-8" placeholder="Search" type="text">
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="javascript:void(0)">Link</a></li>
<li class="dropdown">
<a href="bootstrap-elements.html" data-target="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="javascript:void(0)">Action</a></li>
<li><a href="javascript:void(0)">Another action</a></li>
<li><a href="javascript:void(0)">Something else here</a></li>
<li class="divider"></li>
<li><a href="javascript:void(0)">Separated link</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<script type="text/javascript"> $.material.init()</script>
çalıştırıp bakalım:
Renk paletlerin kullanımı:
navbarın rengini değiştirmek istiyoruz: nav bar div etiketini aşağıdaki şekilde güncelleyebiliriz
<div class="navbar navbar-default shadow-z-3 navbar-material-red-300">
genel kullanım: sınıfismi-material-renk-kod
style css dosyası kullanarak tamamen özel bi renk kullanmak istersek;
stylesheets/ style.css dosyası olusturup içine sınıfı yazalım;
.navbar-custom {
color: #FFFFFF;
background-color: #CC3333 !important;
}
navbarı düzenleyelim:
not: shadow-z-3 derinlik ve gölgelendirme katar:
