1.そもそもTwitter-Bootstrapとは？
Twitter Bootstrapは、米ツイッターが開発・提供しているフロントエンドツールです。
オープンソースで公開されています。
オープンソースで公開されています。
自力でHTMLやCSSを作成するよりもはるかに楽にレイアウト・コンポーネントを作成することができます。
今回は大変お世話になっているRails WebookというサイトでTwitter-Bootstrapを使った
記事があったので、実際に記事の内容に従って作ってみました。
nipe880324さんありがとうございます。
ソースはGitHub上にアップしています。
(注！不具合があります。内容は2.やってみて調べたところ&わからなかったところに記載)
2.やってみて調べたところ&わからなかったところ
・「Flash」って何？
簡単に処理完了メッセージをビューに投げることができます。
>|ruby|
<% flash.each do |name, msg| %>
<div class="alert alert-<%= name == "notice" ? "success" : "error" %>">
<a class="close" data-dismiss="alert">×</a>
<%= msg %>
</div>
||<
下の図は処理が成功すると、product was sucessfully createdと表示されます。
フラッシュの典型的な利用目的は、リダイレクション先のページにメッセージを表示することです。
ユーザビリティの向上に役立ちます。
3.わからなかったところ
ナビゲーションバーとサイドバーがうまくいかずレイアウトが崩れてこんな画面になってしまいました。
自力であれこれ下記ソースを中心に原因を探ってみましたがダメでした。もし、間違っているところがあれば教えてもらえると助かります。
application.html.erb
>|ruby|
<!DOCTYPE html>
<html>
<head>
<title>TwitterBootstrap</title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script>
<![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<%= render 'layouts/header' %>
<div class="container"> <!-- container で全体を囲む -->
<div class="row"> <!-- row で列を作る -->
<% flash.each do |name, msg| %>
<div class="alert alert-<%= name == "notice" ? "success" : "error" %>">
<a class="close" data-dismiss="alert">×</a>
<%= msg %>
</div>
<% end %>
<div class="span8"> <!-- 12分割のグリッドシステムの8を使用 -->
<%= yield %>
</div>
<div class="span4"> <!-- 12分割のグリッドシステムの4を使用 -->
<h2>Side bar</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
</body>
</html>
||<
