您的位置：首页 > Web前端 > BootStrap

学习Bootstrap前端组件

2015-03-17 10:12 330 查看

1.查看文档（API）网址：http://v2.bootcss.com/javascript.html#typeahead

2.bootstrap教程：

http://www.w3cschool.cc/bootstrap/bootstrap-carousel-plugin.html

3.bootstrap官网：www.getbootstrap.com

4.bootstrap中文网址：www.bootcss.com

（注意：Bootstrap的JavaScript效果是需要搭配JQuery使用的）

5.Bootstrap的定义：Bootstrap是Twitter推出的一个开发工具包，包含了一些比较常用的CSS，JavaScript代码，使用Bootstrap可以加快前端开发的速度。

6.下面是在网页中的使用：

1.引入文件

a)在<head>标签添加<meta>标签，以适应各个设备的大小

<meta name="viewport" content="width=device-width,initial-scale=1.0">

b)bootstrap.min.css ------------CSS文件

<link href=href=”http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css” rel=”stylesheet”
type=”text/css”>

c) jquery.min.js ,bootstrap.min.js ----------js文件

eg:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"type="text/javascript"></script>

<script src="http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.js"type="text/javascript"></script>
7.Bootstrap库之Modals
a）示例代码：
<div id="my_modal" class="modal hide fade">
<div class="modal-header">
<a class="close" title="关闭小窗口">×</a>

<h3>Modal标题</h3></div>
<div class="modal-body">
<p>这个div内放内容</p>
</div>
<div class="modal-footer">
<a class="btn primary">按钮一个</a>
</div>
</div>

（0）注：上面的id为my_modal的DIV就是用来显示的窗口（Modal），默认是不显示的（因为class="hide")。

（1）最后在网页中添加一个标签，这里我使用a标签，点击这个标签就会显示Modal，代码如下：		<a class="btn"  data-controls-modal="my_modal" data-backdrop="true" data-keyboard="false">按钮一个</a>

		b）标签属性讲解:			class="btn"，显示出来是一个按钮，'btn'类选择器的定义在bootstrap.min.css			data-controls-modal - 要显示的Modal的ID			data-controls-modal="my_modal"中的my_modal就是我们上面我们定义的容器DIV			data-backdrop - 背景选项			data-backdrop="true"      这个属性值表示显示黑色的页面背景且点击黑色背景会隐蔽modal			data-backdrop="false"     false,不显示黑色的背景			data-backdrop="static"    static,会显示黑色背景但点击黑色背景不会隐蔽modal			data-keyboard 键盘选项			data-keyboard="false"值可以是true或false,按下键盘ESC键时是否关闭(隐蔽)modal			这样，无需写一行JS代码就可以建立一个Modal示例了。	8.Bootstrap---------下拉框（Dropdown）				(a)用法：通过 data 属性：向链接或按钮添加 data-toggle="dropdown" 来切换下拉菜单

<div class="dropdown"> 			 <a data-toggle="dropdown" href="#">下拉菜单（Dropdown）触发器</a> 			 <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">   			 	 ...  			  </ul>		  </div>(b)如果您需要保持链接完整（在浏览器不启用 JavaScript 时有用），请使用 data-target 属性代替 href="#"
<div class="dropdown">  		<a id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">    				下拉菜单（Dropdown） <span class="caret"></span>  		</a>  		<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> 			   ...		  </ul>	 </div>

(c)通过 JavaScript：通过 JavaScript调用下拉菜单切换，请使用下面的方法：
$('.dropdown-toggle').dropdown();

(d)方法

$().dropdown('toggle');

通过编程式api对某个特定的导航条或标签页导航切换下拉菜单。

等等...其余的请查看文档（api）

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航