bootstrap 3 training
DESCRIPTION
สอนการใช้ bootstrap 3 framework - CSS - Components - Javascript เหมาะสำหรับ programmer , designerTRANSCRIPT
![Page 1: Bootstrap 3 training](https://reader036.vdocuments.site/reader036/viewer/2022062405/554f827bb4c9052a518b4d75/html5/thumbnails/1.jpg)
Developer
Bootstrap frameworkBootstrap framework
front-end framework for developing responsivehttp://getbootstrap.com/
Latest version v3.1.1
Presented by : vison sunon
![Page 2: Bootstrap 3 training](https://reader036.vdocuments.site/reader036/viewer/2022062405/554f827bb4c9052a518b4d75/html5/thumbnails/2.jpg)
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>
<!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <h1>Hello, world!</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js"></script> </body></html>
![Page 3: Bootstrap 3 training](https://reader036.vdocuments.site/reader036/viewer/2022062405/554f827bb4c9052a518b4d75/html5/thumbnails/3.jpg)
Developer
CDN<!-- Latest compiled and minified CSS --><link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<!-- Optional theme --><link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript --><script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
![Page 4: Bootstrap 3 training](https://reader036.vdocuments.site/reader036/viewer/2022062405/554f827bb4c9052a518b4d75/html5/thumbnails/4.jpg)
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
![Page 5: Bootstrap 3 training](https://reader036.vdocuments.site/reader036/viewer/2022062405/554f827bb4c9052a518b4d75/html5/thumbnails/5.jpg)
Developer
How to use• CSS• Components• Javascript• Customize
![Page 6: Bootstrap 3 training](https://reader036.vdocuments.site/reader036/viewer/2022062405/554f827bb4c9052a518b4d75/html5/thumbnails/6.jpg)
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
![Page 7: Bootstrap 3 training](https://reader036.vdocuments.site/reader036/viewer/2022062405/554f827bb4c9052a518b4d75/html5/thumbnails/7.jpg)
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
![Page 8: Bootstrap 3 training](https://reader036.vdocuments.site/reader036/viewer/2022062405/554f827bb4c9052a518b4d75/html5/thumbnails/8.jpg)
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
![Page 9: Bootstrap 3 training](https://reader036.vdocuments.site/reader036/viewer/2022062405/554f827bb4c9052a518b4d75/html5/thumbnails/9.jpg)
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
![Page 10: Bootstrap 3 training](https://reader036.vdocuments.site/reader036/viewer/2022062405/554f827bb4c9052a518b4d75/html5/thumbnails/10.jpg)
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
![Page 11: Bootstrap 3 training](https://reader036.vdocuments.site/reader036/viewer/2022062405/554f827bb4c9052a518b4d75/html5/thumbnails/11.jpg)
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>
<!-- Add the extra clearfix for only the required viewport --> <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
![Page 12: Bootstrap 3 training](https://reader036.vdocuments.site/reader036/viewer/2022062405/554f827bb4c9052a518b4d75/html5/thumbnails/12.jpg)
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){}
![Page 13: Bootstrap 3 training](https://reader036.vdocuments.site/reader036/viewer/2022062405/554f827bb4c9052a518b4d75/html5/thumbnails/13.jpg)
Developer
Other
oTypographyoCodeoTablesoFormsoButtonsoImagesoHelper classesoResponsive utilitiesoUsing LessoUsing Sass
![Page 14: Bootstrap 3 training](https://reader036.vdocuments.site/reader036/viewer/2022062405/554f827bb4c9052a518b4d75/html5/thumbnails/14.jpg)
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
![Page 15: Bootstrap 3 training](https://reader036.vdocuments.site/reader036/viewer/2022062405/554f827bb4c9052a518b4d75/html5/thumbnails/15.jpg)
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
![Page 16: Bootstrap 3 training](https://reader036.vdocuments.site/reader036/viewer/2022062405/554f827bb4c9052a518b4d75/html5/thumbnails/16.jpg)
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)
![Page 17: Bootstrap 3 training](https://reader036.vdocuments.site/reader036/viewer/2022062405/554f827bb4c9052a518b4d75/html5/thumbnails/17.jpg)
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
![Page 18: Bootstrap 3 training](https://reader036.vdocuments.site/reader036/viewer/2022062405/554f827bb4c9052a518b4d75/html5/thumbnails/18.jpg)
Developer
.bordered { border-top: dotted 1px black; border-bottom: solid 2px black;}
.box{ . bordered ; }
![Page 19: Bootstrap 3 training](https://reader036.vdocuments.site/reader036/viewer/2022062405/554f827bb4c9052a518b4d75/html5/thumbnails/19.jpg)
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
![Page 20: Bootstrap 3 training](https://reader036.vdocuments.site/reader036/viewer/2022062405/554f827bb4c9052a518b4d75/html5/thumbnails/20.jpg)
Developer
Javascript• Overview• Transitions• Modal• Dropdown• Scrollspy• Tab• Tooltip• Popover• Alert• Button• Collapse• Carousel• Affix
![Page 21: Bootstrap 3 training](https://reader036.vdocuments.site/reader036/viewer/2022062405/554f827bb4c9052a518b4d75/html5/thumbnails/21.jpg)
Developer
Customize and download• Common CSS• Components• JavaScript components• Utilities• jQuery plugins
![Page 22: Bootstrap 3 training](https://reader036.vdocuments.site/reader036/viewer/2022062405/554f827bb4c9052a518b4d75/html5/thumbnails/22.jpg)
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