Bootstrap

Bootstrap is open source and is used for scaffolding to develop a responsive website using HTML, CSS and JavaScript. It is also used to manage layouts or make a presentation layer for every device. The current version of Bootstrap is 3.2.0, which has an easy learning curve.

Bootstrap is improving with age and has covered all devices. Thus, it is mobile and retina friendly, with the power of Leaner CSS (LESS). LESS is one of the loved precompiled CSS languages, and is used in bootstrap to gain tremendous power and efficiency. You can visit http://getbootstrap.com/ to get more details about bootstrap. We are just focusing on OpenCart.

Go to http://getbootstrap.com and click on the Download Bootstrap button. It will redirect to a page from where you can download the Bootstrap files.

Click on Download source, as shown in the following screenshot. You can download directly from GitHub as well (https://github.com/twbs/bootstrap); click on Download ZIP. Unzip the files and you will see lots of files, we will take only the required files, such as the files placed in the dist folder, to start the basic bootstrap template:

Advantages of using Bootstrap in OpenCart themes

The following can be the advantages of using Bootstrap in an OpenCart 2 theme:

  • Speeds up development and saves time: There are many ready-made components, such as those available at http://getbootstrap.com/components/, which can be used directly in the template like we can use buttons, alert messages, many typography tables, forms, and many JavaScript functionalities. These are made responsive by default. So, there is no need to spend much time checking each device, which ultimately helps decrease development time and save time.
  • Responsiveness: Bootstrap is made for devices of all shapes. So, using the conventions provided by bootstrap, it is easy to gain responsiveness in the site and design.
  • Can upgrade easily: If we create our OpenCart theme with bootstrap, we can easily upgrade bootstrap with little effort. There is no need to invest lots of time searching for upgrades of CSS and devices.

The basic template structure with Bootstrap in OpenCart 2

The basic frontend folder structure of the presentation layer in OpenCart 2 is like this:

Go to the catalog/view folder, where you will see the javascript and theme folders. In the javascript folder, you will see the bootstrap folder, font-awesome folder, jquery folder, and common.js file. All CSS and JavaScript files and folders of Bootstrap are in the bootstrap folder.

Likewise, all related files and folders of Font Awesome are in the font-awesome folder. So, when designing our new theme, we should link these files and folders as per our needs. Now we'll show you some basic ideas of Bootstrap, Font Awesome, and FlexSlider so that you don't need to create your own functionality; these have covered lots of functionalities.

A basic static Bootstrap template

Let's start by creating a simple static Bootstrap template:

  1. For this, let's start by downloading and then unzipping the downloaded Bootstrap. Create a folder anywhere. Name it bootstrap, and create the index.html and stylesheet.css in it. Next, go to the dist folder inside the extracted Bootstrap folder. Copy the css, fonts and js folders and paste them in the bootstrap folder which you just created. Now your folder structure will look like what is shown in the following screenshot:
  2. Bootstrap uses HTML elements and CSS properties of the HTML5 DOCTYPE. So, open the index.html file and include the following code in it: 
    <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en" xml:lang="en" >
  3. Specify the character set as follows: 
    <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  4. The following line of code instructs an IE browser to use the most updated version of its rendering engine, or to use Google Chrome Frame if it is installed: 
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  5. This code provides the rendering and zooming functionality. Add the viewport meta tag to the <head> tag. You can disable the zooming capabilities on mobile devices by adding user-scalable=no to the viewport meta tag: 
    <meta name="viewport" content="width=device-width, initial-scale=1">
  6. The following code defines a title for your HTML document: 
    <title>Packt Responsive Opencart Theme Tutorial</title>
  7. The following code defines description for your HTML document: 
    <meta name="description" content="Packt Responsive Opencart Theme Tutorial" />
  8. The code you just saw is meant for using the Google jQuery CDN and referencing the jQuery file directly. If you use CDN, then the user may already have a cached version, which speeds up loading, reducing the bandwidth for your server that delivers the assets. But you may rely on other server or an external party to host the assets, which may be down or may be removed: 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  9. There are many plugins, such as modals, transitions, dropdowns, scrollspy, toggle-able tabs, popovers, and many others. You can use them inpidually for each plugin, or use bootstrap.js or the minified bootstrap.min.js file, which includes all the plugins. It is recommended to use bootstrap.min.js in production because it loads faster than bootstrap.js: 
    <!-- Bootstrap -->
<script type="text/javascript" src="js/bootstrap.min.js"></script>
  10. This is the extra style sheet made to override or add the extra CSS needed as per the requirement. The following code links the Bootstrap and CSS. Use only one of the .css Bootstrap file—either bootstrap.css or bootstrap.min.css: 
    <link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="stylesheet.css" media="screen" />
  11. HTML5 elements do not work with Internet Explorer prior to version 9. So, we use HTML5 Shiv, which includes JavaScript and helps in better styling for unknown elements of HTML5. Thus, it is better to include HTML5 Shiv to maintain cross-browser support: 
    <!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
  12. The site's content is wrapped in a container p or elements, and Bootstrap does this with its grid system. In the following code, id="header" is used in the custom style sheet to style the header with CSS as per our requirement. We use class="container" for a responsive fixed-width container, which is provided by the Bootstrap. Similarly, .container-fluid is used for a full-width container, which covers the entire width of your device. For best results in alignment and padding, it is better to include the rows class (class="row") within .container for fixed width or within .container-fluid for full width. We can use rows to create horizontal groups of columns. In the following code, we split one of the three-column grids into two parts, one of which is the logo part of the header. Another eight-column grid is the right part of the header: 
    </head>
<body>
  <!-- Header -->
  <header id="header">
    <p class="container">
      <p class="row">
        <p class="col-md-12">
          <p class="col-md-3">This is logo part</p>
          <p class="col-md-8 pull-right">This is header right part.</p>
         </p>
      </p>
    </p>
  </header>
  <!--/ Header -->

As the device or viewport size increases, the Bootstrap grid system has 12 columns. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts. The Bootstrap grid is seen in the following screenshot:

The following screenshot shows the grid system, its classes and the widths of devices of http://getbootstrap.com/css/. We used col-md-12 in the preceding example, which means that it has a container width of 970 pixels. The other details are shown here:

The nav tags are used for navigation and are available in Bootstrap have shared markup, starting with the .navbar base class, as well as shared states. We will discuss this in detail in the next chapter, when we create the menu in our OpenCart theme. For now, this is the menu section:

<!-- content -->
<section id="content-wrapper" class="container">
  <nav id="mainnav" class="navbar" role="navigation">
    <p class="navbar-inner">
      <p class="container">
        This is menu part 
      </p>
    </p>
  </nav>

In the following code, we separate into two parts the left part of the four-column grid and the content area of the eight-column grid, which is the right part of the container. Then, the section and content comment is closed:

  <p class="row">
    <p class="col-md-4">This is left column part</p>
    <p class="col-md-8">This is content part.</p>
  </p>
</section>
<!-- #content -->

This is the footer part of the design that has id="footer", which gives some CSS styles to the footer container and holds the full 12-column grid.

<!--Footer -->
<footer id="footer" >
  <p class="container">
  <p class="row">
    <p class="col-md-12">This is footer part</p>
  </p>
  </p>
</footer>
<!--/ Footer -->

Like this, the index.html file is done. I hope you got an idea on how to play around with the bootstraps in the designing part.

Now, open stylesheet.css and start writing the following code to remove the margin and padding of the browser:

html {
  margin: 0;
  padding: 0;
}

The following CSS style is used to change the background color and show some of it in the body:

body {
  background: #f5f5f5;
  color: #fff;
  font-family:'Open Sans Condensed', sans-serif;
  line-height: 20px;
  margin: 0px;
  padding: 0px;
}

The following CSS code is used to provide a height of 120 pixels, a padding of 10 pixels, and a gradient background color to the header:

#header{
  height: 120px;
  padding: 10px;
  background-color: #23b7e5;
  background-image: -webkit-linear-gradient(left,#23b7e5 0%,#51c6ea 100%);
  background-image: -o-linear-gradient(left,#23b7e5 0%,#51c6ea 100%);
  background-image: linear-gradient(to right,#23b7e5 0%,#51c6ea 100%);
}

The CSS code you just saw is used to style the content-wrapper ID, which provides a minimum height of 200 pixels, a padding of 10 pixels, and a background color that is used in the content part:

#content-wrapper{
  padding:10px;
  min-height:200px;
  background-color: #37bc9b; 
}

The following CSS style is used in the menu and changes the menu background color to black:

#mainnav{
  background-color: #2f80e7;
  margin-bottom:0px;
}

The following CSS style is used for the footer part, which is given a padding of 10 pixels and a background image.

#footer{
  padding: 10px;
  background-color: #564aa3; 
}

Now, run index.html. You will see the output as the following screenshot:

上一章目录下一章