O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Bootstrap Essentials

Book Description

Use the powerful features of Bootstrap to create responsive and appealing web pages

About This Book

  • Learn where and how to use Bootstrap in your new web projects
  • Design and develop mobile first web portals that support all devices
  • A step-by-step guide with easy-to-follow practical exercises to develop device friendly websites

Who This Book Is For

If you are a web developer who designs and develops websites and pages using HTML, CSS, and JavaScript, but have very little familiarity with Bootstrap, this is the book for you. Previous experience with HTML, CSS and JavaScript will be helpful, while knowledge of jQuery would be an extra advantage.

What You Will Learn

  • Understand the internal architecture and structure of Bootstrap
  • Download and configure Bootstrap in your web project
  • Get to grips with the usage of Bootstrap CSS and components
  • Build and compile Bootstrap from source code
  • Work with the JavaScript objects offered by Bootstrap and the CSS pre-processors
  • Customize and extend Bootstrap to suit your requirements

In Detail

As the number of people using mobile devices to access the internet grows every moment, websites are no longer built just for desktop machines. The mobile first philosophy demands that sites are fully compatible with all the available, and predicted future mobile devices. Bootstrap allows and easily enables you to design and develop your own websites congenial to all devices, including e-readers, tablets, and so on.

This book will familiarize you with all the features, functionalities, and architectural knowledge of the Bootstrap platform, enabling you to develop mobile friendly websites. You will begin by discovering the mobile first philosophy and what Bootstrap is. You will learn about Bootstrap's architecture and components, and how to use Bootstrap using LESS. You will create responsive layouts using Bootstrap CSS and work with the packaged components that come along with Bootstrap. You will proceed to explore the various JavaScript components and add-ons offered by Bootstrap. Finally, you will learn how to customize Bootstrap easily to match your project-specific requirements,compile and build your Bootstrap code, and extend Bootstrap with different extensions to create more advanced websites.

By the end of this book, you will be able to build, compile, and customize your own Bootstrap system to create mobile friendly websites.

Style and approach

This book is a fast-paced guide to getting started with Bootstrap. Each chapter contains elaborate, practical examples demonstrating the application of various Bootstrap components.

Downloading the example code for this book. You can download the example code files for all Packt books you have purchased from your account at http://www.PacktPub.com. If you purchased this book elsewhere, you can visit http://www.PacktPub.com/support and register to have the code file.

Table of Contents

  1. Bootstrap Essentials
    1. Table of Contents
    2. Bootstrap Essentials
    3. Credits
    4. About the Author
    5. About the Reviewers
    6. www.PacktPub.com
      1. Support files, eBooks, discount offers, and more
        1. Why subscribe?
        2. Free access for Packt account holders
    7. Preface
      1. What this book covers
      2. What you need for this book
      3. Who this book is for
      4. Conventions
      5. Reader feedback
      6. Customer support
        1. Downloading the example code
        2. Errata
        3. Piracy
        4. Questions
    8. 1. The Evolution of CSS and Bootstrap
      1. The mobile-first philosophy
      2. Responsive design basics
        1. Setting the viewport
        2. Sizing your content to the viewport
        3. Using media queries to achieve responsiveness
        4. Responsive design patterns
        5. Navigation patterns
      3. Introducing Bootstrap
        1. What Bootstrap includes
          1. CSS
          2. Components
          3. JavaScript
          4. Customization
      4. Summary
    9. 2. Getting Started with Bootstrap
      1. Get Bootstrap
      2. The Bootstrap file structure
        1. A precompiled bundle
          1. folder: css
          2. folder: fonts
          3. folder: js
        2. A source code bundle
          1. rfolder: dist
          2. folder: fonts
          3. folder: grunt
          4. folder: js
          5. folder: less
        3. CSS preprocessors
        4. Variables
        5. Mixins
        6. Operations
        7. Nesting
      3. How to use Bootstrap
        1. The application folder structure
      4. Summary
    10. 3. Creating Responsive Layouts Using Bootstrap CSS
      1. Basic HTML structure for Bootstrap
        1. The head section
        2. The body section
      2. Basic HTML elements
      3. Responsive classes
        1. Understanding the basics
        2. Controlling display of elements across devices
      4. Rendering images
        1. Showing responsive images in a sample application
      5. The grid system
      6. Constructing data entry forms
        1. Making the form horizontal
        2. Finalizing the Contact Us page
      7. Other utility classes
      8. Encapsulating everything
      9. Summary
    11. 4. Packaged Components in Bootstrap
      1. The page header
      2. Glyphicons
      3. The navigation bar
      4. Badges
      5. Alerts
      6. Toolbars and button groups
      7. Panels
        1. Wells
      8. Jumbotron
      9. Breadcrumbs
      10. Paginations
      11. Summary
    12. 5. The JavaScript Add-ons in Bootstrap
      1. A basic concepts
        1. Custom data attributes
        2. JavaScript APIs
        3. JavaScript events
        4. Packaging add-ons
      2. Modal windows
        1. Basic modal window
        2. Example – enhancing our application using the modal dialog box
      3. Tabs
      4. Collapse and accordions
        1. Example – showing the product categories of our store
      5. Tooltips and popovers
      6. Dropdown
      7. Alerts
      8. Carousels
      9. The final preview
      10. Summary
    13. 6. Compiling and Building Bootstrap
      1. Required tools
        1. Node.js
          1. Installing node.js
        2. Grunt
          1. Installing Grunt-cli
      2. Installing Bootstrap
      3. Compiling and building Bootstrap
        1. Installing dependencies
        2. Building Bootstrap
      4. Summary
    14. 7. Customizing Bootstrap
      1. Customizing using the build environment
      2. Customizing using Bootstrap web interface
      3. Summary
    15. 8. Extending Bootstrap
      1. Theme extension – Bootswatch
        1. Downloading the CSS files
        2. Using the LESS files
      2. A tree-view control
        1. Installing the tree-view component
      3. WYSIWYG editor and Font Awesome
        1. Installing and using the WYSIWYG component
          1. The bootstrap-wysiwyg component
          2. The jQuery hotkeys component
          3. Font Awesome
      4. Summary
    16. Index