5bootstrap EN v1

Diseño Web
— Introducción a Bootstrap —
Dr. César García Osorio

cgosorio@ubu.es
Universidad de Burgos
Contenidos
1 Introducción
• Origins
• Competitors and users
• Minimal bootstrap page
2 Grid system
• What is a grid system?
• Containers
• Rows and columns
3 Bootstrap components
• Page components
• Navigation systems
• Small components
4 Forms
5 Javascript effects
Los contenidos de esta presentación proceden principalmente del libro de Syed
Fazle Rahman «Jump start Bootstrap».
cgosorio@ubu.es Diseño Web . Introducción a Bootstrap 2/35
Bibliografía
Los contenidos de esta presentación proceden

principalmente del libro:
Syed Fazle Rahman, Jump start Bootstrap, Sitepoint,
2014. (capítulos 1 a 3)
cgosorio@ubu.es Diseño Web . Introducción a Bootstrap 3/35

Introducción
cgosorio@ubu.es Diseño Web . Introducción a Bootstrap . Introducción 4/35

Introducción
q ¿Qué es bootstrap?
5 It is a full front-end/CSS framework (RWD grid system, predefined
CSS default styles, provide web components, javascript, . . . ).
5 Advantages of using a good CSS framework:
É Faster and easier development.
É More organized and maintainable code.
É One can spend time on innovation rather than reinventing the wheel.
q What does it provide?
5 Several components: navigation bar, stylish buttons, nice
typography, a grid system, placeholder for texts and images, big
image slider, responsive web design, . . .
5 All the CSS classes and JavaScript code needed by those
components.
5 Bootstrap allows you to customize its styles through the use of
Less (http://lesscss.org/) and
Sass (http://sass-lang.com/).
cgosorio@ubu.es Diseño Web . Introducción a Bootstrap . Introducción 5/35

Introduction Origins
q Bootstrap 1.0.0 (2011) was developed in 2011 by Mark Otto

and Jacob Thornton, a pair of web developers at Twitter.
5 It has only CSS and HTML components.
q Bootstrap 1.3.0, was the first version with JavaScript plugins,
also compatible with IE7 and IE8.
q Bootstrap 2.0.0 (2012) was a complete rewrite of the Bootstrap
library, as well as becoming a responsive framework.
5 Its components were compatible with all kinds of devices, mobiles,
tablets and desktops; and lots of new CSS and JavaScript plugins
were included in the package.
q Bootstrap 3 in 2013 was another significant release, becoming
a “Mobile First and always responsive” framework.
5 Bootstrap 3 is not backward compatible.
cgosorio@ubu.es Diseño Web . Introducción a Bootstrap . Introducción . Origins 6/35

Introduction Competitors and users
q There are many other popular frameworks that are competing

with Bootstrap in the front-end framework arena.
5 Foundation framework by Zurb (http://foundation.zurb.com/)
5 YUI — Yahoo User Interface Library (http://yuilibrary.com/)
5 Blueprint (http://www.blueprintcss.org/)
5 Semantic UI (http://semantic-ui.com/)
5 Gumby framework (http://gumbyframework.com/)
5 Pure by Yahoo (http://purecss.io/)
q Who Uses Bootstrap?
5 OpenDesk (https://www.opendesk.cc/)
5 Riot Designs (http://riotdesign.eu/en/)
5 20Jeans (https://www.20jeans.com/)
5 Red Antler (http://redantler.com/)
5 Uberflip (http://www.uberflip.com)
5 More examples at http://builtwithbootstrap.com/
cgosorio@ubu.es Diseño Web . Introducción a Bootstrap . Introducción . Competitors and users 7/35
Introduction Minimal bootstrap page I
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="viewport"
7 content="width=device-width, initial-scale=1">
8 <title>My 1st Bootstrap page</title>
9 <link rel="stylesheet" type="text/css"
10 href="css/bootstrap.css">
11 
15 </head>
cgosorio@ubu.es Diseño Web . Introducción a Bootstrap . Introducción . Minimal bootstrap page 8/35
Introduction Minimal bootstrap page II
16 <body>
17 <h1>A header</h1>
18 
21
22 
23 <script src="js/jquery.js"></script>
24 <script src="js/bootstrap.js"></script>
25 </body>
26 </html>
Introduction Minimal bootstrap page III
4 <meta charset="utf-8">
To tell the browser the character encoding
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
To force IE to use the latest rendering engine
6 <meta name="viewport"
7 content="width=device-width, initial-scale=1">
To scale the application to the size of window space available.
Introduction Minimal bootstrap page IV
11 
To make sure that our page works with IE8
22 

23 <script src="js/jquery.js"></script>
24 <script src="js/bootstrap.js"></script>
To include jquery and link the bootstrap javascript code.
Grid system
cgosorio@ubu.es Diseño Web . Introducción a Bootstrap . Grid system 12/35

What Is a Grid System?
A grid system allows us to properly house our website’s content. It

divides the screen into multiple rows and columns that can be
used to create various types of layouts. Once we have the rows
and columns defined, we can decide which HTML element will be
placed where.
Bootstrap’s grid system divides the screen into columns — up to

12 in each row. The column widths vary according to the size of
screen they are displayed in. Hence, Bootstrap’s grid system is
responsive, as the columns resize themselves dynamically when
the size of browser window changes.
cgosorio@ubu.es Diseño Web . Introducción a Bootstrap . Grid system . What is a grid system? 13/35
Containers
q Bootstrap recommends that we should place all the rows and

columns inside a container to ensure proper alignment and
padding. Hence, it is a good practice to wrap all the contents
within a container.
5 For better results, it is recommended to have a single container
with all the rows inside it.
q There are two types of container classes in Bootstrap:
5 container creates a fixed-width container in the browser window,
which is styled to appear at the center of the screen, omitting extra
space on both sides.
5 container-fluid creates a full-width fluid container, spanning the
entire width of the viewport.
q Containers are not nestable.
cgosorio@ubu.es Diseño Web . Introducción a Bootstrap . Grid system . Containers 14/35

Rows and columns
q Grid systems are used for creating page layouts through a series
of rows and columns that house your content.
q Rows must be placed within a container (fixed-width) or
container-fluid (full-width) for proper alignment and padding.
q Use rows to create horizontal groups of columns.
q Predefined grid classes like row and col-xs-4 are available for
quickly making grid layouts.
q Grid columns are created by specifying how many of the 12
available Bootstrap columns you wish to span. For example:
5 Four equal columns would use four col-xs-3.
5 A single column that should span across all twelve available
Bootstrap columns, will use the CSS class col-xs-12.
q If more than 12 columns are placed within a single row, each
group of extra columns will, as one unit, wrap onto a
new line, again with the capacity of 12 columns.
cgosorio@ubu.es Diseño Web . Introducción a Bootstrap . Grid system . Rows and columns 15/35
Columns
q Content should be placed within columns, and only columns
may be immediate children of rows.
q The columns are specified using a Bootstrap class of the format
col-deviceSize-numberOfColumns, where numberOfColumns
specifies the number of columns to be occupied by the
element, and deviceSize is one of the following:
5 xs for extra small devices (mobiles, screen width < 768px)
5 sm for small size devices (tablets in portrait mode, screen width ≥
768px)
5 md for medium size devices (desktops and tablets in landscape
mode, width ≥ 992px)
5 lg for large size devices (desktops with big screens, width ≥
1200px)
É For example, an element with classes col-sm-6 and col-lg-8 indicates
that the element will occupied 6 columns on a small size device
(also on medium), but 8 columns on a large size device.
Offsetting Columns
q Offsetting is another great feature used to increase the left

margin of a column.
5 For example, if you have a column that should appear after a gap of
three Bootstrap columns, you can use the offsetting feature.
q Classes that are available for offsetting are: col-xs-offset-*,
col-sm-offset-*, col-md-offset-*, col-lg-offset-*.
q For example, this code will result in a column that spans to 6
columns and offset 3 columns towards the right:
1 <div class="row">
2 <div class="col-xs-6 col-xs-offset-3 col1">
3 <h1>Hello Learnable!</h1>
4 </div>
5 </div>
Reordering Columns
q We can also reorder the columns irrespective of the order in
which they are written using Bootstrap’s pull (to the left) and
push (to the right) classes:
5 col-xs-pull-* and col-xs-push-* for extra smaller screens.
5 col-sm-pull-* and col-sm-push-* for smaller screens
5 col-md-pull-* and col-md-push-* for medium screens
5 col-lg-pull-* and col-lg-push-* for larger screens
q For example, to swap two columns:
1 <div class="row">
2 <div class="col-xs-9 col-xs-push-3">
3 <h1>Pushed Column</h1>
4 </div>
5 <div class="col-xs-3 col-xs-pull-9">
6 <h1>Pulled Column</h1>
7 </div>
8 </div>
Bootstrap components
cgosorio@ubu.es Diseño Web . Introducción a Bootstrap . Bootstrap components 19/35

Page header
1 <div class="container">
2 <div class="page-header">
3 <h1>Chapter 3 <small>Exploring Bootstrap Components</small><
/h1>
4 </div>
5 </div>
cgosorio@ubu.es Diseño Web . Introducción a Bootstrap . Bootstrap components . Page components 20/35
Panels
Panels are used to display text or images within a box with rounded corners.
Panels come with various color options: panel-primary (for dark blue), panel-success (for
green), panel-info (for sky blue), panel-warning (for yellow), panel-danger (for red).
1 <div class="panel panel-default">

2 <div class="panel-heading">
3 ATTENTION
4 </div>
5 <div class="panel-body">
6 Lorem ipsum dolor sit ametnim ...
7 </div>
8 <div class="panel-footer">
9 <a href="#" class="btn btn-danger btn-sm">Agree</a>
10 <a href="#" class="btn btn-default btn-sm">Decline</a>
11 </div>
12 </div>
Panels

3 ATTENTION
4 </div>
7 </div>
11 </div>
12 </div>
Panels

3 ATTENTION
4 </div>
7 </div>
11 </div>
12 </div>
Panels

3 ATTENTION
4 </div>
7 </div>
11 </div>
12 </div>
Panels
Media object
Media object is used for creating components that should contain left- or right-
aligned media (image, video, or audio) alongside some textual content.
It is best suited for creating features such as a comments section, displaying tweets, or showing
product details where a product image is present.
1 <div class="media">
2 <a class="pull-left" href="#">
3 <img class="media-object" src="path/to/image" alt="Syed
Fazle Rahman">
4 </a>
5 <div class="media-body">
6 <h4 class="media-heading">Awesome piece of work!</h4>
7 <p>Lorem ipsum dolor sit amet, consectetur ...</p>
8 </div>
9 </div>
Media object
Fazle Rahman">
4 </a>
8 </div>
9 </div>
Media object
Fazle Rahman">
4 </a>
8 </div>
9 </div>
Media object
Fazle Rahman">
4 </a>
8 </div>
9 </div>
Media object
List group
List group is a useful component for creating lists, such as a list of useful
resources, a list of recent activities, or even for a complex list of large amounts
of textual content.
1 <ul class="list-group">
2 <li class="list-group-item">Inbox</li>
3 <li class="list-group-item">Sent</li>
4 <li class="list-group-item">Drafts</li>
5 <li class="list-group-item">Deleted</li>
6 <li class="list-group-item">Spam</li>
7 </ul>
Breadcrumbs
Breadcrumbs are used to show the current page’s location in the site hierarchy.
1 <ol class="breadcrumb">
2 <li><a href="#">Home</a></li>
3 <li><a href="#">About</a></li>
4 <li class="active">Author</li>
5 </ol>
cgosorio@ubu.es Diseño Web . Introducción a Bootstrap . Bootstrap components . Navigation systems 26/35
Nav pills
1 <ul class="nav nav-tabs">
2 <li class="active"><a href="#">About</a></li>
3 <li><a href="#">Activity</a></li>
4 <li><a href="#">Liked Pages</a></li>
5 </ul>
Nav stacked
1 <ul class="nav nav-pills nav-stacked">
2 <li class="active"><a href="#">About</a></li>
3 <li><a href="#">Activity</a></li>
4 <li><a href="#">Liked Pages</a></li>
5 </ul>
Labels
Labels are the best way to display short text beside other components (e. g.
“New”, “Download now”, . . . )
The available label variants are:label-default (for gray), label-primary (for dark blue),
label-success (for green), label-info (for light blue), label-warning (for orange), label-danger (for
red).
1 <h3>Jump Start Bootstrap

2 <span class="label label-default">New</span>
3 </h3>
cgosorio@ubu.es Diseño Web . Introducción a Bootstrap . Bootstrap components . Small components 29/35
Buttons
To create a fancy button in Bootstrap it is only neccessary to add the btn class to
convert an a, button, or input element.
Buttons come in various color options: btn-default (for white), btn-primary (for dark blue),
btn-success (for green), btn-info (for light blue), btn-warning (for orange), btn-danger (for red).
And in various sizes: btn-lg (for large buttons), btn-sm (for small buttons), btn-xs (for extra small
buttons).
There are some more helper classes for buttons available:

5 btn-block will make the button span across the whole grid
5 active will make the button look like it’s currently clicked
5 disabled will make the button unable to be clicked and appear faded. You should also be
careful while using this class, as it will prevent click action on input and button elements
but won’t disable the click action on a elements.
1 <a href="#" class="btn btn-primary">

2 Click Here
3 </a>
Labels
Glyphicons are used to display small icons
(http://getbootstrap.com/components/#glyphicons). They are lightweight font
icons and not images. There are many advantages of using a glyphicon instead
of small images, including:
q saving multiple requests for small images or sprites
q as they are font icons, their colors and sizes can be varied on the go using CSS properties
q that they look crisp and sharp in all kind of displays.
1 <span class="glyphicon glyphicon-off"></span>
Wells
Wells are a useful component that wrap the content within a rounded cornered
box with a gray background, giving an inset effect to the content. They can be
used to highlight important facts amongst long textual content, for example, or
an author’s bio box in a blogging application:
1 <div class="well">
2 <p>Lorem ipsum dolor sit amet, ... </p>
3 </div>
Forms
cgosorio@ubu.es Diseño Web . Introducción a Bootstrap . Forms 33/35

Javascript effects
cgosorio@ubu.es Diseño Web . Introducción a Bootstrap . Javascript effects 34/35

q xxxx
cgosorio@ubu.es Diseño Web . Introducción a Bootstrap . Javascript effects 35/35

5bootstrap EN v1

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

5bootstrap EN v1

Uploaded by

Copyright:

Available Formats

Diseño Web

Dr. César García Osorio

Los contenidos de esta presentación proceden

cgosorio@ubu.es Diseño Web . Introducción a Bootstrap 3/35

cgosorio@ubu.es Diseño Web . Introducción a Bootstrap . Introducción 4/35

cgosorio@ubu.es Diseño Web . Introducción a Bootstrap . Introducción 5/35

q Bootstrap 1.0.0 (2011) was developed in 2011 by Mark Otto

cgosorio@ubu.es Diseño Web . Introducción a Bootstrap . Introducción . Origins 6/35

q There are many other popular frameworks that are competing

To tell the browser the character encoding

5 <meta http-equiv="X-UA-Compatible" content="IE=edge">

To force IE to use the latest rendering engine

To scale the application to the size of window space available.

To make sure that our page works with IE8

22

To include jquery and link the bootstrap javascript code.

cgosorio@ubu.es Diseño Web . Introducción a Bootstrap . Grid system 12/35

A grid system allows us to properly house our website’s content. It

Bootstrap’s grid system divides the screen into columns — up to

q Bootstrap recommends that we should place all the rows and

cgosorio@ubu.es Diseño Web . Introducción a Bootstrap . Grid system . Containers 14/35

q Offsetting is another great feature used to increase the left

cgosorio@ubu.es Diseño Web . Introducción a Bootstrap . Bootstrap components 19/35

1 <div class="panel panel-default">

1 <div class="panel panel-default">

1 <div class="panel panel-default">

1 <div class="panel panel-default">

1 <h3>Jump Start Bootstrap

There are some more helper classes for buttons available:

1 <a href="#" class="btn btn-primary">

1 <span class="glyphicon glyphicon-off"></span>

cgosorio@ubu.es Diseño Web . Introducción a Bootstrap . Forms 33/35

cgosorio@ubu.es Diseño Web . Introducción a Bootstrap . Javascript effects 34/35

cgosorio@ubu.es Diseño Web . Introducción a Bootstrap . Javascript effects 35/35

You might also like