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

原创 2014年06月25日 22:06:02

拿来就用的组件就不介绍了,这里主要讲解一下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动态载入内容,实现效果如下:



版权声明:本文为博主原创文章,未经博主允许不得转载。

毕设中巩固的技术(三)Bootstrap常用组件之二

毕设中巩固的技术(二)中,讲解了 3、
  • u012345283
  • u012345283
  • 2014年06月29日 23:09
  • 2908

java毕设---基于bootstrap+jsp+mysql+servlet开发的日记本系统

联系qq:2835777178   有兴趣者可以联系我,也可先查看项目运行视频再决定 系统功能截图一、系统登录二、系统主界面三、写日记界面四、日记分类管理界面五、日记类别添加界面六、个人管理中心......
  • myzczx
  • myzczx
  • 2018年02月13日 13:05
  • 2110

毕设问题自己总结的

毕设问题(总结) 1.首先,所有的web应用采用的都是B/S(brower/server),另一种是C/S.通俗点说,就是一个基于浏览器,一个基于客户端,exe文件的都是C/S。 2.Mongod...
  • u013775952
  • u013775952
  • 2018年01月08日 15:41
  • 36

Python数据分析之pandas学习(二)

有关pandas模块的学习与应用主要介绍以下8个部分: 1、数据结构简介:DataFrame和Series 2、数据索引index 3、利用pandas查询数据 4、利用pandas的DataFram...
  • xx5595480
  • xx5595480
  • 2017年04月15日 11:29
  • 707

java毕设--基于ssh框架开发的个人博客系统

联系qq:2835777178   有兴趣者可以联系我,也可先查看项目运行视频再决定项目部分功能界面一、博客主页面二、关于我三、个人日记四、用户登录界面五、登录后主界面六、个人资料管理界面在这里其他界...
  • myzczx
  • myzczx
  • 2018年02月13日 13:02
  • 2804

2017/6/6日-本科毕设那些事

6月6日第五组第一个答辩,我的本科毕业设计答辩结束了,它和我预想的差距很大,答辩结束后整个人都不好了,它甚至影响了毕业晚会、聚餐、拍照的心情。为什么这样说?因为自己想拿优秀毕设,这也是导师所期望的。至...
  • Bluechalk
  • Bluechalk
  • 2017年05月11日 20:22
  • 864

java毕设项目源码

本人整理了一些学习过程中开发的java项目,项目名称如下: 1.客户关系管理系统          工作区间:D:\develop\MyEclipse10\ProjectDemo          ...
  • HuaSir004
  • HuaSir004
  • 2017年12月28日 00:12
  • 215

android毕设(1)

1.android 入门 1. Android状态学习 Activity是由Activity栈进管理,当来到一个新的Activity后,此Activity将被加入到Activity栈顶,之前的Acti...
  • u014698349
  • u014698349
  • 2017年04月19日 10:28
  • 248

Android毕设总结(基于Android的金融软件系统)

界面上: 1,界面采用了一贯的viewpager+radiogroud。通过寻找滑动到边缘的规律设置滑动到边际时,弹出DrawerLayouy(侧边导航栏)。代码一中是如何实现侧滑出现导航栏。 2,在...
  • sinat_20259781
  • sinat_20259781
  • 2017年06月15日 12:22
  • 493

2014 android毕设代做 代做Android毕设 安卓毕设

最近略有闲暇。 看到部分老友帮忙做毕业设计。 一来可以锻炼下小技能,二来可以得点零花小钱。 心遂小动,跃跃欲试。 毕设这件事情,个人认为还是自己做的好。 不过每个人都有各种各样的原因不能自己完...
  • Singleton1900
  • Singleton1900
  • 2014年04月23日 16:18
  • 5247
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:毕设中巩固的技术(二)Bootstrap常用组件实例
举报原因:
原因补充:

(最多只允许输入30个字)