编程 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实现隐藏与显示动画效果/输入框字符动态递减/导航按钮切换

Jul 01 Javascript

Js控制弹窗实现在任意分辨率下居中显示

Aug 01 Javascript

Js日期选择自动填充到输入框(界面漂亮兼容火狐)

Aug 02 Javascript

JS 删除字符串最后一个字符的实现代码

Feb 20 Javascript

基于MVC4+EasyUI的Web开发框架形成之旅之界面控件的使用

Dec 16 Javascript

详解AngularJS中自定义过滤器

Dec 28 Javascript

jQuery实现的分页功能示例

Jan 22 Javascript

div中文字内容溢出常见的解决方法

Mar 16 Javascript

详解Vue.js项目API、Router配置拆分实践

Mar 16 Javascript

vue中$refs, $emit, $on, $once, $off的使用详解

May 26 Javascript

微信小程序的开发范式BeautyWe.js入门详解

Jul 10 Javascript

JavaScript数组去重实现方法小结

Jan 17 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生成月历代码

2007/06/14 PHP

浅析PHP程序设计中的MVC编程思想

2014/07/28 PHP

Codeigniter中集成smarty和adodb的方法

2016/03/04 PHP

ThinkPHP框架安全实现分析

2016/03/14 PHP

基于jquery的禁用右键、文本选择功能、复制按键的实现代码

2013/08/27 Javascript

jquery中插件实现自动添加用户的具体代码

2013/11/15 Javascript

深入理解JavaScript是如何实现继承的

2013/12/12 Javascript

回车直接实现点击某按钮的效果即触发单击事件

2014/02/27 Javascript

jQuery实现的原图对比窗帘效果

2014/06/15 Javascript

Javascript的闭包详解

2014/12/26 Javascript

jQuery 处理页面的事件详解

2015/01/20 Javascript

Javascript中实现String.startsWith和endsWith方法

2015/06/10 Javascript

15个值得开发人员关注的jQuery开发技巧和心得总结【经典收藏】

2016/05/25 Javascript

Bootstrap编写一个兼容主流浏览器的受众巨幕式风格页面

2016/07/01 Javascript

JavaScript中的FileReader图片预览上传功能实现代码

2017/07/24 Javascript

vue移动端html5页面根据屏幕适配的四种解决方法

2018/10/19 Javascript

vue 中命名视图的用法实例详解

2019/08/14 Javascript

[47:52]完美世界DOTA2联赛PWL S2 PXG vs InkIce 第二场 11.26

2020/11/30 DOTA

Python代码解决RenderView窗口not found问题

2016/08/28 Python

Django 生成登陆验证码代码分享

2017/12/12 Python

python基于gevent实现并发下载器代码实例

2019/11/01 Python

python迭代器常见用法实例分析

2019/11/22 Python

python datetime处理时间小结

2020/04/16 Python

HTML5中判断横屏竖屏的方法(移动端)

2016/08/04 HTML / CSS

临床医学大学生求职信

2013/09/28 职场文书

QA工程师岗位职责

2013/11/20 职场文书

2014年商场超市庆元旦活动方案

2014/02/14 职场文书

财务会计大学生自我评价

2014/04/09 职场文书

学校领导班子群众路线整改措施

2014/09/16 职场文书

医院党的群众路线教育实践活动学习心得体会

2014/10/30 职场文书

工伤劳动仲裁代理词

2015/05/25 职场文书

音乐会主持人开场白

2015/05/28 职场文书

环保建议书作文500字

2015/09/14 职场文书

一篇文章告诉你如何实现Vue前端分页和后端分页

2022/02/18 Vue.js

Java练习之潜艇小游戏的实现

2022/03/16 Java/Android

Windows下载并安装MySQL8.0.x 版本的完整教程

2022/04/10 MySQL