Skip to content
Permalink
Browse files

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

  • Loading branch information...
tumbling-dice committed Sep 10, 2016
1 parent ff5cd63 commit 645e4293e952c1ec2623f7f20566747f5e094bd2
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>
@@ -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.
You can’t perform that action at this time.