bootstrap导航栏、下拉菜单、表单的简单应用实例解析


Posted in Javascript onJanuary 06, 2017

制作效果图如下:

bootstrap导航栏、下拉菜单、表单的简单应用实例解析

代码如下(以后做东西可以改改就能直接用):

<!DOCTYPE html> 
<html lang="zh-cn"> 
<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>Hello World</title> 
 <link rel='stylesheet' href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> 
</head> 
<body> 
<nav class="navbar navbar-default" role="navigation"> 
 <div class="container-fluid"> 
  <!-- Brand and toggle get grouped for better mobile display --> 
  <div class="navbar-header"> 
   <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
    <span class="sr-only">Toggle navigation</span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
   </button> 
   <a class="navbar-brand" href="#">某管理系统</a> 
  </div> 
  <!-- Collect the nav links, forms, and other content for toggling --> 
  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
   <ul class="nav navbar-nav"> 
    <li class="active"><a href="#">首页</a></li> 
    <li class="dropdown"> 
     <a href="#" class="dropdown-toggle" data-toggle="dropdown">功能<span class="caret"></span></a> 
     <ul class="dropdown-menu" role="menu"> 
      <li class="disabled"><a href="#">业务功能</a></li> 
      <li><a href="#">信息建立</a></li> 
      <li><a href="#">信息查询</a></li> 
      <li><a href="#">信息管理</a></li> 
      <li class="divider"></li> 
      <li class="disabled"><a href="#">系统设置</a></li> 
      <li><a href="#">设置</a></li> 
     </ul> 
    </li> 
   </ul> 
   <form class="navbar-form navbar-right" role="search"> 
    <div class="form-group"> 
     <input type="text" class="form-control" placeholder="username"> 
     <input type="password" class="form-control" placeholder="password"> 
    </div> 
    <button type="submit" class="btn btn-default">登录</button> 
   </form> 
  </div><!-- /.navbar-collapse --> 
 </div><!-- /.container-fluid --> 
</nav> 
<script src='http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js'></script> 
<script src='http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js'></script> 
</body> 
</html>

以上所述是小编给大家介绍的bootstrap导航栏、下拉菜单、表单的简单应用实例解析,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript实现面向对象类的功能书写技巧
Mar 07 Javascript
5个最顶级jQuery图表类库插件【jquery插件库】
May 05 Javascript
JS添加或修改控件的样式(Class)实现方法
Oct 15 Javascript
Javascript 函数的四种调用模式
Nov 05 Javascript
Vue.js学习之过滤器详解
Jan 22 Javascript
Angular实现下载安装包的功能代码分享
Sep 05 Javascript
Vue文件配置全局变量的实例
Sep 06 Javascript
cdn模式下vue的基本用法详解
Oct 07 Javascript
实例讲解vue源码架构
Jan 24 Javascript
深入浅析ng-bootstrap 组件集中 tabset 组件的实现分析
Jul 19 Javascript
js事件机制----捕获与冒泡机制实例分析
May 22 Javascript
uni-app 自定义底部导航栏的实现
Dec 11 Javascript
使用BootStrap进行轮播图的制作
Jan 06 #Javascript
BootStrap便签页的简单应用
Jan 06 #Javascript
bootstrap table实例详解
Jan 06 #Javascript
node.js发送邮件email的方法详解
Jan 06 #Javascript
利用jquery实现实时更新歌词的方法
Jan 06 #Javascript
Ajax 加载数据 练习代码
Jan 05 #Javascript
JavaScript中Math对象的方法介绍
Jan 05 #Javascript
You might like
我的论坛源代码(八)
2006/10/09 PHP
使用php get_headers 判断URL是否有效的解决办法
2013/04/27 PHP
探讨:如何编写PHP扩展
2013/06/13 PHP
调试PHP程序的多种方法介绍
2014/11/06 PHP
在openSUSE42.1下编译安装PHP7 的方法
2015/12/24 PHP
thinkPHP中分页用法实例分析
2015/12/26 PHP
thinkphp3.2嵌入百度编辑器ueditor的实例代码
2017/07/13 PHP
thinkphp ajaxfileupload实现异步上传图片的示例
2017/08/28 PHP
基于jQuery实现复选框的全选 全不选 反选功能
2014/11/24 Javascript
JS制作手机端自适应缩放显示
2015/06/11 Javascript
jQuery实现按钮的点击 全选/反选 单选框/复选框 文本框 表单验证
2015/06/25 Javascript
javascript使用Promise对象实现异步编程
2016/03/01 Javascript
JavaScript中的冒泡排序法
2016/08/03 Javascript
javascript设计模式之module(模块)模式
2016/08/19 Javascript
Bootstrap Table使用心得总结
2016/11/29 Javascript
Vue-router 切换组件页面时进入进出动画方法
2018/09/01 Javascript
vue项目前端埋点的实现
2019/03/06 Javascript
如何基于javascript实现贪吃蛇游戏
2020/02/09 Javascript
webpack中的模式(mode)使用详解
2020/02/20 Javascript
Vue初始化中的选项合并之initInternalComponent详解
2020/06/11 Javascript
Python使用设计模式中的责任链模式与迭代器模式的示例
2016/03/02 Python
Python实现上下班抢个顺风单脚本
2018/02/07 Python
Python 运行.py文件和交互式运行代码的区别详解
2019/07/02 Python
Django自带日志 settings.py文件配置方法
2019/08/30 Python
postman和python mock测试过程图解
2020/02/22 Python
Python3标准库之dbm UNIX键-值数据库问题
2020/03/24 Python
Selenium自动化测试工具使用方法汇总
2020/06/12 Python
pycharm2020.1.2永久破解激活教程,实测有效
2020/10/29 Python
html5 Canvas画图教程(4)—未闭合的路径及渐变色的填充方法
2013/01/09 HTML / CSS
解析浏览器的一些“滚动”行为鉴赏
2019/09/16 HTML / CSS
争先创优公开承诺书
2014/08/30 职场文书
领导离职感言
2015/08/03 职场文书
Python虚拟环境virtualenv是如何使用的
2021/06/20 Python
MySQL系列之三 基础篇
2021/07/02 MySQL
详解JAVA的控制语句
2021/11/11 Java/Android
zabbix配置nginx监控的实现
2022/05/25 Servers