Upload
vinayak-kulkarni
View
147
Download
0
Tags:
Embed Size (px)
Citation preview
NAVODAYA INSTITUTE OF TECHNOLOGY
RAICHUR
SEMINAR ON
TWITTER BOOTSTRAP
By,
VINAYAK(3NA11CS026)
Agenda
Part I: Introduction
Part II: Bootstrap Packages
Agenda
Part I: Introduction What is Bootstrap ?
Why Bootstrap ?
How to Install Bootstrap ?
Basic HTML Template
What is Bootstrap ?
Bootstrap is sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.
Bootstrap uses HTML, CSS, and Javascript framework for developing.
Bootstrap was developed by Mark Otto and Jacob Thornton at Twitter as a framework in 2014.
Why Bootstrap ?
Bootstrap is open source. It's hosted, developed, and maintained on GitHub.
Browser Support. Easy to get started. One framework, every device.
Why Bootstrap ?
Built in Html/Css/Js Built in Grid System. Responsive Design.
EXAMPLE OF RESPONSIVE WEB DESIGN
How to Install Bootstrap ?
Download the Bootstrap framework from http://getbootstrap.com/
Extract Bootstrap.zip
How to Install Bootstrap?
The following file/directory structure :
Basic HTml template
Agenda
Part II: Bootstrap Packages
CSS - Defines how the data and elements actually look how they behave when interacting with them.
Components - Bootstrap contains over a dozen reusable components built to provide dropdown ,navigation and much more.
JavaScript Plugins - Bootstrap contains over a dozen custom jQuery plugins.
CSS, Components, JavaScriptCSS Components
JavaScript
Grid System Glyphicons Modal
Typography Pagination ScrollSpy
Table Dropdowns Collapse
Forms
Pager Carousel
Buttons Navigation Bar
Images Jumbotron
Progress Bar
BOOTSTRAP GRID SYSTEM • Grid system allows upto 12 columns across the
page.
• If you do not want to use all 12 column individually, you can group the columns together to create wider columns.
• It is responsive, and the columns will re-arrange automatically depending on the screen size.
GRID CLASSESFour Classes:
•xs (for phones)
•sm (for tablets)
•md (for desktops)
•lg (for larger desktops)
Basic Structure of a Bootstrap Grid for tablets:
On mobile phones, the columns will automatically stack: .col-sm-4
.col-sm-4
.col-sm-4
.col-sm-4 .col-sm-4 .col-sm-4
BOOTSTRAP TYPOGRAPHY•TYPOGRAPHY
creates headings,paragraphs,lists and other inline elements.
IMAGESThree classes:
• .img-rounded: class adds Rounded corners to an images .
• .img-circle: class shapes the image to a circle.
• .img-thumbnail: class shapes the image to a thumbnail.
Syntax:
BOOTSTRAP BUTTONS •Button Styles
○Bootstrap provides seven styles of buttons.
○To achieve the button styles above, Bootstrap has the following classes.
Syntax:
Bootstrap GLYPHICONS• Glyphicons : Includes 200 glyphs in font
format from the Glyphicon Halflings set.
Syntax:
Syntax:
NAVIGATION BAR• A navigation bar is a navigation header that is placed
at the top of the page.
• Can be created using as following nav classes
Syntax: • • •
JUMBOTRON•A jumbotron indicates a big box for calling extra
attention to some special content or information.
•A jumbotron is displayed as a grey box with rounded corners. It also enlarges the font sizes of the text inside it.
•Use a <div> element with class .jumbotron
•Example:
PAGINATION• If you have a web site with lots of pages, you
may wish to add some sort of pagination to each page.
• Example:
• Output
PAGER
• Pager is also a form of pagination.
• Pager provides previous and next buttons(links).
• add the .pager class to an <ul> element
• Example:
• Output
CAROUSEL• Carousel plugin is a component for
cycling through elements, like a slideshow.
• This plugin is included in "bootstrap.js"
ANY QUERIES??