Introduction to Responsive Web Development

Bootstrap
Introduction to Twitter Bootstrap 3
in/nikhilbaby

#Agenda
• Web Development 101

• Twitter Bootstrap

• Building a responsive web page with bootstrap components

#Web Development 101
• HTML
Deﬁnes the data and structure of page using elements

• CSS
Deﬁnes how the data and the elements actually look, and how they behave
when interacting with them

• Javascript
The programming language of the web

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

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

#Twitter Bootstrap
• Bootstrap is the most popular HTML, CSS, and JS framework for
developing responsive, mobile ﬁrst 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.

#Bootstrap Features
• Mobile ﬁrst approach (also known as progressive enhancement)

• Supported by all popular browsers

• Easy to get started

• Responsive design

#Bootstrap Contents & Filestructure
• Scaﬀolding: Grid System

• CSS: Classes

• Components: Dropdown

• Javascript plugins: Carousel

#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

#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.

#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>

#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.

#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.

#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

#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.

#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

#Modal
• Modals are streamlined, but ﬂexible, 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 modiﬁer classes to be placed
on a .modal-dialog:

• .model-lg

• .model-sm

#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.

Introduction to Responsive Web Development

More Related Content

Similar to Introduction to Responsive Web Development

Recently uploaded

Introduction to Responsive Web Development