Bootstarp 3

BootstarpRAFIE TARABAY

Bootstrap Grid SystemBootstrap's grid system allows up to 12 columns across the page.

Bootstrap grid classes

The Bootstrap grid system has four classes:

xs (for phones) [i.e col-xs-12 for full screen width]

sm (for tablets) [i.e col-sm-12 for full screen width]

md (for desktops) [i.e col-md-12 for full screen width]

lg (for larger desktops) [i.e col-lg-12 for full screen width]

The smaller size will affect the big size if no handle for the big size.

Grid System Rules

Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) 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 classes like .row and .col-sm-4 are available for quickly making grid 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 12 available columns you wish to span. For example, three equal columns would use three .col-sm-4

</div>

</div>

</div>

XS style is active

md style is active

BootStrap page

Responsive layout starts with the .container class.

After that create rows with the .row class to wrap the horizontal groups of columns. Rows must be placed within a .container for proper alignment and padding.

Further columns can be created inside the rows using the predefined grid classes like .col-xs-*, .col-sm-*, .col-md-* and .col-lg-* where * represent grid number and should be from 1 to 12.

.col-xs-offset-*, .col-sm-offset-*, .col-md-offset-* and .col-lg-offset-*

Container-fluid vs .Container.container has one fixed width for each screen size in bootstrap (xs,sm,md,lg); .container-fluid expands to fill the available width.

.col-xs- .col-sm- .col-md- .col-lg-Extra small Small devices Medium devices Large devices

</div></div>

.col-xs- .col-sm- .col-md- .col-lg-Extra small Small devices Medium devices Large devices<div class="container">

Visible

Class Description.visible-xs-* Makes the element visible only on extra small devices having

screen width less than 768px. Hidden on others.

.visible-sm-* Makes the element visible only on small devices having screen width greater than or equal to 768px (i.e. ≥768px) but less than 992px. Hidden on others.

.visible-md-* Makes the element visible only on medium devices having screen width greater than or equal to 992px (i.e. ≥992px) but less than 1200px. Hidden on others.

.visible-lg-* Makes the element visible only on large devices having screen width greater than or equal to 1200px (i.e. ≥1200px). Hidden on others.

Visible example

<p class="visible-xs-block">visible only on extra small devices.</p>

<p class="visible-sm-block">visible only on small devices.</p>

<p class="visible-md-block">visible only on medium devices.</p>

<p class="visible-lg-block">visible only on large devices.</p>

Hidden

Class Description.hidden-xs Hide the elements only on extra small devices having screen width

less than768px. Visible on others.

.hidden-sm Hide the elements only on small devices having screen width greater than or equal to 768px (i.e. ≥768px) but less than 992px. Visible on others.

.hidden-md Hide the elements only on medium devices having screen width greater than or equal to 992px (i.e. ≥992px) but less than 1200px. Visible on others.

.hidden-lg Hide the elements only on large devices having screen width greater than or equal to 1200px (i.e. ≥1200px). Visible on others.

Hidden example

<p class="hidden-xs">hidden only on extra small devices.</p>

<p class="hidden-sm">hidden only on small devices.</p>

<p class="hidden-md">hidden only on medium devices.</p>

<p class="hidden-lg">hidden only on large devices.</p>

<p class="text-left">Left aligned text.</p>

<p class="text-center">Center aligned text.</p>

<p class="text-right">Right aligned text.</p>

<p class="text-justify">Lorem ipsum dolor sit amet.</p>

<P> examples This is bold text

This is big textThis is computer codeThis is emphasized textThis is italic textThis is highlighted textThis is small textThis is strongly emphasized textThis is subscript and superscript

This text is inserted to the documentThis text is deleted from the document

<p><b>This is bold text</b></p> <p><big>This is big text</big></p> <p><code>This is computer code</code></p> <p><em>This is emphasized text</em></p> <p><i>This is italic text</i></p> <p><mark>This is highlighted text</mark></p> <p><small>This is small text</small></p> <p><strong>This is strongly emphasized text</strong></p> <p>This is <sub>subscript</sub> and <sup>superscript</sup></p> <p><ins>This text is inserted to the document</ins></p> <p><del>This text is deleted from the document</del></p>

<p class="text-lowercase">The quick brown.</p><p class="text-uppercase">The quick brown.</p><p class="text-capitalize">The quick brown.</p>

text-lowercase.TEXT-UPPERCASE.Text-Capitalize.

<p class="text-muted">text-muted.</p>

<p class="text-primary">text-primary.</p>

<p class="text-success">text-success.</p>

<p class="text-warning">text-warning.</p>

<p class="text-danger">text-danger.</p>

text-muted.text-primary.text-success.text-info.text-warning.text-danger.

Blockquote

<blockquote> <p>The world is a don't do anything about it.</p> <small>by <cite>Albert Einstein</cite></small></blockquote>

<blockquote class="pull-right"> <p>The world is don't do anything about it.</p> <small>by <cite>Albert Einstein</cite></small></blockquote>

<Table><table class="table"> <thead> <tr> <th>Row</th> <th>First Name</th> <th>Last Name</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>John</td> <td>Carter</td> <td>johncarter@mail.com</td> </tr> <tr> <td>2</td> <td>Peter</td> <td>Parker</td> <td>peterparker@mail.com</td> </tr> <tr> <td>3</td> <td>John</td> <td>Rambo</td> <td>johnrambo@mail.com</td> </tr> </tbody></table>

<Table>

To Allow modify table in mobile when needed

<table class="table">…………………..

glyphicon

list-group<div class="list-group">

</div>

list-group

<div class="list-group"> <a href="#" class="list-group-item"> <h4 class="list-group-item-heading">What is HTML?</h4> <p class="list-group-item-text">HTML stands ……pages.</p> </a> <a href="#" class="list-group-item active"> <h4 class="list-group-item-heading">What is Bootstrap?</h4> <p class="list-group-item-text">Bootstrap is ……design template.</p> </a> <a href="#" class="list-group-item"> <h4 class="list-group-item-heading">What is CSS?</h4> <p class="list-group-item-text">CSS stands for ……….as colors, backgrounds, fonts etc.</p> </a></div>

<span class="glyphicon glyphicon-camera"></span> Pictures <span class="badge">25</span>

<span class="glyphicon glyphicon-file"></span> Documents <span class="badge">145</span>

<span class="glyphicon glyphicon-music"></span> Music <span class="badge">50</span>

<span class="glyphicon glyphicon-film"></span> Videos <span class="badge">8</span>

</div>

Form Layout

Vertical Form (default form layout)

Horizontal Form

Inline Form

Vertical

Horizontal

inline

<label for="inputEmail">Email</label>

</div>

<label for="inputPassword">Password</label>

</div>

<label><input type="checkbox"> Remember me</label>

</div>

<button type="submit" class="btn btn-primary">Login</button>

</form>

.input-lg vs .input-sm

.input-lg, .input-sm can be used both on <input> and <select> boxes to create it's larger or smaller sizes.

<form>

</div>

<option>Larger select</option>

</select>

</div>

</form>

input-group-addon

</div>

</div>

</span>

</div>

=====================================

</div>

=====================================

</div>

.input-group-btnuse .input-group-btn to wrap the buttons beside otherform elements, ie button beside textbox.

</span>

</div>

============================================

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

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

</span>

.has-success vs .has-warning vs . has-error

<label >Username</label>

<span class="help-block">Username is available</span>

</div>

<div class="form-group has-success"> <label class="col-xs-2 control-label" for="inputSuccess">Username</label>

<span class="help-block">Username is available</span>

</div>

<div class="form-group has-warning"> <label class="col-xs-2 control-label" for="inputWarning">Password</label>

<span class="help-block">Password strength: Weak</span>

</div>

<div class="form-group has-error"> <label class="col-xs-2 control-label" for="inputError">Email</label>

<span class="help-block">Please enter a valid email address</span>

</div>

</form>

Buttons

<button type="button" class="btn btn-default">Default</button><button type="button" class="btn btn-primary">Primary</button><button type="button" class="btn btn-info">Info</button><button type="button" class="btn btn-success">Success</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>

btn-lg vs btn-sm vs btn-xs<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>

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

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

<button type="button" class="btn btn-primary btn-sm">Small button</button>

<button type="button" class="btn btn-default btn-sm">Small button</button>

<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>

Search</button>

Search</button>

btn-default vs btn-primary

<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> Action <span class="caret"></span> </button>

<li><a href="#">Action</a></li>

<li><a href="#">Another action</a></li>

<li><a href="#">Separated link</a></li>

</div>

Split Button Dropdowns

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

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

class="caret"></span></button>

<li><a href="#">Action</a></li>

<li><a href="#">Another action</a></li>

<li><a href="#">Separated link</a></li>

</div>

.btn-block

Fill the full width of the parent elements

<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>

.btn-group

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

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

</div>

Convert the buttons inside the div to a toolbar

.btn-group .btn-group-justified

.btn-group-justified allow the btn-group to fill the parent areamust used with <a> tag only.

<div class="btn-group btn-group-justified"> <a href="#" class="btn btn-primary">Left</a> <a href="#" class="btn btn-primary">Middle</a> <a href="#" class="btn btn-primary">Right</a></div>

.btn-toolbar<div class="btn-toolbar">

</div>

Compine more than one btn-group in one row

<h1>Bootstrap heading <span class="label label-default">New</span></h1>

<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>

Styling Images

data-toggle

data-toggle="modal"

data-toggle="collapse"

data-toggle="dropdown"

data-toggle="tab"

nav nav-tabs

<li><a href="#">Profile</a></li>

<li><a href="#">Messages</a></li>

<a href="#" data-toggle="dropdown" class="dropdown-toggle"> Messages <b class="caret"></b></a>

<li><a href="#">Inbox</a></li>

<li><a href="#">Drafts</a></li>

<li><a href="#">Sent Items</a></li>

<li><a href="#">Trash</a></li>

nav nav-pills

<li class="active"><a href="#">Messages <span class="badge">24</span></a></li>

<li><a href="#">Notification <span class="badge">5</span></a></li>

<a href="#" data-toggle="dropdown" class="dropdown-toggle"> Messages <b class="caret"></b></a>

<li><a href="#">Drafts</a></li>

<li><a href="#">Sent Items</a></li>

nav nav-pills nav-stacked

navbar navbar-default

</div>

</div>

</nav>

</button>

</div>

<li><a href="#">Login</a></li>

</div>

</nav>

</div>

</div>

<a data-toggle="dropdown" class="dropdown-toggle" href="#"> Messages <b

class="caret"></b></a>

</div>

</nav>

Fixed vs Static <nav role="navigation" class="navbar navbar-default navbar-fixed-top">

Fixed (menu float)static

inverse

<div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title">Header</h3> </div> <div class="panel-body">Body</div></div>

panel-group<div id="accordion" class="panel-group">

<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> Title </a>

</div>

<p>HTML stands for HyperText Markup ………</p>

</div>

<div class="panel-body"> This page is temporarily disabled by the site administrator for some reason. </div>

<a href="#" class="btn btn-primary">Learn More</a>

</div>

breadcrumb

<li><a href="#">Products</a></li>

<li class="active">Accessories</li>

Pagination

Pagination

<li><a href="#">Previous</a></li>

<li class="previous"><a href="#">← Previous</a></li>

progress

</div>

Backgrounds Color

<p class="bg-primary">Important.</p>

<p class="bg-success">Success.</p>

<p class="bg-warning">Warning.</p>

<p class="bg-danger">Error.</p>

.alert-warning

.alert-error

.alert-success

.alert-info

<strong>Warning!</strong> There was a problem with your network connection.

</div>

Modal <a data-target="#myModal" class="btn btn-lg btn-primary" data-toggle="modal">Launch Demo Modal</a>

………………..

</div>

………………..

</div>

………………..

</div>

modal-header

<h4 class="modal-title">Confirmation</h4>

</div>

modal-body

<p>Do you want to save changes you made to document before closing?</p>

<p class="text-warning"><small>If you don't save, your changes will be

lost.</small></p>

</div>

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>

Close Modal

data-dismiss="modal"

<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

Call Modal<script type="text/javascript">

$(document).ready(function(){

$(".btn").click(function(){

$("#myModal").modal('show');

</script>

<a href="#myModal" role="button" class="btn btn-large" data-toggle="modal"> Launch Demo Modal </a>

Bootstarp 3

Design

Volume 9 Tab 3 - Eaton€¦ · Volume 9—OEM—Original Equipment Manufacturer CA08100011E—April 2013 V9-T3-5 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 Logic

Re ection Handbook - Florida State University · ’(")&+&,$-.$/)012&3& 3& 3& 3& 3& 3& 3& 3& 3& 3& 3& 4&,$-.$/)01&506$.+& 3& 3& 3& 3& 3& 3& 3& 3& 3& 3& 3& 4& ’(")&+&78$-.$/)*012&3&

SHEETROCK® · Sheetrock® Taping Filling Finishing Skimming Level 5 Sanding Shrinkage Adhesive Durabond 3 3 3 3 3 3 3 3 Easy Sand 3 3 3 3 3 3 3 3 Taping 3 3 3 Topping 3 3 3 3 3 3

3.1 IEC Contactors and Starters - Farnell element14 Volume 10—Enclosed Control CA08100012E—June 2015 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3.1 IEC Contactors

REYNAERS HANDLES · cylinder lock (ref. AA) Also available with built-in cylinder lock (ref. BB) A 3 3 3 3 3 3 A 3 3 3 3 3 3 B 3 3 3 3 3 BB 3 3 3 3 3 3 3 3 3 BB 3 3 3 3 3 BB 3 3 3

[XLS]fba.flmusiced.org · Web view1 1 1 1 1 1 1 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3

Construction Engineering and Inspection - NCDOT Design... · 5016 $3,036,219.71 7/30/2012 7/30/2012 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 B-5014C $1,839,513.00 8/27/2012 8/27/2012

Shoreline Habitat - British Columbia3 (((((3( 3 (( (/ / (3 / / ((3 ( 3 ((/ / / (/ 3 / 3 / / / 3 / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / 3 // 3

Farnell - Volume 8 Tab 3 · 2017. 6. 12. · V8-T3-2 Volume 8—Sensing Solutions CA08100010E—July 2015 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3.0 Inductive

ONE MILLION ROSARIES FOR - Michaelone million rosaries for unborn babies 3 -. ,% 3 3 ) ./, 3 ) 3 , /) 3 5 -'/.!'3 /. )'3%"( )3+!+'!1%'' +, 3 .'! -.)! *- ,3 3 -

92 I 12 6 3 3 3 3 3 3 2 3 3 3 2 3 3 3 3 3 2 3 2 2 2 o 2 ... · 92 I 12 6 3 3 3 3 3 3 2 3 3 3 2 3 3 3 3 3 2 3 2 2 2 o 2 234 678 346 678 234 678 678 234 678 678 234 234 678 234 678

Joie de Vivre - TR Marching · Joie de Vivre solo 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 Bass Guitar 3 3 3 3 3 3 3 3 2 players if 4 mallet not available ride cym (optional drum

Panelboards and Lighting Control · 2020-01-27 · V2-T3-2 Volume 2—Commercial Distribution CA08100003E—April 2019 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3

Corel Ventura - 7746-01€¦ · ˛* ˇ ˆ = - ˇ ˇ23 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 & ˇ 3 3 3 3 3 3 3

Punjab Technical Education Board (Details of trainees · XLS file · Web view3 80 68 49 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3

Seen at Ideal Tools. · PDF fileMetal construction 3 3 3, 3 3, 3 3 3 , 3 3 3 3 3 3 3 3 3 3 3 3 3, 3 3, 3 3 ... (mobile homes , caravans, boats) 1 ... FastFix angle attachment, FastFix

K148 DE EN FR IT 08 2010 - feuer-fuchs.de · 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 = @ > ; , > ; ? 3 3 3 3 3 3 3 3 3 ^ ! $ # " % $ $ '

BabaYetu - HAFABRA Music · 2016-11-15 · ª ª ª ∀∀ ∀ ∀ ∀ ∀ ∀ ∀ ∀∀ ∀∀ ∀∀ ∀ ∀ ∀ ∀ α ∀ ∀∀ ∀ α 3 3 3 3 3 3 3 3 3 3 3 3 3 3 33 3 3 3 3

Score LAMIABANDASUONAILROCK - Scuola Dame Inglesi · Υ > ª ª ∀ ∀ ∀ ∀ ∀ ∀ ∀ ∀ 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 Voice Guitar Glockenspiel StringsI StringsII

lloydslistawards-meis.com Lloyd’s List · • Sharaf Shipping Agency • Shipping Corporation of India. 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 Matrix Of Who Should Enter Each