Bootstrap 4 By Example

Bootstrap 4 By Example

Overview of this book

Bootstrap is a free, open source collection of tools that helps developers create websites or web applications. It provides a faster, easier, and less repetitive solution to designing and building applications. Before Bootstrap’s release, it was necessary to import a variety of libraries into your project that offered different components and features for web interface development. Plus with the increased popularity of smartphones there were lack of libraries that could handle the responsiveness of a web page. Bootstrap‘s existence let it quickly become famous as a front-end framework that offered a wide set of tools from page grid up to components that render a web page in the best possible way for any device. This book will be a tutorial covering various examples as well as step-by-step methodology to create interesting web applications using Bootstrap and to understand the front-end framework to its core. We begin with an introduction to the Bootstrap framework and setting up an environment to build a simple web page. We then cover the grid system, basic Bootstrap components, HTML elements, and customization components for responsive and mobile first development. This is presented by creating a beautiful Landing page sample. You will also learn how to create a web application like Twitter by using the full set of components offered in the framework. Finally, you will learn to create a dashboard web app, using Bootstrap to its finest potential including component customizations, event handling, and external library integration. All these examples are explained step-by-step and in depth, while covering the versions 3 and the most recent version 4 of Bootstrap. So, you will be in the state of the art for front-end development. By the end of this book, you will be familiar with the development of a plugin for the framework and Bootstrap’s world which is popular for fast paced front-end web development, used in countless projects all over the world, and now yours.

Bootstrap 4 By Example

Credits

About the Author

About the Reviewer

www.PacktPub.com

Preface

Free Chapter

Getting Started

Getting Bootstrap

Setting up the framework

Building our first Bootstrap example

Optionally using the CDN setup

Community activity

Bootstrap and web applications

Browser compatibility

Summary

Creating a Solid Scaffolding

Understanding the grid system

Building our scaffolding

Summary

Yes, You Should Go Mobile First

Making it greater

Bootstrap and the mobile-first design

How to debug different viewports at the browser

Cleaning up the mess

Creating the landing page for different devices

Summary

Applying the Bootstrap Style

Changing our grid layout

Summary

Making It Fancy

Using Bootstrap icons

Paying attention to your navigation

Dropping it down

Making an input grouping

Getting ready for flexbox!

Summary

Can You Build a Web App?

Understanding web applications

Adding the navigation

Do a grid again

Playing the cards

Implementing the main content

Creating breadcrumbs

Finishing with the right-hand-side content

Summary

Of Course, You Can Build a Web App!

Alerts in our web app

Waiting for the progress bar

Creating a settings page

Summary

Working with JavaScript

Understanding JavaScript plugins

Awesome Bootstrap modals

Creating our custom modal

A tool for your tip

Pop it all over

Making the menu affix

Finishing the web app

Summary

Entering in the Advanced Mode

The master plan

The last navigation bar with flexbox

Filling the main fluid content

Filling the main content

Overhead loading

Fixing the toggle button for mobile

Summary

Bringing Components to Life

Creating the main cards

Fixing the mobile viewport

Learning more advanced plugins

Summary

Making It Your Taste

Customizing a Bootstrap component

Working with plugin customization

The additional Bootstrap plugins

Creating our Bootstrap plugin

Defining the plugin methods

Creating additional plugin methods

Summary

Index

Customer Reviews

5 star

4 star

3 star

2 star

1 star

Defining the plugin methods

Now that we have our plugin well declared, we must fill the logic for it. We will create methods inside the prototype to create this behavior. We will only show this portion of the plugin code here.

The first method that we will create is init(). We will call it later to start the plugin. Before that, we have a few steps:

Initial verifications
Assigning the plugin elements and prerequisites
Loading the original Bootstrap template
Starting the Bootstrap plugin

The initialize method and plugin verifications

Actually, we have only one requirement from the Bootstrap original carousel plugin: the outmost div must have an id. Let's create the init function while making this assertion:

BootstrapCarousel.prototype = {
  init: function () {
    if(!this.$element.attr('id')){
      throw 'You must provide an id for the Bootstrap Carousel element.';
    }

    this.$element.addClass('slide carousel');
  }
};

Therefore, we check if the element has the attribute id using this.$element...

Bootstrap 4 By Example

Bootstrap 4 By Example

Overview of this book

Related Content you might be interested in

Current Title:

Bootstrap 4 By Example

Defining the plugin methods

The initialize method and plugin verifications