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导航栏、下拉菜单、表单的简单应用实例解析，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • Bootstrap3.3.7导航栏下拉菜单鼠标滑过展开效果

    Bootstrap是Twitter推出的一个用于前端开发的开源工具包.它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架. Bootstrap 是最受欢迎的 HTML.CSS 和 JS 框架,用于开发响应式布局.移动设备优先的 WEB 项目. $(function () { $(".dropdown").mouseover(function () { $(this).addClass("open"); })

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

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

    制作效果图如下: 代码如下(以后做东西可以改改就能直接用): <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport"

  • php+jQuery实现的三级导航栏下拉菜单显示效果

    php+jQuery实现的三级导航栏下拉菜单显示效果

    本文实例讲述了php+jQuery实现的三级导航栏下拉菜单显示效果.分享给大家供大家参考,具体如下: 首先看看效果图: 1.数据配置文件 db.php <?php return array( array( 'one' => '关于我们', 'two' => array( array( 'three_tit' => '公司介绍', 'three_cont' => array( '企业概况', '组织架构', '发展历程', '企业文化', '服务理念' ) ), array(

  • JavaScript实现HTML导航栏下拉菜单

    JavaScript实现HTML导航栏下拉菜单[悬浮显示] 前端界面进行设计时,我们会遇到鼠标悬浮在某选项上,然后就会凭空显示出菜单出来,这种设计的确受到了很多人的青睐.其实纯css也是可以实现的,但是会有一些限制,必须如要显示的菜单需要作为鼠标悬浮元素的子元素,选择器优先级等等.废话不多说,直接看效果! 样式有点丑. 代码实现(JavaScript) 1.获取要悬浮的对象和菜单对象 //获取需要悬浮的对象 let show = document.getElementById("show&quo

  • vue实现导航栏下拉菜单

    本文实例为大家分享了vue实现导航栏下拉菜单的具体代码,供大家参考,具体内容如下 先看效果: 下拉菜单铺满全屏 <div class="nav">...</div> <div class="dropdown-content">...</div> .nav {     position: relative; } .dropdown-content {     position: absolute;     width:

  • Bootstrap导航栏各元素操作方法(表单、按钮、文本)

    Bootstrap导航栏各元素操作方法(表单、按钮、文本)

    本文主要包括三大方面,大家仔细学习. 1.导航栏中的表单 导航栏中的表单不是使用 Bootstrap 表单 章节中所讲到的默认的 class,它是使用 .navbar-form class.这确保了表单适当的垂直对齐和在较窄的视口中折叠的行为.使用对齐方式选项(这将在组件对齐方式部分进行详细讲解)来决定导航栏中的内容放置在哪里. 下面的实例演示了这点: <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 默

  • BootStrap点击下拉菜单项后显示一个新的输入框实现代码

    我的页面上有一个下拉菜单,页面上有一个文本输入框,一个图像上传框,文本输入框默认是显示的,而图片上传框是隐藏的. 假设下拉菜单有两项A和B,我想实现这样的效果:点击A时显示文本输入框,隐藏图像输入框:点击B时显示图像上传框,隐藏文本输入框,请问怎么实现? 用firebug调试的时候发现只有在加载html页面的时候几个click函数才会执行,页面加载好后点击下拉菜单项,这些断点都不会被执行,求解是怎么回事. 我的js代码如下(定义在<head>部分中): <script type=&quo

  • 基于Bootstrap实现的下拉菜单手机端不能选择菜单项的原因附解决办法

    基于Bootstrap做的下拉菜单在电脑浏览器中可正常使用,在手机浏览器中能弹出下拉列表,却不能选择列表中的菜单项,通过自己百度查找原因将bootstrap脚本文件中的ontouchstart 替换为 disable-ontouchstart可以解决,替换后并不能解决.(红米手机UC浏览器不支持,小米手机UC浏览器正常,其他暂时未测试) jquery:v1.11.2 bootstrap:v3.3.4 以下为前台页面代码: <div class="input-group">

  • Bootstrap 3多级下拉菜单实例

    Bootstrap 虽好,但对于复杂的界面,还是有N多组件需要自己扩展,并且要往简洁.大气的Bootstrap界面上靠,着实要费一些功夫.下面分享一个Bootstrap 3的多级下拉菜单,无需第三方Js脚本,复制后直接可用. <!DOCTYPE HTML> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Bootstrap 3 的多级下拉菜单

  • bootstrap实现二级下拉菜单效果

    本文实例为大家分享了bootstrap实现二级下拉菜单展示的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 基本的按钮下拉菜单</title> <link href=http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css rel="stylesheet"> &l

随机推荐