编程 Javascript

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>

结果：

路径导航：

<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导航中表单简单实现代码

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

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

- Author -

deepquiet

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

JS支持带x身份证号码验证函数

Aug 10 Javascript

JS求平均值的小例子

Nov 29 Javascript

extjs 如何给column 加上提示

Jul 29 Javascript

2014年50个程序员最适用的免费JQuery插件

Dec 15 Javascript

jQuery回调函数的定义及用法实例

Dec 23 Javascript

js检测iframe是否加载完成的方法

Nov 26 Javascript

JavaScript编写检测用户所使用的浏览器的代码示例

May 05 Javascript

利用jQuery插件imgAreaSelect实现获得选择域的图像信息

Dec 02 Javascript

微信小程序与php 实现微信支付的简单实例

Jun 23 Javascript

vue添加class样式实例讲解

Feb 12 Javascript

非常漂亮的js烟花效果

Mar 10 Javascript

JavaScript如何实现防止重复的网络请求的示例

Jan 28 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

Linux环境下搭建php开发环境的操作步骤

2013/06/17 PHP

php命令行使用方法和命令行参数说明

2014/04/08 PHP

PHP的拦截器实例分析

2014/11/03 PHP

php快速排序原理与实现方法分析

2016/05/26 PHP

详解thinkphp实现excel数据的导入导出（附完整案例）

2016/12/29 PHP

PHP使用PDO创建MySQL数据库、表及插入多条数据操作示例

2019/05/30 PHP

js的event详解。

2006/09/06 Javascript

setTimeout和setInterval的浏览器兼容性分析

2007/02/27 Javascript

javascript div 遮罩层封锁整个页面

2009/07/10 Javascript

Mootools 1.2教程正则表达式

2009/09/15 Javascript

什么是DOM(Document Object Model)文档对象模型

2012/03/05 Javascript

网站繁简切换的JS遇到页面卡死的解决方法

2014/03/12 Javascript

JQuery通过AJAX从后台获取信息显示在表格上并支持行选中

2015/09/15 Javascript

JavaScript中对DOM节点的访问、创建、修改、删除

2015/11/16 Javascript

Javascript实现数组中的元素上下移动

2017/04/28 Javascript

Node.js对MongoDB数据库实现模糊查询的方法

2017/05/03 Javascript

使用mint-ui开发项目的一些心得(分享)

2017/09/07 Javascript

jQuery仿移动端支付宝键盘的实现代码

2018/08/15 jQuery

vue项目搭建以及全家桶的使用详细教程(小结)

2018/12/19 Javascript

详解vue中移动端自适应方案

2019/05/05 Javascript

python完成FizzBuzzWhizz问题(拉勾网面试题)示例

2014/05/05 Python

Python排序搜索基本算法之堆排序实例详解

2017/12/08 Python

对Pandas DataFrame缺失值的查找与填充示例讲解

2018/11/06 Python

Python3+OpenCV2实现图像的几何变换(平移、镜像、缩放、旋转、仿射)

2019/05/13 Python

python程序快速缩进多行代码方法总结

2019/06/23 Python

OpenCV模板匹配matchTemplate的实现

2019/10/18 Python

django有外键关系的两张表如何相互查找

2020/02/10 Python

世界最大的海报和艺术印刷商店：AllPosters.com

2017/02/01 全球购物

Clearly澳大利亚：购买眼镜、太阳镜和隐形眼镜

2018/04/26 全球购物

停车场管理协议书范本

2014/10/08 职场文书

就业意向协议书

2015/01/29 职场文书

简爱电影观后感

2015/06/10 职场文书

python百行代码实现汉服圈图片爬取

2021/11/23 Python

漫画「古见同学有交流障碍症」第25卷封面公开

2022/03/21 日漫

python基础之//、/与%的区别详解

2022/06/10 Python

nginx之queue的具体使用

2022/06/28 Servers