拿来就用的组件就不介绍了,这里主要讲解一下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有一个可以依赖的点。但是我实验了一下好像没什么作用,希望大家有知道的告诉下。 |
我们可以来试试:
$(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动态载入内容,实现效果如下: