Creating your first Bootstrap project

Now that you know when it is suitable to use Bootstrap, you are ready to start your first Bootstrap project. Perform the following steps to get started:

  1. Create a new folder for your Bootstrap project inside your document root. You can call it bootstrap-app.
  2. Pick up the latest version of Bootstrap from http://getbootstrap.com and unpack it into your project directory.
  3. Create a new HTML document, add the following contents, and save it in your project directory as index.html in the following manner:
    <!DOCTYPE html>
<html>
  <head>
    <title>Hello from Bootstrap</title>
    <!-- Ensure proper rendering and touch zooming on mobiledevices -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elementsand media queries -->
    <!--[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]-->
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

    Tip

    You can omit html5shiv.js and respond.js if you don't wish to support older versions of Internet Explorer.

Let us look at the following reasons why we included all those CSS and JavaScript files:

  • bootstrap.min.css: It is the minified version of the Bootstrap CSS styles
  • html5shiv.js: It adds HTML5 support to older browsers
  • respond.min.js: It adds media query support to older browsers

Navigate to your project directory using your favorite web browser; you should see your project in action as shown in the following screenshot. Not too impressive, but do not worry, you will soon add more to it.

Creating your first Bootstrap project

Tip

For more information on how to get started with Bootstrap, refer to the Getting started page on the official site at http://getbootstrap.com/getting-started/.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.143.247.125