Adding the logo image

Find the logo.png file in the img folder. You may notice that its dimensions are large, 900px wide. In our final design, it will be only 120px wide. Because the pixels will be compressed into a smaller space, this is a relatively easy way to ensure that the image will look good in all devices, including retina displays. Meanwhile, the file size of the image, which has already been optimized for the Web, is only 19 KB.

So, let's put it in place and constrain its width.

  1. Open index.html in your editor.
  2. Search for this line within the navbar markup:
    <a class="navbar-brand" href="EB9781782164524_3.html">Bootstrappin'</a>
  3. Replace Bootstrappin' with this image tag, including its alt and width attributes.
    <img src="img/logo.png" alt="Bootstrappin'" width="120">

    Tip

    Be sure to include the width attribute, setting its width to 120px. Otherwise, it will appear very large on the page.

  4. Save index.html and refresh your browser. You should see the logo in place.
    Adding the logo image

You may notice that the navbar height has expanded, and that its bottom edge no longer lines up with the bottom edge of the active nav item. This is due to the default padding placed around navbar-brand. We need to adjust the appropriate padding values. We can do that in a few quick steps.

  1. Open the file bootstrap/navbar.less in your editor.
  2. Search for the selector and its curly brace: .navbar-brand {.
  3. At around line 150, you should find the following lines:
    .navbar-brand {
  float: left;
  padding: @navbar-padding-vertical @navbar-padding-horizontal;

    The padding values are what we're after.

  4. As we're now in the mode of customizing this file, let's save it as our own custom file and name it _navbar.less.
  5. Save it in your less folder, alongside __main.less and _variables.less.
    Adding the logo image
  6. We're going to comment out the original values, and then add our own custom padding values. To do this in LESS, simply add two slashes in front of the line, as follows:
    // padding: @navbar-padding-vertical @navbar-padding-horizontal;
padding: 22px 30px 0 15px;

    When compiled, the line that's commented out in this manner will not be compiled to CSS.

  7. To try this, make the previous change in your _navbar.less file and save it.
  8. Then, in __main.less, find and comment out the import line for Bootstrap's navbar.less file. Then, add an import for the new _navbar.less file just after it.
    // @import "bootstrap/navbar.less";
@import "_navbar.less";
  9. Save the file. Make sure that _navbar.less is added to your project in your compiler, and then compile __main.less to css/main.css.

    Refresh the browser. You should see the bottom edge of your navbar line back up with the bottom edge of the active link. (You should also see some additional padding between the logo and the Home link.)

  10. Now, open main.css in your editor and search for the selector .navbar {.

    Since I've minified my CSS output, mine looks like this: .navbar-brand{float:left;padding:22px 30px 0 15px;.

Note

There is no trace of the line we commented out, as it was not compiled from LESS to CSS!

The powers of LESS continue to impress. Observe what we've done here:

  • We've left the original bootstrap/navbar.less file just as it was in its original state, so that we can revert back to it if needed
  • We've entirely replaced it for now with our own custom version of the file, and we've indicated where this happens by leaving a comment trail in __main.less
  • We've also left a comment trail for ourselves in _navbar.less, so that we can see where we've been modifying rules
  • But because we've used JavaScript-style single-line comments, we've done all of this without adding these comments to the final compiled CSS

In other words, we can leave ourselves a rich trail of fallback files and helpful comments—all with no code bloat. Nice bonus.

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

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