编程 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小框架 fly javascript framework

Nov 26 Javascript

JQuery 学习技巧总结

May 21 Javascript

jQuery find和children方法使用

Jan 31 Javascript

js关闭浏览器窗口及检查浏览器关闭事件

Sep 03 Javascript

node.js适合游戏后台开发吗？

Sep 03 Javascript

jQuery使用toggleClass方法动态添加删除Class样式的方法

Mar 26 Javascript

Javascript模仿淘宝信用评价实例(附源码)

Nov 26 Javascript

详解AngularJS实现表单验证

Dec 10 Javascript

animate 实现滑动切换效果【实例代码】

May 05 Javascript

Bootstrap 布局组件（全）

Jul 18 Javascript

Node.js配合node-http-proxy解决本地开发ajax跨域问题

Aug 31 Javascript

如何基于viewport vm适配移动端页面

Nov 13 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异步执行的常用方式详解

2013/06/03 PHP

laravel5.6框架操作数据curd写法(查询构建器)实例分析

2020/01/26 PHP

javascript for循环从入门到偏门(效率优化+奇特用法)

2012/08/01 Javascript

javascript标签在页面中的位置探讨

2013/04/11 Javascript

如何动态的导入js文件具体该怎么实现

2014/01/14 Javascript

jquery实现的树形目录实例

2015/06/26 Javascript

Javascript 计算字符串在localStorage中所占字节数

2015/10/21 Javascript

原生JS封装Ajax插件(同域、jsonp跨域)

2016/05/03 Javascript

jQuery实现简单的tab标签页效果

2016/09/12 Javascript

jQuery实现点击某个div打开层，点击其他div关闭层实例分析(阻止冒泡)

2016/11/18 Javascript

Ajax的概述与实现过程

2016/11/18 Javascript

vuex的使用及持久化state的方式详解

2018/01/23 Javascript

浅谈vue单一组件下动态修改数据时的全部重渲染

2018/03/01 Javascript

js中split()方法得到的数组长度问题

2018/07/19 Javascript

JS实现数组的增删改查操作示例

2018/08/29 Javascript

微信小程序设置全局请求URL及封装wx.request请求操作示例

2019/04/02 Javascript

Vue组件为什么data必须是一个函数

2020/06/11 Javascript

微信小程序实现选项卡滑动切换

2020/10/22 Javascript

Fiddler如何抓取手机APP数据包

2016/01/22 Python

Python简单定义与使用字典dict的方法示例

2017/07/25 Python

Python数据结构与算法之图的基本实现及迭代器实例详解

2017/12/12 Python

tensorflow 使用flags定义命令行参数的方法

2018/04/23 Python

基于pip install django失败时的解决方法

2018/06/12 Python

python 计算两个列表的相关系数的实现

2019/08/29 Python

Python递归实现打印多重列表代码

2020/02/27 Python

pytorch 常用函数 max ,eq说明

2020/06/28 Python

HomeAway澳大利亚：预订你的度假屋，公寓、度假村、别墅等

2019/02/20 全球购物

毕业生简单求职信

2013/11/19 职场文书

渠道运营商合作协议书范本

2014/10/06 职场文书

党的群众路线教育实践活动教师自我剖析材料

2014/10/09 职场文书

保研推荐信格式

2015/03/25 职场文书

2019年浪漫婚礼证婚词

2019/06/27 职场文书

JavaScript继承的三种方法实例

2021/05/12 Javascript

MySql开发之自动同步表结构

2021/05/28 MySQL

golang中的struct操作

2021/11/11 Golang

阿里面试Nacos配置中心交互模型是push还是pull原理解析

2022/07/23 Java/Android