bootstrap  使い方 レシピ集 まとめ!かなり長いです。。。

 最近はクソアプリが形になってきたのですが今の時代、人に使ってもらうためにはデザインの方がむしろ重要なのではと思い、とりあえずbootstrapを学んでいきます。

getbootstrap.com

 

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

↑これらをapplication.html.erbのhead内にコピーする


<%= yield %>を <div class ="container">で囲む!
container 内に<%= render 'layouts/header' %>記述

例)_header.html.erbにnavbarを埋め込む方法

<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img alt="Brand" src="...">
</a>
</div>
</div>
</nav>

railsではこんな感じで使う!=>いろんなパターンがあるらしいので調べてみる

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
各単語の意味

<div class="container">
<div class="row">
<div class="col-sm-3" style = "background:gray;">side1</div>
<div class="col-sm-6 col-xs-6" style = "background:green;">main</div>
<div class="col-sm-3 col-xs-6" style ="background:gray;">side2</div>
</div>
</div>
gridといわれるもので
デバイスに対応したレスポンシブな表示が可能
12分割で表す
スペースで複数指定できる
真ん中のsmやxsっていうのは各デバイスの基準のようなもの EX))スマホでレスポンシブ表示したいならxsを用いるなど。。=>詳細は

CSS · Bootstrap  grid optionsを参照

 

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

テーブルを簡単に作れる編

 

 f:id:snsn19910803:20151020130935p:plain

<div class = "container" style ="padding: 20px 0">

<table class = "table table-striped table-bordered table-hover table-condensed">
<caption>table title and/or explanatory text</caption>
<thead>
<tr>
<th>id</th><th>score</th>
</tr>
</thead>
<tbody>
<tr class = "warning">
<td >@gorira</td><td>100</td>
</tr>

<tr>
<td>@rakko</td><td>60</td>
</tr>
<tr>
<td>@koara</td><td>70</td>
</tr>

</tbody>
</table>
</div>

赤文字のとこに注目

classに使いたいものを連ねて記述するだけ!!

ちょーーーーべんり!!!!!

今までの苦労はなんだ!!

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

form関連

<div class="container" style ="padding:20px 0">

<form class ="form-horizonal" style = "margin-bottom:15px;">
<div class="form-group" >
<label class ="sr-only-control-label" for = "email">email</label>
<input type ="text" id = "email" class ="form-control" placeholder ="email">
<span class ="help-block">error!!</span>
</div>
<div class="form-group">
<input type ="submit" value ="submit" class ="btn btn-primary">
</div>
</form>
</div>

-----------------------------------------------------------------------------------------------

 

glyphiconアイコンの使いかた

f:id:snsn19910803:20151020125716p:plain

<div class="container" style ="padding:20px 0">
<p><i class = "glyphicon glyphicon-book"></i>book</p>
<button class="btn btn-primary">push me!</button>
<button class="btn btn-success"><i class = "glyphicon glyphicon-book"></i>bookpush me!</button>
<button class="btn btn-danger">push me!</button>
<button class="btn btn-warning">push me!</button>


</div>

-----------------------------------------------------------------------------------------------

 

ドロップダウンメニューの使い方

f:id:snsn19910803:20151020130147p:plain


<div class="container" style ="padding:20px 0">
<div class ="btn-group">
<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
action <span class ="caret"></span> <--右の逆三角形

</button>

<ul class ="dropdown-menu">
<li><a href="">action</a></li>
<li><a href="">action</a></li>
<li class ="divider"></li>  <---ドロップダウンメニューないで横線をつける
<li><a href="">action</a></li>

</ul>
</div>
</div>

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ナビゲーション関連
最上部 breadcrumb
真ん中 pagination
最下部 pager

f:id:snsn19910803:20151020133212p:plain

 

最上部
<div class ="container" style = "padding:20px 0">
<ul class = "breadcrumb">
<li><a href="">home</a></li>
<li><a href="">users</a></li>
<li class = "active">@nanami</li>
</ul>

真ん中
<ul class ="pagination">
<li class ="disabled"><a href ="">&laquo;</a></li>
<li class ="active"><a href ="">1</a></li>
<li><a href ="">2</a></li>
<li><a href ="">3</a></li>
<li><a href ="">&raquo;</a></li>
</ul>

最下

 

<ul class ="pager">
<li class ="previous"><a href ="">前へ</a></li>
<li class="next"><a href ="">次へ</a></li>
</ul>

</div>

 

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
navbar



f:id:snsn19910803:20151020142255p:plain

横に縮小させていくと。。。

f:id:snsn19910803:20151020142302p:plain

スマホ対応になる!べんり!


<nav class ="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-header">
<button class="navbar-toggle" data-toggle="collapse" data-target=".target">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class ="navbar-brand" href ="">sample</a>
</div>
<div class ="collapse navbar-collapse target">
<ul class =" nav navbar-nav">
<li class ="active"><a href ="">link1</a></li>
<li><a href ="">link2</a></li>
</ul>
<ul class =" nav navbar-nav navbar-right">
<li><a href ="">link3</a></li>
</ul>
</div>
</nav>

navbar-fixed-topでheaderをスクロールしていっても上部に固定できる

activeは今いるとこを示してくれる

navbar-brandはかっこいいスタイルになる

 

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

alert系各種
 

f:id:snsn19910803:20151020152725p:plain

 

 

<div class ="container" style = "padding:20px 0">
<p>product<span class ="label label-primary" >new!</span></p>
<p>inbox<span class ="badge">5</span></p>
<p>inbox<span class ="badge"></span></p>
<div class="alert alert-info">
<button class ="close" data-dismiss="alert">&times;</button> お知らせ</div>

<div class="panel panel-primary ">
<div class="panel-heading">
お知らせ


</div>
<div class="panel-body">
至急お急ぎ

</div>
</div>
</div>

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー



続きましてprogressbar

f:id:snsn19910803:20151020153639p:plain

<div class ="container" style = "padding:20px 0">
<div class ="progress">
<div class ="progress-bar progress-bar-primary" style ="width:60%"></div>
</div>


<div class ="progress progress-striped active">
<div class ="progress-bar progress-bar-info" style ="width:40%"></div>
<div class ="progress-bar progress-bar-primary" style ="width:30%"></div>
<div class ="progress-bar progress-bar-warning" style ="width:20%"></div>
</div>
</div>

 

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー


modal=>これは頻繁に使いそう!!

f:id:snsn19910803:20151020154615p:plain

押すと。。。

f:id:snsn19910803:20151020154622p:plain

このように表示される!


<div class ="container" style = "padding:20px 0">
<a data-toggle="modal" href ="#mymodal" class ="btn btn-primary">show me!</a>

<div class="modal fade" id ="mymodal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class ="close" data-dismiss ="modal">&times;</button>
<h4 class ="modal-title">my-modal</h4>
</div>
<div class="modal-body"> こんにちは!
</div>
<div class="modal-footer">
<button class="btn btn-primary">ok!!</button>
</div>
</div>
</div>
</div>
</div>

なかなかclassが多かったりするけど使えそう!
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー


tabの切り替え

f:id:snsn19910803:20151020155809p:plain

<div class ="container" style = "padding:20px 0">

<ul class ="nav nav-tabs" style ="margin-bottom:15px;">
<li class ="active"><a href ="#home" data-toggle ="tab">home</a></li>
<li><a href ="#about" data-toggle ="tab">about</a></li>
</ul>

<div class="tab-content">
<div class="tab-pane active" id ="home">homeだよおお</div>
<div class="tab-pane" id ="about">aboutだよおお</div>
</div>
</div>

 

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

tooltipとpopover機能
今回はjsも触ります!

f:id:snsn19910803:20151020171621p:plain

 <div class ="container" style = "padding:20px 0">
<p><a href ="#" data-toggle ="tooltip" title ="説明">this</a>and<a href ="#" data-toggle="popover" title ="説明" data-content ="さらに説明" >that</a>.</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
$(function() {
$("[data-toggle=tooltip]").tooltip({placement: 'bottom'});
$("[data-toggle=popover]").popover();
});
</script>


ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー



ラスト!!!画像切り替え!

f:id:snsn19910803:20151020173102p:plain

f:id:snsn19910803:20151020173109p:plain

よくありますよねスライドぽくなります。

かなり長いのですが、bootstrap内のcarouselにテンプレがあるのでそちらも参照すると良いです。

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" style="width:500px">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
<li data-target="#carousel-example-generic" data-slide-to="3"></li>
</ol>

<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img/151020-0001.png" alt="photo1">
<div class="carousel-caption">
写真1
</div>
</div>
<div class="item">
<img src="img/151020-0003.png" alt="photo2">
<div class="carousel-caption">
写真2
</div>
</div>
<div class="item">
<img src="img/151020-0001.png" alt="photo3">
<div class="carousel-caption">
写真3
</div>
</div> <div class="item">
<img src="img/151020-0013.png" alt="photo4">
<div class="carousel-caption">
写真4
</div>
</div>
</div>

<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>


これも簡単にできます!

以上です!!!!