Bootstrap3 141102072431 Conversion Gate02

: .
:
aneeshikmat@gmail.com, aneeshikmat@2nees.com
www.2nees.com :

aneeshikmat@gmail.com /
.. ..
.. ,
.. .
, , , ,
,boostrap3 ,
, framework
.. .. 10/12/2014
.. ..
.. .. ..
(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 ...
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
(4
:Responsive Web Design

.. .. tablet,
.*_^ mobile, normal screen
bootstrap
responsive ..
^_*.
..

.. responsive
bootstrap
:
:Scaffolding (1
..
..
.. ..
.. grid system,
responsive design, contains layout, Fluid Grid
:Base Css (2
, , .. btn
: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 ..
..
...
.. bootstrap
.. ..
html index
root folder ..
..
.. basic template
.. index.html ..
... Bootstrap
template:
(1 > <!doctype html
.. css html
.. html5
(2
bootstrap *_^ mobile-first

..
.. .. meta tag
meta tag zooming

mobile ..
override ..
zoom
... user-scalable=no :
(3
meta tag
bootstrap IE
bootstrap ie
..
(4
.. hack condition
...Respond.js
(5
.. jQuery ..bootstrap
.. ..*_^ ...
: .. ..
.. html .. bootstrap ^_*

..

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

..

grid system 960 Grid system
Grid system ..
.. ^_*
.. ..
..
.. grid system
.. ..
width .. ..
block 8 4 + )..
12 (
6 6 + = 12 .. ....
.. grid system
).. ( ..
*( : *_^..
.. bootstrap Grid System Grid

bootstrap 12colmn
.. bootstrap
responsive .. mobile first
grid responsive
.. bootstrap
responsive *_^ ..
*_^ bootstrap Grid system
) :
^_*(
(1
(2
(3
(4
grid container
container-fluid
.. container-fluid
full-width container
fixed-width .. grid

*_^..
..
..
.row .col-xs-4 grid .
(5
(6
(7
(8
/ grid
..
margin ..
bootstrap
12 .. grid
.. 3 ..
..col-xs-4
12 ..
.. ^_*
.. mobile
grid
css class .col-md- ....col-lg-
(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
... .. ..
.. ^_* ..
.. ^_^ .. :

.. ..
..
.. ..
^_*
.. .. ..
.. ^_*
:
)..^______^.. .. (
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
;).. &times
.. (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/

.. ..
... ...
...
,
,
,

.
..
..

..
..
.. ,,
... ..

.



Bootstrap3 141102072431 Conversion Gate02

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Bootstrap3 141102072431 Conversion Gate02

Uploaded by

Copyright:

Available Formats

: .

:Responsive Web Design

bootstrap *_^ mobile-first

meta tag zooming

.. bootstrap Grid System Grid

:md Medium devices xs

:Inline text elements (3 mark

class table- condensed

(3 role="form >.*_^ <form

Vertical form (default)

Vertical form (default)

.. form inline form

Inline form code

Inline form result

.. .. Horizontal From inline

:Input (1 html input

:(checkbox & radio) 4 & 3

(2 box radio wrapper

( : Static control label

( :form control state bootstrap

ico ico ^_^

^_^ ... form ..

.. ^_^ Button State

:Disabled State (2 disabled

.. Button ... ^_^ Button tag

) : : ie-8 ) curve( (..

:Close icon (3 class .. x

custom class css

: Quick floats(5 css .. .. float

.. .. pull-left ..float: left

: Center content blocks(7

: Showing and hiding content(8

Screen reader and keyboard navigation content(9

.. bootstrap mobile first

*.. visible-*- ) ... (grid

3.2 ... bootstrap ..

.. dropdown-header > <li

Button groups button

Button groups Justified

> <select ><textarea

.. Buttons with dropdowns : ..

,tab tab boot-

..Justified : bootstrap tabs

: .. justified parent 768..

Dropdown .. ....^_^ nav

: .. component align .. navbar

...Forms : ..Forms .. form

:1 align form left right

: button ) navbar btn

.. Non-nav link : *_*

Fixed to top : ^_^ Fixed to Bottom

:2 Badges .. *_^ group

:5 ^_^.. Contextual classes

.. List group ^_*

data-api namespace event

<div class="modal-header"> (7 wrapper

(13 href=:#modal-id data-

plug-in ^_^.. active

:html (3 true .. false

:Checkbox / Radio checkbox radio

^_^ ^_^ .. plugin

You might also like

.. visible-- ) ... (grid

.. Non-nav link : _