Scribd
Upload
2 views30 pages

Bootstrap

Bootstrap is a powerful front-end framework that simplifies web development by providing pre-created CSS classes and design templates. It offers advantages such as responsive features, consistent design, and ease of use, making it accessible for anyone with basic HTML and CSS knowledge. The document outlines Bootstrap's essentials, including its grid system, navigation components, and various UI elements.

Uploaded by

Võ Hoài Nam
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
2 views30 pages

Bootstrap

Bootstrap is a powerful front-end framework that simplifies web development by providing pre-created CSS classes and design templates. It offers advantages such as responsive features, consistent design, and ease of use, making it accessible for anyone with basic HTML and CSS knowledge. The document outlines Bootstrap's essentials, including its grid system, navigation components, and various UI elements.

Uploaded by

Võ Hoài Nam
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 30

Bootstrap 4

Trần Khải Thiện


Resources:
1. Official Bootstrap Website (http://getbootstrap.com/)
2. W3 Schools (https://www.w3schools.com/bootstrap4/default.asp )
3. Tutorial Point (http://www.tutorialspoint.com/bootstrap/)
4. Tutorial Republic (http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/ )
Randy Connolly and Ricardo Hoar Fundamentals of Web Development
Textbook to be published by Pearson Ed in early 201
http://www.funwebdev.c4 1
What is Bootstrap?
• A CSS framework is a pre-created set of CSS classes and
other software tools that make it easier to use and work
with CSS.
• Bootstrap is a powerful front-end framework for faster and
easier web development.
• Originally developed by Twitter, now an independent open-
source framework.
• Current version is Bootstrap 5
• It includes HTML, CSS and JavaScript based design
templates for common user interface components like
Typography, Forms Controls, Tables, Navigations,
Dropdowns, Alerts, Tabs, Carousel and many other
2
Advantages of Bootstrap
1. Save lots of time: using the Bootstrap predefined design
templates and classes and concentrate on other
development work.
2. Responsive features: web pages to appear more
appropriately on different devices and screen resolutions
without any change in markup.
3. Consistent design: the designs and layouts of your web
pages are consistent throughout your development.
4. Easy to use: Bootstrap is very easy to use. Anybody with
the basic working knowledge of HTML and CSS can start
development with Bootstrap.
5. Compatible with modern browsers
6. Open Source: And the best part is, it is completely free to
download and use.
3
Responsive Design

• Bootstrap also gives you


ability to create responsive
layout with much less efforts.
• Responsive web design
changes the page layout (and
some content) for different
windows and screen sizes,
such as large screens,
mobiles, tablets, etc.

4
Bootstrap Essentials

1. Add the HTML5 doctype: Bootstrap uses HTML elements


and CSS properties that require the HTML5 doctype and
the needed elements
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">

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.
<meta name="viewport" content="width=device-width, initial-
scale=1.0">

5
Including Bootstrap
• There are different ways to include Bootstrap framework
files into your pages:
1. Download and host the Bootstrap files.
2. Include Bootstrap from a CDN (Content Delivery
Network) host. This is faster and easier option for our
course.
• To apply the second way, include in the following code in
your header:

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

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

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

6
Bootstrap Features

• Bootstrap has loads of predefined classes and


components, these include:
• Responsive Grid System
• Navigation
• Glyphicons
• Themes customisation
• Form controls
• and many more…

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

8
Grid System
• The Bootstrap Grid System visualizes the webpage into a
series of rows and columns, i.e. a grid.

• The gird allows up to 12 columns across the page.


• If you do not want to use all 12 column individually, you
can group the columns together to create wider columns.
• For example: a 6-6 split, 4-4-4, 9-3, or 3-6-3….

9
Applying the Columns
• Single Rows use the class row.
• All columns inside a row are use the class form: col-xx-y.
Where xx is the intended size (xs, sm, md, lg) and y is a
column span size (from 1 to 12).
<div class="container">
<!--Row wi t h two equal columns-->
<div class="row">
<div class="col-md-6"><!--Column l e f t - - > < / d i v >
<div class="col-md-6"><!--Column r i g h t - - > < / d i v >
</div>

<!--Row wi t h two columns d i vi d e d i n 1:2 r a t i o - - >


<div class="row">
<div class="col-md-4"><!--Column l e f t - - > < / d i v >
<div class="col-md-8"><!--Column r i g h t - - > < / d i v >
</div>

10
Grid System
XS, SM, M D and LG

• The Bootstrap grid system works with four screen


size classes:
1. xs: for phones
2. sm: for tablets
3. md: for desktops
4. lg: for larger desktops
xs sm md lg
Column Size Extra small devices Small devices Medium devices Large devices
Phones (<768px) Tablets (>=768px) Desktops (>=992px) Desktops (>=1200px)

Grid behaviour Horizontal at all times Collapsed to start, Collapsed to start, Collapsed to start,
horizontal above horizontal above horizontal above
breakpoints breakpoints breakpoints
Container width None (auto) 750px 970px 1170px
Class prefix .col-xs- .col-sm- .col-md- .col-lg-
Column width Auto ~62px ~81px ~97px
Gutter width 30px (15px on each side of a column)

11
Grid System - lg
Large

12
Grid System - md
Medium

13
Grid System –sm & xs
Small X-Small

14
Combining Grid Classes

15
Combining Grid Classes

16
Grid Offset

• Create a gap between your columns using a grid


offset
• Move columns to the right using .col-md-offset-*
classes. These classes increase the left margin of a
column by * columns:

<div class="row">
<div class="col-md-6 col1">.col-md-6</div>
<div class="col-md-5 col-md-offset-1">.col-md-5 and o f f s e t - 1 < / d i v >
</div>

17
Visible or Hidden Element

• We can specify a screen size for elements to be


visible or hidden according to different screen sizes.
• Use class visible-xx or hidden-xx in a div to
show or hide the element in that screen mode.
• Example: Only show the img element in medium
and large resolutions:

<div class='visible-md v i s i b l e - l g ' >


<img s r c ='i ma g e s / bl a st .p n g' a l t = ' B l a s t i n g O f f ' / >
</div>

18
Navigation
Navigation Bar

1. Create a list of links for the navigation bar


2. Encompass the list with nav HTML5 element and assign
it with a class navbar.
3. Assign a title with navbar-brand class.
4. Assign the links list with a nav navbar-nav class and
a navbar-right class to aligned it to the right .
5. Set an highlighted active link with class active.
<nav class="navbar navbar-deafult">
<div class="container">
<a class="navbar-brand" href="index.html">WebSiteName</a>
<ul class="nav navbar-nav navbar-right ">
< l i class="active"><a href="page1.html">Page 1 < / a ></ l i >
<li><a href="page2.html">Page 2 < / a ></ l i >
<li><a href="page3.html">Page 3 < / a ></ l i >
</ ul >
</div>
</nav>
19
Navigation
Pills and Tabs

• That’s how the navigation bar appears:

• Navigation links appearance can be changed to:


o Pills <ul class="nav nav-pills">

o Tabs <ul class="nav nav-tabs">

20
Dropdown Links Menu

• Navigation bars can also hold dropdown menus. To add a


drop down list to a link item:
1. Add a class dropdown to the link list item
2. Add a class dropdown-toggle; an attribute data-
toggle="dropdown" and a span with class caret to
the link item.
3. Add a class dropdown-menu to the drop down link list
items.

21
Dropdown Links Menu

< l i class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Page 1 - 1 < / a ></ l i >
<li><a href="#">Page 1 - 2 < / a ></ l i >
<li><a href="#">Page 1 - 3 < / a ></ l i >
</ul>
</li>

22
Table
<div class="container">
<table c l a s s =" t a bl e table-bordered">
<thead> < t r >
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr></thead>
<tbody>
<tr>
<td>John</td> <table class="table table-striped">
<td>Doe</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>[email protected]</td>
</ t r >
< / t b ody>
</ t a ble > <table class="table">
</div>
23
Image

<div class="container">
<img s r c = " c i n q u e t e r r e . j p g " class="img-rounded" alt="Cinque Terre"
width="304" height="236">
</div>

<img s r c = " c i n q u e t e r r e . j p g " c l a s s = " i m g - c i r c l e " alt="Cinque Terre">

<img s r c = " c i n q u e t e r r e . j p g " class="img-thumbnail" alt="Cinque Terre">

24
Alert
<div class="container">
<h2>Alerts</h2>
<div c l a s s = " a l e r t alert -success ">
<strong>Success!</strong> This a l e r t box
could i n d i c a t e a successful or p o s i t i v e
action.
</div>
<div c l a s s = " a l e r t a l e r t - i n f o " >
<strong>Info!</strong> This a l e r t box could
i n d i c a t e a n e u t r a l i n f o r ma t i ve change o r
action.
</div>
<div c l a s s = " a l e r t a l e r t - wa r n i n g " >
<strong>Warning!</strong> This a l e r t box
could i n d i c a t e a warning t h a t might need
attention.
</div>
<div c l a s s = " a l e r t al er t - dang er ">
<strong>Danger!</strong> This a l e r t box
could i n d i c a t e a dangerous o r p o t e n t i a l l y
negative a c t i o n .
</div>
</div>
25
Button
<div class="container">
<h2>Button Styles</h2>
<button type="button" class="btn">Basic</button>
<button type="button" class=" btn b t n - defa ult " >Defa ul t</butto n>
<button type="button" class=" btn btn-primary">Primary</button>
<button type="button" class=" btn btn-success">Success</button>
<button type="button" class=" btn b t n - i n f o " > I n f o < / b u t t o n >
<button type="button" class=" btn btn-warning">Warning</button>
<button type="button" class=" btn btn-danger">Danger</button>
<button type="button" class=" btn b t n - l i n k " > L i n k </ b u t t o n >
</div>

26
Glyphicon
<div class="container">
<h2>Glyphicon Examples</h2>
<p>Envelope i c o n : <span class="glyphicon glyphicon-envelope"></span></p>
<p>Envelope icon as a l i n k :
<a href="#"><span class="glyphicon glyphicon-envelope"></span></a>
</p>
<p>Search i c o n : <span class="glyphicon glyphicon-search"></span></p>
<p>Search icon on a b u t t o n :
<button type="button" class="btn b t n - d e f a u l t " >
<span class="glyphicon glyphicon-search"></span> Search
</button>
</p>
<p>Search icon on a s t yl e d b u t t o n :
<button type="button" class="btn b t n - i n f o " >
<span class="glyphicon glyphicon-search"></span> Search
</button>
</p>
<p>Print i c o n : <span class="glyphicon glyphicon-print"></span></p>
<p>Print icon on a s t yl e d l i n k b u t t o n :
<a h r e f =" # " class="btn btn-success b t n - l g " >
<span class="glyphicon glyphicon-print"></span> P r i n t
</a>
</p>
< / d iv> 26
Badge

<a href="#">News <span class="badge">5</span></a><br>


<a href="#">Comments <span class="badge">10</span></a><br>
<a href="#">Updates <span class="badge">2</span></a>

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

28
More components
• Use the resources listed on the first slide to learn more
about Bootstrap components and features. Particularly
the official Bootstrap and W3 Schools websites.

Typography
29
More resources…

https://startbootstrap.com/
Free Bootstrap Themes & Templates

https://bootstrapbay.com/
High quality Bootstrap themes & templates for
your next web project

30

You might also like