Download presentation
Presentation is loading. Please wait.
1
Twitter Bootstrap Grid System
Twitter Bootstrap Grid System Medhat Elmasry
2
Bootstrap 3.3.x Mobile 1st framework for building responsive websites
Download from Copy css, fonts, and js folders into your web directory Bootstrap's JavaScript requires jQuery version or higher.
3
css folder files bootstrap.css bootstrap.min.css bootstrap-theme.css
bootstrap-theme.min.css
4
font folder files use of font files instead of flat images to showcase various image icons. This has a couple of advantages: Consumes less bandwidth, speeds up the website The font icons are responsive and resizable Font icons are called Glyphicons
5
js folder files bootstrap.js bootstrap.min.js
These files contains bootstrap’s main JavaScript libraries for things like: carousels drop down menus search auto suggest +…. many other powerful JavaScript functionalities
6
http://www.asp.net/ajax/cdn Bootstrap CDN
CDN == Content Delivery Network <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href=" <!-- Optional theme --> <link rel="stylesheet" href=" <!-- Latest compiled and minified JavaScript --> <script src="
7
Twitter Bootstrap grid system.
8
Grid Sizes Category Code Width For Extra Small xs <768px Phones
Small Devices Medium md >=992px Desktops Large lg >=1200px Large Desktops
9
Three equal columns The following example shows how to get three equal-width columns starting at tablets <div class="row"> <div class="col-sm-4">.col-sm-4</div> </div> .col-sm-4
10
Bootstrap Grid System Bootstrap's grid system allows up to 12 columns across the page. If you do not want to use all 12 column individually, you can group the columns together to create wider columns: span 1 span 4 span 4 span 8 span 6 span 12
11
Start with this <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Bootstrap 3.0 Grid System</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> <style> .col-xs-12 { height: 100px; background-color: blue; color: white; text-align: center; border: 2px solid black; } </style> </head> <body> <div class="container"> <div class="row"> </div> </body> </html>
12
Grid classes .container or container-fluid .row .col-##-##
wrapper for all your rows Also centers row and prevents it from being full screen. .row contains all your column classes .col-##-## the sizes of the columns in your row (xs, sm, md, lg) See: 1 to 9 **** .html
13
Ordering classes Only for md and lg screens .col-##-push-##
Pushes your columns .com-##-pull-## Pulls your columns See: 10-push-pull.html
14
Offset classes Only for md and lg screens .col-##-offset-##
Moves your columns depending on what column is offset by See: 11-offset.html
15
Responsive Utilities .visible-xs .hidden-xs .visible-sm .hidden-sm
.visible-md .hidden-md .visible-lg .hidden-lg
16
Responsive utility classes
Hide and show content on your screen depending on which your device style is for. .visible-## Your contents will only be visible on that screen size .hidden-## Your contents will only be hidden on that screen size See: 12-visible.html & 13-hidden.html
17
Styling tables See: 14-table.html
<table class="table table-condensed table-striped table-hover"> <caption>Months of the year</caption> <thead> <tr> <th>Month</th> <th>Days</th> </tr> </thead> <tbody> <tr class="danger"> <td>January</td> <td>31</td> <tr class="active"> <td>February</td> <td>28<span class="text-danger">*</span></td> <tr class="success"> <td>March</td> See: 14-table.html
18
Buttons To use a button, simply write class="btn btn-default".
Can use <button> tag or <a> tag: <button type="button" class="btn btn-default">Button Text</button> <a href="..." class="btn btn-default">Button Text</a> Other button classes are: .btn-primary, .btn-success, .btn-info, .btn-warning, .btn-danger, and .btn-link Button sizes can be defined with the following classes: .btn-lg (large button), .btn-sm (small button), and .btn-xs (extra small button). 21-icon button.html
19
Styling buttons <div class="container"> <div class="row"> <div class="col-md-8 text-center"> <br /> <div class="btn-group"> <input class="btn" type="submit" value="Save" /> <button class="btn btn-danger">Delete</button> <a href="#" class="btn btn-primary">Update</a> </div> <div class="col-md-4"> See: 15-buttons.html
20
Button Classes Class Description .btn Adds basic styling to any button
.btn-default Indicates a default/standard button .btn-primary Provides extra weight and identifies primary action in set of buttons .btn-success Indicates a successful or positive action .btn-info Contextual button for informational alert messages .btn-warning Indicates caution should be taken with this action .btn-danger Indicates a dangerous or potentially negative action .btn-link Makes a button look like a link (will still have button behavior) .btn-lg Makes a large button .btn-sm Makes a small button .btn-xs Makes an extra small button .btn-block Makes a block-level button (spans th full width of the parent element) .active Makes the button appear pressed .disabled Makes the button disabled
21
See: 16-modal-dialog.html
22
Menu System See: 17-menu.html
23
Typography Classes Class Description .lead Makes a paragraph stand out
.small smaller text (set to 85% of the size of the parent) .text-left left-aligned text .text-center center-aligned text .text-right right-aligned text .text-justify justified text .text-nowrap no wrap text .text-lowercase lowercased text .text-uppercase uppercased text .text-capitalize capitalized text .initialism Displays text inside the <abbr> element in a slightly smaller font size .blockquote-reverse a blockquote with right-aligned content .list-unstyled Removes the default list-style and left margin on list items (works on both <ul> and <ol>). .list-inline Places all list items on a single line
24
Bootstrap Form Layouts
Bootstrap provides three types of form layouts: Vertical form (this is default) Horizontal form Inline form Standard rules for all the three types of form layout: Add role="form" to the <form> element Wrap labels and form controls in a <div> element with class="form-group" (needed for optimum spacing) Add class="form-control" to all textual <input>, <textarea>, and <select> elements 19-FormLayouts.html
25
Jumbotron A Jumbotron indicates a big box for calling extra attention to special content A Jumbotron is displayed as a grey box with rounded corners and enlarged text inside it. 20-jumbotron.html <div class="container"> <div class="jumbotron"> <h1>My first Bootstrap website!</h1> <p>This page will grow as we add more and more stuff to it.</p> </div>
26
<img> classes Example:
Description .img-rounded Adds rounded corners to an image (not available in IE8) .img-circle Shapes the image to a circle (not available in IE8) .img-thumbnail Shapes the image to a thumbnail .img-responsive Makes an image responsive (will scale nicely to the parent element) Example: <img src="cinqueterre.jpg" class="img-responsive" alt="Cinque Terre">
27
Bootstrap Themes http://bootswatch.com/ Name CDN Cerulean
Cosmo Cyborg Darkly Flatly Journal Lumen Readable Slate Superhero United
Similar presentations
![>> Introduction to HTML: Tables. HTML is used to give websites structure 5 Basic Tags Element = Start-Tag+Content+End-Tag Heading Tags [h1-h6] Paragraph.](/24/7400148/big_thumb.jpg ">> Introduction to HTML: Tables. HTML is used to give websites structure 5 Basic Tags Element = Start-Tag+Content+End-Tag Heading Tags [h1-h6] Paragraph.>")
