Scribd
Upload
2 views

05 Bootstrap

The document provides an overview of Responsive Web Design and Bootstrap, highlighting its purpose, advantages, and components. It explains Bootstrap's grid system, elements, and form layouts, along with how to implement it using CDN or local files. Additionally, it covers the history of Bootstrap and references for further learning.

Uploaded by

Kiap R14
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

05 Bootstrap

The document provides an overview of Responsive Web Design and Bootstrap, highlighting its purpose, advantages, and components. It explains Bootstrap's grid system, elements, and form layouts, along with how to implement it using CDN or local files. Additionally, it covers the history of Bootstrap and references for further learning.

Uploaded by

Kiap R14
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 30

HTML Responsive Web

Design and Bootstrap


Dr- Fatma Alrubaei
Web Programming
OUTLINE

• Motivation of Bootstrap
• Where to Get Bootstrap
• Bootstrap Grid
• Bootstrap Elements
• Bootstrap Forms
WHAT IS RESPONSIVE WEB DESIGN?

 Responsive Web Design makes your web page look good on all devices
(desktops, tablets, and phones).
 Responsive Web Design is about using HTML and CSS to resize, hide,
shrink, enlarge, or move the content to make it look good on any screen.
WHAT IS BOOTSTRAP?

 Bootstrap is a free front-end framework for faster and easier


web development
 Bootstrap includes HTML and CSS based design templates for
typography, forms, buttons, tables, navigation, modals, image
carousels and many other, as well as optional JavaScript plugins
 Bootstrap also gives you the ability to easily create responsive
designs.
BOOTSTRAP HISTORY

 Bootstrap was developed by Mark Otto and Jacob Thornton at


Twitter. It was released as an open source product in August
2011 on GitHub.
 In June 2014 Bootstrap was the No.1 project on GitHub!
WHAT BOOTSTRAP PACKAGE INCLUDES?

 JavaScript Plugins: Bootstrap contains over a dozen custom jQuery


plugins. You can easily include them all, or one by one. This is covered in
details in the section Bootstrap Plugins.
 Customize: You can customize Bootstrap's components and jQuery
plugins to get your very own version.
FILE STRUCTURE

 PRECOMPILED BOOTSTRAP
Once the compiled version Bootstrap is downloaded, extract the ZIP file, and you will see the
following file/directory structure:

 As you can see there are compiled CSS and JS (bootstrap.*), as well as compiled and minified CSS and
JS (bootstrap.min.*). Fonts from Glyphicons are included, as is the optional Bootstrap theme.
ADVANTAGES OF BOOTSTRAP

 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)
WHERE TO GET BOOTSTRAP?

 There are two ways to start using Bootstrap on your own web
site:
‒ Download Bootstrap from getbootstrap.com
‒ Include Bootstrap from a CDN
 If you don't want to download and host Bootstrap yourself, you can include it from a CDN
(Content Delivery Network).
 MaxCDN provides CDN support for Bootstrap's CSS and JavaScript. You must also include
jQuery
MAXCDN

<!-- Latest compiled and minified CSS -->


<link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/c
ss/bootstrap.min.css">

<!-- jQuery library -->


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js
"></script>

<!-- Latest compiled JavaScript -->


<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min
.js"></script>
ADVANTAGE OF USING THE BOOTSTRAP CDN

 Many users already have downloaded Bootstrap from MaxCDN when


visiting another site. As a result, it will be loaded from cache when they
visit your site, which leads to faster loading time.
 Also, most CDN's will make sure that once a user requests a file from it,
it will be served from the server closest to them, which also leads to
faster loading time.
Bootstrap Grids
BOOTSTRAP GRID SYSTEM

 Bootstrap's grid system allows up to 12 columns across the page.


 If you do not want to use all 12 columns individually, you can group the
columns together to create wider columns:
WORKING OF BOOTSTRAP GRID SYSTEM

Here's how the Bootstrap grid system works:


 Rows must be placed within a .container class for proper alignment and padding.
 Use rows to create horizontal groups of columns.
 Content should be placed within columns, and only columns may be immediate
children of rows.
 Predefined grid classes like .row and .col-xs-4 are available for quickly making grid
layouts. LESS mixins can also be used for more semantic layouts.
 Columns create gutters (gaps between column content) via padding. That padding
is offset in rows for the first and last column via negative margin on .rows.
 Grid columns are created by specifying the number of twelve available columns
you wish to span. For example, three equal columns would use three .col-xs-4.
MEDIA QUERIES

 Media query is a really fancy term for "conditional CSS rule". It simply applies some CSS based on
certain conditions set forth. If those conditions are met, the style is applied.
 Media Queries in Bootstrap allow you to move, show and hide content based on viewport size. Following media
queries are used in LESS files to create the key breakpoints in the Bootstrap grid system.
GRID OPTIONS

 The following
table summarizes
aspects of how
Bootstrap grid
system works
across multiple
devices:
GRID CLASSES

 The Bootstrap grid system has four classes:


 xs (for phones - screens less than 768px wide)
 sm (for tablets - screens equal to or greater than 768px wide)
 md (for small laptops - screens equal to or greater than 992px
wide)
 lg (for laptops and desktops - screens equal to or greater than
1200px wide)
STRUCTURE OF A BOOTSTRAP GRID

<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
...
</div>
Bootstrap Elements
BOOTSTRAP TABLES

 Bootstrap Table classes:


‒ The .table class adds basic styling to a table
‒ The .table-striped class adds zebra-stripes to a table
‒ The .table-bordered class adds borders on all sides of the table and cells
‒ The .table-hover class adds a hover effect (grey background color) on table rows
‒ The .table-responsive class creates a responsive table.
RESPONSIVE IMAGES

 Images come in all sizes. Responsive images automatically adjust to fit the
size of the screen.
 Create responsive images by adding an .img-responsive class to the
<img> tag. The image will then scale nicely to the parent element.
 The .img-responsive class applies display: block; and max-width: 100%; and
height: auto; to the image.
BOOTSTRAP ALERTS

 Bootstrap provides an easy way to create predefined alert messages.


 Alerts are created with the .alert class, followed by one of the four
contextual classes:
‒ .alert-success,
‒ .alert-info,
‒ .alert-warning or
‒ .alert-danger
BOOTSTRAP BUTTONS

 Bootstrap has the following classes:


‒ .btn
‒ .btn-default
‒ .btn-primary
‒ .btn-success
‒ .btn-info
‒ .btn-warning
‒ .btn-danger
‒ .btn-link
BOOTSTRAP BUTTONS (CONT.)

 Bootstrap provides four button sizes:


‒ .btn-lg
‒ .btn-md
‒ .btn-sm
‒ .btn-xs

 Block Level Buttons:


‒ add class .btn-block to create a block level button

 Active/Disabled Buttons:
‒ The class .active makes a button appear pressed, and the class .disabled makes a button unclickable
Bootstrap Forms
FORM LAYOUT

 Bootstrap provides you with following types of form layouts:


‒ Vertical (default) form
‒ Inline form
‒ Horizontal form
FORM LAYOUT (CONT.)

Vertical or basic form:


 Add a role form to the parent <form> element.
 Wrap labels and controls in a <div> with class .form-group. This is needed for optimum
spacing.
 Add a class of .form-control to all textual <input>, <textarea>, and <select> elements.

<form role="form">
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" placeholder="Enter Name">
</div>
</form>
FORM LAYOUT (CONT.)

Inline form:
 To create a form where all of the elements are inline, left aligned and labels are
alongside, add the class .forminline to the <form> tag.

<form class="form-inline" role="form">


<div class="form-group">
<label class="sr-only" for="name">Name</label>
<input type="text" class="form-control" id="name" placeholder="Enter Name">
</div>
</form>
FORM LAYOUT (CONT.)

Horizontal form:
 Add a class of .form-horizontal to the parent <form> element.
 Wrap labels and controls in a <div> with class .form-group.
 Add a class of .control-label to the labels.

<form class="form-horizontal" role="form">


<div class="form-group">
<label for="firstname" class="col-sm-2 control-label">First Name</label>
<div class="col-sm-10">
<input type="text" class="form-control"
id="firstname“ placeholder="Enter First Name">
</div>
</div>
</forms>
REFERENCES

• W3Schools
 http://www.w3schools.com/bootstrap
• Tutorials Point
 https://www.tutorialspoint.com/bootstrap/index.htm

You might also like