bootstrap 使い方 レシピ集 まとめ!かなり長いです。。。
最近はクソアプリが形になってきたのですが今の時代、人に使ってもらうためにはデザインの方がむしろ重要なのではと思い、とりあえずbootstrapを学んでいきます。
<!-- 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を参照
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
テーブルを簡単に作れる編
<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アイコンの使いかた
<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>
-----------------------------------------------------------------------------------------------
ドロップダウンメニューの使い方
<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
最上部
<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 ="">«</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 ="">»</a></li>
</ul>
最下
<ul class ="pager">
<li class ="previous"><a href ="">前へ</a></li>
<li class="next"><a href ="">次へ</a></li>
</ul>
</div>
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
navbar
↓
横に縮小させていくと。。。
スマホ対応になる!べんり!
<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系各種
<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">×</button> お知らせ</div>
<div class="panel panel-primary ">
<div class="panel-heading">
お知らせ
</div>
<div class="panel-body">
至急お急ぎ
</div>
</div>
</div>
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
続きましてprogressbar
<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=>これは頻繁に使いそう!!
押すと。。。
このように表示される!
<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">×</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の切り替え
<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も触ります!
<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>
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ラスト!!!画像切り替え!
よくありますよねスライドぽくなります。
かなり長いのですが、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>
これも簡単にできます!
以上です!!!!
勉強会メモ
今回もまとまりのない自分のための備忘録ですw
rails _4.2.3_ new sample_app (バージョン指定)
↓
モデル作成(単数形!!!!!!!!!!!!!!!!!!)
↓
コントローラー(複数形)
---------------------------------------------------------------------------------------------------
command + / で一瞬コメントアウト
<%# コメントの仕方,周りに見られないパターン %>
rake notes でコマンド上でメモが一覧表示される。
---------------------------------------------------------------------------------------------------
ctrl + a コマンド上で先頭の文字にカーソルが当たる
ctrl + e コマンド上で最後の文字にカーソルが当たる
---------------------------------------------------------------------------------------------------
Active record についてまとめ
Active Recordとは、MVCで言うところのM、つまりモデルに相当するものであり、ビジネスデータとビジネスロジックを表すシステムの階層です。Active Recordは、データベースに恒久的に保存される必要のあるビジネスオブジェクトの作成と利用を円滑に行なえるようにします。
----------------------------------------------------------------------------------------------------
出力方法まとめ 手打ちなので入力ミスあるかもです。。。
```rb
post.all
Post.first # 一番目
Post.last #最後
Post.last.title # 最後のPostのタイトル
Post.find(3) #idが3のデータ
Post.find_by_title("title2")#ダイナミックファインダー=>フィールドで探せる。この例だとtitle("title2")
Post.find_by_title_and_id("title2",2) #titleとidが一致しない場合はnilが返ってくる!
Post.order("RANDOM()").limit(3) #ランダムに3つ取得
```
----------------------------------------------------------------------------------------------------
where句
p Post.where(:title => "title1", :id => 1) # ピンポイントで指定
p Post.where("title = ? and id = ?", "title1" , 1) #プレイスホルダー
p Post.where("id > ?". 2) #idが2より大きいもの
p Post.where("body like ?", "hello%" ) #部分文字列で指定
p Post.where(:id => 1..3) #範囲指定
p Post.where(:id => [1.3]) #飛びとびで指定
p Post.order("id desc").limit(3) #新しいものを3件表示
----------------------------------------------------------------------------------------------------
⚠️要チェックscope!!
class Post < ActiveRecord::Base
scope :top3, order("created_at").limit(3)#検索条件を定義できるscopeメソッド
end
p Post.top3 =>top3というメソッドを使えるようになる!!
----------------------------------------------------------------------------------------------------
loggerが便利みたいです=>ターミナル上でどのような検索指定をしてるか見やすくなる!
使用例赤字が適用箇所
require 'active_record'
require 'logger' #便利ツール
ActiveRecord::Base.establish_connection("adapter"=>"sqlite3","database"=> "./blog.db")
ActiveRecord::Base.logger = Logger.new(STDOUT) #便利ツール
class Post < ActiveRecord::Base
scope :top3, order("created_at").limit(3) #検索条件を定義できるscopeメソッド
end
p Post.top3
-----------------------------------------------------------------------------------------------------
Post.where(:title => "title5").first_or_create #無かったら新規で作ってくれる
又は
Post.where(:title => "title6").first_or_create do |p|
p.body = "hello6"
end
p Post.all
----------------------------------------------------------------------------------------------------
更新方法
post = Post.find(1)
post.update_attributes(:title => "ggg", :body => "ok?")
p Post.first
複数更新
Post.where(:id => 1..3).update_all(:title => "hogehoge",:body => "okok!")
p Post.all
----------------------------------------------------------------------------------------------------
削除
delete 単体recordを消す 処理がdestroyより早い
Post.where(:id => 1..2).delete_all
destroy 関連するオブジェクト、関連データまで消す
Post.find(3).destroy
p Post.all
----------------------------------------------------------------------------------------------------
バリデーション
validates :title, :presence => true #titleが空欄だとエラー
validates :body, :length => {:minimum => 5} #5文字以下だとエラー
----------------------------------------------------------------------------------------------------
⚠️アソシエーション 関連付け
class Post < ActiveRecord::Base
has_many :comments #postは複数のcommentsを持っている
end
class Comment < ActiveRecord::Base
belongs_to :post #commentsは一つのpostに紐づく
end
post = Post.find(1)
post.comments.each do |comment| ##紐付いたおかげでこのようなシンプルな記述が可能!
p coment.body
end
以上です。しっかり DB勉強せねば。。。