1. Petty and Low Group

• Overview
• History
• Why use Bootstrap
• Some shortcomings
• What's in the Bootstrap
• Who uses Bootstrap
• Simple Bootstrap example
• Reference

Bootstrap is a free and open-source CSS framework directed at responsive, mobile-first front-end web development. It contains CSS- and (optionally) JavaScript-based design templates for typography, forms, buttons, navigation, and other interface components.

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.

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 Mark Otto, Jacob Thornton, and a small group of core developers, as well as 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 (RWD). This means the layout of web pages adjusts dynamically, taking into account the characteristics of the device used (desktop, tablet, mobile phone).

The next major version, Bootstrap 3, was released on August 19, 2013. It redesigned components to use flat design, and has prioritized mobile devices as a design guideline, with a greater emphasis on responsive design.

Mark 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 10 August 2017. And was finalized on January 18, 2018.

If you have had some experience with any front-end framework, you might be wondering what makes Bootstrap so special. Here are some advantages why one should opt for Bootstrap framework:

• Save lots of time — You can save lots of time and efforts using the Bootstrap predefined design templates and classes and concentrate on other development work.
• Responsive features — Using Bootstrap you can easily create responsive websites that appear more appropriately on different devices and screen resolutions without any change in markup.
• Consistent design — All Bootstrap components share the same design templates and styles through a central library, so the design and layout of your web pages will be consistent.
• Easy to use — Bootstrap is very easy to use. Anybody with the basic working knowledge of HTML, CSS and JavaScript can start development with Bootstrap.
• Compatible with browsers — Bootstrap is created with modern web browsers in mind and it is compatible with all modern browsers such as Chrome, Firefox, Safari, Internet Explorer, etc.
• Open Source — And the best part is, it is completely free to download and use.

• If you have your own special needs, you need to re-customize the style. If there are a lot of non-bootstrap "style" styles in a website, then you need to do a lot of css rewriting, so you lose the meaning of using the framework.
• There is also a big problem with IE compatibility. BT sets all element box models to border-box. This is the box model in IE promiscuous mode. This makes it incompatible with IE. In addition, a large number of H5 tags and CSS3 syntax are also used. There are also many problems in the compatibility of these syntax tags. Of course, there are many Internet-compatible methods, but other files need to be introduced, and some are not small, which will inevitably cause the loading speed to change slow and affect user experience. BT's compatibility with IE6 and 7 is definitely not good, and support for IE8 also requires some additional files. IE8's media query needs the cooperation of response.js to achieve

• Basic structure: Bootstrap provides a basic structure with a grid system, link styles, and background. This will be explained in detail in the basic structure of Bootstrap.

• CSS: Bootstrap comes with the following features: global CSS settings, defining basic HTML element styles, extensible classes, and an advanced grid system. This will be explained in detail in the Bootstrap CSS section.

• Components: Bootstrap contains more than a dozen reusable components for creating images, drop-down menus, navigation, warning boxes, pop-up boxes, etc. This will be explained in detail in the Layout Components section.

• JavaScript plugins: Bootstrap contains a dozen custom jQuery plugins. You can include all plug-ins directly, or you can include them one by one. This will be explained in detail in the Bootstrap plugin section.

• Customization: You can customize Bootstrap's components, LESS variables and jQuery plugins to get your own version.

Thousands of companies and millions of startups use Bootstrap. Here is a list containing some of the names of the companies using Bootstrap:

Common header code

<!DOCTYPE html>
<html>
  <head>
	<meta charset="utf-8"> 
    <title>Bootstrap example</title>

Contains header information to adapt to different devices

<meta name="viewport" content="width=device-width, initial-scale=1">

This is the style of the table inside herf is a table style

<link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.2.0/css/bootstrap.min.css">

This is body part

</head>

  <body>
    <div class="container">
      <h2>table</h2>
      <p>Create responsive tables ps.Add alternate cell background color</p>      
      <div class="table-responsive">          
       <table class="table table-striped table-bordered">
         <thead>
           <tr>
             <th>#</th>
             <th>Name</th>
             <th>City</th>
           </tr>
         </thead>
         <tbody>
	    <tr>
             <td>1</td>
             <td>DCH</td>
             <td>Lin Yi</td>
           </tr>
           <tr>
             <td>2</td>
             <td>ZYR</td>
             <td>Dong Ying</td>
           </tr>
           
         </tbody>
       </table>
      </div>
    </div>

  </body>

</html>

• https://github.com/twbs/bootstrap

• https://v3.bootcss.com/

• https://en.wikipedia.org/wiki/Bootstrap_(front-end_framework)

• https://getbootstrap.com/docs/4.5/getting-started/introduction/

• https://www.quora.com/What-companies-use-the-Bootstrap-framework