Bootstrap 4 Get Started, Introduction, What is Bootstrap?

admin admin Jun 21, 2020 3156 1

Bootstrap 4 Get Started, Introduction, What is Bootstrap?

What is Bootstrap?

yes Bootstrap is a free front-end framework for faster and easier web development.

yes Bootstrap is an HTML and CSS based template design rich in typography, forms, buttons, tables, navigation, modals, image carousels, and JavaScript plug-ins.

yes Bootstrap is used to create responsive designs very easily.

 

 

 What is Responsive Web Design?

  Responsive web design is a design for a website that can easily adjust to all devices, from small phones to large desktops.

 

 

History of Bootstrap:

Bootstrap was developed on Twitter by Mark Otto and Jacob Thornton and released in 2011 on GitHub as an open-source product.

In June 2014, Bootstrap was considered the No. 1 project on GitHub!
 

Why use bootstrap?

Advantages of Bootstrap:

yes Easy to use: Anyone who knows HTML and CSS can start using Bootstrap.
yes Responsive Feature: Bootstrap's Responsive CSS easily adjusts to phones, tablets, and desktops.
yes Mobile-First Priority: In Bootstrap (3), a part of the Mobile-First Style Core Framework.
yes Browser Support: Bootstrap supports almost all modern browsers (chrome, firefox, internet explorer, safari, and opera).

Where to find bootstrap?

There are two ways to use Bootstrap on your web site.

yes Download from getbootstrap.com
yes Adds bootstrap from CDN

 

Download Bootstrap:

If you want to download and host your own bootstrap, go to getbootstrap.com, and follow the steps.

Bootstrap CDN

If you do not want to manually download and host, you can add it from CDN (CDN = Content Delivery Network).

MaxCDN supports Bootstrap CSS and JavaScript's CDN support. In addition to these, you must also add the Jquery Library:

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

 

 

An advantage of using Bootstrap CDN:

Bootstrap is downloaded from MaxCDN when users visit other sites. As a result, when they visit your website it will load from the cache which will ensure faster loading.

 

 

Create the first web page with bootstrap

1. Add HTML (5) DOCTYPE.

HTML elements and CSS properties are used in Bootstrap, for which it is mandatory to set HTML (5) DOCTYPE.

Always add HTML (5) DOCTYPE at the beginning of the page

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8"> 
  </head>
</html>

2. Bootstrap (3) Mobile-First

Bootstrap (3) has been made more responsive to mobile devices. Mobile-first style, a part of the core framework.

Confirm the <meta> tag in the <head> element for proper output and touch zooming:

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

Width=device-width is used to set the page width based on the screen-width of the device (depending on the device).

Initial-scale=1 is used to set the initial zoom of the page when it is first loaded by the browser.

3. Container

The element in the bootstrap needs to be placed in a container.

There are two types of containers in Bootstrap. Save the container according to your needs:

yes Use the .container class to create responsive fixed-width containers.
yes Use the .container-fluid class to measure the full width of the viewport to a full-width container.


Note: Containers are not nestable (you cannot place containers in containers if you wish).

Two basic bootstrap pages

The following example shows the basic page of Bootstrap with code:

  1. <!doctype html>
  2. <html lang="en">
  3.   <head>
  4.     <!-- here Required meta tags -->
  5.     <meta charset="utf-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  7.     <!-- here Bootstrap CSS -->
  8.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  9.     <title>Bootstrap, Hello, world!</title>
  10.   </head>
  11.   <body>
  12.     <h1>Bootstrap, Hello, world!</h1>
  13.     <!-- here Optional JavaScript -->
  14.     <!-- here jQuery first, then Popper.js, then Bootstrap JS -->
  15.     <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  16.     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  17.     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  18.   </body>
  19. </html>

 

Output:

Bootstrap, Hello, world!

 

 

bootstrap download, bootstrap install, bootstrap 4 installs, bootstrap 4 downloads, bootstrap setup, bootstrap 4 setups, bootstrap 4 CDN

Thank You........

Tags: