Scribd
Upload
3K views

Bootstrap Notes

Bootstrap is an open source front-end framework that standardizes the development of responsive web pages across teams at Twitter. It provides pre-built CSS and JavaScript code for common interface elements like grids, typography, forms, buttons, navigation and other interface components. Bootstrap utilizes a 12 column responsive grid system, includes optional JavaScript plugins, and allows for easy customization of components included in the build.

Uploaded by

Sony
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
3K views

Bootstrap Notes

Bootstrap is an open source front-end framework that standardizes the development of responsive web pages across teams at Twitter. It provides pre-built CSS and JavaScript code for common interface elements like grids, typography, forms, buttons, navigation and other interface components. Bootstrap utilizes a 12 column responsive grid system, includes optional JavaScript plugins, and allows for easy customization of components included in the build.

Uploaded by

Sony
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/ 21

Introduction to Bootstrap

What is Bootstrap
• Bootstrap is an Open Source product
• Developed by Mark Otto and Jacob Thornton,
were both employees at Twitter.
• To standardize the front end toolsets of
engineers across the company
• Bootstrap launched in August, 2011
Before Bootstrap
• Engineers at Twitter used almost any library
they were familiar with to meet front-end
requirements.
• More inconsistent
• Difficult to scale and maintain
• Bootstrap was the solution
Bootstrap features
• An entirely CSS driven project
• Include JavaScript plugins
• Icons that go hand in hand with forms and
buttons.
• At its base, it allows for responsive web design,
and features a robust 12 column, 940px wide grid.
• One of the highlights is the build tool on
[Bootstrap’s](http://getbootstrap.com) website
where you can customize the build to suit your
needs, choosing what CSS and Javascript features
that you want to include on your site.
• With Bootstrap, you just need to include the
bootstrap.css CSS file, and optionally the
bootstrap.js JavaScript file into your website
Bootstrap File Structure
• The Bootstrap download includes three
folders: css, js, and img.
• For simplicity, add these to the root of your
project.
• Included are also minified versions of the CSS
and Javascript.
• Both the uncompressed and the minified
versions do not need to be included.
Basic HTML Template
• Basic HTML Layout
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>.
Basic Bootstrap Template.
• With Bootstrap, we simply include the link to the
CSS stylesheet, and the Javascript.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<link href="css/bootstrap.min.css"
rel="stylesheet">
</head>
<body>
<h1>Hello, world!</h1>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

NOTE Don’t forget the HTML 5 Doctype. By


including <!DOCTYPE html>, all modern
browsers are put into standards mode.
Global Styles
Default styles give special treatment to
typography and links
• margin has been removed from the body, and
content will snug up to the edges of the
browser window.
• background-color: white; is applied to the
body
• Bootstrap is using the @baseFontFamily,
@baseFontSize, and @baseLine
• Height attributes as our typographic base. This
allows the height of headings, and other
content around the site to maintain a similar
line height.
• Bootstrap sets the global link color via
@linkColor and applies link underlines only on
:hover
Default Grid System
• The default Bootstrap grid system utilizes 12
columns, making for a 940px wide container
without responsive features enabled.
• With the responsive CSS file added, the grid
adapts to be 724px and 1170px wide
depending on your viewport
Default Grid System
Basic grid HTML
• To create a simple layout, create a container
with a div that has a class of .row
• Add the appropriate amount of .span*
columns. Since we have 12-column grid, we
just need to have the amount of .span*
columns add up to twelve
<div class="row">
<div class="span8">...</div>
<div class="span4">...</div>
</div>

In the above example, we have .span8, and a


.span4 adding up to 12.
Nesting Columns.
<div class="row">
<div class="span9">
Level 1 column
<div class="row">
<div class="span6">Level 2</div>
<div class="span3">Level 2</div>
</div>
</div>
</div>
Fluid Grid System
• The fluid grid system uses percents instead of
pixels for column widths
• It has the same responsive capabilities as our
fixed grid system, ensuring proper proportions
for key screen resolutions and devices.
• You can make any row “fluid” by changing
.row to .rowfluid.
Fluid Column Layout.
<div class="row-fluid">
<div class="span4">...</div>
<div class="span8">...</div>
</div>

You might also like