编程 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 相关文章推荐

菜单效果

Oct 14 Javascript

读jQuery之十二删除事件核心方法

Jul 31 Javascript

jQuery插件分享之分页插件jqPagination

Jun 06 Javascript

javascript日期处理函数，性能优化批处理

Sep 06 Javascript

JS弹出对话框实现方法(三种方式)

Dec 18 Javascript

jquery ajax分页插件的简单实现

Jan 27 Javascript

Node.js中JavaScript操作MySQL的常用方法整理

Mar 01 Javascript

JavaScript实现设计模式中的单例模式的一些技巧总结

May 17 Javascript

javascript编写简易计算器

May 06 Javascript

初探JavaScript 面向对象(推荐)

Sep 03 Javascript

js+SVG实现动态时钟效果

Jul 14 Javascript

jQuery实现穿梭框效果

Jan 19 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与SQL注入攻击防范小技巧

2011/09/16 PHP

解析strtr函数的效率问题

2013/06/26 PHP

使用PHP接受文件并获得其后缀名的方法

2015/08/05 PHP

浅谈php7的重大新特性

2015/10/23 PHP

提高javascript效率一次判断,而不要次次判断

2012/03/30 Javascript

JS中不为人知的五种声明Number的方式简要概述

2013/02/22 Javascript

jQuery :first选择器使用介绍

2013/08/09 Javascript

jquery关于事件冒泡和事件委托的技巧及阻止与允许事件冒泡的三种实现方法

2015/11/27 Javascript

jquery 动态增加,减少input表单的简单方法(必看)

2016/10/12 Javascript

微信小程序开发之选项卡(窗口底部TabBar)页面切换

2017/04/12 Javascript

基于Vue实例对象的数据选项

2017/08/09 Javascript

ejsExcel模板在Vue.js项目中的实际运用

2018/01/27 Javascript

vue+element 实现商城主题开发的示例代码

2020/03/26 Javascript

[50:15]VP vs Mineski 2018国际邀请赛淘汰赛BO3 第二场 8.22

2018/08/23 DOTA

python实现在目录中查找指定文件的方法

2014/11/11 Python

python实现通过代理服务器访问远程url的方法

2015/04/29 Python

Python2.x版本中cmp()方法的使用教程

2015/05/14 Python

如何使用VSCode愉快的写Python于调试配置步骤

2018/04/06 Python

python读文件保存到字典,修改字典并写入新文件的实例

2018/04/23 Python

读取json格式为DataFrame(可转为.csv)的实例讲解

2018/06/05 Python

Python使用cx_Freeze库生成msi格式安装文件的方法

2018/07/10 Python

python中 * 的用法详解

2019/07/10 Python

python多维数组分位数的求取方式

2020/03/03 Python

python 写函数在一定条件下需要调用自身时的写法说明

2020/06/01 Python

Python常用外部指令执行代码实例

2020/11/05 Python

Python 利用Entrez库筛选下载PubMed文献摘要的示例

2020/11/24 Python

CSS3近阶段篇之酷炫的3D旋转透视

2016/04/28 HTML / CSS

用HTML5制作烟火效果的教程

2015/05/12 HTML / CSS

WatchShop法国：英国排名第一的独立手表零售商

2020/02/17 全球购物

个人自我鉴定

2013/11/07 职场文书

大队干部竞选演讲稿

2014/04/28 职场文书

2014审计局领导班子民主生活会对照检查材料思想汇报

2014/09/20 职场文书

个人先进事迹总结

2015/02/26 职场文书

小学主题班会教案

2015/08/17 职场文书

辞职报告（范文三篇）

2019/08/27 职场文书

MySQL中IO问题的深入分析与优化

2022/04/02 MySQL