bootscript/javascript组件
Posted Pеcu❤lian
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了bootscript/javascript组件相关的知识，希望对你有一定的参考价值。
（1）每一个插件（带有js功能的组件），想使用bootstrap插件，一个是要去写他的html，第二个是使用CSS去修饰它，再引入相应的js文件。
bootstrap框架里的轮播图，他有自己的js文件。
javascript 插件可以单个引入（使用 Bootstrap 提供的单个 *.js 文件），或者一次性全部引入（使用 bootstrap.js 或压缩版的 bootstrap.min.js）。
建议使用压缩版的 JavaScript 文件
bootstrap.js 和 bootstrap.min.js 都包含了所有插件，你在使用时，只需选择一个引入页面就可以了。
（2）组件的 data 属性
data-toggle：指的是什么事件触发
data-target : 绑定其效果的对象
（3）插件之间的依赖关系
导入bootstrap.min.js 之前 要导入jquery.js
一.模态框 modal.js ----- 以弹出对话框的形式出现 。
点击按钮即可通过 JavaScript 启动一个模态框。此模态框将从上到下、逐渐浮现到页面前。
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
模态按钮
</button>
<!-- Modal --> fade的过渡效果是加在madal中的，不是加在button上！
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<!-- 决定模态框的大小和位置 ,通过添加modal-lg类改变大小-->
<div class="modal-dialog modal-lg">
<!-- 模态内容部分 -->
<div class="modal-content">
<!-- （1）header -->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">关闭</span></button>
<h4 class="modal-title" id="myModalLabel">表单提交</h4>
</div>
<!-- （2）内容 -->
<div class="modal-body">
<input type="text" class ="form-control">
</div>
<!-- （3）尾部 -->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
增强模态框的可访问性
务必为 .modal 添加 role="dialog" 属性，aria-labelledby="myModalLabel" 属性用于只想模态框的标题栏，aria-hidden="true" 用于通知辅助性工具略过模态框的 DOM元素。
另外，你还应该通过 aria-describedby 属性为模态框 .modal 添加描述性信息。
可选尺寸模态框提供了两个可选尺寸（modal-lg/modal-sm），通过为 .modal-dialog 增加一个样式调整类实现。
二.下拉菜单---dropdown.js
<!-- 小的下拉按钮 -->
<div class="dropdown">
<!-- (1)点击按钮-->
<button id="dLabel" type="button" data-toggle="dropdown" class="btn btn-success btn-lg">
按钮
<span class="caret"></span>
</button>
<!-- (2)菜单目录 -->
<!-- <ul class="dropdown-menu" >
<li><a href="#">百度一下</a></li>
</ul> -->
<div class="dropdown-menu">adnajdhajkd</div>
</div>
<!-- 自己来写一个 -->
<!-- 这是我总结的超简单写法 -->
<div class="dropdown">
<button class= "btn btn-danger" data-toggle="dropdown">按钮</button>
<div class="dropdown-menu" role ="menu">这是面板</div>
</div>
滚动监听--- scrollspy.js
1.给想要滑动的区块设置 data-spy="scroll"
2.给设置data-spy=“scroll”的区块设置 相对定位
<!-- 系统提供的源代码 -->
<!-- <body data-spy="scroll" data-target=".navbar-example">
...
<div class="navbar-example">
<ul class="nav nav-tabs" role="tablist">
...
</ul>
</div>
...
</body> -->
<!-- 自己写 -->
<!-- （2）做一个简单的导航 -->
<div class="navbar-example">
<!-- 这是一个导航 -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#ios">ios</a></li>
<li role="presentation"><a href="#html">html</a></li>
<li role="presentation"><a href="#php">php</a></li>
</ul>
</div>
<!-- （1）这是滑动监听空间 -->
<!-- 核心是：监听控件里的滑动到一个锚点，然后修改这个锚点的active -->
<div data-spy="scroll" data-target=".navbar-example" style="position: relative;height: 300px;overflow: auto;">
<!-- （3）设置id对象让与导航栏里的标签对应起来，导致标签可以定位行（锚点特性），滑动监听到某个位置，回设导航栏上的相对应a标签的active -->
<h3 id ="ios">IOS</h3>
<p>...</p>*n
<h3 id ="html">HTML</h3>
<p>...</p>*n
<h3 id ="php">PHP后台</h3>
<p>...</p>*n
三.标签页 Togglable tabs--- tab.js
<!-- <ul class="nav nav-tabs" role = "tablist">
<li role="presentation" class="active"><a href="#ios" role="tab" data-toggle="tab">Home</a></li>
<li role="presentation" role="tab" ><a href="#android" data-toggle="tab">Profile</a></li>
<li role="presentation" role="tab" ><a href="#html" data-toggle="tab">Messages</a></li>
</ul> -->
<!-- 2.给他设置功能面板 -->
<!-- Tab panes -->
<!-- <div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="ios">这是ios面板</div>
<div role="tabpanel" class="tab-pane" id="android">这是安卓面板</div>
<div role="tabpanel" class="tab-pane" id="html">这是HTML面板</div>
</div> -->
< !-- 精简版 -->
<!-- 1、
（1）给a标签设置 data-toggle ="tab"
(2) 给a设置对应的锚点id
-->
<a href="#ios" class="btn btn-danger" data-toggle="tab">iOS</a>
<a href="#android" class="btn btn-danger" data-toggle="tab">安卓</a>
<a href="#html" class="btn btn-danger" data-toggle="tab">HTML</a>
<!-- 2.给他设置功能面板 -->
<!-- Tab panes -->
<div class="tab-content">
<p id="ios" class="tab-pane active" >这是ios面板</p>
<p id="android" class="tab-pane " >这是安卓面板</p>
<!-- <p id="html" class="tab-pane " >这是HTML面板</p> -->
<a href="#" id="html" class="tab-pane">我是html</a>
</div>
三.工具提示 Tooltips tooltip.js
Copy
<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>
<!-- 光拷代码是没有用的，必须自己添加jq代码： $(\'#example\').tooltip();-->
<script>
获得所有的data-toggle的对象，给他们设置一个事件 tooltip
$("[data-toggle =\'tooltip\']").tooltip();
</script>
四.弹出框 Popovers popover.js
Copy
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="内容，可以自己设置">
Popover on left
</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 top
</button>
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamussagittis lacus vel augue laoreet rutrum faucibus.">
Popover on bottom
</button>
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on right
</button>
<!-- 必须自己添加jq代码 -->
<script>
$("[data-toggle =\'popover\']").popover();
</script>
五 .折叠 Collapse collapse.js
bootstrap版本的代码
<!-- (1)设置一个div class为 panel-group -->
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<!-- (1)面板 -->
<div class="panel panel-default">
<!-- （2）此面板只有Heading 还可以有 /panel-heading/panel-body-->
<div class="panel-heading" role="tab" id="headingOne">
<!-- (3)标题 -->
<h4 class="panel-title">
<!-- a 链接有一个 事件，collapse 折叠，对折叠1（collapseOne ）的对象造成影响 -->
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
这是第一个部分
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
内容。文字区域
</div>
</div>
<!-- ...............第二个面板...同第一个面板............... -->
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
这是第二个部分
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
内容。文字区域
</div>
</div>
</div>
</div>
====================简单版本====================
<!-- (1)创建一个button
（2）创建一个div面板
（3）给button增加事件 折叠事件
-->
<button class="btn btn-info btn-lg" data-toggle="collapse" data-target="#demo">按钮</button>
<!-- 小bug a标签通过href=#来控制折叠对象
button或者其他可以用 data-target(绑定对象)
-->
<!-- 这样已经完成了 -->
<!-- <div id="demo" class="in">
我就是面板。爱咋咋，爱的空间按回电话艾克好看后代卡号那块立方卡<br>
ajka akd hakdhna ldkaljaa.ansc,cfav,cmam,va,vcma,mmd,am,dm,am,a
adakd akjahfjka jkafh
</div> -->
<!-- bootstrap里面 多加了一个class .collapse -->
<div id="demo" class="collapse in">
我就是面板。爱咋咋，爱的空间按回电话艾克好看后代卡号那块立方卡<br>
ajka akd hakdhna ldkaljaa.ansc,cfav,cmam,va,vcma,mmd,am,dm,am,a
adakd akjahfjka jkafh
</div>
六.轮播图 Carousel carousel.js
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators轮播图上的小圆圈（导航点）-->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides 图片区域 -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
...
</div>
<!-- Controls 左右的箭头 -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
转载自：http://www.cnblogs.com/zhaojing/p/6183486.html。