Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
2K 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
Available Formats
Download as PDF, TXT or read online on Scribd
2K 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
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