学习Bootstrap前端组件

最新推荐文章于 2022-06-16 22:13:24 发布

sxqzxj

最新推荐文章于 2022-06-16 22:13:24 发布

阅读量551

点赞数

文章标签： bootstrap 前端前端开发标签 javascript

本文链接：https://blog.csdn.net/sxqzxj/article/details/44338099

版权

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>标签，以适应各个设备的大小

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

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

eg:

7.Bootstrap库之Modals

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>