bootstrap 3 training

Developer

Bootstrap frameworkBootstrap framework

front-end framework for developing responsivehttp://getbootstrap.com/

Latest version v3.1.1

Presented by : vison sunon

Developer

Getting startedBootstrap source code

bootstrap/├── css/│ ├── bootstrap.css│ ├── bootstrap.min.css│ ├── bootstrap-theme.css│ └── bootstrap-theme.min.css├── js/│ ├── bootstrap.js│ └── bootstrap.min.js└── fonts/ ├── glyphicons-halflings-regular.eot ├── glyphicons-halflings-regular.svg ├── glyphicons-halflings-regular.ttf └── glyphicons-halflings-regular.woff

-----------------------------------------------------bootstrap/├── less/├── js/├── fonts/├── dist/│ ├── css/│ ├── js/│ └── fonts/└── docs/ └── examples/

<!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.11.0/jquery.min.js"></script>

 <script src="js/bootstrap.min.js"></script> </body></html>

Developer

CDN<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">

<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

Developer

Browser and device supportChrome Firefox

Internet Explorer

Opera Safari

Android SupportedNot Supported

N/A

Not Supported

N/A

iOS Supported N/ANot Supported

Supported

Mac OS X Supported Supported Supported Supported

Windows Supported Supported Supported SupportedNot Supported

Developer

How to use• CSS• Components• Javascript• Customize

Developer

CSSOverview

<!DOCTYPE html><html lang="en"> ...</html>

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

- disable zooming

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Containers----------------------------------------------------<div class="container"> ...</div>

oGrid systemoTypographyoCodeoTablesoFormsoButtonsoImagesoHelper classesoResponsive utilitiesoUsing LessoUsing Sass

Developer

Grid system

Introduction

12 columns

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.

Extra small devices Phones (<768px)

Small devices Tablets (≥768px)

Medium devices Desktops (≥992px)

Large devices Desktops (≥1200px)

Grid behavior

Horizontal at all times

Collapsed to start, horizontal above breakpoints

Container width

None (auto) 750px 970px 1170px

Class prefix .col-xs- .col-sm- .col-md- .col-lg-

# of columns

12

Column width

Auto 60px 78px 95px

Gutter width 30px (15px on each side of a column)

Nestable Yes

Offsets Yes

Column ordering

Yes

Developer

Grid Example

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

<div class="container-fluid"> <div class="row"> ... </div></div>

<div class="container"> <div class="row"> <div class="col-md-8 col-sm-6 col-xs-6 ">.col-md-8</div> <div class="col-md-4 col-sm-6 col-xs-6">.col-md-4</div> </div></div>

.col-md-8 .col-md-4

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

Example: Mobile, tablet, desktop

<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 class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div></div>

. col-xs-12 .col-sm-6 .col-md-8 . col-xs-6 .col-md-4

Developer

Grid Offsetting columns.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

<div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div></div>

. col-md-4 .col-md-offset-4

.col-md-4

Move columns to the right using .col-md-offset-* classes

<div class="row"> <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div> <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div></div>

.col-md-3 .col-md-offset-3

.col-md-3 .col-md-offset-3

Developer

Grid Nesting columns.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

<div class="row"> <div class="col-md-9"> Level 1: .col-md-9 <div class="row"> <div class="col-md-6"> Level 2: .col-md-6 </div> <div class="col-md-6"> Level 2: .col-md-6 </div> </div> </div></div>

To nest your content with the default grid, add a new .row and set of .col-md-* columns within an existing .col-md-* column. Nested rows should include a set of columns that add up to 12 or less.

.col-md-6 .col-md-6

.col-md-9

Developer

Grid Responsive column resets

With the four tiers of grids available you're bound to run into issues where, at certain breakpoints, your columns don't clear quite right as one is taller than the other. To fix that, use a combination of a .clearfix and our responsive utility classes.

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

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

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

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

.col-xs-6 .col-sm-3

Resize your viewport or

check it out on your phone for

an example.

.col-xs-6 .col-sm-3

.col-xs-6 .col-sm-3

.col-xs-6 .col-sm-3

Developer

Media queries/* Large desktops and laptops */@media (min-width: 1200px) {

}

/* Portrait tablets and medium desktops */@media (min-width: 992px) and (max-width: 1199px) {

}

/* Portrait tablets and small desktops */@media (min-width: 768px) and (max-width: 991px) {

}

/* Landscape phones and portrait tablets */@media (max-width: 767px) {

}

/* Landscape phones and smaller */@media (max-width: 480px) {

}

/* Extra Small */@media(max-width:767px){}

/* Small */@media(min-width:768px) and (max-width:991px){}

/* Medium */@media(min-width:992px) and (max-width:1199px){}

/* Large */@media(min-width:1200px){}

Developer

Other

oTypographyoCodeoTablesoFormsoButtonsoImagesoHelper classesoResponsive utilitiesoUsing LessoUsing Sass

Developer

Helper classes• Contextual colors• Contextual backgrounds• Close icon• Carets• Quick floats• Center content blocks• Clearfix• Showing and hiding content• Screen reader content• Image replacement

Developer

Responsive utilities

Extra small devices Phones (<768px)

Small devices Tablets (≥768px)

Medium devices Desktops (≥992px)

Large devices Desktops (≥1200px)

.visible-xs Visible Hidden Hidden Hidden

.visible-sm Hidden Visible Hidden Hidden

.visible-md Hidden Hidden Visible Hidden

.visible-lg Hidden Hidden Hidden Visible

.hidden-xs Hidden Visible Visible Visible

.hidden-sm Visible Hidden Visible Visible

.hidden-md Visible Visible Hidden Visible

.hidden-lg Visible Visible Visible Hidden

Available classes

Class Browser Print

.visible-print Hidden Visible

.hidden-print Visible Hidden

Print classes

Developer

LESS CSS

LESS CSS เป็�นการเขียน CSS ที่ เรยกว่�า CSS Preprocessors หมายถึ�งต้�องมการ Process ก�อนถึ�งจะใช้�งานได้�

LESS CSS จะช้�ว่ยน�าเที่คน คในภาษา Programming เขี�ามาร�ว่มในการเขียน CSS ซึ่� งจะที่�าให�โค�ด้ที่ เราเขียนเป็�นระเบียบี และน�ามาใช้�ใหม�ได้�ง�ายขี�(น

1 . การก�าหนด้ต้)ว่แป็ร (Variables)2. การก�าหนด้ Property (Mixins)3. การเขียน Selector แบีบีเป็�นช้)(น ๆ (Nested Rules)4. การแก�ไขีค�าด้�ว่ยการบีว่กลบีค+ณหาร (Functions &

Operations)

Developer

LESS variable

@maincolor: #7d2717;

#header { color: @maincolor; } h2 { color: @maincolor; } footer h3 { color: @maincolor; }

#header { color: #7d2717; } h2 { color: #7d2717; } footer h3 { color: #7d2717; }

LESS

Out put

Developer

.bordered { border-top: dotted 1px black; border-bottom: solid 2px black;}

.box{ . bordered ; }

Developer

Components• Glyphicons• Dropdowns• Button groups• Button dropdowns• Input groups• Navs• Navbar• Breadcrumbs• Pagination• Labels• Badges• Jumbotron• Page header• Thumbnails• Alerts• Progress bars• Media object• List group• Panels• Wells

Developer

Javascript• Overview• Transitions• Modal• Dropdown• Scrollspy• Tab• Tooltip• Popover• Alert• Button• Collapse• Carousel• Affix

Developer

Customize and download• Common CSS• Components• JavaScript components• Utilities• jQuery plugins

Developer

10 Best Responsive

HTML5 Boilerplatehttp://html5boilerplate.com/

foundationhttp://foundation.zurb.com/

Skeletonhttp://www.getskeleton.com/

HTML KickStarthttp://www.99lime.com

Montage HTML5 Frameworkhttp://montagestudio.com

SproutCorehttp://sproutcore.com/

Zebrahttp://zebra.gravitysoft.org/

bootstraphttp://getbootstrap.com

CreateJShttp://createjs.com /

Less Frameworkhttp://lessframework.com/

21 3 4 5

6 7 8 9 10

bootstrap 3 training

Design