Railsチュートリアル 5章
Bootstrap
Webデザインとユーザーインターフェイス要素を簡単に導入できるCSSフレームワークである。
gemを入れる必要がある。
gem 'bootstrap-sass', '3.4.1'
@importを使ってcssにBootstrapを入れ込む。
cssファイル内
@import "bootstrap-sprockets";
@import "bootstrap";
Sass
cssの上位版？
ネストと変数を使える
ネスト
.center {
text-align: center;
}
.center h1 {
margin-bottom: 10px;
}
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
⏬
.center {
text-align: center;
h1 {
margin-bottom: 10px;
}
}
これがネスト
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
変数
h2 {
.
.
.
color: #777;
}
.
.
.
footer {
.
.
.
color: #777;
}
⏬
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
$light-gray: #777;
これが変数
.
.
.
h2 {
.
.
.
color: $light-gray;
}
.
.
.
footer {
.
.
.
color: $light-gray;
}
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
名前付きルート
root 'static_pages#home'
get '/help' ,to: 'static_pages#help'
get '/about', to: 'static_pages#about'
get '/contact', to: 'static_pages#contact'
get '/signup', to: 'users#new'
上4つに注目
それぞれhelp_pathのように使える！
,忘れないで。
to以下はrootと書き方一緒。コントローラー名＃アクション名
resources :users
end
テストコード
# 5章
# トップページにリンクがあるかどうか
it "layout links" do
visit root_path
expect(page).to have_link href: root_path, count:2
expect(page).to have_link href: help_path
expect(page).to have_link href: about_path
expect(page).to have_link href: contact_path
expect(page).to have_link href: signup_path
リンクがあるかどうかは have_link href: パス名を使うことでテストできた。
expect(page) to have_link 'Help', href:help_path
こんな風に書くこともできるよ。'Help'はリンクの文字で、href以降はパス名
end
