Bootstrap导航中表单简单实现代码


Posted in Javascript onMarch 06, 2017

导航中图标,表单的编程:

<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Bootstrap 101 Template</title>
<link href="http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap-theme.min.css" rel="external nofollow" rel="external nofollow" rel="stylesheet">
<link href="http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="stylesheet">
</head>
<body>

<nav class="navbar navbar-default" role="navigation">
<!--
<nav class="navbar navbar-default navbar-inverse" role="navigation">
-->
<div class="container-fluid">
<!-- 导航图标 -->
<div class="navbar-header">
<a class="navbar-brand" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
<img alt="Brand" src="1.jpg">
</a>
</div>
<!-- 导航表单 -->
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<!-- 输入 -->
<input type="text" class="form-control" placeholder="Search">
</div>
<!-- 按钮 -->
<button type="submit" class="btn btn-default">Submit</button>
</form>
<button type="button" class="btn btn-default navbar-btn">Sign in</button>
<!-- 非导航的链接 -->
<p class="navbar-text navbar-right">Signed in as<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="navbar-link">
Mark Otto</a></p>
</div>
</nav>
<!-- 路径导航 -->

<script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.1/js/npm.js"></script>
</body>
</html>

结果:

Bootstrap导航中表单简单实现代码

路径导航:

<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Bootstrap 101 Template</title>
<link href="http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap-theme.min.css" rel="external nofollow" rel="external nofollow" rel="stylesheet">
<link href="http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="stylesheet">
</head>
<body>
<!-- 路径导航 -->
<ol class="breadcrumb">
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >home</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >libray</a></li>
<li class="active">data</li>
</ol>
<script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.1/js/npm.js"></script>
</body>
</html>

结果:

Bootstrap导航中表单简单实现代码

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
转一个日期输入控件,支持FF
Apr 27 Javascript
javascript中运用闭包和自执行函数解决大量的全局变量问题
Dec 30 Javascript
js获得地址栏?问号后参数的方法
Aug 08 Javascript
JQuery设置时间段下拉选择实例
Dec 30 Javascript
jQuery使用animate创建动画用法实例
Aug 07 Javascript
Jquery zTree 树控件异步加载操作
Feb 25 Javascript
JS开发中百度地图+城市联动实现实时触发查询地址功能
Apr 13 Javascript
vue-cli的eslint相关用法
Sep 29 Javascript
JS如何把字符串转换成json
Feb 21 Javascript
原生JS实现微信通讯录
Jun 18 Javascript
详解JavaScript之ES5的继承
Jul 08 Javascript
element-ui中el-upload多文件一次性上传的实现
Dec 02 Javascript
基于JS实现仿百度百家主页的轮播图效果
Mar 06 #Javascript
JS字符串长度判断,超出进行自动截取的实例(支持中文)
Mar 06 #Javascript
Bootstrap导航简单实现代码
Mar 06 #Javascript
Bootstrap栅格系统简单实现代码
Mar 06 #Javascript
javascript DOM的详解及实例代码
Mar 06 #Javascript
vue + socket.io实现一个简易聊天室示例代码
Mar 06 #Javascript
EasyUI为Numberbox添加blur事件的方法
Mar 05 #Javascript
You might like
将文件夹压缩成zip文件的php代码
2009/12/14 PHP
php正则表达式基本知识与应用详解【经典教程】
2017/04/17 PHP
thinkPHP5.1框架中Request类四种调用方式示例
2019/08/03 PHP
PHP 构造函数和析构函数原理与用法分析
2020/04/21 PHP
javascript 检测浏览器类型和版本的代码
2009/09/15 Javascript
jquery之empty()与remove()区别说明
2010/09/10 Javascript
js里取容器大小、定位、距离等属性搜集整理
2013/08/19 Javascript
javascript dom追加内容实现示例
2013/09/21 Javascript
点击标签切换和自动切换DIV选项卡
2014/08/10 Javascript
js根据鼠标移动速度背景图片自动旋转的方法
2015/02/28 Javascript
js实现对table的增加行和删除行的操作方法
2016/10/13 Javascript
jQuery滚动插件scrollable.js用法分析
2017/05/25 jQuery
基于Vue.js实现tab滑块效果
2017/07/23 Javascript
原生JS 购物车及购物页面的cookie使用方法
2017/08/21 Javascript
详解基于Vue-cli搭建的项目如何和后台交互
2018/06/29 Javascript
详解小程序毫秒级倒计时(适用于拼团秒杀功能)
2019/05/05 Javascript
javascript实现打砖块小游戏(附完整源码)
2020/09/18 Javascript
原生JavaScript实现幻灯片效果
2021/02/19 Javascript
[02:57]DOTA2英雄基础教程 风行者
2014/01/16 DOTA
[58:42]DOTA2上海特级锦标赛C组败者赛 Newbee VS Archon第一局
2016/02/27 DOTA
[47:42]Fnatic vs Liquid 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
在Python中使用itertools模块中的组合函数的教程
2015/04/13 Python
使用python获取电脑的磁盘信息方法
2018/11/01 Python
Python Selenium 之关闭窗口close与quit的方法
2019/02/13 Python
关于pytorch处理类别不平衡的问题
2019/12/31 Python
Python安装OpenCV的示例代码
2020/03/05 Python
使用opencv识别图像红色区域,并输出红色区域中心点坐标
2020/06/02 Python
keras读取h5文件load_weights、load代码操作
2020/06/12 Python
犹他州最古老的体育用品公司:Al’s
2020/12/18 全球购物
介绍一下Prototype的$()函数,$F()函数,$A()函数都是什么作用?
2014/03/05 面试题
医学检验专业大学生求职信
2013/11/18 职场文书
2015会计试用期工作总结
2014/12/12 职场文书
vue中三级导航的菜单权限控制
2021/03/31 Vue.js
浅谈MySQL之浅入深出页原理
2021/06/23 MySQL
springboot项目以jar包运行的操作方法
2021/06/30 Java/Android
Python绘画好看的星空图
2022/03/17 Python