bootstrap getting started -...
TRANSCRIPT
![Page 1: Bootstrap Getting Started - csuohio.edueecs.csuohio.edu/~sschung/CIS408/BootstrapQuickSummary.pdfBootstrap Getting Started ... Bootstrap Example](https://reader030.vdocuments.us/reader030/viewer/2022021510/5ab468207f8b9a0f058bc8e2/html5/thumbnails/1.jpg)
Bootstrap Getting Started
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>My First Bootstrap Page</h1>
<p>This part is inside a .container class.</p>
<p>The .container class provides a responsive fixed width container.</p>
</div>
</body>
</html>
![Page 2: Bootstrap Getting Started - csuohio.edueecs.csuohio.edu/~sschung/CIS408/BootstrapQuickSummary.pdfBootstrap Getting Started ... Bootstrap Example](https://reader030.vdocuments.us/reader030/viewer/2022021510/5ab468207f8b9a0f058bc8e2/html5/thumbnails/2.jpg)
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>My First Bootstrap Page</h1>
<p>This part is inside a .container-fluid class.</p>
![Page 3: Bootstrap Getting Started - csuohio.edueecs.csuohio.edu/~sschung/CIS408/BootstrapQuickSummary.pdfBootstrap Getting Started ... Bootstrap Example](https://reader030.vdocuments.us/reader030/viewer/2022021510/5ab468207f8b9a0f058bc8e2/html5/thumbnails/3.jpg)
<p>The .container-fluid class provides a full width container, spanning the entire width of the
viewport.</p>
</div>
</body>
</html>
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:
span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1
span 4 span 4 span 4
span 4 span 8
span 6 span 6
span 12
![Page 4: Bootstrap Getting Started - csuohio.edueecs.csuohio.edu/~sschung/CIS408/BootstrapQuickSummary.pdfBootstrap Getting Started ... Bootstrap Example](https://reader030.vdocuments.us/reader030/viewer/2022021510/5ab468207f8b9a0f058bc8e2/html5/thumbnails/4.jpg)
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)
• sm (for tablets)
• md (for desktops)
• lg (for larger desktops)
The classes above can be combined to create more dynamic and flexible layouts.
Basic Structure of a Bootstrap Grid
The following is a basic structure of a Bootstrap grid:
<div class="row">
<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>
First; create a row (<div class="row">). Then, add the desired number of columns (tags with
appropriate .col-*-* classes). Note that numbers in .col-*-* should always add up to 12 for
each row.
Below we have collected some examples of basic Bootstrap grid layouts.
![Page 5: Bootstrap Getting Started - csuohio.edueecs.csuohio.edu/~sschung/CIS408/BootstrapQuickSummary.pdfBootstrap Getting Started ... Bootstrap Example](https://reader030.vdocuments.us/reader030/viewer/2022021510/5ab468207f8b9a0f058bc8e2/html5/thumbnails/5.jpg)
Two Unequal Columns:
![Page 6: Bootstrap Getting Started - csuohio.edueecs.csuohio.edu/~sschung/CIS408/BootstrapQuickSummary.pdfBootstrap Getting Started ... Bootstrap Example](https://reader030.vdocuments.us/reader030/viewer/2022021510/5ab468207f8b9a0f058bc8e2/html5/thumbnails/6.jpg)
Striped Rows:
![Page 7: Bootstrap Getting Started - csuohio.edueecs.csuohio.edu/~sschung/CIS408/BootstrapQuickSummary.pdfBootstrap Getting Started ... Bootstrap Example](https://reader030.vdocuments.us/reader030/viewer/2022021510/5ab468207f8b9a0f058bc8e2/html5/thumbnails/7.jpg)
Hovered Rows
![Page 8: Bootstrap Getting Started - csuohio.edueecs.csuohio.edu/~sschung/CIS408/BootstrapQuickSummary.pdfBootstrap Getting Started ... Bootstrap Example](https://reader030.vdocuments.us/reader030/viewer/2022021510/5ab468207f8b9a0f058bc8e2/html5/thumbnails/8.jpg)
![Page 9: Bootstrap Getting Started - csuohio.edueecs.csuohio.edu/~sschung/CIS408/BootstrapQuickSummary.pdfBootstrap Getting Started ... Bootstrap Example](https://reader030.vdocuments.us/reader030/viewer/2022021510/5ab468207f8b9a0f058bc8e2/html5/thumbnails/9.jpg)
Contextual Table
![Page 10: Bootstrap Getting Started - csuohio.edueecs.csuohio.edu/~sschung/CIS408/BootstrapQuickSummary.pdfBootstrap Getting Started ... Bootstrap Example](https://reader030.vdocuments.us/reader030/viewer/2022021510/5ab468207f8b9a0f058bc8e2/html5/thumbnails/10.jpg)
Vertical Form : Default
Form-Group
![Page 11: Bootstrap Getting Started - csuohio.edueecs.csuohio.edu/~sschung/CIS408/BootstrapQuickSummary.pdfBootstrap Getting Started ... Bootstrap Example](https://reader030.vdocuments.us/reader030/viewer/2022021510/5ab468207f8b9a0f058bc8e2/html5/thumbnails/11.jpg)
Horizontal Form
form-group
![Page 12: Bootstrap Getting Started - csuohio.edueecs.csuohio.edu/~sschung/CIS408/BootstrapQuickSummary.pdfBootstrap Getting Started ... Bootstrap Example](https://reader030.vdocuments.us/reader030/viewer/2022021510/5ab468207f8b9a0f058bc8e2/html5/thumbnails/12.jpg)
Form Control Select
![Page 13: Bootstrap Getting Started - csuohio.edueecs.csuohio.edu/~sschung/CIS408/BootstrapQuickSummary.pdfBootstrap Getting Started ... Bootstrap Example](https://reader030.vdocuments.us/reader030/viewer/2022021510/5ab468207f8b9a0f058bc8e2/html5/thumbnails/13.jpg)
https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_button_group_dropdown&stacked=h
Input Sizing in Forms
Set the heights of input elements using classes like .input-lg and .input-sm.
Set the widths of elements using grid column classes like .col-lg-*and .col-sm-*.
Height Sizing
Small input
Default input
Large input
![Page 14: Bootstrap Getting Started - csuohio.edueecs.csuohio.edu/~sschung/CIS408/BootstrapQuickSummary.pdfBootstrap Getting Started ... Bootstrap Example](https://reader030.vdocuments.us/reader030/viewer/2022021510/5ab468207f8b9a0f058bc8e2/html5/thumbnails/14.jpg)
![Page 15: Bootstrap Getting Started - csuohio.edueecs.csuohio.edu/~sschung/CIS408/BootstrapQuickSummary.pdfBootstrap Getting Started ... Bootstrap Example](https://reader030.vdocuments.us/reader030/viewer/2022021510/5ab468207f8b9a0f058bc8e2/html5/thumbnails/15.jpg)
Form group sizing
You can quickly size labels and form controls within a Horizontal form by adding
.form-group-lg or .form-group-sm to the div class="form-group" element:
![Page 16: Bootstrap Getting Started - csuohio.edueecs.csuohio.edu/~sschung/CIS408/BootstrapQuickSummary.pdfBootstrap Getting Started ... Bootstrap Example](https://reader030.vdocuments.us/reader030/viewer/2022021510/5ab468207f8b9a0f058bc8e2/html5/thumbnails/16.jpg)
Input group sizing
The .input-group class is a container to enhance an input by adding an icon, text or a button in
front or behind it as a "help text".
Use the .input-group-lg if you want a large input group:
![Page 17: Bootstrap Getting Started - csuohio.edueecs.csuohio.edu/~sschung/CIS408/BootstrapQuickSummary.pdfBootstrap Getting Started ... Bootstrap Example](https://reader030.vdocuments.us/reader030/viewer/2022021510/5ab468207f8b9a0f058bc8e2/html5/thumbnails/17.jpg)
@media query
![Page 18: Bootstrap Getting Started - csuohio.edueecs.csuohio.edu/~sschung/CIS408/BootstrapQuickSummary.pdfBootstrap Getting Started ... Bootstrap Example](https://reader030.vdocuments.us/reader030/viewer/2022021510/5ab468207f8b9a0f058bc8e2/html5/thumbnails/18.jpg)
After Resizing
![Page 19: Bootstrap Getting Started - csuohio.edueecs.csuohio.edu/~sschung/CIS408/BootstrapQuickSummary.pdfBootstrap Getting Started ... Bootstrap Example](https://reader030.vdocuments.us/reader030/viewer/2022021510/5ab468207f8b9a0f058bc8e2/html5/thumbnails/19.jpg)
Adding CSS Breakpoint uisng @media query
Use a media query to add a breakpoint at 768px:
Example
When the screen (browser window) gets smaller than 768px, each column should have a width of
100%:
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
@media only screen and (max-width: 768px) {
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
}
![Page 20: Bootstrap Getting Started - csuohio.edueecs.csuohio.edu/~sschung/CIS408/BootstrapQuickSummary.pdfBootstrap Getting Started ... Bootstrap Example](https://reader030.vdocuments.us/reader030/viewer/2022021510/5ab468207f8b9a0f058bc8e2/html5/thumbnails/20.jpg)
![Page 21: Bootstrap Getting Started - csuohio.edueecs.csuohio.edu/~sschung/CIS408/BootstrapQuickSummary.pdfBootstrap Getting Started ... Bootstrap Example](https://reader030.vdocuments.us/reader030/viewer/2022021510/5ab468207f8b9a0f058bc8e2/html5/thumbnails/21.jpg)
Full CSS Codes Adding Multiple Breaking Points
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box;
}
.row::after {
content: "";
clear: both;
display: table;
![Page 22: Bootstrap Getting Started - csuohio.edueecs.csuohio.edu/~sschung/CIS408/BootstrapQuickSummary.pdfBootstrap Getting Started ... Bootstrap Example](https://reader030.vdocuments.us/reader030/viewer/2022021510/5ab468207f8b9a0f058bc8e2/html5/thumbnails/22.jpg)
}
[class*="col-"] {
float: left;
padding: 15px;
}
html {
font-family: "Lucida Sans", sans-serif;
}
.header {
background-color: #9933cc;
color: #ffffff;
padding: 15px;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
padding: 8px;
margin-bottom: 7px;
background-color: #33b5e5;
color: #ffffff;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu li:hover {
background-color: #0099cc;
}
.aside {
![Page 23: Bootstrap Getting Started - csuohio.edueecs.csuohio.edu/~sschung/CIS408/BootstrapQuickSummary.pdfBootstrap Getting Started ... Bootstrap Example](https://reader030.vdocuments.us/reader030/viewer/2022021510/5ab468207f8b9a0f058bc8e2/html5/thumbnails/23.jpg)
background-color: #33b5e5;
padding: 15px;
color: #ffffff;
text-align: center;
font-size: 14px;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.footer {
background-color: #0099cc;
color: #ffffff;
text-align: center;
font-size: 12px;
padding: 15px;
}
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width: 600px) {
/* For tablets: */
.col-m-1 {width: 8.33%;}
.col-m-2 {width: 16.66%;}
.col-m-3 {width: 25%;}
.col-m-4 {width: 33.33%;}
.col-m-5 {width: 41.66%;}
.col-m-6 {width: 50%;}
.col-m-7 {width: 58.33%;}
.col-m-8 {width: 66.66%;}
.col-m-9 {width: 75%;}
![Page 24: Bootstrap Getting Started - csuohio.edueecs.csuohio.edu/~sschung/CIS408/BootstrapQuickSummary.pdfBootstrap Getting Started ... Bootstrap Example](https://reader030.vdocuments.us/reader030/viewer/2022021510/5ab468207f8b9a0f058bc8e2/html5/thumbnails/24.jpg)
.col-m-10 {width: 83.33%;}
.col-m-11 {width: 91.66%;}
.col-m-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}
</style>
</head>
<body>
<div class="header">
<h1>Chania</h1>
</div>
<div class="row">
![Page 25: Bootstrap Getting Started - csuohio.edueecs.csuohio.edu/~sschung/CIS408/BootstrapQuickSummary.pdfBootstrap Getting Started ... Bootstrap Example](https://reader030.vdocuments.us/reader030/viewer/2022021510/5ab468207f8b9a0f058bc8e2/html5/thumbnails/25.jpg)
<div class="col-3 col-m-3 menu">
<ul>
<li>The Flight</li>
<li>The City</li>
<li>The Island</li>
<li>The Food</li>
</ul>
</div>
<div class="col-6 col-m-9">
<h1>The City</h1>
<p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two
parts, the old town and the modern city.</p>
</div>
<div class="col-3 col-m-12">
<div class="aside">
<h2>What?</h2>
<p>Chania is a city on the island of Crete.</p>
<h2>Where?</h2>
<p>Crete is a Greek island in the Mediterranean Sea.</p>
<h2>How?</h2>
<p>You can reach Chania airport from all over Europe.</p>
</div>
</div><!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
![Page 26: Bootstrap Getting Started - csuohio.edueecs.csuohio.edu/~sschung/CIS408/BootstrapQuickSummary.pdfBootstrap Getting Started ... Bootstrap Example](https://reader030.vdocuments.us/reader030/viewer/2022021510/5ab468207f8b9a0f058bc8e2/html5/thumbnails/26.jpg)
* {
box-sizing: border-box;
}
.row::after {
content: "";
clear: both;
display: table;
}
[class*="col-"] {
float: left;
padding: 15px;
}
html {
font-family: "Lucida Sans", sans-serif;
}
.header {
background-color: #9933cc;
color: #ffffff;
padding: 15px;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
padding: 8px;
margin-bottom: 7px;
background-color: #33b5e5;
![Page 27: Bootstrap Getting Started - csuohio.edueecs.csuohio.edu/~sschung/CIS408/BootstrapQuickSummary.pdfBootstrap Getting Started ... Bootstrap Example](https://reader030.vdocuments.us/reader030/viewer/2022021510/5ab468207f8b9a0f058bc8e2/html5/thumbnails/27.jpg)
color: #ffffff;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu li:hover {
background-color: #0099cc;
}
.aside {
background-color: #33b5e5;
padding: 15px;
color: #ffffff;
text-align: center;
font-size: 14px;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.footer {
background-color: #0099cc;
color: #ffffff;
text-align: center;
font-size: 12px;
padding: 15px;
}
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width: 600px) {
/* For tablets: */
.col-m-1 {width: 8.33%;}
.col-m-2 {width: 16.66%;}
![Page 28: Bootstrap Getting Started - csuohio.edueecs.csuohio.edu/~sschung/CIS408/BootstrapQuickSummary.pdfBootstrap Getting Started ... Bootstrap Example](https://reader030.vdocuments.us/reader030/viewer/2022021510/5ab468207f8b9a0f058bc8e2/html5/thumbnails/28.jpg)
.col-m-3 {width: 25%;}
.col-m-4 {width: 33.33%;}
.col-m-5 {width: 41.66%;}
.col-m-6 {width: 50%;}
.col-m-7 {width: 58.33%;}
.col-m-8 {width: 66.66%;}
.col-m-9 {width: 75%;}
.col-m-10 {width: 83.33%;}
.col-m-11 {width: 91.66%;}
.col-m-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}
</style>
</head>
<body>
![Page 29: Bootstrap Getting Started - csuohio.edueecs.csuohio.edu/~sschung/CIS408/BootstrapQuickSummary.pdfBootstrap Getting Started ... Bootstrap Example](https://reader030.vdocuments.us/reader030/viewer/2022021510/5ab468207f8b9a0f058bc8e2/html5/thumbnails/29.jpg)
<div class="header">
<h1>Chania</h1>
</div>
<div class="row">
<div class="col-3 col-m-3 menu">
<ul>
<li>The Flight</li>
<li>The City</li>
<li>The Island</li>
<li>The Food</li>
</ul>
</div>
<div class="col-6 col-m-9">
<h1>The City</h1>
<p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two
parts, the old town and the modern city.</p>
</div>
<div class="col-3 col-m-12">
<div class="aside">
<h2>What?</h2>
<p>Chania is a city on the island of Crete.</p>
<h2>Where?</h2>
<p>Crete is a Greek island in the Mediterranean Sea.</p>
<h2>How?</h2>
![Page 30: Bootstrap Getting Started - csuohio.edueecs.csuohio.edu/~sschung/CIS408/BootstrapQuickSummary.pdfBootstrap Getting Started ... Bootstrap Example](https://reader030.vdocuments.us/reader030/viewer/2022021510/5ab468207f8b9a0f058bc8e2/html5/thumbnails/30.jpg)
<p>You can reach Chania airport from all over Europe.</p>
</div>
</div>
</div>
<div class="footer">
<p>Resize the browser window to see how the content respond to the resizing.</p>
</div>
</body>
</html>
</div>
<div class="footer">
<p>Resize the browser window to see how the content respond to the resizing.</p>
</div>
</body>
</html>
![Page 31: Bootstrap Getting Started - csuohio.edueecs.csuohio.edu/~sschung/CIS408/BootstrapQuickSummary.pdfBootstrap Getting Started ... Bootstrap Example](https://reader030.vdocuments.us/reader030/viewer/2022021510/5ab468207f8b9a0f058bc8e2/html5/thumbnails/31.jpg)