Scribd
Upload
3 views

bootstrap ppt

Bootstrap is a mobile-first front-end framework designed for efficient web development using HTML, CSS, and JavaScript, created by Twitter and released as open source in 2011. It offers responsive design, built-in components, and customization options, making it accessible for developers with basic HTML and CSS knowledge. The document details how to include Bootstrap, its grid system, various components like buttons, tables, and alerts, as well as additional features such as pagination and dropdowns.

Uploaded by

Vishvjeet Verma
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
3 views

bootstrap ppt

Bootstrap is a mobile-first front-end framework designed for efficient web development using HTML, CSS, and JavaScript, created by Twitter and released as open source in 2011. It offers responsive design, built-in components, and customization options, making it accessible for developers with basic HTML and CSS knowledge. The document details how to include Bootstrap, its grid system, various components like buttons, tables, and alerts, as well as additional features such as pagination and dropdowns.

Uploaded by

Vishvjeet Verma
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 20

Bootstrap

-ANJUM RAHEEL
Introduction to Bootstrap
 Bootstrap is a powerful mobile first front-end framework for faster and easier web development. It uses HTML,
CSS and Javascript.
 Bootstrap was developed by Mark Otto and Jacob Thornton at Twitter. It was released as an open source product
in August 2011 on GitHub.

 Easy to get started: With just the knowledge of HTML and CSS anyone can get started with Bootstrap.

 Responsive design: Bootstrap's responsive CSS adjusts to Desktops , Tablets and Mobiles.

 Provides a clean and uniform solution for building an interface for developers.

 It contains beautiful and functional built-in components which are easy to customize.

 It also provides web based customization.

 And best of all it is an open source.


How to Include Bootstrap in your program?
There are two ways to start using Bootstrap on your own web site.

You can:
1) Download Bootstrap from getbootstrap.com
2) Include Bootstrap from a CDN

Downloading Bootstrap :

If you want to download and host Bootstrap yourself, go to getbootstrap.com, and follow the instructions
there.

Bootstrap 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.4.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
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

<body> <body>
<div class="container"> <div class="container-fluid">
<h1>My First Bootstrap <h1>My First Bootstrap
Page</h1> Page</h1>
<p>This is some text.</p> <p>This is some text.</p>
</div> </div>
</body> </body>
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:

 Bootstrap's grid system is responsive, and the columns will re-arrange automatically
depending on the screen size.

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)
Equal Columns
To get a three equal-width columns starting at tablets and scaling to large
desktops.
Example :
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
</div>

Unequal Columns
To get two various-width columns starting at tablets and scaling to large desktops.
Example :
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-8">.col-sm-8</div>
</div>
Text Colors
Bootstrap also has some contextual classes that can be used to provide "meaning through colors".
The classes for text colors are:

.text-muted, .text-primary, .text-success, .text-info, .text-warning, and .text-danger.

Example
This text is muted.
This text is important.
This text indicates success.
This text represents some information.
This text represents a warning.
This text represents danger.

Text Backgrounds
The classes for background colors are:.bg-primary, .bg-success, .bg-info, .bg-warning, and .bg-danger.

Example
Some More Classes for Text:
.small Indicates smaller text (set to 85% of the size of the parent)
.text-left Indicates left-aligned text
.text-center Indicates center-aligned text
.text-right Indicates right-aligned text
.text-justify Indicates justified text
.text-nowrap Indicates no wrap text
.text-lowercase Indicates lowercased text
.text-uppercase Indicates uppercased text
.text-capitalize Indicates capitalized text
.initialism Displays the text inside an <abbr> element in a slightly smaller font size
.list-unstyled Removes the default list-style and left margin on list items (works on both <ul> and <ol>). This
class only applies to immediate children list items (to remove the default list-style from any
nested lists, apply this class to any nested lists as well)

.list-inline Places all list items on a single line


.dl-horizontal Lines up the terms (<dt>) and descriptions (<dd>) in <dl> elements side-by-side. Starts off like
default <dl>s, but when the browser window expands, it will line up side-by-side

.pre-scrollable Makes a <pre> element scrollable


Bootstrap Basic Table
A basic Bootstrap table has a light padding and only horizontal dividers.
The .table class adds basic styling to a table.

Striped Rows
The .table-striped class adds zebra-stripes to a table.

Bordered Table
The .table-bordered
The .table-bordered class addsclass
bordersadds borders
on all sides on all
of the table andsides
cells. of the table and cells.

Hover Rows
The .table-hover
The .table-hover class
class adds adds
a hover effecta(grey
hover effectcolor)
background (grey background
on table rows color) on table rows.

Responsive Tables
The .table-responsive class creates a responsive table. The table will then scroll horizontally on small
devices (under 768px). When viewing on anything larger than 768px wide, there is no difference.

Condensed Table
The .table-condensed class makes a table more compact by cutting cell padding in half .
Bootstrap Image Shapes

Rounded Corners
The .img-rounded class adds rounded corners to an image.

Circle
The .img-circle class shapes the image to a circle.

Thumbnail
The .img-thumbnail class shapes the image to a thumbnail.
Jumbotron
 A jumbotron indicates a big box for calling extra attention to some special content or information.

 A jumbotron is displayed as a grey box with rounded corners. It also enlarges the font sizes of the text
inside it.
 Use a <div> element with class .jumbotron to create a jumbotron.

<div class="jumbotron">
<h1>Bootstrap Tutorial</h1>
<p>Bootstrap is the most popular HTML, CSS, and JS framework for developing
responsive, mobile-first projects on the web.</p>
</div>

Page Header
 A page header is like a section divider.

 The .page-header class adds a horizontal line under the heading.

 Use a <div> element with class .page-header to create a page header.

<div class="page-header">
<h1>Example Page Header</h1>
</div>
Wells
 The .well class adds a rounded border around an element with a gray background color
and some padding.
<div class="well">Basic Well</div>
 Change the size of the well by adding the .well-sm class for small wells or .well-
lg class for large wells.
<div class="well well-sm">Small Well</div>
<div class="well well-lg">Large Well</div>

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.

<div class="alert alert-success">


<strong>Success!</strong> You should <a href="#" class="alert-
link">read this message</a>.
</div>
Button Styles
Bootstrap provides different styles of buttons:
To achieve the button styles above, Bootstrap has the following classes:
•.btn
•.btn-default
•.btn-primary
•.btn-success
•.btn-info
•.btn-warning
•.btn-danger
•.btn-link

Button Sizes
Bootstrap provides four button sizes:
The classes that define the different sizes are:
•.btn-lg
•.btn-sm
•.btn-xs

Active/Disabled Buttons
A button can be set to an active (appear pressed) or a disabled (unclickable) state:
The class .active makes a button appear pressed, and the class .disabled makes a button unclickable.
Button Groups
 Bootstrap allows you to group a series of buttons together (on a single line) in a button group:
 Use a <div> element with class .btn-group to create a button group.

 Instead of applying button sizes to every button in a group, use class .btn-group-lg|sm|xs to size all
buttons in the group.

Vertical Button Groups


 Bootstrap also supports vertical button groups:
 Use the class .btn-group-vertical to create a vertical button group.

Justified Button Groups


 To span the entire width of the screen, use the .btn-group-justified class.
Bootstrap Badges and Labels
Badges
 Badges are numerical indicators of how many items are associated with a link.
 Use the .badge class within <span> elements to create badges.
 Badges can also be used inside other elements, such as buttons:

<button type="button" class="btn btn-primary">Primary <span class="badge">7</span> </button>

Labels
 Labels are used to provide additional information about something:
 Use the .label class, followed by one of the six contextual classes .label-default, .label-
primary, .label-success, .label-info, .label-warning or .label-danger, within a <span> element
to create a label.
Basic Progress Bar
 A progress bar can be used to show a user how far along he/she is in a process.
 Bootstrap provides several types of progress bars.
 To create a default progress bar, add a .progress class to a <div> element.

<div class="progress">
<div class="progress-bar progress-bar-striped active" style="width:40%">
40% completed
</div>
</div>

Bootstrap Pagination
 To create a basic pagination, add the .pagination class to an <ul> element.
<ul class="pagination">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
Breadcrumbs
Another form for pagination, is breadcrumbs:
The .breadcrumb class indicates the current page's location within a navigational hierarchy

<ul class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Private</a></li>
<li class="active">Vacation</li>
</ul>

Pager
Pager is also a form of pagination.
Pager provides previous and next buttons (links).
To create previous/next buttons, add the .pager class to an <ul> element.

<ul class="pager">
<li><a href="#">Previous</a></li>
<li><a href="#">Next</a></li>
</ul>
Bootstrap List Groups

To create a basic list group, use an <ul> element with class .list-group, and <li> elements with class .list-group-item

<ul class="list-group">
<li class="list-group-item">First
item</li>
<li class="list-group-item">Second
item</li>
<li class="list-group-item">Third
Dropdown
item</li> A dropdown menu is a toggleable menu that allows
</ul> the user to choose one value from a predefined
list.

<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</div>
Tabs
Tabs are created with <ul class="nav nav-tabs">:
Mark the current page with <li class="active">.

<ul class="nav nav-tabs">


<li class="active"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>

Pills
Pills are created with <ul class="nav nav-pills">.
Mark the current page with <li class="active">:

<ul class="nav nav-pills">


<li class="active"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
THANK YOU

You might also like