Bootstrap &jQuery
COURTESY :- vrindawan.in
Wikipedia
Bootstrap is a free and open-source CSS framework directed at responsive, mobile-first front-end web development. It contains HTML, CSS and (optionally) JavaScript-based design templates for typography, forms, buttons, navigation, and other interface components.
As of July 2022, Bootstrap is the eighth most starred project on GitHub, with over 158,000 stars.
Bootstrap is an HTML, CSS & JS Library that focuses on simplifying the development of informative web pages (as opposed to web apps). The primary purpose of adding it to a web project is to apply Bootstrap’s choices of color, size, font and layout to that project. As such, the primary factor is whether the developers in charge find those choices to their liking. Once added to a project, Bootstrap provides basic style definitions for all HTML elements. The result is a uniform appearance for prose, tables and form elements across web browsers. In addition, developers can take advantage of CSS classes defined in Bootstrap to further customize the appearance of their contents. For example, Bootstrap has provisioned for light- and dark-colored tables, page headings, more prominent pull quotes, and text with a highlight.
Bootstrap also comes with several JavaScript components which do not require other libraries like jQuery. They provide additional user interface elements such as dialog boxes, tool tips, progress bars, navigation drop-downs, and carousels. Each Bootstrap component consists of an HTML structure, CSS declarations, and in some cases accompanying JavaScript code. They also extend the functionality of some existing interface elements, including for example an auto-complete function for input fields.
The most prominent components of Bootstrap are its layout components, as they affect an entire web page. The basic layout component is called “Container”, as every other element in the page is placed in it. Developers can choose between a fixed-width container and a fluid-width container. While the latter always fills the width with the web page, the former uses one of the five predefined fixed widths, depending on the size of the screen showing the page:
- Smaller than 576 pixels
- 576–768 pixels
- 768–992 pixels
- 992–1200 pixels
- Larger than 1200 pixels
Once a container is in place, other Bootstrap layout components implement a CSS Flexbox layout through defining rows and columns.
A precompiled version of Bootstrap is available in the form of one CSS file and three JavaScript files that can be readily added to any project. The raw form of Bootstrap, however, enables developers to implement further customization and size optimizations. This raw form is modular, meaning that the developer can remove unneeded components, apply a theme and modify the uncompiled Sass files.
Bootstrap, originally named Twitter Blueprint, was developed by Mark Otto and Jacob Thornton at Twitter as a framework to encourage consistency across internal tools. Before Bootstrap, various libraries were used for interface development, which led to inconsistencies and a high maintenance burden. According to Otto:
A super small group of developers and I got together to design and build a new internal tool and saw an opportunity to do something more. Through that process, we saw ourselves build something much more substantial than another internal tool. Months later, we ended up with an early version of Bootstrap as a way to document and share common design patterns and assets within the company.
After a few months of development by a small group, many developers at Twitter began to contribute to the project as a part of Hack Week, a hackathon-style week for the Twitter development team. It was renamed from Twitter Blueprint to Bootstrap and released as an open-source project on August 19, 2011. It has continued to be maintained by Otto, Thornton, a small group of core developers, and a large community of contributors.
On January 31, 2012, Bootstrap 2 was released, which added built-in support for Glyphicons, several new components, as well as changes to many of the existing components. This version supports responsive web design, meaning the layout of web pages adjusts dynamically, taking into account the characteristics of the device used (whether desktop, tablet, mobile phone).
On August 19, 2013, Bootstrap 3, was released. It redesigned components to use flat design and a mobile first approach. Bootstrap 3 features new plugin system with name spaced events. Bootstrap 3 dropped Internet Explorer 7 and Firefox 3.6 support, but there is an optional polyfill for these browsers.
Otto announced Bootstrap 4 on October 29, 2014. The first alpha version of Bootstrap 4 was released on August 19, 2015. The first beta version was released on August 10, 2017. Otto suspended work on Bootstrap 3 on September 6, 2016, to free up time to work on Bootstrap 4. Bootstrap 4 was finalized on January 18, 2018.
Significant changes include:
- Major rewrite of the code
- Replacing Less with Sass
- Addition of
Reboot
, a collection of element-specific CSS changes in a single file, based onNormalize
- Dropping support for IE8, IE9, and iOS 6
- CSS Flexible Box support
- Adding navigation customization options
- Adding responsive spacing and sizing utilities
- Switching from the pixels unit in CSS to root ems
- Increasing global font size from 14px to 16px for enhanced readability
- Dropping the
panel
,thumbnail
,pager
, andwell
components - Dropping the
Glyphicons
icon font - Huge number of utility classes
- Improved form styling, buttons, drop-down menus, media objects and image classes
Bootstrap 4 supports the latest versions of Google Chrome, Firefox, Internet Explorer, Opera, and Safari (except on Windows). It additionally supports back to IE10 and the latest Firefox Extended Support Release (ESR).
jQuery is a JavaScript library designed to simplify HTML DOM tree traversal and manipulation, as well as event handling, CSS animation, and Ajax. It is free, open-source software using the permissive MIT License. As of Aug 2022, jQuery is used by 77% of the 10 million most popular websites. Web analysis indicates that it is the most widely deployed JavaScript library by a large margin, having at least 3 to 4 times more usage than any other JavaScript library.
jQuery’s syntax is designed to make it easier to navigate a document, select DOM elements, create animations, handle events, and develop Ajax applications. jQuery also provides capabilities for developers to create plug-ins on top of the JavaScript library. This enables developers to create abstractions for low-level interaction and animation, advanced effects and high-level, theme-able widgets. The modular approach to the jQuery library allows the creation of powerful dynamic web pages and Web applications.
The set of jQuery core features—DOM element selections, traversal, and manipulation—enabled by its selector engine (named “Sizzle” from v1.3), created a new “programming style”, fusing algorithms and DOM data structures. This style influenced the architecture of other JavaScript frameworks like YUI v3 and Dojo, later stimulating the creation of the standard Selectors API.
Microsoft and Nokia bundle jQuery on their platforms. Microsoft includes it with Visual Studio for use within Microsoft’s ASP.NET AJAX and ASP.NET MVC frameworks while Nokia has integrated it into the Web Run-Time widget development platform.
jQuery, at its core, is a Document Object Model (DOM) manipulation library. The DOM is a tree-structure representation of all the elements of a Web page. jQuery simplifies the syntax for finding, selecting, and manipulating these DOM elements. For example, jQuery can be used for finding an element in the document with a certain property (e.g. all elements with an h1
tag), changing one or more of its attributes (e.g. color
, visibility
), or making it respond to an event (e.g. a mouse click).
jQuery also provides a paradigm for event handling that goes beyond basic DOM element selection and manipulation. The event assignment and the event callback function definition are done in a single step in a single location in the code. jQuery also aims to incorporate other highly used JavaScript functionality (e.g. fade ins and fade outs when hiding elements, animations by manipulating CSS properties).
The principles of developing with jQuery are:
- Separation of JavaScript and HTML: The jQuery library provides simple syntax for adding event handlers to the DOM using JavaScript, rather than adding HTML event attributes to call JavaScript functions. Thus, it encourages developers to completely separate JavaScript code from HTML markup.
- Brevity and clarity: jQuery promotes brevity and clarity with features like “chainable” functions and shorthand function names.
- Elimination of cross-browser incompatibilities: The JavaScript engines of different browsers differ slightly so JavaScript code that works for one browser may not work for another. Like other JavaScript toolkits, jQuery handles all these cross-browser inconsistencies and provides a consistent interface that works across different browsers.
- Extensibility: New events, elements, and methods can be easily added and then reused as a plugin.
jQuery was originally created in January 2006 at BarCamp NYC by John Resig, influenced by Dean Edwards’ earlier cssQuery library. It is currently maintained by a team of developers led by Timmy Willison (with the jQuery selector engine, Sizzle, being led by Richard Gibson).
jQuery was originally licensed under the CC BY-SA 2.5, and relicensed to the MIT license in 2006. At the end of 2006, it was dual-licensed under GPL and MIT licenses. As this led to some confusion, in 2012 the GPL was dropped and is now only licensed under the MIT license.
- In 2015, jQuery was used on 62.7% of the top 1 million websites (according to BuiltWith), and 17% of all Internet websites.
- In 2017, jQuery was used on 69.2% of the top 1 million websites (according to Libscore).
- In 2018, jQuery was used on 78% of the top 1 million websites.
- In 2019, jQuery was used on 80% of the top 1 million websites (according to BuiltWith), and 74.1% of the top 10 million (per W3Techs).
- As of Apr 2021, jQuery is used by 77.8% of the top 10 million websites (according to W3Techs).
jQuery includes the following features:
- DOM element selections using the multi-browser open source selector engine Sizzle, a spin-off of the jQuery project
- DOM manipulation based on CSS selectors that uses elements’ names and attributes, such as id and class, as criteria to select nodes in the DOM
- Events
- Effects and animations
- Ajax
- Deferred and Promise objects to control asynchronous processing
- JSON parsing
- Extensibility through plug-ins
- Utilities, such as feature detection
- Compatibility methods that are natively available in modern browsers, but need fallbacks for older browsers, such as
jQuery.inArray()
andjQuery.each()
.
jQuery 3.0 and newer supports “current−1 versions” (meaning the current stable version of the browser and the version that preceded it) of Firefox (and ESR), Chrome, Safari, and Edge as well as Internet Explorer 9 and newer. On mobile it supports iOS 7 and newer, and Android 4.0 and newer.
The jQuery library is typically distributed as a single JavaScript file that defines all its interfaces, including DOM, Events, and Ajax functions. It can be included within a Web page by linking to a local copy or by linking to one of the many copies available from public servers. jQuery has a content delivery network (CDN) hosted by MaxCDN. Google in Google Hosted Libraries service and Microsoft host the library as well.