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

理解JSON：3分钟课程

Oct 28 Javascript

如何创建一个JavaScript弹出DIV窗口层的效果

Sep 25 Javascript

javaScript年份下拉列表框内容为当前年份及前后50年

May 28 Javascript

浅析Node.js的Stream模块中的Readable对象

Jul 29 Javascript

javascript与jquery动态创建html元素示例

Jul 25 Javascript

js实现各种复制到剪贴板的方法(分享)

Oct 27 Javascript

使用Angular缓存父页面数据的方法

Jan 03 Javascript

vue模板语法-插值详解

Mar 06 Javascript

Vue动态实现评分效果

May 24 Javascript

详解Angular调试技巧之报错404(not found)

Jan 31 Javascript

vue2.0在没有dev-server.js下的本地数据配置方法

Feb 23 Javascript

防止Layui form表单重复提交的实现方法

Sep 10 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大批量插入数据库的3种方法和速度对比

2014/07/08 PHP

PHP合并静态文件详解

2014/11/14 PHP

PHP xpath提取网页数据内容代码解析

2020/07/16 PHP

PHP中的输出echo、print、printf、sprintf、print_r和var_dump的示例代码

2020/12/01 PHP

给网站上的广告“加速”显示的方法

2007/04/08 Javascript

使用JQuery和s3captche实现一个水果名字的验证

2009/08/14 Javascript

jQuery 幻灯片插件(带缩略图功能)

2011/01/24 Javascript

jquery入门—选择器实现隔行变色实例代码

2013/01/04 Javascript

JS实现将人民币金额转换为大写的示例代码

2014/02/13 Javascript

JavaScript分析、压缩工具JavaScript Analyser

2014/12/31 Javascript

jQuery简单实现隐藏以及显示特效

2015/02/26 Javascript

轻量级的原生js日历插件calendar.js使用指南

2015/04/28 Javascript

JavaScript如何获取数组最大值和最小值

2015/11/18 Javascript

JS简单模拟触发按钮点击功能的方法

2015/11/30 Javascript

详解升级react-router 4 踩坑指南

2017/08/14 Javascript

JavaScript日期工具类DateUtils定义与用法示例

2018/09/03 Javascript

VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法

2018/11/28 Javascript

详解微信小程序之一键复制到剪切板

2019/04/24 Javascript

JavaScript 扩展运算符用法实例小结【基于ES6】

2019/06/17 Javascript

JavaScript对象属性操作实例解析

2020/02/04 Javascript

Element PageHeader页头的使用方法

2020/07/26 Javascript

[02:09]EHOME夺得首届辉夜杯冠军—现场颁奖仪式

2015/12/28 DOTA

python PIL模块与随机生成中文验证码

2016/02/27 Python

Python Flask基础教程示例代码

2018/02/07 Python

python实现写数字文件名的递增保存文件方法

2018/10/25 Python

Python generator生成器和yield表达式详解

2019/08/08 Python

Django 拼接两个queryset 或是两个不可以相加的对象实例

2020/03/28 Python

Python 排序最长英文单词链(列表中前一个单词末字母是下一个单词的首字母)

2020/12/14 Python

倩碧香港官方网站：Clinique香港

2017/11/13 全球购物

澳大利亚运动鞋零售商：The Athlete’s Foot

2018/11/04 全球购物

SQL Server 2000数据库的文件有哪些，分别进行描述

2013/03/30 面试题

婚礼司仪主持词

2014/03/14 职场文书

禁止酒驾标语

2014/06/25 职场文书

陈安之励志演讲稿

2014/08/21 职场文书

总经理助理岗位职责

2015/01/31 职场文书

Python基本的内置数据类型及使用方法

2022/04/13 Python