menxu · May 23, 2016 10:02 · May 23, 2016 · May 23, 2016 · May 23, 2016 · May 23, 2016
diff --git a/bootstrap-simple.md b/bootstrap-simple.md
@@ -226,6 +226,182 @@ div.well.well-lg
 
 
 
+## Bootstrap V3 JS
+
+1.过渡效果 transition.js
+
+2.模态框 modal.js
+
+```html
+<!-- Large modal -->
+<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
+
+<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
+  <div class="modal-dialog modal-lg">
+    <div class="modal-content">
+      ...
+    </div>
+  </div>
+</div>
+
+```
+
+
+```js
+$('#exampleModal').on('show.bs.modal', function (event) {
+  var button = $(event.relatedTarget) // Button that triggered the modal
+  var recipient = button.data('whatever') // Extract info from data-* attributes
+  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
+  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
+  var modal = $(this)
+  modal.find('.modal-title').text('New message to ' + recipient)
+  modal.find('.modal-body input').val(recipient)
+})
+```
+
+3.下拉菜单 dropdown.js
+
+```html
+<div class="dropdown">
+  <a id="dLabel" data-target="#" href="http://example.com" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
+    Dropdown trigger
+    <span class="caret"></span>
+  </a>
+
+  <ul class="dropdown-menu" aria-labelledby="dLabel">
+    ...
+  </ul>
+</div>
+```
+
+```js
+$('#myDropdown').on('show.bs.dropdown', function () {
+  // do something…
+})
+```
+
+4.滚动监听 scrollspy.js
+
+```html
+<body data-spy="scroll" data-target="#navbar-example">
+  ...
+  <div id="navbar-example">
+    <ul class="nav nav-tabs" role="tablist">
+      ...
+    </ul>
+  </div>
+  ...
+</body>
+```
+
+```js
+$('#myScrollspy').on('activate.bs.scrollspy', function () {
+  // do something…
+})
+```
+
+5.标签 tab.js
+
+```html
+<div>
+
+  <!-- Nav tabs -->
+  <ul class="nav nav-tabs" role="tablist">
+    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
+    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
+    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
+    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
+  </ul>
+
+  <!-- Tab panes -->
+  <div class="tab-content">
+    <div role="tabpanel" class="tab-pane active" id="home">...</div>
+    <div role="tabpanel" class="tab-pane" id="profile">...</div>
+    <div role="tabpanel" class="tab-pane" id="messages">...</div>
+    <div role="tabpanel" class="tab-pane" id="settings">...</div>
+  </div>
+
+</div>
+```
+
+```js
+$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
+  e.target // newly activated tab
+  e.relatedTarget // previous active tab
+})
+```
+
+6.工具提示 tooltip.js
+
+```html
+<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>
+
+<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>
+
+<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
+
+<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>
+```
+
+7.弹出框 popover.js
+
+```html
+<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">可消失的弹出框</a>
+
+<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
+  Popover on 左侧
+</button>
+
+<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
+  Popover on 顶部
+</button>
+```
+
+8.警告信息 alert.js
+
+```html
+<button type="button" class="close" data-dismiss="alert" aria-label="Close">
+  <span aria-hidden="true">&times;</span>
+</button>
+```
+
+9.按钮 button.js
+
+```html
+<button type="button" id="myButton" data-loading-text="Loading..." class="btn btn-primary" autocomplete="off">
+  Loading state
+</button>
+
+<script>
+  $('#myButton').on('click', function () {
+    var $btn = $(this).button('loading')
+    // business logic...
+    $btn.button('reset')
+  })
+</script>
+```
+
+10.折叠 collapse.js
+
+```html
+<a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
+  Link with href
+</a>
+<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
+  Button with data-target
+</button>
+<div class="collapse" id="collapseExample">
+  <div class="well">
+    ...
+  </div>
+</div>
+```
+
+11.轮播 carousel.js
+
+12.自动定位浮标 affix.js
+
+
 
 
 

diff --git a/bootstrap-simple.md b/bootstrap-simple.md
@@ -104,13 +104,21 @@ img.img-responsive.img-rounded/.img-circle/.img-thumbnail
 9.辅助类
 
 文本字体/背景 p.bg-primary/.text-muted
+
 关闭 button.close
+
 三角 span.caret
+
 快速浮动 pull-left、pull-right
+
 让内容块居中 div.center-block
+
 清除浮动 div.clearfix
+
 显示或隐藏内容 div.show/.hidden
+
 屏幕阅读器和键盘导航 a.sr-only.sr-only-focusable
+
 图片替换 h1.text-hide
 
 10.响应工具

diff --git a/bootstrap-simple.md b/bootstrap-simple.md
@@ -1,5 +1,125 @@
 
 
+## Bootstrap V3 CSS
+
+### Bootstrap V3 样式
+
+1.概览
+
+```html
+<!DOCTYPE html>
+<html lang="zh-CN">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+<body>
+<div class="container"></div>
+</body>
+</html>
+```
+
+移动设备优先 viewport
+布局容器 container
+
+2.栅格系统
+
+```html
+<div class="container-fluid">
+  <div class="row">
+    <div class="col-xs-12 col-sm-6 col-md-8">.col-md-1</div>
+    <div class="clearfix visible-xs-block"></div>
+    ...
+  </div>
+</div>
+```
+响应式列重置 clearfix
+列偏移 offset
+嵌套列 row>row
+列排序 push/pull
+
+3.排版
+
+标题 h1/.h1
+
+页面主体 p
+
+中心内容 p.lead
+
+内联文本元素 span>mark
+
+被删除的文本 span>del
+
+无用文本 span>s
+
+插入文本 span>ins
+
+带下划线的文本 span>u
+
+小号文本 span>small
+
+着重  span>strong
+
+斜体 span>em
+
+高亮单词 span>b
+
+用于发言、技术词汇 span>i
+
+对齐 text-left/text-center/text-justify/text-nowrap
+
+改变大小写 text-lowercase/text-uppercase/text-capitalize
+
+缩略语 span>abbr
+
+首字母缩略语 span>abbr.initialism&title='....'
+
+地址 address>strong=br=abbr
+
+引用 blockquote.blockquote-reverse>p=footer>cite
+
+列表 ur/ol.list-unstyled/.list-inline>li
+
+描述列表 dl.dl-horizontal>dt=dd
+
+4.代码
+
+code/kbd/pre/var/samp
+
+5.表格
+
+div.table-responsive>table.talbe.table-striped/.table-bordered/.table-hover/.table-condensed
+
+6.表单
+
+form.form-inline/.form-horizontal>fieldset.disabled>div.form-group.form-group-lg.has-success.has-feedback>label.sr-only=input.form-control.input-lg=span.glyphicon.glyphicon-ok.form-control-feedback
+
+text/textarea#rows/checkbox>label.checkbox-inline>input.checkbox/select^multiple.form-control>option/.form-control-static/disabled/readonly
+
+7.按钮
+
+a.btn.btn-default&role=button/button.btn.btn-default/input.btn.btn-default.btn-lg.btn-block.active&disabled=disabled
+
+8.图片
+
+img.img-responsive.img-rounded/.img-circle/.img-thumbnail
+
+9.辅助类
+
+文本字体/背景 p.bg-primary/.text-muted
+关闭 button.close
+三角 span.caret
+快速浮动 pull-left、pull-right
+让内容块居中 div.center-block
+清除浮动 div.clearfix
+显示或隐藏内容 div.show/.hidden
+屏幕阅读器和键盘导航 a.sr-only.sr-only-focusable
+图片替换 h1.text-hide
+
+10.响应工具
+
+.visible-xs-block(inline/inline-block)/.hidden-xs/.visible-print-block(inline/inline-block)
+
+
+
+
 
 ### Bootstrap V3 组件
 

diff --git a/bootstrap-simple.md b/bootstrap-simple.md
@@ -1,7 +1,7 @@
 
 
 
-### Bootstrap组件
+### Bootstrap V3 组件
 
 1.字体图标 
 

diff --git a/bootstrap-simple.md b/bootstrap-simple.md
@@ -0,0 +1,129 @@
+
+
+
+### Bootstrap组件
+
+1.字体图标 
+
+.glyphicon.glyphicon-search
+
+2.下拉菜单 
+
+.dropdown/.dropup>.btn.btn-default.dropdown-toggle&data-toggle.dropdown=dropdown-menu(.dropdown-menu-right)>.dropdown-header/.divider/.disabled
+
+3.按钮组 
+
+.btn-toolbar&role=toolbar>.btn-group.btn-group-lg/.btn-group-vertical.btn-group-justified&role=group>.btn.btn-default
+
+4.按钮式下拉菜单
+
+.btn-group.dropup>.btn.btn-default.btn-lg.dropdown-toggle&data-toggle=dropdown>.caret=.dropdown-menu>.divider
+
+5.输入框组
+
+.input-group.input-group-lg>.input-group-addon&.form-control&.input-group-addon>text/checkbox/button
+
+.input-group>.input-group-btn>.btn.btn-defaullt.dropdown-toggle&data-toggle=dropdown=.dropdown-menu>.divider=.form-control
+
+6.导航
+
+ul.nav.nav-tabs/.nav-pills.nav-stacked/.nav-justified>li.active/.disabled=.dropdown>.dropdown-toggle&data-toggle=dropdown=.dropdown-menu>.divider
+
+7.导航条
+
+nav.navbar.navbar-default/.navbar-inverse.navbar-fixed-top/.navbar-static-top>.container-fluid>.navbar-header.navbar-brand=.collapse.navbar-collapse>ul.nav.navbar-nav>li.active/.dropdown=.navbar-form.navbar-left>.form-group>.form-control=.btn.btn-default
+
+8.路径导航
+
+ol.breadcrumb>li.active
+
+9.分页
+
+nav>ul.pagination.pagination-lg>li.active/.disabled
+
+10.翻页
+
+nav>ul.pager>li.previous/.next
+
+11.标签
+
+span.label.label-default
+
+12.微章
+
+a>span.badge
+
+13.巨幕
+
+div.jumbotron>.container/>h1>=p>a.btn.btn-primary.btn-lg
+
+14.页头
+
+div.page-header>h1>small
+
+15.缩略图
+
+div.row>div.col-sm-6>.thumbnail>img=div.caption>h3=p
+
+16.警告框
+
+div.alert.alert-success.alert-dismissible&role=alert>button.close/.alert-link&data-dismiss=alert
+
+17.进度条
+
+div.progress>div.progress-bar/.progress-bar-success/.progress-bar-striped/.active&role=progressbar&style='min-width: 2em; width: 2%;'>2%
+
+
+18.媒体对象
+
+ul.media-list>li.media>div.media-left>media-object=div.media-body>h4.media-heading
+
+19.列表组
+
+ul.list-group>li.list-group-item.list-group-item-success>h4.list-group-item-heading=p.list-group-item-text
+
+20.面板
+
+div.panel.panel-default>div.panel-heading>h3.panel-title=div.panel-body=table/list-group=div.panel-footer
+
+
+21.响应特性嵌入式内容
+
+
+div.embed-responsive.embed-responsive-16by9>iframe.embed-responsive-item&src="....."
+
+22.Well
+
+div.well.well-lg
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+