首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 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>

结果：

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

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

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

- Author -

deepquiet

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

Javascript 相关文章推荐
JavaScript 学习笔记 Black.Caffeine 09.11.28
Nov 30 Javascript
Javascript学习笔记1 数据类型
Jan 11 Javascript
jquery.validate使用攻略 第二部
Jul 01 Javascript
jQuery插件实现屏蔽单个元素使用户无法点击
Apr 12 Javascript
javascript表单验证使用示例(javascript验证邮箱)
Jan 07 Javascript
javascript生成随机数的方法
May 16 Javascript
jQuery oLoader实现的加载图片和页面效果
Mar 14 Javascript
js实现横向伸展开的二级导航菜单代码
Aug 28 Javascript
用JS实现图片轮播效果代码（一）
Jun 26 Javascript
JS简单实现禁止访问某个页面的方法
Sep 13 Javascript
解决vue cli使用typescript后打包巨慢的问题
Sep 30 Javascript
vue3.0实现插件封装
Dec 14 Vue.js
基于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
uniapp(4) Normal From(1) tabBar(1) element-china-area-data(1) SpringBoot(22) capture(1) MybatisPlus(2) JSON(10) Flutter(2) self(1)
You might like
PHP+Ajax简单get验证操作示例
2019/03/02 PHP
php中的依赖注入实例详解
2019/08/14 PHP
PHP生成zip压缩包的常用方法示例
2019/08/22 PHP
javascript getElementsByClassName 和js取地址栏参数
2010/01/02 Javascript
封装的原生javascript弹出层代码
2010/09/24 Javascript
ajax 同步请求和异步请求的差异分析
2011/07/04 Javascript
Array.prototype.concat不是通用方法反驳[译]
2012/09/20 Javascript
Javascript中自动切换焦点实现代码
2012/12/15 Javascript
window.location.href中url中数据量太大时的解决方法
2013/12/23 Javascript
jQuery学习笔记之jQuery构建函数的7种方法
2014/06/03 Javascript
JS+DIV+CSS实现仿表单下拉列表效果
2015/08/18 Javascript
JavaScript中定义类的方式详解
2016/01/07 Javascript
使用Node.js处理前端代码文件的编码问题
2016/02/16 Javascript
bootstrap table实例详解
2017/01/06 Javascript
微信小程序实现的涂鸦功能示例【附源码下载】
2018/01/12 Javascript
微信小程序实现animation动画
2018/01/26 Javascript
node打造微信个人号机器人的方法示例
2018/04/26 Javascript
在小程序中使用canvas的方法示例
2018/09/17 Javascript
jQuery Migrate 插件用法实例详解
2019/05/22 jQuery
Vue开发中遇到的跨域问题及解决方法
2020/02/11 Javascript
js实现无缝轮播图
2020/03/09 Javascript
如何在vue 中引入使用jquery
2020/11/10 jQuery
Python下singleton模式的实现方法
2014/07/16 Python
浅谈Python中copy()方法的使用
2015/05/21 Python
Python中的TCP socket写法示例
2018/05/11 Python
jupyter notebook 使用过程中python莫名崩溃的原因及解决方式
2020/04/10 Python
python实现快速文件格式批量转换的方法
2020/10/16 Python
Pycharm配置autopep8实现流程解析
2020/11/28 Python
HTML5 video 视频标签使用介绍
2014/02/03 HTML / CSS
优质美利奴羊毛袜，不只是徒步旅行：Darn Tough Vermont
2018/11/05 全球购物
财务总监管理岗位职责
2014/03/08 职场文书
优秀家长自荐材料
2014/08/26 职场文书
副总经理党的群众路线教育实践活动个人对照检查材料思想汇报
2014/10/06 职场文书
创业计划书之养殖业
2019/10/11 职场文书
直播实况, OMG破敌三路五十分钟大战神技局摩托车
2022/04/01 DOTA
mysql使用FIND_IN_SET和group_concat两个方法查询上下级机构
2022/04/20 MySQL