View
4
Download
0
Category
Preview:
Citation preview
M C 4 3 1 5 – W e b D e s i g n a n d P u b l i s h i n g
BOOTSTRAP BASICS
I n t r o d u c t i o n t o B o o t s t r a p
M C 4 3 1 5 – W e b D e s i g n a n d P u b l i s h i n g
A B O U T
Build responsive, mobile-first projects on the web with
the world’s most popular front-end component library.
Bootstrap is an open source toolkit for developing with
HTML, CSS, and JS. Quickly prototype your ideas or
build your entire app with our Sass variables and mixins,
responsive grid system, extensive prebuilt components,
and powerful plugins built on jQuery. Bootstrap allows
for faster and easier web development.
M C 4 3 1 5 – W e b D e s i g n a n d P u b l i s h i n g
W H Y U S E B O O T S T R A P ?
Bootstrap is "the most popular HTML, CSS, and JS framework in the world for building responsive, mobile-first projects on the web."
Over 7 million apps and sites across the web are built using Bootstrap. Many web designers, front-end developers, and programmers
use Bootstrap to help them build projects faster and easier.
Bootstrap is a front end framework. A framework is a reusable platform that helps you build higher level projects without having to
worry about the lower level, repetitive details. For example, when you’re building a website, you want it to be presentable on most
devices and screens. Your layout will have many components like nav bars, buttons, headers, forms, etc. They will appear in different
places of the site or app. Instead of creating your own custom solution for each of these, you can use a framework like Bootstrap that
has an out of the box solution for implementing your layout and components in little time.
To view the latest documentation, go to www.getbootstrap.com. Knowing your way around the Bootstrap documentation will give you
a head start when building projects because the docs contain information and examples on everything in Bootstrap.
M C 4 3 1 5 – W e b D e s i g n a n d P u b l i s h i n g
ADVANTAGES
M C 4 3 1 5 – W e b D e s i g n a n d P u b l i s h i n g
A D V A N T A G E S
Easy to use: Anybody with just basic knowledge of HTML and CSS can start using Bootstrap
Responsive features: Bootstrap's responsive CSS adjusts to phones, tablets, and desktops
Mobile-first approach: In Bootstrap 3, mobile-first styles are part of the core framework
Browser compatibility: Bootstrap is compatible with all modern browsers (Chrome, Firefox, Internet Explorer, Safari, and Opera)
M C 4 3 1 5 – W e b D e s i g n a n d P u b l i s h i n g
GETTINGSTARTED
M C 4 3 1 5 – W e b D e s i g n a n d P u b l i s h i n g
D O W N L O A D I N G B O O T S T R A P F I L E S / I N C L A S S E X E R C I S E
STEP 1: Create a folder called “Bootstrap Exercise”
STEP 2: Go to www.getbootstrap.com and go to ‘Download’
STEP 3: Download the files under ‘Compiled CSS and JS’ and put these files into your “Bootstrap Exercise” folder
STEP 4: Create an index.html file in your “Bootstrap Exercise” folder
STEP 5: In the head tags, include <link href="css/bootstrap.css" rel="stylesheet">
STEP 6: At the bottom, before your closing body tag, include <script src="js/bootstrap.min.js"></script>
M C 4 3 1 5 – W e b D e s i g n a n d P u b l i s h i n g
S T A R T E R C O D E E X A M P L E
<!DOCTYPE html>
<head>
<title>My Bootstrap Site – Home</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.css" rel="stylesheet">
</head>
<body>
<div class="container">
<h1>Hello World!</h1>
</div>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
M C 4 3 1 5 – W e b D e s i g n a n d P u b l i s h i n g
HTML5 DOCTYPE
M C 4 3 1 5 – W e b D e s i g n a n d P u b l i s h i n g
H T M L 5 D O C T Y P E
Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at the
beginning of all your projects.
<!DOCTYPE html>
</html>
M C 4 3 1 5 – W e b D e s i g n a n d P u b l i s h i n g
MOBILE FIRST
M C 4 3 1 5 – W e b D e s i g n a n d P u b l i s h i n g
M O B I L E F I R S T C O D E
With Bootstrap 3, we've rewritten the project to be mobile friendly from the start. Instead of adding on optional mobile styles, they're
baked right into the core. In fact, Bootstrap is mobile first. Mobile first styles can be found throughout the entire library instead of in
separate files. To ensure proper rendering and touch zooming, add the viewport meta tag to your head
<meta name="viewport" content="width=device-width, initial-scale=1">
M C 4 3 1 5 – W e b D e s i g n a n d P u b l i s h i n g
CONTAINERS
M C 4 3 1 5 – W e b D e s i g n a n d P u b l i s h i n g
B O O T S T R A P C O N T A I N E R S
Bootstrap requires a container element to wrap site contents and house our grid system. You may choose one of two containers to use
in your projects. Note that, due to padding and more, neither container is nestable.
Use .container for a responsive fixed width container:
<div class="container">
</div>
Use .container-fluid for a full width container, spanning the entire width of your viewport:
<div class="container-fluid">
</div>
M C 4 3 1 5 – W e b D e s i g n a n d P u b l i s h i n g
NAVIGATION
M C 4 3 1 5 – W e b D e s i g n a n d P u b l i s h i n g
N A V I G A T I O N : C O D E E X A M P L E
There are many different options for your Bootstrap navigation. A simple navigation using an unordered list will first require the nav
class. For example, it will look like this
<ul class="nav nav-tabs">
<li><a href="index.html">Home</a></li>
<li><a href="profile.html">Profile</a></li>
<li><a href="messages.html">Messages</a></li>
</ul>
<ul class="nav nav-pills">
<li><a href="index.html">Home</a></li>
<li><a href="profile.html">Profile</a></li>
<li><a href="messages.html">Messages</a></li>
</ul>
M C 4 3 1 5 – W e b D e s i g n a n d P u b l i s h i n g
THE GRIDSYSTEM
M C 4 3 1 5 – W e b D e s i g n a n d P u b l i s h i n g
W H A T I S I T ?
Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size
increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts.
SIZING
.col-xs-12 (extra small devices / phones)
.col-sm-12 (small devices / tablets)
.col-md-12 (medium devices / laptops)
.col-lg-12 (large devices / desktops)
M C 4 3 1 5 – W e b D e s i g n a n d P u b l i s h i n g
G R I D R U L E S
Rows must be placed within a .container or .container-fluid for proper alignment and padding
Use rows to create horizontal groups of columns
Content should be placed within columns, and only columns may be immediate children of rows
Grid columns are created by specifying the number of twelve available columns you wish to span. For example, three equal columns would
use three .col-xs-4
M C 4 3 1 5 – W e b D e s i g n a n d P u b l i s h i n g
B O O T S T R A P G R I D : C O D E E X A M P L E
The main Bootstrap layout is based on a fluid grid system that appropriately scales up to 12 columns, depending on the size of the
user’s screen. This grid system is shown in the code below:
<div class="container">
<div class="row">
<div class="col-md-4">Content Here</div>
<div class="col-md-4">Content Here</div>
<div class="col-md-4">Content Here</div>
</div>
</div>
M C 4 3 1 5 – W e b D e s i g n a n d P u b l i s h i n g
TEMPLATES
M C 4 3 1 5 – W e b D e s i g n a n d P u b l i s h i n g
W H E R E C A N I G E T F R E E T E M P L A T E S ?
www.startbootstrap.com/themes/
M C 4 3 1 5 – W e b D e s i g n a n d P u b l i s h i n g
CHECK OUT AN EXAMPLEwww.saramshields.com/p3
Recommended