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

转一个日期输入控件，支持FF

Apr 27 Javascript

javascript中运用闭包和自执行函数解决大量的全局变量问题

Dec 30 Javascript

js获得地址栏?问号后参数的方法

Aug 08 Javascript

JQuery设置时间段下拉选择实例

Dec 30 Javascript

jQuery使用animate创建动画用法实例

Aug 07 Javascript

Jquery zTree 树控件异步加载操作

Feb 25 Javascript

JS开发中百度地图+城市联动实现实时触发查询地址功能

Apr 13 Javascript

vue-cli的eslint相关用法

Sep 29 Javascript

JS如何把字符串转换成json

Feb 21 Javascript

原生JS实现微信通讯录

Jun 18 Javascript

详解JavaScript之ES5的继承

Jul 08 Javascript

element-ui中el-upload多文件一次性上传的实现

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

将文件夹压缩成zip文件的php代码

2009/12/14 PHP

php正则表达式基本知识与应用详解【经典教程】

2017/04/17 PHP

thinkPHP5.1框架中Request类四种调用方式示例

2019/08/03 PHP

PHP 构造函数和析构函数原理与用法分析

2020/04/21 PHP

javascript 检测浏览器类型和版本的代码

2009/09/15 Javascript

jquery之empty()与remove()区别说明

2010/09/10 Javascript

js里取容器大小、定位、距离等属性搜集整理

2013/08/19 Javascript

javascript dom追加内容实现示例

2013/09/21 Javascript

点击标签切换和自动切换DIV选项卡

2014/08/10 Javascript

js根据鼠标移动速度背景图片自动旋转的方法

2015/02/28 Javascript

js实现对table的增加行和删除行的操作方法

2016/10/13 Javascript

jQuery滚动插件scrollable.js用法分析

2017/05/25 jQuery

基于Vue.js实现tab滑块效果

2017/07/23 Javascript

原生JS 购物车及购物页面的cookie使用方法

2017/08/21 Javascript

详解基于Vue-cli搭建的项目如何和后台交互

2018/06/29 Javascript

详解小程序毫秒级倒计时（适用于拼团秒杀功能）

2019/05/05 Javascript

javascript实现打砖块小游戏（附完整源码）

2020/09/18 Javascript

原生JavaScript实现幻灯片效果

2021/02/19 Javascript

[02:57]DOTA2英雄基础教程风行者

2014/01/16 DOTA

[58:42]DOTA2上海特级锦标赛C组败者赛 Newbee VS Archon第一局

2016/02/27 DOTA

[47:42]Fnatic vs Liquid 2018国际邀请赛小组赛BO2 第一场 8.16

2018/08/17 DOTA

在Python中使用itertools模块中的组合函数的教程

2015/04/13 Python

使用python获取电脑的磁盘信息方法

2018/11/01 Python

Python Selenium 之关闭窗口close与quit的方法

2019/02/13 Python

关于pytorch处理类别不平衡的问题

2019/12/31 Python

Python安装OpenCV的示例代码

2020/03/05 Python

使用opencv识别图像红色区域,并输出红色区域中心点坐标

2020/06/02 Python

keras读取h5文件load_weights、load代码操作

2020/06/12 Python

犹他州最古老的体育用品公司：Al’s

2020/12/18 全球购物

介绍一下Prototype的$()函数，$F()函数，$A()函数都是什么作用？

2014/03/05 面试题

医学检验专业大学生求职信

2013/11/18 职场文书

2015会计试用期工作总结

2014/12/12 职场文书

vue中三级导航的菜单权限控制

2021/03/31 Vue.js

浅谈MySQL之浅入深出页原理

2021/06/23 MySQL

springboot项目以jar包运行的操作方法

2021/06/30 Java/Android

Python绘画好看的星空图

2022/03/17 Python