Barebone Bootstrap4 - A Simple Bootstrap4 Template using erb.
- Embedded Ruby (ERB).
- Download
config.rb
andbarebone-bootstrap4.erb
. - Execute
$ erb barebone-bootstrap4.erb > index.html
. - Open
index.html
with your browser.
<%# encoding: UTF-8 %> | |
<% load 'config.rb' %> | |
<!doctype html> | |
<html lang="ja"> | |
<head> | |
<meta charset="utf-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> | |
<meta name="description" content=""> | |
<meta name="author" content="<%= AUTHOR %>"> | |
<title><%= TITLE %></title> | |
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> | |
<style> | |
body { | |
min-height: 75rem; | |
padding-top: 3.5rem; | |
font-size: large; | |
} | |
</style> | |
</head> | |
<body> | |
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark"> | |
<a class="navbar-brand" href="#"><%= TITLE_BRAND %></a> | |
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> | |
<span class="navbar-toggler-icon"></span> | |
</button> | |
<div class="collapse navbar-collapse" id="navbarCollapse"> | |
<ul class="navbar-nav mr-auto"> | |
<% NAV_LINK.each do |item| %> | |
<li class="nav-item"> | |
<a class="nav-link" href="<%= item[:url] %>"><%= item[:caption] %></a> | |
</li> | |
<% end %> | |
</ul> | |
</div> | |
</nav> | |
<% if JUMBOTRON[:on] %> | |
<div class="jumbotron"> | |
<div class="container"> | |
<h1 class="display-3"><%= JUMBOTRON[:title] %></h1> | |
<p><%= JUMBOTRON[:lead] %></p> | |
<h2><%= JUMBOTRON[:author] %></h2> | |
</div> | |
</div> | |
<% end %> | |
<main role="main" class="container"> | |
<div class="row"> | |
<div class="col-md-8"> | |
<%= MAIN_CONTENTS %> | |
</div> | |
<div class="col-md-4"> | |
<% CARD.each do |card| %> | |
<div class="card mb-5"> | |
<div class="card-header"> | |
<h2><%= card[:title] %></h2> | |
</div> | |
<div class="card-body"> | |
<p class="card-text"> | |
<%= card[:body] %> | |
</p> | |
</div> | |
<div class="card-footer"> | |
<a href="<%= card[:url] %>" class="btn btn-primary"><%= card[:caption] %></a> | |
</div> | |
</div> | |
<% end %> | |
</div> | |
</div> | |
</main> | |
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> | |
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> | |
</body> | |
</html> |
# encoding: UTF-8 | |
AUTHOR = '結城浩 / Hiroshi Yuki' | |
TITLE = 'Barebone Bootstrap4' | |
TITLE_BRAND = 'BB4' | |
NAV_LINK = [ | |
{ :caption => 'HOME', :url => 'https://www.hyuki.com/' }, | |
{ :caption => 'Twitter', :url => 'https://twitter.com/hyuki/' }, | |
{ :caption => 'Web連載', :url => 'https://bit.ly/girlnote' }, | |
{ :caption => '著書', :url => 'https://www.hyuki.com/pub/books.html' }, | |
] | |
JUMBOTRON = { | |
:on => true, | |
:title => 'Barebone Bootstrap4', | |
:lead => 'Bootstrap4のひながたページ', | |
:author => '結城浩', | |
} | |
CARD = [ | |
{ :title => '結城メルマガ', :body => '有料メールマガジンを毎週配信しています。', :caption => '詳しく', :url => 'http://www.hyuki.com/mm/' }, | |
{ :title => 'Web連載', :body => '「数学ガールの秘密ノート」を毎週cakesで連載しています。', :caption => '詳しく', :url => 'https://bit.ly/girlnote' }, | |
] | |
MAIN_CONTENTS = <<"EOD" | |
<p>宿に着いたのはずいぶん遅かったけれど、今朝は早く目を覚ました。朝食を済ませて宿を出ると、 村の案内をしてくれるティナがもう私を待っていた。</p> | |
<p>ティナは小柄な12歳くらいの女の子で、利発そうな顔立ちをしている。大きな目が、くるくるとよく動く。そんなに大きな村ではないから、迷うことはないのだけれど、何しろ日本語も英語も通じない村なので、英語の通じる通訳が必要なのだ。</p> | |
<p>ティナは私の前に立ち、まずは宿のまわりを案内してくれた。ティナは、アイボリーのシンプルなマントを羽織り、小さな籠を持っている。歩くたびに、マントのすそ飾りがリズミカルに踊る。</p> | |
<p>小川にかかった橋を渡るときに「あなたは、どんなお仕事をなさっているのですか」とティナが振り向いて尋ねた。きれいな英語だ。</p> | |
<p>「コンピュータの本を書いてます」と私は答えた。</p> | |
<p>ティナは立ち止まって「コンピュータの本」という表現に不思議そうな顔をした。そして、少し考えてからこう言った。</p> | |
<p>「村長も本を書きます。お会いになりますか」</p> | |
<p>ティナは私を村長の家に連れて行ってくれた。家が、村長の仕事場でもある。村長は50を過ぎたくらいで、がっしりした体つきをしている。ティナの話に耳を傾けてから、村長はわかった、というようにゆっくりうなずき、大きな手を差し出した。手が痛くなるほど強い握手だった。</p> | |
<p class="my-5"><a class="btn btn-primary" href="http://www.hyuki.com/story/tina.html">続きを読む</a></p> | |
EOD |