上QQ阅读APP看书，第一时间看更新
How to do it...
- Create new files and folders, as follows:
touch app/partial/_recipe02-08-css.ejs app/partial/_chapter02-08-
html.ejs app/partial/_nav02-08.ejs main-02-08.scss;
mkdir app/css/img
- Let's now update our bower_components. In the root of your project, run the following command to install the font-awesome library:
bower install font-awesome
- Download the image to use in this recipe from https://www.pexels.com/photo/box-business-celebrate-celebration-296878/. Pick the large size (with the width of 1920 pixels) in the download options. Paste the image in the app/css/img folder.
- Paste the following code into main-02-08.scss:
// Recipe 02-08
@import "./bower_components/bootstrap/scss/bootstrap.scss";
@import "./bower_components/font-awesome/scss/font-awesome.scss";
.jumbotron-background {
color: white;
background: linear-gradient(to bottom, rgba(0,0,0,0.55)
0%,rgba(0,0,0,0.35) 100%),
url('img/pexels-photo-296878.jpeg') no-repeat center center
fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
- Add the following code into app/partial/_nav02-08.ejs:
<nav class="navbar navbar-toggleable-md navbar-light fixed-top
bg-info">
<div class="container">
<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"></ul>
<ul class="navbar-nav mr-sm-2">
<li class="nav-item active">
<a class="nav-link text-white" href="#">Banking Services <span
class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="#">Constulting Services</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="#">Archived Data Access</a>
</li>
</ul>
</div>
</div>
</nav>
- Open app/partial/_chapter-02-08-html.ejs, and paste this code:
<div class="jumbotron jumbotron-fluid mt-5 jumbotron-background">
<div class="container text-center p-5">
<h1 class="h2">This is the <code>h1</code> heading used in our
jumbotron component</h1>
<p class="lead">Fluid jumbotron has been added in Bootstrap 4.
</p>
<p class="">This addition makes creating promotional content on
websites that much easier.</p>
<p><a class="btn btn-info btn-lg mt-5" href="#"
role="button">Call to Action Button</a></p>
</div>
</div>
<section id="details" class="details text-center">
<div class="container">
<h2 class="m-5 h3">Discover Possibilities With Us</h2>
<div class="row m-5">
<div class=" col-xs-12 col-md-4">
<h3 class="text-info">Banking Services</h3>
<i class="fa fa-bar-chart fa-5x text-info mt-3 mb-4" aria-
hidden="true"></i>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Odio ipsam, impedit est fugiat ratione incidunt delectus illo
aperiam sunt temporibus!</p>
</div>
<div class=" col-xs-12 col-md-4">
<h3 class="text-info">Consulting Services</h3>
<i class="fa fa-comments fa-5x text-info mt-3 mb-4" aria-
hidden="true"></i>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Harum blanditiis omnis distinctio doloribus dolore eum
repellendus minus excepturi, quo magni?</p>
</div>
<div class=" col-xs-12 col-md-4">
<h3 class="text-info">Archived Data Access</h3>
<i class="fa fa-archive fa-5x text-info mt-3 mb-4" aria-
hidden="true"></i>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Quibusdam quidem ab quo porro quod recusandae perferendis sit
doloremque consequatur minus.</p>
</div>
</div>
</div>
</section>
<div class="jumbotron jumbotron-fluid mt-5">
<div class="container pt-3 pt-1">
<h1 class="h2 mb-5">This is the h1 heading used in the regular
jumbotron component.</h1>
<div class="row">
<div class="col-md-6 pr-5">
<p class="lead">Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic
quos eos voluptatum nihil architecto, maxime quo quod alias non
fugiat, pariatur voluptas repellat aspernatur eligendi quae
libero recusandae consequuntur dignissimos, facilis nam minus
nemo totam incidunt distinctio optio! Ut harum nihil quisquam
porro reprehenderit ipsam labore reiciendis perspiciatis.</p>
</div>
<div class="col-md-6 pl-5">
<p class="lead">Lorem ipsum dolor.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic
quos eos voluptatum nihil architecto, maxime quo quod alias non
fugiat, pariatur voluptas repellat aspernatur eligendi quae
libero recusandae consequuntur dignissimos, facilis nam minus
nemo totam incidunt distinctio optio! Ut harum nihil quisquam
porro reprehenderit ipsam labore reiciendis perspiciatis.</p>
</div>
</div>
<p class="text-center"><a class="btn btn-info btn-lg mt-5"
href="#" role="button">Call to Action Button</a></p>
</div>
</div>
<div class="container">
<div id="tables">
<h2>Just Another Responsive Table</h2>
<p>IN Bootstrap 4, you can use the class of <code>.table-
responsive</code> on the table element. In Bootstrap 3, you had
to use it on the parent element.</p>
<table class="table table-responsive">
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
<th>Header 4</th>
<th>Header 5</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
</tbody>
</table>
</div>
</div>
<footer class="container-fluid bg-inverse p-5 text-white">
<p>© Navbar 2017</p>
</footer>
- In index.ejs, change the code so that it looks like this:
<%# partial("partial/_defaultGrid") %>
<%# partial("partial/_chapter02-05-html") %>
<%# partial("partial/_chapter02-06-html") %>
<%# partial("partial/_chapter02-06-html") %>
<%# partial("partial/_chapter02-07-html") %>
<%- partial("partial/_chapter02-08-html") %>
- In _layout.ejs, the last two links that call css should look like this:
<%# partial("partial/_recipe02-07-css") %>
<%- partial("partial/_recipe02-08-css") %>
- We are commenting our css for the previous recipe, and adding the link to the new css include, served from partial/_recipe02-08-css.ejs. Still, in _layout.ejs, we need to add the link to the nav for this recipe. Just under the body tag, comment out the call to the previous recipe's nav, and call the current recipe-specific nav, as follows:
<body>
<%# partial("partial/_nav") %>
<%# partial("partial/_nav02-07") %>
<%- partial("partial/_nav02-08") %>
- In app/partial/_recipe02-08-css.ejs, add the call to the .css file, titled main-02-08.css, which will be compiled by our Grunt tasks:
<link href="./css/main-02-08.css" rel="stylesheet"
type="text/css" >
- Run grunt and harp compile / harp server, and view the completed web page.