Bootstrap

Bootstrap
Bootstrap
- Bootstrap
- Bootstrap
http://getbootstrap.com
Bootstrap 3.3.7 Download Bootstrap

Download Bootstrap
unzip
bootstrap-3.3.7-dist bootstrap
host c://appser/www/bootstrap
xamp c://xamp/htdocs/bootstrap
- bootstrap
html
c://appser/www/bootstrap/basic1.php
basic1.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Bootstrap 101 Template</title>

<link href="css/bootstrap.min.css" rel="stylesheet">



</head>
<body>
<h1>Hello, world!</h1>

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

<script src="js/bootstrap.min.js"></script>
</body>
</html>
http://localhost/bootstrap/basic1.php
bootstrap http://getbootstrap.com/
getting-started/#examples
- CSS
bootstrap css Style Sheet

Layout
HTML5 doctype
<!DOCTYPE html>
<html lang="en">
...
</html>
Bootstrap Mobile Bootstrap 2 Bootstrap 3
- Bootstrap Grid System

Grid System layout rows
colums
! Rows must be placed within a .container class 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.
! Predefined grid classes like .row and .col-xs-4 are available for quickly making grid
layouts. LESS mixins can
also be used for more semantic layouts.
! Columns create gutters (gaps between column content) via padding. That padding is
offset in rows for the first
and last column via negative margin on .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.
- Media Queries
We use the following media queries in our Less files to create the key breakpoints in
our grid system
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }
/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }
/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

We occasionally expand on these media queries to include a max-width to limit CSS to a
narrower set of devices.
@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }
Grid options
See how aspects of the Bootstrap grid system work across multiple devices with a handy
table.
Stacked-to-horizontal
Using a single set of .col-md-* grid classes, you can create a basic grid system that
starts out stacked on mobile devices and tablet devices (the extra small to small range)
before becoming horizontal on desktop (medium) devices. Place grid columns in any .row.
<div class="row">
<div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
</div>
<div class="row">
</div>
<div class="row">
</div>
Fluid container
<div class="container-fluid">
<div class="row">
...
</div>
</div>
Mobile Desktop
Don't want your columns to simply stack in smaller devices? Use the extra small and
medium device grid classes by adding .col-xs-* .col-md-* to your columns. See the example
below for a better idea of how it all works.

<div class="row">
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>

</div>

<div class="row">
</div>

<div class="row">
<div class="col-xs-6">.col-xs-6</div>
</div>
Mobile Tabet Desktop
Build on the previous example by creating even more dynamic and powerful layouts
with tablet .col-sm-* classes.
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>

<div class="clearfix visible-xs-block"></div>
</div>
Column wrapping
If more than 12 columns are placed within a single row, each group of extra columns
will, as one unit, wrap onto a new line.
<div class="row">
<div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 > 12, this 4-column-wide div gets

wrapped onto a new line as one contiguous unit.</div>
<div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div>
</div>
http://getbootstrap.com/css/#grid-options
- Typography
Headings
All HTML headings, <h1> through <h6>, are available. .h1 through .h6 classes
are also available, for when you want to match the font styling of a heading but still want your
text to be displayed inline.
<h1>h1. Bootstrap heading</h1>

Inline Text elements
Marked text
For highlighting a run of text due to its relevance in another context, use the
<mark> tag.
You can use the mark tag to <mark>highlight</mark> text.
Deleted text
For indicating blocks of text that have been deleted use the <del> tag.
<del>This line of text is meant to be treated as deleted text.</del>
Tag
#Alignment classes http://getbootstrap.com/css/#type-alignment
#Transformation classes http://getbootstrap.com/css/#type-transformation
#Abbreviations http://getbootstrap.com/css/#type-abbreviations
#Address http://getbootstrap.com/css/#type-addresses
#blockquotes http://getbootstrap.com/css/#type-blockquotes
#Lists http://getbootstrap.com/css/#type-lists
Bootstrap .table
<table class="table">
...
</table>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/

bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Basic Table</h2>
<p>The .table class adds basic styling (light padding and only horizontal dividers) to a
table:</p>
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Striped Rows
The .table-striped class adds zebra-stripes to a table:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/

bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<h2>Striped Rows</h2>
<p>The .table-striped class adds zebra-stripes to a table:</p>
<table class="table table-striped">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Bordered table
.table-bordered
<table class="table table-bordered">
...
</table>
Hover rows
.table-hover
<tbody>
<table class="table table-hover">
...
</table>
#Condensed table http://getbootstrap.com/css/#tables-condensed

<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>

<tr>
<td class="active">...</td>
<td class="success">...</td>
<td class="warning">...</td>
<td class="danger">...</td>
<td class="info">...</td>
</tr>
Responsive tables
.table <table> <div class =table-
responsive>
<div class="table-responsive">
...
</table>
</div>
- (Form)
Bootstrap css
<input>
<select><checkbox><radio><Button><label>
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1"

placeholder="Password">
</div>
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
inline
.form-inline This only applies to forms within

viewports that are at least 768px wide.
<form class="form-inline">
<label for="exampleInputName2">Name</label>
<input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
</div>
<label for="exampleInputEmail2">Email</label>
<input type="email" class="form-control" id="exampleInputEmail2"

placeholder="jane.doe@example.com">
</div>
<button type="submit" class="btn btn-default">Send invitation</button>
</form>
<label class="sr-only" for="exampleInputEmail3">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">

</div>
<label class="sr-only" for="exampleInputPassword3">Password</label>
<input type="password" class="form-control" id="exampleInputPassword3"

</div>
<label>
<input type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-default">Sign in</button>
</form>
<label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
<div class="input-group">
<div class="input-group-addon">$</div>
<input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
<div class="input-group-addon">.00</div>
</div>
</div>
<button type="submit" class="btn btn-primary">Transfer cash</button>
</form>
bootstrap grid labels groups

.form-horizontal
<form class="form-horizontal">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<input type="password" class="form-control" id="inputPassword3"

</div>
</div>
<div class="col-sm-offset-2 col-sm-10">

<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>
- input type Bootstrap

Most common form control, text-based input fields. Includes support for all HTML5
types: text, password, datetime, datetime-local, date, month, time, week, number, email, url,
search, tel, and color.
Text
<input type="text" class="form-control" placeholder="Text input>
Textarea
Text
<textarea class="form-control" rows=3"></textarea>
Checkboxs Radios
Checkbox Radios
<label>
<input type="checkbox" value="">
Option one is this and that—be sure to include why it's great
</label>
</div>
<div class="checkbox disabled">

<label>
<input type="checkbox" value="" disabled>
Option two is disabled
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
Option one is this and that—be sure to include why it's great
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
Option two can be something else and selecting it will deselect option one
</label>
</div>
<div class="radio disabled">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
Option three is disabled
</label>
</div>
Inline Checkboxs Radios
.checkbox-inline .radio-inline
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
</label>
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
</label>
</label>
Checkboxes and radios without label text http://getbootstrap.com/css/#checkboxes-

and-radios-without-label-text
Selects
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>

Selects Multiple
<select multiple class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
Static Control

.form-control-status <p>
<label class="col-sm-2 control-label">Email</label>

<p class="form-control-static">email@example.com</p>
</div>
</div>
<label for="inputPassword" class="col-sm-2 control-label">Password</label>
<input type="password" class="form-control" id="inputPassword"

</div>
</div>
</form>
<label class="sr-only">Email</label>
<p class="form-control-static">email@example.com</p>
</div>
<label for="inputPassword2" class="sr-only">Password</label>
<input type="password" class="form-control" id="inputPassword2"

</div>
<button type="submit" class="btn btn-default">Confirm identity</button>
</form>
<form>
<fieldset disabled>
<label for="disabledTextInput">Disabled input</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled

input">
</div>
<label for="disabledSelect">Disabled select menu</label>
<select id="disabledSelect" class="form-control">
<option>Disabled select</option>
</select>
</div>
<label>
<input type="checkbox"> Can't check this
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</fieldset>
</form>
<input class="form-control" type="text" placeholder="Readonly input here"

readonly>
Help text
<label class="sr-only" for="inputHelpBlock">Input with help text</label>
<input type="text" id="inputHelpBlock" class="form-control" aria-describedby="helpBlock">
...
<span id="helpBlock" class="help-block">A block of help text that breaks onto a new line and
may extend beyond one line.</span>
input
<div class="form-group has-success">
<label class="control-label" for="inputSuccess1">Input with success</label>
<input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2">
<span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line
and may extend beyond one line.</span>
</div>
<div class="form-group has-warning">
<label class="control-label" for="inputWarning1">Input with warning</label>
<input type="text" class="form-control" id="inputWarning1">
</div>
<div class="form-group has-error">
<label class="control-label" for="inputError1">Input with error</label>
<input type="text" class="form-control" id="inputError1">
</div>
<div class="has-success">
<label>
<input type="checkbox" id="checkboxSuccess" value="option1">

Checkbox with success
</label>
</div>
</div>
<div class="has-warning">
<label>
<input type="checkbox" id="checkboxWarning" value="option1">
Checkbox with warning
</label>
</div>
</div>
<div class="has-error">
<label>
<input type="checkbox" id="checkboxError" value="option1">
Checkbox with error
</label>
</div>
</div>
input
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess2">Input with success</label>
<input type="text" class="form-control" id="inputSuccess2" aria-

describedby="inputSuccess2Status">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess2Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-warning has-feedback">
<label class="control-label" for="inputWarning2">Input with warning</label>
<input type="text" class="form-control" id="inputWarning2" aria-

describedby="inputWarning2Status">
<span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-

hidden="true"></span>
<span id="inputWarning2Status" class="sr-only">(warning)</span>
</div>
<div class="form-group has-error has-feedback">
<label class="control-label" for="inputError2">Input with error</label>

<input type="text" class="form-control" id="inputError2" aria-
describedby="inputError2Status">
<span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></

span>
<span id="inputError2Status" class="sr-only">(error)</span>
</div>
<label class="control-label" for="inputGroupSuccess1">Input group with success</label>
<span class="input-group-addon">@</span>
<input type="text" class="form-control" id="inputGroupSuccess1" aria-

describedby="inputGroupSuccess1Status">
</div>
<span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
</div>
inline
<label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>
<input type="text" class="form-control" id="inputSuccess3" aria-

describedby="inputSuccess3Status">
<span id="inputSuccess3Status" class="sr-only">(success)</span>
</div>
</div>
<label class="control-label col-sm-3" for="inputGroupSuccess2">Input group with

success</label>
<span class="input-group-addon">@</span>
<input type="text" class="form-control" id="inputGroupSuccess2" aria-

describedby="inputGroupSuccess2Status">
</div>
<span id="inputGroupSuccess2Status" class="sr-only">(success)</span>
</div>
</div>
</form>

Control sizing http://getbootstrap.com/css/#forms-control-sizes

- Buttons
<a>,<button>,<input>
<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value=Submit">

<button type="button" class="btn btn-default">Default</button>

<button type="button" class="btn btn-primary">Primary</button>

<button type="button" class="btn btn-success">Success</button>

<button type="button" class="btn btn-info">Info</button>

<button type="button" class="btn btn-warning">Warning</button>


<button type="button" class="btn btn-danger">Danger</button>

<button type="button" class="btn btn-link>Link</button>
<p>
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-default btn-lg">Large button</button>
</p>
<p>
<button type="button" class="btn btn-primary">Default button</button>
<button type="button" class="btn btn-default">Default button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-default btn-sm">Small button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-xs">Extra small button</button>

<button type="button" class="btn btn-default btn-xs">Extra small button</button>
</p>
<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</

button>
<button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-primary btn-lg active">Primary button</button>
<button type="button" class="btn btn-default btn-lg active>Button</button>
<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg active" role=button">Link</a>
Disable
<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary

button</button>
<button type="button" class="btn btn-default btn-lg" disabled=disabled">Button</button>
- Images
Bootstrap 3
Responsive .img-responsive max-width:100%,height:auto;
display: block;
.img-responsive .center-
block .text-center
<img src="..." class="img-responsive" alt="Responsive image>
shapes
<img>
<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class=img-thumbnail">

- Helper classes
<p>
<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class=text-danger">...</p>

- backgrounds
<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class=bg-danger">...</p>
Close
<button type="button" class="close" aria-label="Close"><span aria-

hidden=true">×</span></button>
Carets http://getbootstrap.com/css/#helper-classes-carets
Quick floats http://getbootstrap.com/css/#helper-classes-floats
Center content blocks http://getbootstrap.com/css/#helper-classes-center
Clearfix http://getbootstrap.com/css/#helper-classes-clearfix
- Components
Bootstraps
Glyphicons
Includes over 250 glyphs in font format from the Glyphicon Halflings set.
Glyphicons Halflings are normally not available for free, but their creator has made them
available for Bootstrap free of cost. As a thank you, we only ask that you include a link back
to Glyphicons whenever possible. http://getbootstrap.com/components/#glyphicons

Glyphicons
<button type="button" class="btn btn-default" aria-label="Left Align">
<span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>
Dropdowns
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-

toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
dropdown
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
...
</ul>
Headers dropdown menu
<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
...
<li class="dropdown-header">Dropdown header</li>
...
</ul>

Divider http://getbootstrap.com/components/#dropdowns-divider
Disables menu items http://getbootstrap.com/components/#dropdowns-disabled
Button groups
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>

Button toolbar
<div class = btn-group> <div class = btn-

toolbar>
<div class="btn-toolbar" role="toolbar" aria-label="...">
<div class="btn-group" role="group" aria-label="...">...</div>
</div>
Button
<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-xs" role="group" aria-label=...">...</div>
Nesting http://getbootstrap.com/components/#btn-groups-nested
Vertical variation http://getbootstrap.com/components/#btn-groups-vertical
Justified button groups http://getbootstrap.com/components/#btn-groups-justified
- Dropdowns
.btn-group
Single button dropdown

<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"

aria-haspopup="true" aria-expanded="false">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu">
</ul>
</div>

Split Button Dropdowns

<button type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown"

aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
</ul>
</div>

Button

<button class="btn btn-default btn-lg dropdown-toggle" type="button" data-

toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Large button <span class="caret"></span>
</button>
...
</ul>
</div>

<button class="btn btn-default btn-sm dropdown-toggle" type="button" data-

Small button <span class="caret"></span>
</button>
...
</ul>
</div>

<button class="btn btn-default btn-xs dropdown-toggle" type="button" data-

Extra small button <span class="caret"></span>
</button>
...
</ul>
</div>
Dropup variation http://getbootstrap.com/components/#btn-dropdowns-dropup
- Input Group

<span class="input-group-addon" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-

addon1">
</div>
<input type="text" class="form-control" placeholder="Recipient's username" aria-

describedby="basic-addon2">
<span class="input-group-addon" id="basic-addon2">@example.com</span>
</div>
<span class="input-group-addon">$</span>
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
<span class="input-group-addon">.00</span>
</div>
<label for="basic-url">Your vanity URL</label>
<span class="input-group-addon" id="basic-addon3">https://example.com/users/</span>
<input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>

input
.input-group
<div class="input-group input-group-lg">
<span class="input-group-addon" id="sizing-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-

addon1">
</div>

addon2">
</div>
<div class="input-group input-group-sm">

addon3">
</div>

Checkboxes Radio addons
<div class="row">
<div class="col-lg-6">
<span class="input-group-addon">
<input type="checkbox" aria-label="...">
</span>
<input type="text" class="form-control" aria-label="...">
</div>
</div>
<span class="input-group-addon">
<input type="radio" aria-label="...">
</span>

</div>
</div>
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
</div>
</div>
<div class="input-group-btn">

aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right">
</ul>
</div>
</div>
</div>
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-

target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-

haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<input type="text" class="form-control" placeholder="Search">
</div>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-

haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
</ul>
</li>
</ul>
</div>
</div>
</nav>
Brand image
<nav class="navbar navbar-default">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img alt="Brand" src="...">
</a>
</div>
</div>
</nav>
navbar
<form class="navbar-form navbar-left" role="search">
<input type="text" class="form-control" placeholder="Search">
</div>
</form>

navbar
.navbar-btn <button>
<button type="button" class="btn btn-default navbar-btn">Sign in</button>
Text navbar
<p class="navbar-text">Signed in as Mark Otto</p>
Non-nav links
<p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-

link">Mark Otto</a></p>

Component alignment
Align nav links, forms, buttons, or text, using the .navbar-left or .navbar-right
utility classes. Both classes will add a CSS float in the specified direction. For example, to
align nav links, put them in a separate <ul> with the respective utility class applied.
These classes are mixin-ed versions of .pull-left and .pull-right, but they're scoped to media
queries for easier handling of navbar components across device sizes.
navbar Fixed to top
.navbar-fixed-top Include .container .container-fluid

pad nabber content
<nav class="navbar navbar-default navbar-fixed-top">
...
</div>
</nav>
Fixed to bottom http://getbootstrap.com/components/#navbar-fixed-bottom
Static top http://getbootstrap.com/components/#navbar-static-top
Inverted navbar http://getbootstrap.com/components/#navbar-inverted

Breadcrumbs
<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Library</a></li>
<li class="active">Data</li>
</ol>
Pagination
<nav aria-label="Page navigation">
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
Pager
<nav aria-label="...">
<ul class="pager">
<li><a href="#">Previous</a></li>
<li><a href="#">Next</a></li>
</ul>
</nav>

Aligned links Pager
<nav aria-label="...">
<ul class="pager">
<li class="previous"><a href="#"><span aria-hidden="true">←</span> Older</a></li>
<li class="next"><a href="#">Newer <span aria-hidden="true">→</span></a></li>
</ul>
</nav>
Optional disabled state http://getbootstrap.com/components/#optional-disabled-state
Labels
<h3>Example heading <span class="label label-default>New</span></h3>
<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger>Danger</span>
Badges
<a href="#">Inbox <span class="badge">42</span></a>
<button class="btn btn-primary" type="button">
Messages <span class="badge">4</span>
</button>

Jumbotron
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>...</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>
Page Header
<div class="page-header">
<h1>Example page header <small>Subtext for header</small></h1>
</div>

Thumbnails
Grid system Bootstrap

Default example
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="..." alt="...">
</a>
</div>
...
</div>

thumbnail
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="..." alt="...">
<div class="caption">
<h3>Thumbnail label</h3>
<p>...</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn

btn-default" role="button">Button</a></p>
</div>
</div>
</div>
</div>

Alerts
<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger" role=alert">...</div>
Alert Dismissible alerts
<div class="alert alert-warning alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-

hidden="true">×</span></button>
<strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>

Alerts
<div class="alert alert-success" role="alert">
<a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-info" role="alert">
</div>
<div class="alert alert-warning" role="alert">
</div>
<div class="alert alert-danger" role="alert">
</div>

Progress Bar
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-

valuemax="100" style="width: 60%;">
<span class="sr-only">60% Complete</span>
</div>
</div>
Progress bar
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-

valuemax="100" style="width: 60%;">
60%
</div>
</div>

progress bar
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40"

aria-valuemin="0" aria-valuemax="100" style="width: 40%">
<span class="sr-only">40% Complete (success)</span>
</div>
</div>
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-

valuemin="0" aria-valuemax="100" style="width: 20%">
</div>
</div>
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60"

aria-valuemin="0" aria-valuemax="100" style="width: 60%">
<span class="sr-only">60% Complete (warning)</span>
</div>
</div>
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-

valuemin="0" aria-valuemax="100" style="width: 80%">
<span class="sr-only">80% Complete (danger)</span>
</div>
</div>

Progress bar
<div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar"

aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
<span class="sr-only">40% Complete (success)</span>
</div>
</div>
<div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-

valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
</div>
</div>
<div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar"

<span class="sr-only">60% Complete (warning)</span>
</div>
</div>
<div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar"

<span class="sr-only">80% Complete (danger)</span>
</div>
</div>
Animated http://getbootstrap.com/components/#progress-animated
Stacked http://getbootstrap.com/components/#progress-stacked
Media object
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="..." alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
...
</div>
</div>
Media
<div class="media">
<div class="media-left media-middle">
<a href="#">
<img class="media-object" src="..." alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Middle aligned media</h4>
...
</div>
</div>
Media list http://getbootstrap.com/components/#media-list
List group
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>

<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
List group Badges
<li class="list-group-item">
<span class="badge">14</span>
Cras justo odio
</li>
</ul>

List-group
<div class="list-group">
<a href="#" class="list-group-item active">
Cras justo odio
</a>
<a href="#" class="list-group-item">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item">Morbi leo risus</a>
<a href="#" class="list-group-item">Porta ac consectetur ac</a>
<a href="#" class="list-group-item">Vestibulum at eros</a>
</div>

Items
<button type="button" class="list-group-item">Cras justo odio</button>
<button type="button" class="list-group-item">Dapibus ac facilisis in</button>
<button type="button" class="list-group-item">Morbi leo risus</button>
<button type="button" class="list-group-item">Porta ac consectetur ac</button>
<button type="button" class="list-group-item">Vestibulum at eros</button>
</div>
Disabled items
<a href="#" class="list-group-item disabled">
Cras justo odio
</a>
<a href="#" class="list-group-item">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item">Morbi leo risus</a>
<a href="#" class="list-group-item">Porta ac consectetur ac</a>
<a href="#" class="list-group-item">Vestibulum at eros</a>
</div>
list group
<li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
<li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
<li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
<li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
</ul>
<a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
<a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>
<a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a>

</div>
list group
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">List group item heading</h4>
<p class="list-group-item-text">...</p>
</a>
</div>
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
<div class="panel-heading">Panel heading without title</div>
Panel content
</div>
</div>
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
Panel content
</div>
</div>
Panel content
</div>
<div class="panel-footer">Panel footer</div>
</div>
<div class="panel panel-primary">...</div>
<div class="panel panel-success">...</div>
<div class="panel panel-info">...</div>
<div class="panel panel-warning">...</div>
<div class="panel panel-danger">...</div>


<div class="panel-heading">Panel heading</div>
<p>...</p>
</div>

...
</table>
</div>
list group

<div class="panel-heading">Panel heading</div>
<p>...</p>
</div>

<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div>
Responsive embed http://getbootstrap.com/components/#responsive-embed

wells
<div class=well">...</div>
JavaScript Bootstrap
Modals
Modals modal.js
Static
<div class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span

aria-hidden="true">×</span></button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-

modal-lg">Large modal</button>
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-

labelledby="myLargeModalLabel">
<div class="modal-dialog modal-lg" role="document">
...
</div>
</div>
</div>

<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-

modal-sm">Small modal</button>
<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-

labelledby="mySmallModalLabel">
<div class="modal-dialog modal-sm" role="document">
...
</div>
</div>
</div>
animation modals
<div class="modal" tabindex="-1" role="dialog" aria-labelledby="...">
...
</div>
grid system

<div class="modal fade" tabindex="-1" role="dialog" aria-
labelledby="gridSystemModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span

aria-hidden="true">×</span></button>
<h4 class="modal-title" id="gridSystemModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
</div>
<div class="row">
</div>
<div class="row">
Level 1: .col-sm-9
<div class="row">
<div class="col-xs-8 col-sm-6">
Level 2: .col-xs-8 .col-sm-6
</div>
<div class="col-xs-4 col-sm-6">

Level 2: .col-xs-4 .col-sm-6
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div><!-- /.modal >
Tooltips tooltip.js

<button type="button" class="btn btn-default" data-toggle="tooltip" data-
placement="left" title="Tooltip on left">Tooltip on left</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top"

title="Tooltip on top">Tooltip on top</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom"

title="Tooltip on bottom">Tooltip on bottom</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right"

title="Tooltip on right">Tooltip on right</button>
Workshop 1
1)
2)
3)

Bootstrap

Uploaded by

Copyright:

Available Formats

You might also like

Bootstrap

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Bootstrap

Uploaded by

Copyright:

Available Formats

Bootstrap

Bootstrap 3.3.7 Download Bootstrap

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Bootstrap 101 Template</title>

<link href="css/bootstrap.min.css" rel="stylesheet">

bootstrap css Style Sheet

Bootstrap Mobile Bootstrap 2 Bootstrap 3

- Bootstrap Grid System

! Use rows to create horizontal groups of columns.

also be used for more semantic layouts.

and last column via negative margin on .rows.

example, three equal columns would use three .col-xs-4.

/* Extra small devices (phones, less than 768px) */

/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */

@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */

@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */

@media (min-width: @screen-lg-min) { ... }

@media (max-width: @screen-xs-max) { ... }

@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }

@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }

@media (min-width: @screen-lg-min) { ... }

<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>

<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>

<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>

<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>

Mobile Tabet Desktop

<div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>

<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>

<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>

<div class="clearfix visible-xs-block"></div>

<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>

<div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets

<div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div>

<h1>h1. Bootstrap heading</h1>

<h2>h2. Bootstrap heading</h2>

<h3>h3. Bootstrap heading</h3>

<h5>h5. Bootstrap heading</h5>

<h6>h6. Bootstrap heading</h6>

Inline Text elements

You can use the mark tag to <mark>highlight</mark> text.

<del>This line of text is meant to be treated as deleted text.</del>

#Alignment classes http://getbootstrap.com/css/#type-alignment

#Transformation classes http://getbootstrap.com/css/#type-transformation

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/

The .table-striped class adds zebra-stripes to a table:

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/

<p>The .table-striped class adds zebra-stripes to a table:</p>

<table class="table table-striped">

<table class="table table-bordered">

<table class="table table-hover">

#Condensed table http://getbootstrap.com/css/#tables-condensed

<div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 > 12, this 4-column-wide div gets