[百度搜索框Bootstrap模仿]
本文共 2112 字，大约阅读时间需要 7 分钟。
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>百度搜索框提示功能</title> <!-- Bootstrap CSS样式配置--> <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"> <style> /*这里修改提示框的字体样式*/ .bdSug_wpr { color: black; } </style> </head> <body> <!-- 百度搜索框 参考地址: http://blog.csdn.net/chandoudeyuyi/article/details/51895804 http://www.uedbox.com/baidu-search-code/#_motz_ --> <form action="http://www.baidu.com/baidu" target="_blank"> <!-- 将两个元素整合为一体需要下面两步~ 1.将div的Class属性改变成form-inline 可以让下面的两个input并排显示--> <div class="form-inline input-group"> <!--UTF-8编码--> <input name=ie type=HIDDEN value=utf-8/> <input name=tn type=HIDDEN value=baidu/> <!--2.利用span标签的 input-group-btn 属性包裹一个input元素--> <span class="input-group-btn"> <!-- baiduSug: 当设置baiduSug=1时，用户选中sug词条时默认执行表单提交动作； 当设置baiduSug=2时，用户选中sug词条时不执行表单提交动作。 style : "width:260px;" 调整搜索框长度 --> <input id="kw" type="text" class="form-control" placeholder="搜你想搜的" name="word" size="30" baiduSug="1" style="width:240px;"> <!--提交按钮--> <input type="submit" class="btn btn-default" value="百度一下"/> </span> </div> </form> </body> <!-- 百度搜索框提示 Javascript代码请添加到网页中</body>标签的后面， 如使用utf-8编码，请务必在script标签中设置charset=gbk属性，否则搜索提示词会出现乱码。 --> <script charset="gbk" src="http://www.baidu.com/js/opensug.js"></script> <!--JQuery JS依赖--> <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script> <!--Bootstrap JS依赖--> <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script></html>
你可能感兴趣的文章
C++中的delete加深认识
查看>>
svn解决方案
查看>>
GCC -l选项：手动添加链接库
查看>>
GCC 生成动态链接库
查看>>
windows消息机制(转)
查看>>
STL笔试面试题总结（干货）(转)
查看>>
XML 和 HTML 之间的差异
查看>>
qt中moc的作用
查看>>
阿里钉钉面试题
查看>>
华为社招笔试
查看>>
MFC的Dlg和App什么区别？应用程序类与对话框类
查看>>
C\C++下获取系统进程或线程ID（转）
查看>>
VS环境变量（转）
查看>>
C++中找资源或者函数的方法
查看>>
_T和_L的区别
查看>>
一些留给自己的思考题（只求回过头来能够有所获）
查看>>
SQL函数返回表的写法
查看>>
delete对象时会自动调用类的析构函数
查看>>
C++ 子类对象直接赋值给父类对象可行,反过来不行
查看>>
WMWare下安装centOS7,并使用xshell进行连接记录.
查看>>