Bootstrap kütüphaneleri:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
body tag içerisine sitesinden kopyaladığımız navbar kodunu layout/application.html.erb ye yazalım:
colon sistemi 12 lik colon olacak sekilde bolunur.
col-xs=> telefonlar için
col-sm=> Tabletler için
col-md => Desktop için
col- lg=> Buyuk desktoplar için
Örnek:
Desktop Grid Üç Eşit Kolon:
col-sm-offset-2 = baştan 2 kolon boşlık bırak
Örnek:
bu içerik için 2 satır olamlı ikinci satırı ise 3 kolona ayırmalıyız
not: container etrafında boşluk bırakır. tum yapının etrafına boşluk bırakalım:
<div class="container">
<div class="row slider" >
<div class="col-md-12 center" style="padding-bottom:20px">
<img src="http://wowslider.com/sliders/demo-11/data/images/krasivyi_korabl_-1024x768.jpg" width="100%" height="360px">
</div>
</div>
<div class="row">
<div class="col-sm-4 col-md-4 " >
<p class="text-justify "> Lorem ipsum dolor sit amet</p>
<img class="pull-left " src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEbfY22G5ZZUxekxCn_QxQSbdnjPJrwe02d6Zn9s7lbYCQURHI7AUdJdjoybYvotCTKRrHZKIMLeEQbdyhLYN_tQ5tPomI305czP-5sB4td-xa96H5j2TsJ9fur4VUDSe8EFnWCpk5Ff4/s1600/korsan_gemisi.jpg" width="50%" height="180px"/>
<p class="text-muted " > Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dapibus nisl quis accumsan vulputate. Cras vel est quis urna consequat ultrices. Nunc ac mi id neque tincidunt efficitur. Quisque ac feugiat neque. Sed iaculis leo libero, a tincidunt diam luctus at. </p>
<p href="#" class="text-right "><a href="#" style="color:#FF8C00">Learn</a></p>
</div>
<div class="col-sm-4 col-md-4 " >
<p class="text-justify "> Lorem ipsum dolor sit amet</p>
<img class="pull-left" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEbfY22G5ZZUxekxCn_QxQSbdnjPJrwe02d6Zn9s7lbYCQURHI7AUdJdjoybYvotCTKRrHZKIMLeEQbdyhLYN_tQ5tPomI305czP-5sB4td-xa96H5j2TsJ9fur4VUDSe8EFnWCpk5Ff4/s1600/korsan_gemisi.jpg" width="50%" height="180px"/>
<p class="text-muted " > Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dapibus nisl quis accumsan vulputate. Cras vel est quis urna consequat ultrices. Nunc ac mi id neque tincidunt efficitur. Quisque ac feugiat neque. Sed iaculis leo libero, a tincidunt diam luctus at. </p>
<p href="#" class="text-right "><a href="#" style="color:#FF8C00">Learn</a></p>
</div>
<div class="col-sm-4 col-md-4 " >
<p class="text-justify "> Lorem ipsum dolor sit amet</p>
<img class="pull-left" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEbfY22G5ZZUxekxCn_QxQSbdnjPJrwe02d6Zn9s7lbYCQURHI7AUdJdjoybYvotCTKRrHZKIMLeEQbdyhLYN_tQ5tPomI305czP-5sB4td-xa96H5j2TsJ9fur4VUDSe8EFnWCpk5Ff4/s1600/korsan_gemisi.jpg" width="50%" height="180px"/>
<p class="text-muted " > Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dapibus nisl quis accumsan vulputate. Cras vel est quis urna consequat ultrices. Nunc ac mi id neque tincidunt efficitur. Quisque ac feugiat neque. Sed iaculis leo libero, a tincidunt diam luctus at.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dapibus nisl quis accumsan vulputate. Cras vel est quis urna consequat ultrices. Nunc ac mi id neque tincidunt efficitur. Quisque ac feugiat neque. Sed iaculis leo libero, a tincidunt diam luctus at. </p>
<p href="#" class="text-right "><a href="#" style="color:#FF8C00">Learn</a></p>
</div>
</div>
</div>
pull-left : yazı ve resmin yan yana olmasını sağlar
text-justify: yazıyı iki yana yaslar
well: yazıyı ayrı bir panele alır
img-responsive : resime responsive özellik katar
