MR. SACHIN PAL YADAV HOD CSE SUBMITTED TO PRESENTED BY LOKESH SHARMA 12EEJCS023 Summer training programme presentation
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
MR. SACHIN PAL YADAVHOD CSE
SUBMITTED TO PRESENTED BYLOKESH SHARMA12EEJCS023
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
What is Bootstrap?Bootstrap, originally named Twitter Blueprint, was
developed by Mark Otto and Jacob Thornton at Twitter as a framework. It was renamed from Twitter Blueprint to Bootstrap, and released as an open source project on August 19, 2011 on Github.
Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.
Bootstrap is a front end framework, that is, an interface for the user, unlike the server-side code which resides on the "back end" or server.
What is Framework?• A framework provides code for common activities
performed in web development — so you don’t need to reinvent the wheel every time you start a project
What is Responsive 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.
Advantages:Easy to use: Anybody with just basic knowledge of HTML
and CSS can start using BootstrapResponsive features: Bootstrap's responsive CSS
adjusts to phones, tablets, and desktopsMobile-first approach: In Bootstrap 3, mobile-first
styles are part of the core frameworkBrowser compatibility: Bootstrap is compatible with all
modern browsers (Chrome, Firefox, Internet Explorer, Safari, and Opera)
Getting Started : DownloadDownload source codeThe 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">
Precompiled Bootstrap: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 101 Template</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="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:
Containers:
Full width container (.container-fluid class)
Bootstrap also requires a containing element to wrap site contents. There are two container classes to choose from:
Fixed width container (.container class)
Grid System:Bootstrap includes a responsive, mobilefirst fluid grid system that appropriatelyscales up to 12 columns as the device orviewport size increases.
GRID CLASSES: The Bootstrap grid system has four classes:
xs (for phones) (<768px)sm (for tablets)( ≥768px)md (for desktops) (≥992px)lg (for larger desktops)( ≥1200px)The classes above can be combined to create more dynamic and flexible layouts.
Bootstrap Default setting:
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:
Typography Classes:
Bootstrap components :
DropdownButton
GroupPaginationNavigationsProgress
Bars CheckboxesSwitches Glyphicon
Any Queries…
Related Documents
