筋トレもプログラミングも反復練習が大事である。

プログラミング初心者三十路越えアスリート系女がフリーランスプログラマーを目指すブログ

Railsチュートリアル復習中:Bootstrapの読み込み

スポンサーリンク

f:id:simpledancer:20171217160937p:plain

今日もデザインの部分です。

Bootstrapについて少し触れていきます。

Udemyで今年最大のセール実施中。対象のオンラインコースが全て¥1200!学ぶなら今!

Bootstrap

Bootstrap - Wikipedia

BootstrapウェブサイトWebアプリケーションを作成するフロントエンドWebアプリケーションフレームワークである。 タイポグラフィフォームボタンナビゲーション、その他構成要素やJavaScript用拡張などがHTML及びCSSベースのデザインテンプレートとして用意されている。

まずはgemfileに

gem 'bootstrap-sass', '3.3.7'

を追加します。

f:id:simpledancer:20171217161754p:plain

 そして$ bundle install してBootstrapを読み込みます。

 

カスタムCSSファイルを作るためにコマンドに

$ touch app/assets/stylesheets/custom.scss を打ち込んでファイルを作ります。

ファイル内に

@import "bootstrap-sprockets";
@import "bootstrap";

を記述。

 サーバーを起動させると前回はこれ↓

f:id:simpledancer:20171216134138p:plain

 からの↓

f:id:simpledancer:20171217162959p:plain

とBootstrapを読み込むだけでずいぶんサイトらしくなりました。

CSSファイルは最終的にこういう感じ。↓

 

@import "bootstrap-sprockets";
@import "bootstrap";
/* universal */

body {
padding-top: 60px;
}

section {
overflow: auto;
}

textarea {
resize: vertical;
}

.center {
text-align: center;
}

.center h1 {
margin-bottom: 10px;
}
/* universal */

body {
padding-top: 60px;
}

section {
overflow: auto;
}

textarea {
resize: vertical;
}

.center {
text-align: center;
}

.center h1 {
margin-bottom: 10px;
}
/* header */

#logo {
float: left;
margin-right: 10px;
font-size: 1.7em;
color: #fff;
text-transform: uppercase;
letter-spacing: -1px;
padding-top: 9px;
font-weight: bold;
}

#logo:hover {
color: #fff;
text-decoration: none;
}

f:id:simpledancer:20171217163955p:plain

ロゴを設定しボタンを中央寄せになりました。

参考

Bootstrap 3 Tutorial

getbootstrap.com

今日は短いけど、これだけ!(出先でwifiの電池がやばい)