毕设中巩固的技术（二）Bootstrap常用组件实例

拿来就用的组件就不介绍了，这里主要讲解一下Bootstrap官方文档写的不那么易于理解的组件。

1、顶部导航栏上的搜索框

Bootstrap官方提供的默认样式是这样的：

这个搜索框看上去有两个问题：①按钮和搜索内容隔的太远了，最好可以放到一起 ②搜索按钮最好用一个放大镜的小图标

于是我们对这个搜索框进行改写。

<form class="navbar-form navbar-left" role="search" id="searchForm">
	<div class="form-group">
		<i class="fa fa-search"></i>
		<input type="text" class="form-control" placeholder=Search name="searchKeyWord" id="search-text">
	</div>
</form>

#searchForm {
	margin: 12px 0;
	background: #BBBBBB;
	border-radius: 10px;
}
#search-text {
	width: auto;
	padding: 0 12px;
	height: 26px;
	background: #BBBBBB;
	vertical-align: middle;
	border-radius: 10px;
	border: 0;
}
input#search-text:focus {
	border-radius: 10px;
}

实现好的效果如下：

2、弹出框的用法

这个应该算Bootstrap比较坑爹的组件了，先来看看它的用法

名称	类型	默认值	描述
animation	boolean	true	为popover增加一个渐变动画的效果
html	boolean	false	popover的content可以使用html
placement	string | function	'right'	popover出现的位置，选项可以是： - top | bottom | left | right | auto.
selector	string	false	这个比较有用，当页面上有动态生成的元素时，指定了selector的匹配规则可以匹配到新添加的元素。类似于jquery里$('body').on('click', ".rest", function(){}).
trigger	string	'click'	popover如何被触发，选项有： - click | hover | focus | manual
title	string | function	''	popover的标题
content	string | function	''	popover的内容
delay	number | object	0	延时 delay: { show: 500, hide: 100 } show指定的是出现之前的延时，hide指定是隐藏前的延时
container	string | false	false	官方文档上说是防止在窗口缩放大小的时候让popover有一个可以依赖的点。但是我实验了一下好像没什么作用，希望大家有知道的告诉下。

下面来说说它坑爹的地方：仔细看title和content的类型，写的是string|function。看到function，第一反应这个值应该是可变的，但是不幸的是，popover只是在页面刚刚载入的时候生成内容，之后内容就不变了。

我们可以来试试：

$(function() {
	$('#test').popover( {
		'title' : getDynamicTitle(),
		'content' : getDynamicContent(),
		'trigger' : 'click'
	});
});

function getDynamicContent() {
	return new Date();
}

function getDynamicTitle() {
	return new Date();
}

发现生成的popover的时间总是固定的，就是刚载入页面的那个时间。这就大大限制了这个组件的功能，不过也有方法来弥补。

我们可以弹出框之后再通过ajax把内容填充进去，为了增强用户体验，可以在读取数据的时候先弄个载入动画放到这个popover里。

我们这里用popover实现一个简单的购物车：

$('#cartBtn').popover( {
	html : true,
	placement : "bottom",
	trigger : "click",
	content : "您的购物车还是空的，先去挑选美食吧"
}).on("click", function(e) {
	getCartData();
});

getCartData方法则会通过ajax与后台交互得到数据并塞到popover中，这样便实现了popover动态载入内容，实现效果如下：