毕设中巩固的技术(二)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 不得不说的less

什么是LESSCSS LESSCSS是一种动态样式语言,属于CSS预处理语言的一种,它使用类似CSS的语法,为CSS的赋予了动态语言的特性,如变量、继承、运算、函数等,更方便CSS的编写和维护。 LE...

利用Pillow,几行代码实现的最简单的Django页面验证码功能

验证码本质上就是生成带有文字的图片,如果考虑到防止破解自然会涉及到许多复杂的算法,用以防止从图片中容易地识别出文字,作为一个简单的例子,以下就是利用Python的第三方图形处理模块Pillow来实现的...
  • cnweike
  • cnweike
  • 2015年04月07日 14:06
  • 6059

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

毕设中巩固的技术(二)中,讲解了 3、

毕设中巩固的技术(一)spring+velocity+ibaits的整合

最近刚做完毕业设计,上来总结下经验。 做的还是

Bootstrap常用表单组件

1 复选框 ...

【学习笔记】Bootstrap常用组件整理

Bootstrap作为twitter推出的前端开发工具包,短时间内便红遍业界。确实它功能强大并且界面美观。 虽然在实际工作中,很少会在非服务器端的项目中用到,但是bootsrap依然是值得我们在平常...

bootstrap常用组件之头部导航

以下是头部导航的代码,我只简要的对个别常用属性进行解释  总效果如图所示: 代码如下: navbar-inverse navbar-fixed-top">    //na...

转:Bootstrap的常用类(CSS和布局组件)的总结

原文地址:点击打开链接 Bootstrap通过给标签赋予一个类名(class name),来生成对应类名的效果标签 网格选项 row :行 col-*-*: 列 (第一个*...

Bootstrap的常用类(CSS和布局组件)的总结

Bootstrap通过给标签赋予一个类名(class name),来生成对应类名的效果标签网格选项row :行col-*-*: 列 (第一个*可以为xs[超小]/sm[小型]/md[中型]/lg[大型...

Bootstrap方法详解——技术与实例

Bootstrap是统计学习中一种重采样(Resampling)技术。这种看似简单的方法,对后来的很多技术都产生了深远的影响。机器学习与数据挖掘中的集成加强方法(例如Bagging,AdaBoost等...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:毕设中巩固的技术(二)Bootstrap常用组件实例
举报原因:
原因补充:

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