BootStrap学习1 输入提示
首先参考这个页面http://www.bootcss.com/javascript.html#typeahead
我只是把里面最基本的东西抠出来了
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="http://cdnjs.bootcss.com/ajax/libs/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
</body> <div class="bs-docs-example" style="background-color: #f5f5f5;">
<input type="text" class="span3" style="margin: 0 auto;" autocomplete="off" data-provide="typeahead" data-items="4" data-source="["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Dakota","North Carolina","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"]"> </div>
<script>
$('.typeahead').typeahead(); </script>
</html>
好了 其实这是个很没营养的例子 使用BootStrap呢 需要引用三个文件 一个是bootstrap.css
接着就是jQuery 再就是bootstrap.js
去这里下载吧http://www.bootcss.com/
或者引用这个(这下面没有包含CSS)
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
<script src="http://twitter.github.io/bootstrap/assets/js/jquery.js"></script>
<script src="http://twitter.github.io/bootstrap/assets/js/bootstrap-transition.js"></script>
<script src="http://twitter.github.io/bootstrap/assets/js/bootstrap-alert.js"></script>
<script src="http://twitter.github.io/bootstrap/assets/js/bootstrap-modal.js"></script>
<script src="http://twitter.github.io/bootstrap/assets/js/bootstrap-dropdown.js"></script>
<script src="http://twitter.github.io/bootstrap/assets/js/bootstrap-scrollspy.js"></script>
<script src="http://twitter.github.io/bootstrap/assets/js/bootstrap-tab.js"></script>
<script src="http://twitter.github.io/bootstrap/assets/js/bootstrap-tooltip.js"></script>
<script src="http://twitter.github.io/bootstrap/assets/js/bootstrap-tooltip.js"></script>
<script src="http://twitter.github.io/bootstrap/assets/js/bootstrap-tooltip.js"></script>
<script src="http://twitter.github.io/bootstrap/assets/js/bootstrap-collapse.js"></script>
<script src="http://twitter.github.io/bootstrap/assets/js/bootstrap-carousel.js"></script>
<script src="http://twitter.github.io/bootstrap/assets/js/bootstrap-typeahead.js"></script>
<script src="http://twitter.github.io/bootstrap/assets/js/bootstrap-affix.js"></script>
<script src="http://twitter.github.io/bootstrap/assets/js/holder/holder.js"></script>
<script src="http://twitter.github.io/bootstrap/assets/js/holder/holder.js"></script>
<script src="http://twitter.github.io/bootstrap/assets/js/application.js"></script>
之后呢 就这么用
<input type="text" id="myElement"/>
<script type="text/javascript">
/*js数组的两种定义方式
var mycars=["Saab","Volvo","BMW"];
var mycars=new Array("Saab","Volvo","BMW")
{XX:XX}是对象的一个实例
person={firstname:"John",lastname:"Doe",age:50,eyecolor:"blue"};
*/
var mySource = [{ id: 1, name: 'Terry'}, { id: 2, name: 'Mark'}, { id: 3, name: 'Jacob'}];
var jsonString = '[{"label":"System Administrator","value":"1"},{"label":"Software Tester","value":"3"},{"label":" Software Developer","value":"4"},{"label":"Senior Developer","value":"5"},{"label":"Cloud Developer","value":"6"},{"label":"Wordpress Designer","value":"7"}]';
var jsonObj = $.parseJSON(jsonString);
var sourceArr = [];
for (var i = 0; i < jsonObj.length; i++) {
sourceArr.push(jsonObj[i].label);
}
var sourceX=["aaa","bbb","CCC"];
$('#myElement').typeahead({
//source:mySource
source:sourceArr
}); //-----ok
</script>
这里展示了两种数据源 一种是javascript对象数组 一种是json数据
其实呢 json数据也是先处理为javascript数组再用的 这里的例子是将这里json的数据处理成了sourceX那种的的形式
放在了sourceArr中
好啦 下一个随笔来写如何结合使用ajax
BootStrap学习1 输入提示的更多相关文章
- BootStrap入门教程 (四) ：JQuery类库插件（模态窗口，滚动监控，标签效果，提示效果，“泡芙”效果，警告区域，折叠效果，旋转木马，输入提示）
上讲回顾:Bootstrap组件丰富同时具有良好可扩展性,能够很好地应用在生产环境.这些组件包括按钮(Button),导航(Navigation),缩略图( thumbnails),提醒(Alert) ...
- python利用Trie(前缀树)实现搜索引擎中关键字输入提示（学习Hash Trie和Double-array Trie）
python利用Trie(前缀树)实现搜索引擎中关键字输入提示(学习Hash Trie和Double-array Trie) 主要包括两部分内容:(1)利用python中的dict实现Trie:(2) ...
- Bootstrap学习笔记(二) 表单
在Bootstrap学习笔记(一) 排版的基础上继续学习Bootstrap的表单,编辑器及head内代码不变. 3-1 基础表单 单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文 ...
- BootStrap学习（2）
使用Bootstrap添加代码框 可先看:简介.引入.包下载等:http://www.cnblogs.com/0201zcr/p/4900062.html Bootstrap 允许您以两种方式显示代码 ...
- python 全栈开发，Day57(响应式页面-@media介绍,jQuery补充,移动端单位介绍,Bootstrap学习)
昨日内容回顾 ajax //get post 两种方式 做 请求 get 主要是获取数据 post 提交数据 同一个路由地址 既可以是get请求也可以是post请求 一个路由对应一个函数 get请求 ...
- Bootstrap~学习笔记索引
回到占占推荐博客索引 bootstrap已经用了有段时间了,感觉在使用上还是比较容易接受的,在开发人员用起来上,也还好,不用考虑它的兼容性,手机,平台,PC都可以有效的兼容. bootstrap官方a ...
- Bootstrap学习（3）
Bootstrap 图片 Bootstrap 对图片的支持.Bootstrap 提供了三个可对图片应用简单样式的 class: .img-rounded:添加 border-radius:6px 来 ...
- Bootstrap 学习（1）
简介 Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷. Bootst ...
- 前端框架——BootStrap学习
BootStrap简单总结下:1.栅格系统,能够很好的同时适应手机端和PC端(及传说中的响应式布局) 2.兼容性好 接下来是对BootStrap学习的一些基础案例总结和回顾: 首先引入:bootstr ...
随机推荐
- iOS点滴－ ViewController详解
一.生命周期 当一个视图控制器被创建,并在屏幕上显示的时候. 代码的执行顺序 1. alloc 创建对象,分配空间 2.init (initW ...
- STMP发送邮件被当垃圾邮件处理的解决方法
昨天使用了.Net通过smtp发送邮件的方式发送了一封邮件到自己的QQ邮箱,但是发送成功后并没有提示邮箱收到新的邮件,而且去收件箱里面也没有新增的邮件. 这让本人觉得奇怪,所以就觉得是否被当作垃圾邮件 ...
- C++中常用特殊符号简介（& , * , : , :: , ->）
1."&"一般表示:引用,按位与,取地址. 如: class Complex { public: Complex operator+(Complex &c2) .. ...
- C++_知识点_结构体/枚举/联合
//C++中结构体的不同之处 #include <iostream> #include <string> using namespace std; int main(void) ...
- c++ primer plus 习题答案(1)
c++ primer plus 习题答案用的是第五版,IDE仍然是vs2013.我只标注了题号,具体的题目找下书上对应内容吧. p110.8 #include<iostream> #inc ...
- java实现cmd的copy功能
import java.io.File; import java.io.FileInputStream; import java.io.FileNotFoundException; import ja ...
- grunt打包过程中的注意点
1.安装nodeJS nodeJS下载地址: http://www.nodejs.org/download/ 2. 在Node.js command prompt 这个控制面板输入 npm i ...
- glib源码安装使用方法
glib库是GTK+和GNOME工程的基础底层核心程序库,是一个综合用途的实用的轻量级的C程序库,它提供C语言的常用的数据结构的定义.相关的处理函数,有趣而实用的宏,可移植的封装和一些运行时机能,如事 ...
- ObjectiveC 文件操作二
10,文件委托,以便操作文件.头部看起来像是这样. @interface MyFileManager : NSObject @property(strong)NSFileManager *fileMa ...
- Python2.7.3 学习——准备开发环境
安装环境搭建参考:http://blog.163.com/sunshine_linting/blog/static/4489332320129187464222/ 第一种方式,通过命令行方式安装Pyt ...