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 相关文章推荐
关于javascript中this关键字(翻译+自我理解)
Oct 20 Javascript
Jquery实现带动画效果的经典二级导航菜单
Mar 22 Javascript
js冒泡、捕获事件及阻止冒泡方法详细总结
May 08 Javascript
table insertRow、deleteRow定义和用法总结
May 14 Javascript
原生javascript+css3编写的3D魔方动画旋扭特效
Mar 14 Javascript
ES6中的数组扩展方法
Aug 26 Javascript
javascript数组对象常用api函数小结(连接,插入,删除,反转,排序等)
Sep 20 Javascript
js实现移动端编辑添加地址【模仿京东】
Apr 28 Javascript
用npm安装vue和vue-cli,并使用webpack创建项目的方法
Sep 28 Javascript
p5.js绘制旋转的正方形
Oct 23 Javascript
jQuery HTML获取内容和属性操作实例分析
May 20 jQuery
jquery实现点击左右按钮切换图片
Jan 27 jQuery
基于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
php遍历文件夹下的所有文件和子文件夹示例
2014/03/20 PHP
PHP CURL 多线程操作代码实例
2015/05/13 PHP
php安装dblib扩展,连接mssql的具体步骤
2017/03/02 PHP
PHP获取HTTP body内容的方法
2018/12/31 PHP
php设计模式之原型模式分析【星际争霸游戏案例】
2020/03/23 PHP
javascript 获取页面的高度及滚动条的位置的代码
2010/05/06 Javascript
Extjs单独定义各组件的实例代码
2013/06/25 Javascript
使用jquery hover事件实现表格的隔行换色功能示例
2013/09/03 Javascript
jquery实现手风琴效果实例代码
2013/11/15 Javascript
JavaScript生成二维码图片小结
2015/12/27 Javascript
使用JQuery 加载页面时调用JS的实现方法
2016/05/30 Javascript
Node之简单的前后端交互(实例讲解)
2017/11/14 Javascript
jquery实现动态添加附件功能
2018/10/23 jQuery
JavaScript中的类型检查
2020/02/03 Javascript
基于Ionic3实现选项卡切换并重新加载echarts
2020/09/24 Javascript
[04:16]DOTA2英雄梦之声_第09期_斧王
2014/06/21 DOTA
[43:03]完美世界DOTA2联赛PWL S2 PXG vs Magma 第二场 11.21
2020/11/24 DOTA
对Python新手编程过程中如何规避一些常见问题的建议
2015/04/01 Python
Python中编写ORM框架的入门指引
2015/04/29 Python
编写Python CGI脚本的教程
2015/06/29 Python
Python脚本实现自动将数据库备份到 Dropbox
2017/02/06 Python
Python3 中文文件读写方法
2018/01/23 Python
Python面向对象总结及类与正则表达式详解
2019/04/18 Python
python 实现方阵的对角线遍历示例
2019/11/29 Python
Python如何输出百分比
2020/07/31 Python
Python 解析库json及jsonpath pickle的实现
2020/08/17 Python
2分钟教你实现环形/扇形菜单(基础版)
2020/01/15 HTML / CSS
新加坡最受追捧的体验平台:Hapz
2018/01/01 全球购物
全球最大的游戏市场:G2A
2018/07/05 全球购物
捷克购买家具网站:JENA nábytek
2020/03/19 全球购物
Deichmann英国:德国鞋类零售商
2021/01/30 全球购物
课改先进个人汇报材料
2014/01/26 职场文书
领导班子整改方案和个人整改措施
2014/10/25 职场文书
2014年优质护理服务工作总结
2014/11/14 职场文书
2014年英语教学工作总结
2014/12/17 职场文书
2015年学校教育教学工作总结
2015/04/22 职场文书