ºÝºÝߣ

ºÝºÝߣShare a Scribd company logo
MR. SACHIN PAL YADAV
HOD CSE
SUBMITTED TO
PRESENTED BY
LOKESH SHARMA
12EEJCS023
Summer training programme presentation
INTRODUCTION
? This is an Originated and founded about as a website design and development firm in the city of
sand dunes, Bikaner, Rajasthan.
? The managing Director of this enterprise MR. Mandeep Singh who holds an immense
experience of over 10 years in the IT sector, developing and designing websites since 2004.
? It built websites in WordPress, Joomla, Drupal, Magneto and Core PHP, thus dealing in a wider
array of platforms and giving a client so much of diversity as far as website development is
concerned.
Sleek, intuitive, and powerful mobile first front-
end framework for faster and easier web
development .
I completed my summer internship in the web developing and my project is ONLINE BUS TICKET RESERVATION
SYSTEM in which BOOTSTRAP front and framework is used. The bootstrap is concerned these following contents:
? About
? Framework
? Responsive design
? Advantages
? Download
? Precompiled bootstrap
? Basic templates
? Container
? Grid system
? Typography
? components
bootstrap
bootstrap
ResponsiveWeb Design is about creating web sites which
automatically adjust themselves to look good on all devices, from
small phones to large desktops.
?Easy to use: Anybody with just basic knowledge of HTML and CSS can
start using Bootstrap
?Responsive features: Bootstrap's responsive CSS adjusts to phones,
tablets, and desktops
?Mobile-first approach: In Bootstrap 3, mobile-first styles are part of
the core framework
?Browser compatibility: Bootstrap is compatible with all modern
browsers (Chrome, Firefox, Internet Explorer, Safari, and Opera)
?Download source code
The fastest way to get Bootstrap is to download the compiled and
minified versions of our CSS and JavaScript, along with the included
fonts.
? http://getbootstrap.com/getting-started/
?Via CDN (Content Delivery Network)
If you don't want to download and host Bootstrap yourself, you can include
it from a CDN.
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
bootstrap/
©À©¤©¤ less/
©À©¤©¤ js/
©À©¤©¤ fonts/
©À©¤©¤ dist/
©¦ ©À©¤©¤ css/
©¦ ©À©¤©¤ js/
©¦ ©¸©¤©¤ fonts/
©¸©¤©¤ docs/
©¸©¤©¤ examples/
bootstrap/
©À©¤©¤ css/
©¦ ©À©¤©¤ bootstrap.css
©¦ ©À©¤©¤ bootstrap.css.map
©¦ ©À©¤©¤ bootstrap.min.css
©¦ ©À©¤©¤ bootstrap-theme.css
©¦ ©À©¤©¤ bootstrap-theme.css.map
©¦ ©¸©¤©¤ bootstrap-theme.min.css
©À©¤©¤ js/
©¦ ©À©¤©¤ bootstrap.js
©¦ ©¸©¤©¤ bootstrap.min.js
©¸©¤©¤ fonts/
©À©¤©¤ glyphicons-halflings-regular.eot
©À©¤©¤ glyphicons-halflings-regular.svg
©À©¤©¤ glyphicons-halflings-regular.ttf
©À©¤©¤ glyphicons-halflings-regular.woff
©¸©¤©¤ glyphicons-halflings-regular.woff2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src=/slideshow/bootstrap-56775094/56775094/"https:/oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Basic Template:
Full width container
Bootstrap also requires a containing element to wrap site contents.There are two container classes to
choose from:
Fixed width container
bootstrap
The Bootstrap grid system has four classes:
?xs (for phones)
?sm (for tablets)(
?md (for desktops)
?lg (for larger desktops)(
The classes above can be combined to create more dynamic and
flexible layouts.
?Bootstrap's global default font-size is 14px, with a line-height of
1.428.This is applied to the <body> and all paragraphs.
?In addition, all <p> elements have a bottom margin that equals
half their computed line-height (10px by default).
?By default, Bootstrap will style the HTML headings (<h1> to <h6>)
in the following way:
bootstrap
bootstrap
bootstrap
Any Queries¡­

More Related Content

bootstrap

  • 1. MR. SACHIN PAL YADAV HOD CSE SUBMITTED TO PRESENTED BY LOKESH SHARMA 12EEJCS023 Summer training programme presentation
  • 2. INTRODUCTION ? This is an Originated and founded about as a website design and development firm in the city of sand dunes, Bikaner, Rajasthan. ? The managing Director of this enterprise MR. Mandeep Singh who holds an immense experience of over 10 years in the IT sector, developing and designing websites since 2004. ? It built websites in WordPress, Joomla, Drupal, Magneto and Core PHP, thus dealing in a wider array of platforms and giving a client so much of diversity as far as website development is concerned.
  • 3. Sleek, intuitive, and powerful mobile first front- end framework for faster and easier web development . I completed my summer internship in the web developing and my project is ONLINE BUS TICKET RESERVATION SYSTEM in which BOOTSTRAP front and framework is used. The bootstrap is concerned these following contents: ? About ? Framework ? Responsive design ? Advantages ? Download ? Precompiled bootstrap ? Basic templates ? Container ? Grid system ? Typography ? components
  • 6. ResponsiveWeb Design is about creating web sites which automatically adjust themselves to look good on all devices, from small phones to large desktops.
  • 7. ?Easy to use: Anybody with just basic knowledge of HTML and CSS can start using Bootstrap ?Responsive features: Bootstrap's responsive CSS adjusts to phones, tablets, and desktops ?Mobile-first approach: In Bootstrap 3, mobile-first styles are part of the core framework ?Browser compatibility: Bootstrap is compatible with all modern browsers (Chrome, Firefox, Internet Explorer, Safari, and Opera)
  • 8. ?Download source code The fastest way to get Bootstrap is to download the compiled and minified versions of our CSS and JavaScript, along with the included fonts. ? http://getbootstrap.com/getting-started/ ?Via CDN (Content Delivery Network) If you don't want to download and host Bootstrap yourself, you can include it from a CDN. <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
  • 9. bootstrap/ ©À©¤©¤ less/ ©À©¤©¤ js/ ©À©¤©¤ fonts/ ©À©¤©¤ dist/ ©¦ ©À©¤©¤ css/ ©¦ ©À©¤©¤ js/ ©¦ ©¸©¤©¤ fonts/ ©¸©¤©¤ docs/ ©¸©¤©¤ examples/ bootstrap/ ©À©¤©¤ css/ ©¦ ©À©¤©¤ bootstrap.css ©¦ ©À©¤©¤ bootstrap.css.map ©¦ ©À©¤©¤ bootstrap.min.css ©¦ ©À©¤©¤ bootstrap-theme.css ©¦ ©À©¤©¤ bootstrap-theme.css.map ©¦ ©¸©¤©¤ bootstrap-theme.min.css ©À©¤©¤ js/ ©¦ ©À©¤©¤ bootstrap.js ©¦ ©¸©¤©¤ bootstrap.min.js ©¸©¤©¤ fonts/ ©À©¤©¤ glyphicons-halflings-regular.eot ©À©¤©¤ glyphicons-halflings-regular.svg ©À©¤©¤ glyphicons-halflings-regular.ttf ©À©¤©¤ glyphicons-halflings-regular.woff ©¸©¤©¤ glyphicons-halflings-regular.woff2
  • 10. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!--The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <title>Bootstrap 101Template</title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!--WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src=/slideshow/bootstrap-56775094/56775094/"https:/oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <h1>Hello, world!</h1> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js"></script> </body> </html> Basic Template:
  • 11. Full width container Bootstrap also requires a containing element to wrap site contents.There are two container classes to choose from: Fixed width container
  • 13. The Bootstrap grid system has four classes: ?xs (for phones) ?sm (for tablets)( ?md (for desktops) ?lg (for larger desktops)( The classes above can be combined to create more dynamic and flexible layouts.
  • 14. ?Bootstrap's global default font-size is 14px, with a line-height of 1.428.This is applied to the <body> and all paragraphs. ?In addition, all <p> elements have a bottom margin that equals half their computed line-height (10px by default). ?By default, Bootstrap will style the HTML headings (<h1> to <h6>) in the following way: