Bootstrap3 141102072431 Conversion Gate02
Uploaded by
chaguiBootstrap3 141102072431 Conversion Gate02
Uploaded by
chagui: .
:
[email protected], [email protected]
www.2nees.com :
.. ..
.. ,
.. .
, , , ,
,boostrap3 ,
, framework
.. .. 10/12/2014
.. ..
.. .. ..
[email protected] /
(1
(2
(3
(4
Html
Css
Js
.. jQuery
.. ...
..jQuery click
.. on
..
.. framework
SASS .. LESS
bootstrap .. css
SASS compilation ... css
..
2nees.com/courses
bootstrap framework
Mark Otto Jacob Thornton ,
framework ,
2011 GitHup
open source 3 2014
..
framework
, ,
, ..
..mobile first framework
framework ...
[email protected] /
Framework ..
.. Front-end framework ..
front-end
, ..
bootstrap
html, css
...text, forms, buttons
.
(1
(2
(3
bootstrap3 framework
.. mobile-first
mobile ...
bootstrap3 ,
) ..
..
..
.. ^_^(.
, html, css, js
.. bootstrap
.. ^_* .bootstrap
[email protected] /
(4
:Responsive Web Design
.. .. tablet,
.*_^ mobile, normal screen
bootstrap
responsive ..
^_*.
..
.. responsive
[email protected] /
bootstrap
:
:Scaffolding (1
..
..
.. ..
.. grid system,
responsive design, contains layout, Fluid Grid
:Base Css (2
, , .. btn
[email protected] /
:components (3
navbar,
.. dropdowns.
:Js plugIn (4
.. .. ..
:Customize (5 .
bootstrap ..
basic page .. ..
bootstrap )
bootstrap
.(bootstrap3
http://getbootstrap.com/getting-started/ :
:
bootstrap
.. CDN
:CDN CDN
.. Content Delivery Network
..
bootstrap cashe ..
..
...
[email protected] /
.. bootstrap
.. ..
html index
root folder ..
..
.. basic template
.. index.html ..
... Bootstrap
[email protected] /
template:
(1 > <!doctype html
.. css html
.. html5
(2
bootstrap *_^ mobile-first
..
.. .. meta tag
[email protected] /
meta tag zooming
mobile ..
override ..
zoom
... user-scalable=no :
(3
meta tag
bootstrap IE
[email protected] /
bootstrap ie
..
(4
.. hack condition
...Respond.js
(5
.. jQuery ..bootstrap
.. ..*_^ ...
: .. ..
.. html .. bootstrap ^_*
[email protected] /
..
... .. .. css
.. .. ..
.. .. wrapper wrapper
bootstrap container container-fluid
.. 2 classes :
..
.. Container responsive fixed-..
.. width .. px1170
.. ; margin:0 auto
*_^ ...css
container-fluid ..
.. padding ..
^_^ ...
.. container container-fluid
.. ..Grid System
.. ..
..
bootstrap *_^ ..
Grid system
.. Bootstrap grid system
:Grid system / /
..
[email protected] /
grid system 960 Grid system
Grid system ..
.. ^_*
.. ..
..
.. grid system
.. ..
width .. ..
block 8 4 + )..
12 (
6 6 + = 12 .. ....
.. grid system
).. ( ..
*( : *_^..
[email protected] /
.. bootstrap Grid System Grid
bootstrap 12colmn
.. bootstrap
responsive .. mobile first
grid responsive
.. bootstrap
responsive *_^ ..
*_^ bootstrap Grid system
) :
^_*(
[email protected] /
(1
(2
(3
(4
grid container
container-fluid
.. container-fluid
full-width container
fixed-width .. grid
*_^..
..
..
.row .col-xs-4 grid .
[email protected] /
(5
(6
(7
(8
/ grid
..
margin ..
bootstrap
12 .. grid
.. 3 ..
..col-xs-4
12 ..
.. ^_*
.. mobile
grid
css class .col-md- ....col-lg-
[email protected] /
(9
bootstrap grid
:xs Extra small devices
grid
.. 768px
.. .. ..
responsive grid
*_^.. 768
:sm Small devices xs
*_^..768px
:md Medium devices xs
.^_^ 992px
:lg Large devices xs
.. 1200px
.. xs responsive
grid .. 768
.. .. sm responsive
.. 768
... .. ..
[email protected] /
.. ^_* ..
.. ^_^ .. :
.. ..
..
.. ..
^_*
.. .. ..
.. ^_*
:
)..^______^.. .. (
[email protected] /
1200px
. .. :
.. .. bootstrap
.. ^_* .. .
grid :
: 12 .. : 2 ... : 4
*_^ 12
..
grid ..
1200 12 .. 768 4
... 2
bootstrap ^_^ ..
.. class ..
^_^ col-xs-2 col-md-4 col-lg-1
^_^
. ^_*
.. .. ..
.. ^_*
.. ..
.. .. .. :
grid 6 .. lg
4 md 2
.*_^ sm
^_*..
) (
.. grid
* .. col-md-offset- *
.. ..
.. col-md-offset-4
4 ..^_^.. md
*_^ ... 992
.. ^_^
.. ..
..
..
..
..
.. .. ..
..
..
.. ..
.. under
..
** .
.. .. .. ^_*
div class
.. visible-xs-block - clearfix
:clearfix
.. clear:both ..css
:visible-xs-block
..
clear fix ...
...
.. md .. under
md .. xs ...
..
..
.. Nesting Column
.. ..
.. 12 ) ..
12 ( .. ..
.. 8 12 ..
.. .. 1170
8 ..
) ..780(8 * 1170/12 .
4 8
.. 780 12 4
....260 = 4 * 780/12
.. ..
.. .. level
Level 1 ..
.. Level 2
.. Nesting Column
: grid ..
.. .. grid ..
..
.. ^_^
.. ^_^.. ^_* ..
.. grid responsive
..
..
2 class:
:.col-md-push-* (1
...
:.col-md-pull-* (2
...
..
*_^..
.. ..
..
...
.. ..
.. .. push
.. pull ..
.. ..
^_*
http://getbootstrap.com/css/
^_^
Typography ..
bootstrap ..
..
(1 :heading h1 .. h6
.. ) :
.. html
(- bootstrap template
(2 :body 14px
> <p margin-bottom 10px
..
.. ..
..
:Inline text elements (3 mark
highlight ..abbr
.. ..
^_* :
..
html ^_^ bootstrap
^_^..table
.. bootstrap
.. *_^ .. class=table :
bootstrap
) (.. Striped
class table-striped
.. table ) : ie-8
css3 )((*_^ nth:child
..
... class table-bordered
) : (..
..
... row hover
..
.. *_^.. -
.. table-hover :
class table- condensed
padding ..
padding ..
.. ^_*
:
bootstrap
,Contextual classes class
..
Contextual classes:
.. ^_^:
.. table ^_*
... *___^ Responsive table
table .. responsive
..
).. responsive grid divs
(..
blocks ).. media
.. ( query .. customize .. scroll
.. .. .. ..
..*_^ Responsive ..
table-responsive
class scroll ..
) : div(:
Forms ,
..
bootstrap ..
bootstrap ..
Form bootstrap
:
(1 input, textarea, and select
.. %100 .. .form-control
(2 label html div wrapper
) ( .form-group.
(3 role="form >.*_^ <form
layout bootstrap 3
:
Vertical (default) form (1
Inline form (2
Horizontal form (3
.. ^_*
Vertical form (default)
Vertical form (default)
.. form inline form
inline .. aligned left
label .. ..html
inline form
form-inline >...<form
*( :
)..768px
^_*(
Inline form code
Inline form result
: .. .sr-only
label .. form class
! ..
label
.. Screen Reader ..
label ^_*
..
.. sr class
*_^ label
.sr-only
.. .. Horizontal From inline
.. vertical label form component
.. ) group(wrapper *_^ ..
form-horizontal >*_^ <from
.. label control-label ..
.. ^_*
label wrapper form
.. component
^_*
/
^_^ ...
.. html
bootstrap form
:
Input (1
textarea (2
checkbox (3
radio (4
Select (5
Others ^_* (6
html tag ^_^..
.. ...
:Input (1 html input
:
text, password, datetime, datetime-local
, date, month, time, week, number, email, url,
search, tel, and color .
.. bootstrap ..
.. form-control ..
) (type input
^_* ... ^_^
:textarea (2 tag
) ( ..
..
.. form-control
.. rows :
:(checkbox & radio) 4 & 3
checkbox radio
..
checkbox ..
radio ..
.. radio checkbox
.. form-control
:
(1
checkbox-inline . radio-inline
box radio .
(2 box radio wrapper
div .. label
(3 disabled ..
.. 2
bootstrap ..
^_^:
.. div class
.. ^_^
^_*
:Select (5 select ..
.. bootstrap select
...
^_^ ...multiple
..
Bootstrap ..
.. html
..
.. 1 .. 5
.. (others) 6
:Others (6 /
..
plan text .. label
.. .. bootstrap ..
class
^_^
( : Static control label
,horizontal
form-control-static ..&_& p tag
..
.. form email ..
) (:
.. .. ^_^ ...
... > .. *_^ <p
^_^
( :form control state bootstrap
..
..^_^ :focus
.. bootstrap / ..
:
:INPUT FOCUS
focus ..
outline *_^.. box-shadow
^_^... outline
:DISABLED INPUTS
..
*_^ ..
:DISABLED FIELDSETS
fieldset tag
^_^..
* : IE
.. js code
.. ie
:VALIDATION STATES
..
..
wrapper
.control-label, .form-control, .help-block
class :
.has-warning, .has-error, or .has-success
.. ^_^
.. ..class
wrapper
^_^ ..
.. ^_^
^_^
Both
Has-warning for text only
Both
Has-warning for label only
wrapper
^_^ ..
:ICONS ..
.. input ..^_^ icons icons
.. has-feedback
.. bootstrap
ico ..
component .. bootstrap
... ..
ico ....
:
^_^..
ico ico ^_^
..
:
..
*_^ Valid state
.. ..
.. ..
.. .. )..
.. (^_^ :P
.. form
..
.. ^_^.. bootstrap
.. :
(1
:height
) (height
class input-lg input-
...sm :
inspect element
(2
:^_^.. width
bootstrap
.. ^_*.. !!.. ..
..^_^ col ....^_^ col-xs-3
) : (
(3
..
.. form-group-lg
form-group-sm ..group ..
.. ..horizontal form
.. label
..
^_^
:
^_^ ... form ..
..^_^ Help text
.. mm-dd-yy
.. ..
.. ..
bootstrap ..
... help-text ^_*
: ..
..
..
.. Inspect element
bootstrap
.. buttons ..
.. ico
).. ... ( form
:button
.. ..
*_^ ..
)..
^_^(
.. buttons
.. .. button ..
.. bootstrap *_^ ..
button
.btn-lg .btn-sm .btn-xs .btn-block
.. bootstrap
.. .. btn-lg
.. btn
.. .. btn-block
btn .. block
width ^_^ ... parent
.. ^_*
.. ^_^ Button State
button state
button
.. bootstrap ) active
css (:active
button state :
ACTIVE State
DISABLED State
(1 Active state
active button ..
.. pseudo-class :active
...
active ) ( ..
button >... <a
:
..
.. hover ..
.. active
:Disabled State (2 disabled
button ..
bootstrap
disabled
...%50
button > .. <a :
button
Disabled attribute > <a
... disabled
.. disabled
(1 bootstrap pointer-events:
none css > <a
..
Ie11 .. opera 18
> <a ^_^..
(2 > <a > <button
> <a .. nav
navbar ..
.. button
.. ...
.. Button ... ^_^ Button tag
.. ^_^ ...
.. button 3
tag .. button
..
tag ..!!
bootstrap
> <button ..
,..
Firefox .. 30
line-height > ..... <input ^_^
^_^ : , html ..
> <button html tag
><button>Value <b>this</b></button
tag ..
.. ..
..^_^ ..
^_^ ...
.. ...
^_^
...
bootstrap ...
responsive ..
.. ..
:
Responsive images (1
Image shapes (2
(1
:Responsive Image
.. bootstrap
... img-responsive
.. ..
...
(2
.I
.II
.III
:Image shapes
.. bootstrap 3 3
:
:img-rounded .
:img-circle ..
:img-thumbnail
).. (..
:
) : : ie-8 ) curve( (..
img-circle
img-thumbnail
img-rounded
helper classes ..
..
:Contextual colors (1
..*_^..
.. .. hover
...^_^ .. :
: Contextual backgrounds(2
..
.. text *..*_^ ... bg-
.. hover ...
:
:Close icon (3 class .. x
alert .. ..
..^_^ close
:
..^_^ .. .. x
close x
;).. ×
.. (HTML
: caret(4
.. .. .
) .. (DropDown menu
... sup menu
:
..
custom class css
) ^_^(..
: Quick floats(5 css .. .. float
float left .. right
.. bootstrap )(
.. flaot: * !important
:
( pull-left navbar-left
( pull-right navbar-right
* .. navbar-
.. component *...pull-
.. .. pull-left ..float: left
.. .. float: right.. hikmat
.. .. ..
*_^...important
:Clearfix (6 ..
div .. clearfix
.. /
.. clear float ..
css ..clear: both
:
..
clearfix
..
...
.. .. ..
clearfix .. ..
.. .. ..
.. ..
clearfix .. ..
..
^_^
: Center content blocks(7
.. block
... block ..
.. .. css
.. block ...margin: 0 auto
bootstrap ^_*
^_^ center-block
) : ..
^_^(
..
center-block .. span
.. span
.. div .. ..set-block-size
.. max-width width
block ^_^ ..
.. bg-info ..
... block
: Showing and hiding content(8
.. ..
.. hide .. 2
.. show .. hidden
show & hidden hide
.. screen reader
.. )(
hidden .. hide ..
important
display .. visibility show
... Display: block !important
.. invisible .
; visibility: hidden
important .. display
**( ... display
visibility css
... 2nees.com
:
Screen reader and keyboard navigation content(9
.. sr-only
screen reader
.. .. ..SR
..
.. sr-only-focusable
)
( , sr-only
) ... sr-only-focusable 2 ( ..
: Image replacement(10
.. text-hide
..
.. ico
^_^ ..
:
.. 0
shadow ...
.. .. .. helper class
... !
..
...
.. ...
.. *_^ ...
.. bootstrap mobile first
.. bootstrap
... ..
.. .. ..
.. ..
.. ..
.. ..
...
.. ..
^_^
*.. visible-*- ) ... (grid
*.. hidden- .. ..
.. ^_^
3.2 ... bootstrap ..
.. classes
.. css .. ..
.. classes display .. block
inline ^_^ .... inline-block
:
..
.. .. ..
.. ..
.. bootstrap class
..
) ).. (:
..
bootstrap
) (
.. ^_^:
..
.. bootstrap ) css
... ^_^ (css
Components
Glyphicons )( ...
..
... .. ..
:
(1 ico ..
ico .. glyphicon ico
..
(2 .. ico
ico
(3 glyphicon
... > <span ...
(4 > <span ..
).. (no text, no child
.. ..
component .. Dropdowns
Dropdowns ..
..
... ^_^..
.. bootstrap
dropdowns .. ^_^ dropdown
^_^ ...
^_^
:
(1 dropdown .. div
dropdown .. ..
.. relative
data-toggle="dropdown (2 .. attr
..
class="dropdown-menu (3
..
...
.. divider (4 ..
... dropdown ...
.. ..
:
: Tabindex (1
Tab .. ..1
.. 1- tab
...
:Role (2 ..
screen reader ..
a ..menuitem ..
.. role=button
.. ... screen reader ..
(2
) ( .. ..
.. ]".. *[role="button
role
... button .. ..
.. > <main .. html5
.. role=main
.. ...
..
.. ..
... .. ^_^ ...
... ^_^
.. !
.. bootstrap align ..
dropdown-menu-right ..
... ^_^ ul ul
.. dropdown-menu .. %100 top
left .. 0
dropdown-menu-right ..
Left: auto ... right: 0
^_^ ..
.. ^_^ header
..... ^_^ P:...
..
.. ^_^..
.. ..
^_^
) .. (-_-
.. dropdown-header > <li
.. header ^_^
^_^
.. Dropdowns
^_^ ...
disabled
>.. <li ^_^
:
(1 align
.. dropdown-menu-right 3.2
.. bootstrap
.. pull-right *_^..
(2
..
cropped parent ..
.. customized
) css (
...
(3
) ,(toggle
.. template
..
.. bootstrap.min.js ^_^ ..
.. ..
^_^...
..
^____^
Button groups button
.. ^_^ ..
..
..
) ..
3(
) (1
...btn-group
.. ..
..
..^_^..
.. ^_^
btn-group 1
^_^
2
toolbar
3
Size
4
Vertical
..
5
Nesting
Group
.. ..
dropdown
.. relative
btn-group
^_^ relative
Button groups Justified
^_^ ... btn
.. ..
parent ^_^..
btn-group-justified
) : .. (
^_^ ... : .. ..
^_^...
.. btn-group
> <button wrapper ....
:
.. ... _^
:
(1 btn .. justified
.. btn-group btn btn-
group .. .. btn-group
btn .. Nesting
..
(2 ie-8 border btn .. a
... btn-group
.. ^_^ ..
^_^ .. :
.. dropdowns
.. .. Button dropdowns
.. ..
..
^_^ .. ^_^
.. .. .. ..
.. btn-group !!
.. ^_^
Split button dropdowns
)(toggle
.. ^_^ ...
^_^
..
*_*..
.. btn
:
btn-sm btn-xs ....btn-lg
^_^:
^_^
:2
..
.. ^_^
.. Dropup variation
^_^ ..
.. .. .dropup
:
.. ^_^
.. ^_* ...
.. .. gruop
.. *_^ ..btn
.. ^_^
.. *_*
.. .. input group
html <input> tag
input group ..
>) <form .. child ..
> .. ( ...<form input group div
) (wrapper ... input
input
... @ .. twitter name $
...
) (prepend ) (append :
(1 wrapper div .input-group
(2
(3
input-group-addon span
).. wrapper wrapper
span (...
span append
.. prepend span > <input
.. input ..
.. input .. ..
...
:
(1 input-group .. form-group
(2
(3
input-group form-group
.. level input-group form-
.. group input-group
.. form-group .. ..
grid class .. input-group
input-group ... grid class
(4
(5
> <select ><textarea
) webkit
> ( <select
> <textarea ...
form-control
.. input-group ...
..
.. ^_^.. ^_^
) :1 (
^_^:
..
: )(prepend
: )(append
: ^_^
:2
:3
.. form control
) .. input-group (
...
.. ..
...Sizing
.. input-form
> ..^_^ <input
.. ..
* ..^_^ ... input-group- ^_*
* : sm ... lg
: .. html
> <input
Radio/checkbox (1
Button (2
Dropdown Button (3
Segmented button (4
.. ...*_*.. !! ..
... P: ^_^
: .. radio/checkbox
> <input radio checkbox span
input-group-addon
) : (
: .. button btn
.. radio/checkbox
wrapper btn
... input-group-btn wrapper
.. *_^ ... input-group
input-group-btn span
...input-group-addon
* : input-group-btn ..
override
btn ><input
^_^
.. Buttons with dropdowns : ..
^_^ ..
button
^_^)... .. ^_^(
.. Segmented buttons :
toggle ..
.. ^_^ dropdown buttons
.. )
.. (
.. ..
..
..
.. ..
.. bootstrap ..
^_* ..
.. ..
... ^_^
Navs
..
..
...
.. bootstrap .. ..
.. nav
active ..
..
..^_^.. ^_^
,tab tab boot-
strap .. nav-tab
) nav
navs ( .
..
^_^:
active
tab ..
Tab
><ul
: .. Pills
... nav-pills
:
..
^_^
.nav-stacked nav-pills
.. ^_^
:
) ^_^(
..Justified : bootstrap tabs
pills
parent ^_^ ..
... *_^ nav-justified parent
...768px ^_^:
.. :
6 ^_* .. ...
: .. justified parent 768..
nav .. *_^ stacked
.. disabled : .. .. -_-
.. nav link ...
... disabled ^_^:
) .. (
:
.. .. .. disabled )(
!! ..
.. ....
:
^_^
Dropdown .. ....^_^ nav
.. nav
> <a ..button
> <li .. dropdown ^_^...
:
.. .. component
.. bootstrap
.. ..
) ( JS ...
.. ^_^ ..
.. nav .. navbar
navbar , bootstrap
header ,
,Responsive
..
.. collapse btn
...navbar
:navbar
(1 <nav> tag
(2 navbar navbar-default
><nav
(3 role=navigation >) <nav
..role (*_^ html5 tag
(4 > <div navbar-header
div > <a .. navebar-brand
.. ..
(5
) (nav .. navbar ul
nav ....navbar-nav
, / *_^ navbar
.. ..
^_^..
navbar-default
navbar
..
nav
..
..
nav
navbar-nav
.. nav
.. div .. !!.. ...
.. .. .. navbar
!! .. nav
navbar .. *_^..
...navbar
(1 bootstrap
,
navbar ...
navbar .. :
( width .
( Responsive ..
( breakpoint media
..query
(2 collapse navbar-collapse
) ...
(
@grid-float-breakpoint (3
.. breakpoint breakpoint
) ... 768 (LESS
plug-in collapse (4 js
responsive .. navbar
.. ^_^
^_^ Brand image
img text navbar-
.. brand :
: .. component align .. navbar
..
navbar-left ^_^.. navbar-right
^_^:
...Forms : ..Forms .. form
.. navbar .. ^_^.. search
navbar-form .. <form> tag
:^_^ :
:1 align form left right
..
..form .. navbar-form
..
.. *_^.. form-inline
:2
... navbar
^_____^ bootstrap
: button ) navbar btn
> ..(.. <form navbar-btn
..*_^ <button> tag
> <a > <input
btn *_^ ... navbar ^_^:
: text .. navbar
.. navbar bootstrap
.. .navbar-text *_*... <p> tag
:
.. Non-nav link : *_*
.. nav ..
.. bootstrap .. navbar-link
^_^.. navbar
:
Fixed to top : ^_^ Fixed to Bottom
^_^ ..
navbar ..
.. ..
navbar-fixed-bottom ... navbar-fixed-top
padding 70.. body top
70 .. bottom
navbar
^_^
..
^_^:
^_*
fixed
50
)
(
.. scroll
: bootstrap navbar
.. ... navbar-inverse
:
.. ) navbar (componant
.. Responsive navbar
.. navbar !!..
Responsive navbar
navbar ..
wrapper
... .collapse, .navbar-collapse ..
ID --- wrapper ..
navbar-toggle data-toggle
.. collapse ^_* ... ^_^
) .. (:
: Responsive breakpoint
.. toggle
.. responsive
*_*:
... data-target
data-target id wrapper
...
navbar .. ..
^______________*
) ... (
:2
:1
..Breadcrumbs Breadcrumbs
..
... Home / pages / about us
.. .. )..about us (..
^_^.. ..
.. ^____________^
.. bootstrap ..
breadcrumb ><ol
^_^ .. ..
^_*
:
.. ..
next ..^_^ .. prev
... .. Pagination
..
bootstrap ..
..^_^ pagination ... ul
Pagination ..
.. active
) ( ..
disabled pager
.. .. ^_^:
.. .. disabled
.. ..
..
)( preventDefault ..
> <a > <span ^_^..
^_^..
:
.. pager
^_^ ..
pagination-lg ... pagination-sm
:
.. .. pager
next prev .. ..
.. blog ..
..
pager ...^_^... pagination ^_^
parent
.. pager pager
..
next previous >... <li
:
.. disabled .. pagination
.. ^_^
).. breadcrumb
^_^ (.. pagination
..bootstrap .. label ..
..
..
..
label *..^_^ label-
..default, primary, info
^_^) : ^_*(
^_^
Badges highlight
..
..^_^ ... .. FB
^_^..
^_^ .. ..
badge ... *_^ span span
...
^_^:
.. Self collapsing
.. )
.. (.. bootstrap :empty
.. css span display:
... none ^_^
^_^..
... (-_-)_ ie8
... :empty
:2
..
.. , ^_^ ...
..^_^.. bootstrap
wrapper
... jumbotron
page-header
>*<h
small ..
:
.. .. ^_^..
) ..
( ...
Thumbnails
.. .. .
bootstrap .. Thumbnails
grid system
html *_^ ...Thumbnails
Thumbnails .. wrapper
*_*
:
Thumbnails
^___*
:2 .. wrapper
. html
^_^
..
..
.. bootstrap
alert
action ..
...
alert
*(success, info, danger, warning)* ... alert-
^_*..
: alert
.. default
.. alert alert-
... dismissible
...
.. ..
..
markup .. *_^ html
:
: .. ... -_- x
template js
^_* *_^ bootstrap.min.js
:2 button data-
dismiss="alert button
... alert
.. ..alert
.. alert-link alert
^_^..
^_^..
.. ..
Alert .. thump
... ^_* ..
/ ..
.. bootstrap .. css3
.. ie-9 ..
.. .. opera 12 ..
animation transitions
^_^ ... css3
.. *_* Progress bar
) (:
.. width area-valuenow
.. width .. ..
.. %80 .. 60 .. ^_^
^_^
:2 .. 60%
.. .. Screen Reader
Progress bar
.. :
:3
) (%0
width *_^.. 30px Low
..percentages .. ^_^..
:
:4 .. ..
.. button
..
*progress-bar-
* warning, info, danger, success :
.. ) : (
:5 ..
/ ) .. (Striped
..
..... progress-bar-striped :
:6 ..
.. ^_^ ..
^_^.. active
:
.. ^_^..
..
.. .. !!..
^_^ .. progress
bar progress ^_^... ^_*
.. .. ..
.. ^_^ ..
^_^ ).. (ie8
media object
media ..
...
)..
.. bloger .. tweet
...(..
*_^...
^_^:
..media
^_^
:2
..
news articles ..
media .. ul
) (:
:2 ..
media body
.. :
bootstrap ..
.. .. list-group
>) <ul( ul
.. ^_^.
*( .. ol .. ^_*
:
:2 Badges .. *_^ group
.. Badges group bootstrap
.. Badges
^_* .. :
... :3 .. .. ul..
.. .. list-group-item
a .. *_^.. list-group
... :
:4 disabled )
.. ( ..
:
:5 ^_^.. Contextual classes
**___^ list-group-item-
:
:6 Custom content
.. .. List
...group
*_* ...
.. media
*_^ obejct
panel
.. .. panel
header .. body
panel
bootstrap:
:panel (1
).panel(.
:panel-heading (2
.. panel-title
.
(3
(4
(5
:panel-body
*_^ panel
:panel-footer .footer
*
*) panel-
info, warning, default, primary, danger, success
) .. ..
(:
header panel
.. Contextual alternatives
.. panel-info.. ^_* ..
) (5
:
.. header
border panel .. footer ..
.. footer .. header
... Contextual alternatives
.. ..
...panel
.. table ^_^
*_* ...
.. List group ^_*
.. ^_^ ..
...Responsive embed
embed
.. .. *_^ bootstrap
.. )(ratio
^_^...
: embed > <iframe > <object
>.... <embed
embed-responsive-item
..
wrapper .. :
:embed-responsive (1
.. ..
(2 embed-responsive-4by3
embed-responsive-16by9
)(scale
well jumbotron
..
.. simple inset highlight well
.. well well-lg well-sm
^_^:
.. ^_^...
*_* ..
^_^.. ^_^..
.. .. ^_^ Component ..
^_* ..
..
^_^.. ..
Java Script
..
.. ..
...
..
.. bootstrap plug-in ...
..component
.. ..
.. ^_^
.. ^_^
:
(1 plug-in 12
component ^_^
(2 Plug-In
template .
(3 ) plug-in (
plug-in
.. folder
(4 )
(plug-in bootstrap.min.js
bootstrap.js
(5
(6
(7
(8
.. ^_^ *.js
.. plug-in
.. ...
bootstrap.min.js
.. bootstrap .
bootstrap.min.js bootstrap.js
.. Plug-in request
^_*
component
attribute ..
toggle ).... tooltip (
.. button wrapper
.. conflict
^_^
(9 .. Plug-in
jQuery ...
..
js ^_^ plug-in
.. button wrapper
.. conflict
^_^
(9 .. Plug-in
jQuery ...
..
js ^_^ plug-in
) bootstrap
(bootstrap.min.js
:Data attributes
( API ... bootstrap
.. ^_^ ..
.
).. 17.html
.(toggle
(
.. .data-api
data-api namespace event
) (namespace
.. off .. data-api
..toggle .. alert
.. plugIn
.. .alert.data-api
) alert API (.
:
:Programmatic API ..
API
.. bootstrap
...
:
....
.. constructor :
** .. *_^ ..
..
:No conflict
..
namespace ..
.. ..
.. bootstrap
.. framework
..
:
:JavaScript is disabled
.. *_^ <noscript> tag bootstrap ...
.. PlugIn ..
.. ..
bootstrap ...
... plug-in .. P:
Modal
.. Parent .. window
child ^_^ .. header, body, footer
^_^
plug-in .. bootstrap.js
.. ^_^ bootstrap.min.js
plug-in .. modal.js
:
overlapping .. modal modal
..
^_^
modal ..
.. ^_^
.. data-toggle="modal (1 btn link
.. ...modal
.. data-target="#identifier (2 modal
..
(3
) $('#identifier').modal(options
modal ..
..target option ..
..
^_*
(4 .. modal modal
wrapper *_^ modal
(5 fade
^_^ .. *_^ toggle
aria-labelledby (6 modal
).. *_^ (modal
<div class="modal-header"> (7 wrapper
header *_^ modal
(8 .. close
.. modal
(9 data-dismiss="modal
.. modal .. html5
:modal-body (10 bootstrap
body .. modal
(11 .. modal-footer
footer .. *_^ modal
(12 .. model dialog wrapper body
header .. footer
modal-lg ...modal-sm ^_^modal
(13 href=:#modal-id data-
target ^_*
.. ^_^.. ^_^
...*_^ option
option
).. modal
^_^(
^_*
:backdrop (1
modal true.. .. false static
.. true modal
.. modal false
static modal
...modal ^_^
:keyboard (2 modal
.. *_^.. Escape true.. .. false
.. false
.. Escape ... true
:
(3 .. show modal
.. true or false
.. ... true initialized
modal *_^ modal
:
... .. click
$(document).ready(.
:
..
*.. data- * ) backdrop .. keyboard(
:
.. .. Methods
^_^.. model
method ) option
.. method * data-
(.. Attribute option toggle show
... hide
:
.. .. modal
^_^ modal event
.. event hook
.. function
..
4:
:show.bs.modal (1 show modal
:shown.bs.modal (2 modal
:hide.bs.modal (3 hide modal
:hidden.bs.modal (4 modal
..
.. ..
..
.. .. data-
.. toggle="dropdown data-api
toggle .. ...
^_^...
....show.bs.modal
toggle
)( $('.dropdown-toggle').dropdown
data-toggle ..
*_% Data-toggle
plug-in ^_^.. active
nav scrolling
..
active ..
...plug-in ^_* ...
*( : .. plug-in
) scrollSpy.js (
... bootstrap.min.js
:2 .. plug-in
... nav
:3 relative
... plug-in
) ..
:(...
:
: data-spy="scroll(1
scrolling ...
.. body
scrolling >.... <body
:data-target (2
spy .. id
parent action ..
(3 id .. id
scroll .. scrolling
id *_^.. href
:data-offset (4
) ( .. action target
... 0 target
.. 10 ..
..
..
..method
refresh spy
DOM
.. .. spy
... refresh :
.. event event
.. active.bs.scrollspy event
) (
:
tabs .. ..
.. tab
... tab ...
...
tab
..
tab
tab
selector ..
) (:
.. ..
html
.. .. active fade
.. in
*_^... active
fade .. ^_* ..
^_^
event :
:show.bs.tab (1 tab
:shown.bs.tab (2 tab
.. ^_^:
tooltip
event
... hover tooltip .. css3
bootstrap 3 .. *_^..
:
.. .. data-toggle
*_^.. tooltip
data-placement
^_^ tooltip
title .. *_^ tooltip
:1 tooltip
.. ..
.. performance
:2 tooltip html
).. (initialized :
.. }{ option
selector
*_^ tooltip
:3 disabled
tooltip .. div
wrapper tooltip ..
disabled ... *_^.. button
:
:4 selector trigger
tooltip selector
^_^) ..
.. P:.. ..
^_&(
.. Options
^_^
:animation (1 ... fade
... true true or false
.. fade
... false
:delay (2 .. object
*_^ .. tooltip
.. hide, show object
.. ) : (ms
:html (3 true .. false
...false html
.. tooltip .. true
XSS *_^..
:
:placement (4 tooltip
... placement
string .. function
:
function
..
:Template (5 . tooltip
:
.. wrapper
.. tooltip
.. .. template
:
. ..
.. .. .. tooltip
^_* ...
^_^
:title (6 tooltip
.. ...
title .. html html
^_^ ... :
:trigger (7 option
action tooltip
..
... click .. hover
:
.. Methods
.. toottip :
... Show, hide, toggle, destroy
:show (1 tooltip
:hide (2 tooltip
hide
:toggle (3 show
:destroy (4 ).. tooltip
.. .. (..enable
:Enable (5 tooltip
^_* ) ((Re-)enable
tooltip
^_*
^_^.. event
tooltip
:show.bs.tooltip (1 show
hide // // // //
// hide.bs.tooltip (2
// tooltip
// shown.bs.tooltip (3
// // //
// hidden.bs.tooltip (4
:
.. ^_^
,
.. css ..,
template
tooltip ... *_^...
^_^ ) (:
Popover tooltip ..
.. tooltip
popover
^_*...
:
(1 tooltip.js ).. popover
( ..
(2 initialize ... popover
. ^_^ popover
tooltip popover
*_*
(1
(2
(3
:title ..
:content ..
data-trigger="focus trigger
popover click
hover ...foucs focus
^_*.. focus
> <a .. button
...
option .. tooltip
:
:container (1 wrapper
div .. popover window
... *_* resize .. false
) string wrapper (..
:
wrapper
wrap-1
:content (2 content
data-content
method
tooltip ..hide, show, toggle, destroy
:
^_^.. event
popover
:show.bs.tooltip (1 show
hide // // // //
// hide.bs.tooltip (2
// // shown.bs.tooltip (3 popover
// // //
// hidden.bs.tooltip (4
.. ^_^
.. *_* popover :
..
.. .. ^_^
) : destroy
(-_-..popover
alert ..
.. *_^ alert
alert ..
) close
... ( *_^ data-dismiss
data-dismiss="alert
alert ^_*
alert ...DOM
:
$().alert() (1
$().alert('close') (2
data-api ...
data-dismiss
event alert:
:close.bs.alert (1
:closed.bs.alert (2
*_^ ...alert
:
.. ^_^
*_^ js buttons
bootstrap ..
.. button button
checkbox radio
button ^_^..
.. bootstrap ^_^
: autocomplete="off button
.. firefox
disabledness and checkedness
^_*
.. :
:*_^ Stateful
^_* ,
data-loading-text=value...
)'.. $().button(string
:
)' $().button(string ..
loading .. reset loading
)
( .. .. reset )
... (loading
data-complete-text=value
..
)'... $(this).button('complete
:Single toggle
active ..
...aria-pressed="false or true false
) .. (active true
.. active true
active ^_* .. :
active
:Checkbox / Radio checkbox radio
btn ..
data-toggle="button *_^ btn-group
:
.. ..
checked
checkbox .. radio active
label )...
*_*(
.. ^_*
^_^ ^_^ .. plugin
..
^_^ ..accordions
^_^:
:collapse (1
) *_*(
:collapse.in (2 *_^
.. in
:collapsing (3 collapse
.. *_* collapse
:
(1 collabse
wrapper .. panel panel-default
parent accordion parent
(2 id collapse
... href=#id
(3 data-toggle collabse
(4 panal
collapse .. .. list-group
(5 collapse
in .. collapse ^_^ area=true
.. .. *_^.. ^_^
.. ..
.. ..
..
..
..
....*_* Just Google It
:
http://getbootstrap.com/javascript/#carousel
http://getbootstrap.com/javascript/#affix
(1
(2
bootstrap
.. responsive ..
:
http://getbootstrap.com/gettingstarted/#disable-responsive
custom
..bootstrap
.. .. ..
http://getbootstrap.com/customize/
.. ..
... ...
...
,
,
,
.
..
..
..
..
.. ,,
... ..
.
You might also like
- Bootstrap 3.3 A Guide Book For Beginners To Learn Web Framework Fast! PDFNo ratings yetBootstrap 3.3 A Guide Book For Beginners To Learn Web Framework Fast! PDF133 pages
- Bootstrap in Enterprise Applications: Nikhil Chopra Madhuri LadNo ratings yetBootstrap in Enterprise Applications: Nikhil Chopra Madhuri Lad28 pages
- Exercise: Getting Started With Bootstrap: Index - HTMLNo ratings yetExercise: Getting Started With Bootstrap: Index - HTML3 pages
- Build Your First Web Site Today: EASYNOW Webs Series of Web Site Design, #1From EverandBuild Your First Web Site Today: EASYNOW Webs Series of Web Site Design, #1No ratings yet
- Javascript: Javascript Programming For Absolute Beginners: Ultimate Guide To Javascript Coding, Javascript Programs And Javascript LanguageFrom EverandJavascript: Javascript Programming For Absolute Beginners: Ultimate Guide To Javascript Coding, Javascript Programs And Javascript Language3.5/5 (2)
