Bootstrap Introduction

Bootstrap 3 Tutorial � Bootstrap Introduction

Introduction to "responsive" design

Today web pages are displayed on many types of devices such as tablets, smartphones, e-books, laptops, PCs, etc. This technology claims that with a only web design we have a suitable display on any device.

Responsive design is based on providing all users of a website the same content and a user experience as similar as possible, compared to other approaches to mobile web development such as app creation, domain change or webs served dynamically depending on the device.

Responsive web is considered by many experts as the best possible practice, unifying the web, reducing development times and offering great advantages for mobile SEO.

Frameworks responsive

Currently there are a wide variety of this type of frameworks on the market responsive, some of the most used are:

Bootstrap (getbootstrap.com): This framework is one of the most popular on the market, having been developed by the Twitter team. Bootstrap has been created thinking of offering the best user experience to both PC users (IE7 included!), such as smartphones and tablets. Use a responsive 12-column grid and has integrated dozens of plugins, JavaScript plugins, typography, form controllers and much more. It also uses the CSS preprocessor LESS.

Foundation (foundation.zurb.com): Along with Bootstrap is one of the most advanced frameworks that exist today. It has been developed with SASS, a powerful CSS preprocessor that makes Foundation a framework easily customizable. It also takes advantage of new technologies and works with IE8 +.

Skeleton (getskeleton.com): Skeleton is a boilerplate that offers a grid Responsive based on a resolution of 960px that adjusts to the size of the mobile devices. It is lightweight and includes a collection of CSS and JS files to facilitate the design of our website.

HTML5 Boilerplate (html5boilerplate.com): Like the others, it offers us a set of utilities to build our responsive website quickly and easily, with the advantage of being one of the least occupying. In this course we are going to focus on Bootstrap as it is one of the most popular frameworks complete, most used and that work best.

What is Responsive Web Design?
Responsive web design is about creating web sites which automatically adjust themselves to look good on all devices, from small phones to large desktops.

Creating a Basic HTML file

Open up your favorite code editor and create a new HTML file.

Example:

<!DOCTYPE html>

  <html lang="en">

  <head>

      <meta charset="utf-8">

      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

      <title>Your basic HTML page</title>  

</head>

  <body>

      <h1>Your basic HTML page </h1>

      <p>This is my basic HTML page which I will turn into a Bootstrap template</p>

      <div class="jumbotron text-center">

      <h1>My First Bootstrap Page</h1>

      <p>Resize this responsive page to see the effect!</p> 

      </div>

      <div class="container">

      <div class="row">

      <div class="col-sm-4">

      <h3>Column 1</h3>

      <p>This is my basic HTML column 1</p>

      </div>

      <div class="col-sm-4">

      <h3>Column 2</h3>

      <p>This is my basic HTML column 2</p>

      </div>

      <div class="col-sm-4">

      <h3>Column 3</h3> 

      <p>This is my basic HTML column 3</p>

      </div>

      </div>

      </div>

  </body>

  </html>

Making this HTML File a Bootstrap Template - example

In order to make this plain HTML file a Bootstrap template, just include the Bootstrap CSS and JS files as well as required jQuery and Popper.js using their CDN links.

Example:

<!DOCTYPE html>

  <html lang="en">

  <head>

      <meta charset="utf-8">

      

<title>Your basic HTML page</title>  
 <meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

  </head>

  <body>

  <h1>Your basic HTML page </h1>

  <p>This is my basic HTML page which I will turn into a Bootstrap template</p>

  <div class="jumbotron text-center">

  <h1>My First Bootstrap Page</h1>
  
  <p>Resize this responsive page to see the effect!</p> 

  </div>

  

  <div class="container">
  
  <div class="row">
  
  <div class="col-sm-4">
  
  <h3>Column 1</h3>
  
  <p>This is my basic HTML column 1</p>
  
  </div>
  
  <div class="col-sm-4">
  
  <h3>Column 2</h3>
  
  <p>This is my basic HTML column 2</p>
  
  </div>
  
  <div class="col-sm-4">
  
  <h3>Column 3</h3> 
  
  <p>This is my basic HTML column 3</p>
  
  </div>
  
  </div>

  </div>

  </body>

  </html>

Bootstrap Introduction ppt, tutorial, page, pdf

Bootstrap Introduction ppt, tutorial, page, pdf
Bootstrap Introduction - bootstrap

Online Editor

ONLINE EDITOR

news templates

COLOR PICKER

news templates

This tool makes it easy to create, adjust, and experiment with custom colors for the web.

HTML Templates

Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.

CSS HTML Layout

Find here examples of creative and unique website layouts.

Free CSS HTML Menu

Find here examples of creative and unique website CSS HTML menu.