编程 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中的array数组使用技巧

Jan 31 Javascript

关于JavaScript的with 语句的使用方法

May 09 Javascript

自动最大化窗口的Javascript代码

May 22 Javascript

jquery根据name属性查找的小例子

Nov 21 Javascript

node.js开机自启动脚本文件

Dec 24 Javascript

分享一个插件实现水珠自动下落效果

Jun 01 Javascript

百度地图API之百度地图退拽标记点获取经纬度的实现代码

Jan 12 Javascript

js从输入框读取内容,比较两个数字的大小方法

Mar 13 Javascript

AngularJS日程表案例详解

Aug 15 Javascript

element form 校验数组每一项实例代码

Oct 10 Javascript

js实现div色块拖动录制

Jan 16 Javascript

浅谈js中的attributes和Attribute的用法与区别

Jul 16 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

Re：从零开始的异世界生活第2季开播啦

2020/07/24 日漫

php格式化工具Beautify PHP小小BUG

2008/04/24 PHP

jQuery 使用手册(四)

2009/09/23 Javascript

javascript入门基础之私有变量

2010/02/23 Javascript

实现网页页面跳转的几种方法(meta标签、js实现、php实现)

2014/05/20 Javascript

javascript编写实用的省市选择器

2015/02/12 Javascript

Javascript中String的常用方法实例分析

2015/06/13 Javascript

限制只能输入数字的实现代码

2016/05/16 Javascript

实现easyui的datagrid导出为excel的示例代码

2016/11/10 Javascript

Javascript this 函数深入详解

2016/12/13 Javascript

微信小程序实现给循环列表添加点击样式实例

2017/04/26 Javascript

基于JavaScript实现图片连播和联级菜单实例代码

2017/07/28 Javascript

Vue Cli与BootStrap结合实现表格分页功能

2017/08/18 Javascript

vue项目中使用Hbuilder打包app 设置沉浸式状态栏的方法

2018/10/22 Javascript

webpack实践之DLLPlugin 和 DLLReferencePlugin的使用教程

2019/06/10 Javascript

VUEX 数据持久化,刷新后重新获取的例子

2019/11/12 Javascript

JavaScript undefined及null区别实例解析

2020/07/21 Javascript

python将xml xsl文件生成html文件存储示例讲解

2013/12/03 Python

浅谈Pandas中map, applymap and apply的区别

2018/04/10 Python

python3中获取文件当前绝对路径的两种方法

2018/04/26 Python

python中时间模块的基本使用教程

2019/05/14 Python

图文详解Django使用Pycharm连接MySQL数据库

2019/08/09 Python

耐克巴西官方网站：Nike巴西

2016/08/14 全球购物

公共事业管理本科生求职信

2013/10/07 职场文书

音乐学个人的自荐书范文

2013/11/26 职场文书

外贸英语专业求职信范文

2013/12/25 职场文书

大学生村官典型材料

2014/01/12 职场文书

《花的勇气》教后反思

2014/02/12 职场文书

企业后勤岗位职责

2014/02/28 职场文书

教师网络培训感言

2014/03/09 职场文书

母亲节感恩活动记录

2014/03/16 职场文书

房地产公司见习自我鉴定

2014/04/28 职场文书

人事主管岗位职责说明书

2014/07/30 职场文书

党员民主评议总结

2014/10/20 职场文书

Mysql数据库按时间点恢复实战记录

2021/06/30 MySQL

mongodb的安装和开机自启动详细讲解

2021/08/02 MongoDB