The following topics has been covered in the presentation: 1. Web Development 101 2. Introduction to Bootstrap 3

1. Bootstrap
Introduction to Twitter Bootstrap 3
in/nikhilbaby

2. #Agenda
• Web Development 101
• Twitter Bootstrap
• Building a responsive web page with bootstrap components

3. #Web Development 101
• HTML
Defines the data and structure of page using elements
• CSS
Defines how the data and the elements actually look, and how they behave
when interacting with them
• Javascript
The programming language of the web

4. Basic
HTML
Structure

5. #HowtouseCSS

6. #CSS Selectors
Selector Example Example Description
.class .intro Selects all elements with class="intro"
#id #firstname Selects the element with id="firstname"
* * Selects all elements
element p Selects all <p> elements
Reference: https://www.w3schools.com/cssref/css_selectors.asp

7. Reference: https://www.w3schools.com/css/css_boxmodel.asp
#Box Model

8. https://getbootstrap.com/

9. #Twitter Bootstrap
• Bootstrap is the most popular HTML, CSS, and JS framework for
developing responsive, mobile first projects on the web.
• As of Dec 2017, 16.3% of all websites are powered by Bootstrap.
(https://w3techs.com/technologies/details/js-bootstrap/all/all)
• Bootstrap, originally named Twitter Blueprint, was developed by Mark Otto, and
Jacob Thornton at Twitter as a framework to encourage consistency across internal
tools.
• It was released as an open source project in August 2011.

10. #Bootstrap Features
• Mobile first approach (also known as progressive enhancement)
• Supported by all popular browsers
• Easy to get started
• Responsive design

11. #Bootstrap Contents & Filestructure
• Scaffolding: Grid System
• CSS: Classes
• Components: Dropdown
• Javascript plugins: Carousel

13. #Media Queries
• Media queries in CSS3 extend the CSS2 media types idea: Instead of
looking for a type of device, they look at the capability of the device.
• Media queries can be used to check many things, such as:
• width and height of the viewport
• width and height of the device
• orientation
• resolution

14. #Grid Layout
• Bootstrap includes a responsive, mobile first fluid grid system that
appropriately scales up to 12 columns as the device or viewport size
increases.
• Grid systems are used for creating page layouts through a series of rows
and columns that house your content.
• When using the grid system you need to keep in mind that the design has
to be first made for the mobile devices and then scaled to the larger ones.

15. #Grid Layout

17. #Grid Options

18. CSS Classes

19. #Tables
• For basic styling—light padding and only horizontal dividers—add the
base class .table to any <table>
• Use .table-striped to add zebra-striping to any table row within the
<tbody>
• Add .table-bordered for borders on all sides of the table and cells
• Add .table-hover to enable a hover state on table rows within a <tbody>

20. #Tables

21. #Forms
• Individual form controls automatically receive some global styling.
• All textual <input>, <textarea>, and <select> elements with .form-control
are set to width: 100%; by default.
• Wrap labels and controls in .form-group for optimum spacing.
• Do not mix form groups directly with input groups. Instead, nest the input
group inside of the form group.

23. #Buttons
• Use the button classes on an <a>, <button>, or <input> element.
• Add .btn-lg, .btn-sm, or .btn-xs for additional sizes.
• Add the disabled attribute to <button> buttons.
• Add the .active class to change the state of the button to active.

25. #Images
• Images in Bootstrap 3 can be made responsive-friendly via the addition of
the .img-responsive class.
• This applies max-width: 100%;, height: auto; and display: block; to the
image so that it scales nicely to the parent element.
• To center images which use the .img-responsive class, use .center-block

27. Reusable Components

28. #Dropdown
• Wrap the dropdown's trigger and the dropdown menu within .dropdown
• Dropdown menus can be changed to expand upwards (instead of
downwards) by adding .dropup to the parent.
• Add a header to label sections of actions in any dropdown menu.
• Add .disabled to a <li> in the dropdown to disable the link.

30. #Navbar
• Navbars are responsive meta components that serve as navigation
headers for your application or site.
• They begin collapsed (and are toggleable) in mobile views and become
horizontal as the available viewport width increases.
• Be sure to use a <nav> element or, if using a more generic element such
as a <div>, add a role="navigation" to every navbar to explicitly

32. Javascript Components

33. #Modal
• Modals are streamlined, but flexible, dialog prompts with the minimum
required functionality and smart defaults.
• Be sure not to open a modal while another is still visible. Showing more
than one modal at a time requires custom code.
• Modals have two optional sizes, available via modifier classes to be placed
on a .modal-dialog:
• .model-lg
• .model-sm

35. #Carousel
• A slideshow component for cycling through elements, like a carousel.
• Nested carousels are not supported.
• Add captions to your slides easily with the .carousel-caption element
within any .item.