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

jQuery 动画基础教程

Dec 25 Javascript

javascript下arguments,caller,callee,call,apply示例及理解

Dec 24 Javascript

在JavaScript中获取请求的URL参数

Dec 22 Javascript

模拟电子签章盖章效果的jQuery插件源码

Jun 24 Javascript

Javascript核心读书有感之语言核心

Feb 01 Javascript

javascript获得当前的信息的一些常用命令

Feb 25 Javascript

JavaScript中文件上传API详解

Apr 01 Javascript

Javascript使用uploadify来实现多文件上传

Nov 16 Javascript

PHP获取当前页面完整URL的方法

Dec 02 Javascript

js点击任意区域弹出层消失实现代码

Dec 27 Javascript

使用bootstrap插件实现模态框效果

May 10 Javascript

JS实现留言板功能[楼层效果展示]

Dec 27 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

咖啡产品发展的三大浪潮

2021/03/04 咖啡文化

Thinkphp搜索时首页分页和搜索页保持条件分页的方法

2014/12/05 PHP

如何使用Gitblog和Markdown建自己的博客

2015/07/31 PHP

php组合排序简单实现方法

2016/10/15 PHP

thinkPHP5框架auth权限控制类与用法示例

2018/06/12 PHP

基于jQuery的输入框在光标位置插入内容, 并选中

2011/10/29 Javascript

NodeJs中的非阻塞方法介绍

2012/06/05 NodeJs

jQuery jcrop插件截图使用方法

2013/11/20 Javascript

js实现可拖动DIV的方法

2013/12/17 Javascript

js 触发select onchange事件代码

2014/03/20 Javascript

jQuery实现的瀑布流加载效果示例

2016/09/13 Javascript

vue项目中api接口管理总结

2018/04/20 Javascript

vue2中,根据list的id进入对应的详情页并修改title方法

2018/08/24 Javascript

如何能分清npm cnpm npx nvm

2019/01/17 Javascript

[06:01]刀塔次级联赛top10第一期

2014/11/07 DOTA

[01:00:30]TFT vs VGJ.T Supermajor 败者组 BO3 第一场 6.5

2018/06/06 DOTA

[01:47]2018年度DOTA2最具人气解说-完美盛典

2018/12/16 DOTA

为什么选择python编程语言入门黑客攻防给你几个理由!

2018/02/02 Python

使用virtualenv创建Python环境及PyQT5环境配置的方法

2019/09/10 Python

python生成requirements.txt的两种方法

2019/09/18 Python

Python 之 Json序列化嵌套类方式

2020/02/27 Python

Django使用Profile扩展User模块方式

2020/05/14 Python

Python列表推导式实现代码实例

2020/09/09 Python

python批量生成条形码的示例

2020/10/10 Python

python小技巧——将变量保存在本地及读取

2020/11/13 Python

python实现图片转字符画的完整代码

2021/02/21 Python

HTML5和以前HTML4的区别整理

2013/10/20 HTML / CSS

网络编程中设计并发服务器，使用多进程与多线程，请问有什么区别？

2016/03/27 面试题

临床医学系毕业生推荐信

2013/11/09 职场文书

文秘个人求职信范文

2014/04/22 职场文书

彩色的翅膀教学反思

2014/04/25 职场文书

党员个人整改措施

2014/10/24 职场文书

微信搭讪开场白

2015/05/28 职场文书

欠款证明

2015/06/24 职场文书

vue2实现provide inject传递响应式

2021/05/21 Vue.js

Python 如何解决稀疏矩阵运算

2021/05/26 Python