Scribd
Upload
16 views9 pages

Lecture 2

Uploaded by

Markos Mathewos
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
16 views9 pages

Lecture 2

Uploaded by

Markos Mathewos
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 9

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

Responsive Web Design


- Responsive web design is about creating web sites which automatically adjust
themselves to look good on all devices, from small phones to large desktops.

Bootstrap History
- Bootstrap was developed by Mark Otto and Jacob Thornton at Twitter, and released as
an open source product in August 2011 on GitHub.
- In June 2014 Bootstrap was the No.1 project on GitHub!

Why Use Bootstrap?


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)

In creating your bootstrap website, you must consider the following:

1. Add the HTML5 doctype


- Bootstrap uses HTML elements and CSS properties that require the HTML5 doctype.
- Always include the HTML5 doctype at the beginning of the page, along with the
lang attribute and the correct character set:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
</html

2. Bootstrap 3 is mobile-first
- Bootstrap 3 is designed to be responsive to mobile devices. Mobile-first styles are part
of the core framework.
- To ensure proper rendering and touch zooming, add the following <meta> tag inside
the <head> element:

<meta name="viewport" content="width=device-width, initial-scale=1">

- The width=device-width part sets the width of the page to follow the screen-width of the
device (which will vary depending on the device).
- The initial-scale=1 part sets the initial zoom level when the page is first loaded by the
browser.
3. Containers
- Bootstrap also requires a containing element to wrap site contents.

There are two container classes to choose from:


1. The .container class provides a responsive fixed width container
2. The .container-fluid class provides a full width container, spanning the entire width
of the viewport

Note: Containers are not nestable (you cannot put a container inside another container).

Installing Bootstrap
- To install the customized bootstrap, just copy the following folders(bootstrap CSS and
JavaScript) under C:\xampp\htdocs\websitefolder
- data
- dist
- js
- less
- vendor

Customized Bootstrap has the following CORE CSS.

1. Bootstrap Core CSS


vendor/bootstrap/css/bootstrap.min.css

2. MetisMenu CSS
vendor/metisMenu/metisMenu.min.css

3. Social Buttons CSS


vendor/bootstrap-social/bootstrap-social.css

4. Customized CSS
dist/css/customized.css

5. Customized Fonts
vendor/font-awesome/css/font-awesome.min.css

Note: All this CSS files must be link after the </title> tag.

Example:

<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

<link href="vendor/metisMenu/metisMenu.min.css" rel="stylesheet">

<link href="vendor/bootstrap-social/bootstrap-social.css" rel="stylesheet">

<link href="dist/css/customized.css" rel="stylesheet">

<link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">


Customized Bootstrap has the following CORE JavaScript.

1. Jquery Library
vendor/jquery/jquery.min.js

2. Bootstrap Core JavaScript


vendor/bootstrap/js/bootstrap.min.js

3. Metis Menu Plugin JavaScript


vendor/metisMenu/metisMenu.min.js

4. Custom Theme JavaScript


dist/js/customized.js

Note: All this CSS files must be link after the </body> tag.

Example:

<script src="vendor/jquery/jquery.min.js"></script>

<script src="vendor/bootstrap/js/bootstrap.min.js"></script>

<script src="vendor/metisMenu/metisMenu.min.js"></script>

<script src="dist/js/customized.js"></script>

Bootstrap Grid System


- Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to
12 columns (col-md-1 to col-md-12) as the device or viewport size increases. It includes
predefined classes for easy layout options, as well as powerful mixins for generating
more semantic layouts.
- Grid systems are used for creating page layouts through a series of rows and columns
that house your content.

The Bootstrap grid system has four

classes: xs (for phones)

sm (for tablets)

md (for desktops)

lg (for larger desktops)

Note:

- First; create a row (<div class="row">). Then, add the desired number of columns (tags with
appropriate .col-*-* classes).
- Numbers in .col-*-* should always add up to 12 for each row.
Bootstrap Important Elements

Bootstrap Panels
- A panel in bootstrap is a bordered box with some padding around its content. It is looks like
a form in some Windows Applications.

- Panels are created with the .panel class


- Use .panel-heading class to easily add a heading container to your panel and
content inside the panel has a .panel-body class:
- The .panel-footer class adds a footer to the panel:

Example:
<div class="panel panel-default">
<div class="panel-heading">Panel Heading</div>
<div class="panel-body">
Panel Body
</div>
<div class="panel-footer">Panel Footer</div>
</div>

Panels with Contextual Classes


To color the panel, use contextual classes (.panel-default, .panel-primary, .panel-success, .panel-
info, .panel-warning, .panel-danger, .panel-green, .panel-yellow, or .panel-red):
Bootstrap Button
- Anything that is given a class of .btn will inherit the default look of a gray button with
rounded corners. However, Bootstrap provides some options to style buttons, which are
summarized in the following picture.

Normal Buttons classes.

Class Description

btn-default Default/ Standard button.

btn-primary Provides extra visual weight and identifies the primary action in a set of
buttons.

btn-success Indicates a successful or positive action.

btn-info Contextual button for informational alert messages.

btn-warning Indicates caution should be taken with this action.

btn-danger Indicates a dangerous or potentially negative action.

btn-link Deemphasize a button by making it look like a link while maintaining


button behavior.

Example:
- <button type="button" class="btn btn-default">Default</button>
- <button type="button" class="btn btn-primary">Primary</button>
- <button type="button" class="btn btn-success">Success</button>
- <button type="button" class="btn btn-info">Info</button>
- <button type="button" class="btn btn-warning">Warning</button>
- <button type="button" class="btn btn-danger">Danger</button>
- <button type="button" class="btn btn-link">Link</button>
Disabled Buttons
- When you disable a button, it will fade in color by 50%, and lose the gradient.
- Add the disabled attribute to <button> buttons.
- btn-default disabled
- btn-primary disabled
- btn-success disabled
- btn-info disabled
- btn-warning disabled
- btn-danger disabled
- btn-link disabled

Example
- <button type="button" class="btn btn-default disabled">Default</button>
- <button type="button" class="btn btn-primary disabled">Primary</button>
- <button type="button" class="btn btn-success disabled">Success</button>
- <button type="button" class="btn btn-info disabled">Info</button>
- <button type="button" class="btn btn-warning disabled">Warning</button>
- <button type="button" class="btn btn-danger disabled">Danger</button>
- <button type="button" class="btn btn-link disabled">Link</button>

Button Sizes
Class Description

.btn-lg This makes the button size large.

.btn-sm This makes the button size small.

.btn-xs This makes the button size extra small.

.btn-block This creates block level buttons—those that span the full width of a
parent.

Example:
- <button type="button" class="btn btn-primary btn-lg">Large button</button>
- <button type="button" class="btn btn-primary btn-sm">Small button</button>
- <button type="button" class="btn btn-primary btn-xs">Mini button</button>
- <button type="button" class="btn btn-primary btn-block">Block Level button</button>
Outline Buttons Class
- Just include btn-outline class of a button

Example:
<button type="button" class="btn btn-outline btn-default">Default</button>
<button type="button" class="btn btn-outline btn-primary">Primary</button>
<button type="button" class="btn btn-outline btn-success">Success</button>
<button type="button" class="btn btn-outline btn-info">Info</button>
<button type="button" class="btn btn-outline btn-warning">Warning</button>
<button type="button" class="btn btn-outline btn-danger">Danger</button>
<button type="button" class="btn btn-outline btn-link">Link</button>

Circle Button
- btn-circle class will make the button circular in shape.

Example:

<button type="button" class="btn btn-primary btn-circle">B</button>


<button type="button" class="btn btn-success btn-circle">C</button>
<button type="button" class="btn btn-info btn-circle">D</button>
<button type="button" class="btn btn-warning btn-circle">E</button>
<button type="button" class="btn btn-danger btn-circle">F</button>
Button with Icons
- to create a Button with icon, just include <i class="icon class"></i> tag before the </button>
tag.
- icon class (please refer to http://irwincansejo.com/TTLM/icons.php)

Example:

<button type="button" class="btn btn-default btn-circle"><i class="fa fa-check"></i></button>

<button type="button" class="btn btn-primary btn-circle"><i class="fa fa-list"></i></button>

<button type="button" class="btn btn-success btn-circle"><i class="fa fa-link"></i></button>

<button type="button" class="btn btn-info btn-circle"><i class="fa fa-check"></i></button>

<button type="button" class="btn btn-warning btn-circle"><i class="fa fa-times"></i></button>

<button type="button" class="btn btn-danger btn-circle"><i class="fa fa-heart"></i></button>

Social Buttons
- btn-social class is usually used to link to the different Social Networking sites like
Facebook, Twitter and others.
Example:

<button type="button" class="btn btn-block btn-social btn-bitbucket"><i class="fa fa-bitbucket"></i> Sign in with
Bitbucket</button>

<button type="button" class="btn btn-block btn-social btn-dropbox"><i class="fa fa-dropbox"></i> Sign in with
Dropbox</button>

<button type="button" class="btn btn-block btn-social btn-facebook"><i class="fa fa-facebook"></i> Sign in with
Facebook</button>

<button type="button" class="btn btn-block btn-social btn-flickr"><i class="fa fa-flickr"></i> Sign in with Flickr</button>

<button type="button" class="btn btn-block btn-social btn-github"><i class="fa fa-github"></i> Sign in with
GitHub</button>

<button type="button" class="btn btn-block btn-social btn-google-plus"><i class="fa fa-google-plus"></i> Sign in with
Google</button>

<button type="button" class="btn btn-block btn-social btn-instagram"><i class="fa fa-instagram"></i> Sign in with
Instagram</button>

<button type="button" class="btn btn-block btn-social btn-linkedin"><i class="fa fa-linkedin"></i> Sign in with
LinkedIn</button>

<button type="button" class="btn btn-block btn-social btn-pinterest"><i class="fa fa-pinterest"></i> Sign in with Pinterest
</button>

<button type="button" class="btn btn-block btn-social btn-tumblr"><i class="fa fa-tumblr"></i> Sign in with Tumblr
</button>

<button type="button" class="btn btn-block btn-social btn-twitter"><i class="fa fa-twitter"></i> Sign in with Twitter
</button>

<button type="button" class="btn btn-block btn-social btn-vk"><i class="fa fa-vk"></i> Sign in with VK </button>

<button type="button" class="btn btn-social-icon btn-bitbucket"><i class="fa fa-bitbucket"></i></button>

<button type="button" class="btn btn-social-icon btn-dropbox"><i class="fa fa-dropbox"></i></button>

<button type="button" class="btn btn-social-icon btn-facebook"><i class="fa fa-facebook"></i></button>

<button type="button" class="btn btn-social-icon btn-flickr"><i class="fa fa-flickr"></i></button>

<button type="button" class="btn btn-social-icon btn-github"><i class="fa fa-github"></i></button>

<button type="button" class="btn btn-social-icon btn-google-plus"><i class="fa fa-google-plus"></i></button>

<button type="button" class="btn btn-social-icon btn-instagram"><i class="fa fa-instagram"></i></button>

<button type="button" class="btn btn-social-icon btn-linkedin"><i class="fa fa-linkedin"></i></button>

<button type="button" class="btn btn-social-icon btn-pinterest"><i class="fa fa-pinterest"></i></button>

<button type="button" class="btn btn-social-icon btn-tumblr"><i class="fa fa-tumblr"></i></button>

<button type="button" class="btn btn-social-icon btn-twitter"><i class="fa fa-twitter"></i></button>

<button type="button" class="btn btn-social-icon btn-vk"><i class="fa fa-vk"></i></button>

You might also like