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

把textarea中字符串里含有的回车换行替换成&lt;br&gt;的javascript代码

Apr 20 Javascript

javascript中onclick(this)用法介绍

Apr 19 Javascript

多引号嵌套的变量命名的问题

May 09 Javascript

JavaScript中的迭代器和生成器详解

Oct 29 Javascript

JQuery中Bind()事件用法分析

May 05 Javascript

seajs模块之间依赖的加载以及模块的执行

Oct 21 Javascript

AngularJS路由实现页面跳转实例

Mar 03 Javascript

Vue代码分割懒加载的实现方法

Nov 23 Javascript

微信小程序实现图片预览功能

Jan 31 Javascript

javascript中undefined的本质解析

Jul 31 Javascript

layer.js open 隐藏滚动条的例子

Sep 05 Javascript

如何在node环境实现“get数据解析”代码实例

Jul 03 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

解析用PHP读写音频文件信息的详解(支持WMA和MP3)

2013/05/10 PHP

PHP解密Unicode及Escape加密字符串

2015/05/17 PHP

PHP简单实现HTTP和HTTPS跨域共享session解决办法

2015/05/27 PHP

PHP观察者模式示例【Laravel框架中有用到】

2018/06/15 PHP

Aster vs KG BO3 第三场2.19

2021/03/10 DOTA

js中获取事件对象的方法小结

2011/03/13 Javascript

javascript内存管理详细解析

2013/11/11 Javascript

Javascript call和apply区别及使用方法

2013/11/14 Javascript

jQuery学习笔记之jQuery.extend(),jQuery.fn.extend()分析

2014/06/09 Javascript

jQuery实现首页顶部可伸缩广告特效代码

2015/04/15 Javascript

JS实现来回出现文字的状态栏特效代码

2015/10/31 Javascript

javascript下拉列表菜单的实现方法

2015/11/18 Javascript

JS实现的表格操作类详解(添加，删除，排序，上移，下移)

2015/12/22 Javascript

Treegrid的动态加载实例代码

2016/04/29 Javascript

JS实现的手机端精简幻灯片效果

2016/09/05 Javascript

ES6扩展运算符用法实例分析

2017/10/31 Javascript

原生js实现简单的焦点图效果实例

2017/12/14 Javascript

实时监控input框,实现输入框与下拉框联动的实例

2018/01/23 Javascript

jQuery使用$.extend(true,object1, object2);实现深拷贝对象的方法分析

2019/03/06 jQuery

vue项目使用$router.go(-1)返回时刷新原来的界面操作

2020/07/26 Javascript

openlayers实现地图测距测面

2020/09/25 Javascript

Python设计模式之组合模式原理与用法实例分析

2019/01/11 Python

python中必要的名词解释

2019/11/20 Python

pytorch加载自定义网络权重的实现

2020/01/07 Python

Python拼接字符串的7种方式详解

2020/03/19 Python

如何在Django中使用聚合的实现示例

2020/03/23 Python

Python xlwt模块使用代码实例

2020/06/10 Python

python基本算法之实现归并排序(Merge sort)

2020/09/01 Python

银行实习自我鉴定

2013/10/12 职场文书

毕业自我鉴定

2013/11/05 职场文书

2014教师研修学习体会

2014/07/08 职场文书

2015年度合同管理工作总结

2015/05/22 职场文书

2017春节晚会开幕词

2016/03/03 职场文书

2016年八一建军节活动总结

2016/04/05 职场文书

怎样做好公众演讲能力？

2019/08/28 职场文书

Nginx URL重写rewrite机制原理及使用实例

2021/04/01 Servers