Permalink
Browse files

🍣 jumbotronとグローバルナビゲーションをコンポーネント化

  • Loading branch information...
1 parent ff5cd63 commit 645e4293e952c1ec2623f7f20566747f5e094bd2 @tumbling-dice committed Sep 10, 2016
Showing with 44 additions and 23 deletions.
  1. +30 −0 public/components/global-nav.tag
  2. +5 −0 public/components/jumbotron.tag
  3. +9 −23 public/index.html
@@ -0,0 +1,30 @@
+<global-nav>
+ <nav class="navbar navbar-default navbar-fixed-top">
+ <div class="container">
+ <nav-header></nav-header>
+ <navbar></navbar>
+ </div>
+ </nav>
+</global-nav>
+
+<nav-header>
+ <div class="navbar-header">
+ <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
+ <span class="sr-only">Toggle navigation</span>
+ <span class="icon-bar"></span>
+ <span class="icon-bar"></span>
+ <span class="icon-bar"></span>
+ </button>
+ <a class="navbar-brand" href="#">Project name</a>
+ </div>
+</nav-header>
+
+<navbar>
+ <div id="navbar" class="navbar-collapse collapse">
+ <ul class="nav navbar-nav">
+ <li class="active"><a href="#">Home</a></li>
+ <li><a href="#about">About</a></li>
+ <li><a href="#contact">Contact</a></li>
+ </ul>
+ </div>
+</navbar>
@@ -0,0 +1,5 @@
+<jumbotron>
+ <div class="jumbotron">
+ <yield/>
+ </div>
+</jumbotron>
View
@@ -11,41 +11,27 @@
</head>
<body>
-
- <nav class="navbar navbar-default navbar-fixed-top">
- <div class="container">
- <div class="navbar-header">
- <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
- <span class="icon-bar"></span>
- <span class="icon-bar"></span>
- <span class="icon-bar"></span>
- </button>
- <a class="navbar-brand" href="#">Project name</a>
- </div>
- <div id="navbar" class="navbar-collapse collapse">
- <ul class="nav navbar-nav">
- <li class="active"><a href="#">Home</a></li>
- <li><a href="#about">About</a></li>
- <li><a href="#contact">Contact</a></li>
- </ul>
- </div>
- </div>
- </nav>
+ <global-nav></global-nav>
<div class="container">
- <div class="jumbotron">
+ <jumbotron>
<h1>Navbar example</h1>
<p>This example is a quick exercise to illustrate how the default, static and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
<p>To see the difference between static and fixed top navbars, just scroll.</p>
<p>
<a class="btn btn-lg btn-primary" href="../../components/#navbar" role="button">View navbar docs &raquo;</a>
</p>
- </div>
+ </jumbotron>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="./javascripts/bootstrap.min.js"></script>
-
+ <script type="text/javascript" src="./javascripts/riot+compiler.min.js"></script>
+ <script type="riot/tag" src="./components/jumbotron.tag"></script>
+ <script type="riot/tag" src="./components/global-nav.tag"></script>
+ <script>
+ riot.mount('*');
+ </script>
</body>
</html>

0 comments on commit 645e429

Please sign in to comment.