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

关于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 职场文书