上QQ阅读APP看书，第一时间看更新
How to do it...
- In workspace/app/index.ejs, change the code to look like this:
<!--
<div class="container">
<div class="starter-template">
<h1>Bootstrap 4 Grid Recipe</h1>
<p class="lead">Use this document as a way to quickly start any
new project.<br> All you get is this text and a mostly barebones
HTML document.</p>
</div>
</div>
-->
<%# partial("partial/_defaultGrid") %>
<%# partial("partial/_chapter02-05-html") %>
<%# partial("partial/_chapter02-06-html") %>
<%# partial("partial/_chapter02-06-html") %>
<%- partial("partial/_chapter02-07-html") %>
- In app/_layout.ejs, the updated code from the opening !DOCTYPE to the <%- yield %> should look like this:
<!DOCTYPE html>
<html lang="en">
<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="">
<link rel="icon" href="../../favicon.ico">
<title><%- title %></title>
<!-- Bootstrap core CSS -->
<%# partial("partial/_recipe02-04-css") %>
<%# partial("partial/_recipe02-05-css") %>
<%# partial("partial/_recipe02-06-css") %>
<%- partial("partial/_recipe02-07-css") %>
<%# partial("partial/_recipe02-08-css") %>
</head>
<body>
<%# partial("partial/_nav") %>
<%- partial("partial/_nav02-07") %>
<%- yield %>
- Make a new file, app/partial/_nav02-07.ejs, and add the following code to it:
<div class="container mt-5 bg-inverse">
<nav class="navbar navbar-toggleable-md navbar-light">
<button class="navbar-toggler navbar-toggler-right text-white
mt-1" type="button" data-toggle="collapse" data-
target="#navbarSupportedContent" aria-
controls="navbarSupportedContent" aria-expanded="false" aria-
label="Toggle navigation">
☰
</button>
<a class="navbar-brand text-white" href="#">Navbar</a>
<div class="collapse navbar-collapse"
id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link text-white" href="#">Home <span class="sr-
only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled text-white" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>
</div>
- Make a new file, app/partial/_chapter02-07-html.ejs, and add the following code to the file:
<div class="container mt-lg-5 mt-sm-0 p-5 bg-faded">
<div class="row">
<div class="col-md-8">
<h1>This is the main section</h1>
<p class="lead">Just a paragraph with a .lead class</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Repudiandae, alias mollitia impedit. Consequatur blanditiis,
reprehenderit laboriosam, esse aliquid possimus aut culpa
adipisci, quia officiis placeat at dolorem numquam. Adipisci
eligendi eos tempora facere dicta, quidem libero numquam rerum,
obcaecati expedita, deserunt commodi vero nesciunt. Repudiandae
cumque molestiae magni doloribus nesciunt, aliquam. Dolor
accusamus vel voluptatibus, soluta, eligendi quaerat maxime
facilis itaque tempore placeat pariatur, a sint! Reiciendis
dicta sit, enim est consequatur, iusto quod. Adipisci eligendi
culpa error dicta explicabo placeat beatae nemo harum suscipit
voluptas deleniti, esse vero necessitatibus voluptatem nesciunt
itaque cumque facere blanditiis quidem, distinctio neque ut?
Doloremque minus eum veritatis, adipisci, dignissimos, expedita
recusandae sequi dolor optio error placeat incidunt id maiores
autem ad quam earum asperiores magnam quis voluptatem
consequuntur numquam vero at? Velit illo, porro! Maiores cum
sunt exercitationem tenetur illum, vel non illo fuga laudantium
aperiam nihil dolores facere quos error minus sequi porro minima
dolorum corporis. Quibusdam quo aperiam commodi consequuntur
amet incidunt iusto totam odio nisi, repellendus, odit facere.
Modi, asperiores. Molestias necessitatibus aperiam
exercitationem praesentium voluptate modi reprehenderit odio
nisi eaque nostrum, ut illum consectetur perferendis unde culpa
similique eveniet consequatur accusantium error officiis quasi
dolorem! Eius consequatur, esse amet!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
...
</p>
</div>
<div class="col-md-4">
<h2>Sidebar</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Quos aspernatur repellendus autem molestias maxime quaerat quo
praesentium dolorum laborum odit! Fuga cum ea consequuntur
harum, sunt debitis a nesciunt perspiciatis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Pariatur nam nostrum quibusdam sit in reprehenderit. Nesciunt,
dolor suscipit aspernatur qui officia quam illo, placeat impedit
ipsa non debitis aperiam doloribus.</p>
</div>
</div>
</div>
<div class="container mt-5 p-3">
<div class="row">
<div class="col-md-7 bg-faded mr-auto p-5">
<h1>This is the main section</h1>
<p class="lead">Just a paragraph with a .lead class</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit....
</p>
</div>
<div class="col-md-4 bg-faded p-5">
<h2>Sidebar</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Quos aspernatur repellendus autem molestias maxime quaerat quo
praesentium dolorum laborum odit! Fuga cum ea consequuntur
harum, sunt debitis a nesciunt perspiciatis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Pariatur nam nostrum quibusdam sit in reprehenderit. Nesciunt,
dolor suscipit aspernatur qui officia quam illo, placeat impedit
ipsa non debitis aperiam doloribus.</p>
</div>
</div>
</div>
<footer class="text-white text-center mt-5 p-5">
Copyright © Navbar 2017
</footer>
- Make a new file, in app/partial/_recipe02-07-css.ejs, and add this code to it:
<link href="./css/main-02-07.css" rel="stylesheet"
type="text/css" >
- Add a new file, main-02-07.scss, and add the subsequent code to it:
// Recipe 02-07
@import url('https://fonts.googleapis.com/css?family=Rock+Salt');
@import "./bower_components/bootstrap/scss/bootstrap.scss";
body {
background: #E55D87; /* fallback for old browsers */
background: -webkit-linear-gradient(45deg, #E55D87 , #5FC3E4);
/* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(45deg, #E55D87 , #5FC3E4); /* W3C,
IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
nav {
text-color: white;
}
.bg-faded {
opacity: .95;
}
h1, h2, h3 {
font-family: 'Rock Salt', cursive;
}
- Run grunt and harp compile / harp server, and view the final result in the browser.