Bootstrap编写导航栏和登陆框

本文实例为大家分享了Bootstrap导航栏和登陆框的具体代码，供大家参考，有不足的地方请大家谅解，大家共同学习进步。

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <link rel="stylesheet" href="css/bootstrap.min.css" />
  <script type="text/javascript" src="js/jquery.min.js" ></script>
  <script type="text/javascript" src="js/bootstrap.min.js" ></script>
 </head>

 <body>
 <nav class="nav navbar-default navbar-fixed-top" role="navigation">
  <div class="container-fluid">
   <div class="navbar-header">
    <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
     <span class="icon-bar"></span>
     <span class="icon-bar"></span>
     <span class="icon-bar"></span>
    </button>
    <a href="#" class="navbar-brand">
     <img src="img/mylogo.png" style="height: 50px;margin-top: -15px;"/>
    </a>
   </div>
   <div class="collapse navbar-collapse">
   <ul class="nav navbar-nav">
    <li class="active"><a href="#">首页</a></li>
    <li><a href="#">新闻</a></li>
    <li><a href="#">产品</a></li>
    <li class="dropdown">
     <a href="#" class="dropdown-toggle" data-toggle="dropdown">服务<span class="caret"></span></a>
     <ul class="dropdown-menu">
      <li><a href="#">客服在线</a></li>
      <li class="divider"></li>
      <li><a href="#">常见问答</a></li>
      <li class="divider"></li>

      <li><a href="#">地址电话</a></li>
     </ul>

    </li>
    <li><a href="#">商城</a></li>
   </ul>

   <div class="navbar-form navbar-right">
    <a href="#" class="navbar-link">登陆</a>
    <a href="#" class="navbar-link">注册</a>
    <input type="text" class="form-control" placeholder="请输入关键字"/>
    <button class="btn btn-primary">搜索</button>
   </div>
   </div>
  </div>
 </nav> 

  <div style="height: 50px;"></div>

  <div class="container">
   <h1 class="page-header"><span class="glyphicon glyphicon-user"></span>用户登录</h1>
   <form class="form-horizontal">
    <div class="form-group">
     <div class="col-md-5">
      <input type="text" class="form-control" placeholder="用户名/email"/>
     </div>
    </div>
    <div class="form-group">
     <div class="col-md-5">
      <input type="password" class="form-control" placeholder="密码"/>
     </div>
    </div>
    <div class="form-group">
     <div class="col-md-5">
      <button class="btn btn-primary">登陆</button>
     </div>
    </div>
   </form>
  </div>
  <div style="height: 1500px;"></div>
 </body>
</html>

如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：

Bootstrap学习教程

Bootstrap实战教程

Bootstrap插件使用教程

以上就是本文的全部内容，希望对大家学习JavaScript程序设计有所帮助。

赞 (0)

相关推荐

  • Bootstrap实现响应式导航栏效果

    Bootstrap实现响应式导航栏效果

    为了给导航栏添加响应式特性,您要折叠的内容必须包裹在带有 classes .collapse..navbar-collapse 的 <div> 中.折叠起来的导航栏实际上是一个带有class .navbar-toggle 及两个 data- 元素的按钮.第一个是 data-toggle,用于告诉 JavaScript 需要对按钮做什么,第二个是 data-target,指示要切换到哪一个元素.三个带有 class .icon-bar 的 <span> 创建所谓的汉堡按钮.这些会切换

  • Bootstrap实现默认导航栏效果

    Bootstrap实现默认导航栏效果

    导航栏是一个很好的功能,是 Bootstrap 网站的一个突出特点.导航栏是响应式元组件就,作为应用程序或网站的导航标题.导航栏在移动设备的视图中是折叠的,随着可用视口宽度的增加,导航栏也会水平展开.在 Bootstrap 导航栏的核心中,导航栏包括了为站点名称和基本的导航定义样式. 创建一个默认的导航栏的步骤如下: 向 <nav> 标签添加 class .navbar..navbar-default(白底黑字),navbar-inverse(黑底白字) 向上面的元素添加 role="

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

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

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

  • Bootstrap组件学习之导航、标签、面包屑导航(精品)

    Bootstrap组件学习之导航、标签、面包屑导航(精品)

    导航 Bootstrap中可用的导航有相似的标记,用基类.nav开头,这是相似的部分.改变修饰类可以改变样式. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!-- <link rel="stylesheet" >--> <link rel="stylesheet" href="css/bootst

  • BootStrap学习笔记之nav导航栏和面包屑导航

    nav导航栏 <nav role="navigation" class="navbar navbar-default"> <div class="container-fluid"></div> <div class="navbar-header"> <a href="#" class="navbar-brand"> 大大的log

  • Bootstrap CSS组件之面包屑导航(breadcrumb)

    面包屑breadcrumb一般用于导航,表示当前页面所在的位置 面包屑可以设置其他相关的小标记内容,比如标签.徽章标记等. //源码 //基础样式 .breadcrumb { padding: 8px 15px; margin-bottom: 20px; list-style: none; background-color: #f5f5f5; border-radius: 4px; } //所有li项都是内联块方式 .breadcrumb > li { display: inline-block

  • BootStrap实现响应式布局导航栏折叠隐藏效果（在小屏幕、手机屏幕浏览时自动折叠隐藏）

    废话不多说了,直接给大家贴代码了,具体代码如下所示: <!DOCTYPE html> <html> <head> <title>bootstrap实现导航栏的响应式布局,当在小屏幕.手机屏幕浏览时自动折叠隐藏</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name=&q

  • Bootstrap编写导航栏和登陆框

    本文实例为大家分享了Bootstrap导航栏和登陆框的具体代码,供大家参考,有不足的地方请大家谅解,大家共同学习进步. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="css/bootstrap.min.css" />

  • Bootstrap多级导航栏(级联导航)的实现代码

    Bootstrap多级导航栏(级联导航)的实现代码

    在bootstrap官方来说,导航最多就是两级,两级以上是无法实现的,大叔找了一些第三方的资料,终于找到一个不错的插件,使用上和效果上都还不错,现在和大家分享一下 插件地址:http://vsn4ik.github.io/bootstrap-submenu/ 先看一下,在后台系统上的显示效果 下面说一下实现的方式 1.引用三个JS插件和一个CSS类库 <script src="~/Content/bootstraps/JS/bootstrap-submenu.js"><

  • Bootstrap实现导航栏的2种方式

    前言:导航是一个网站重要的元素组件之一,可以便于用户查找网站所提供的各项功能服务.导航的制作方法也是千奇百怪,五花八门.在下面的内容中,介绍两种制作导航栏的方式. 一.用按钮组实现,代码如下: <div style="width:100%; background:#ff0"> <div class="btn-group"> <button class="btn btn-default" type="butt

  • 拥Bootstrap入怀——导航栏篇

    拥Bootstrap入怀——导航栏篇

    写在前面 在该文中,我结合自己做的一个山水网页来聊一下Bootstrap的使用,网页截图如下: 完整网页的效果和代码可以点击这里查看或者到CodePen上查看.网页要达到的主要效果包括以下几点: 1.导航栏的登陆.注册按钮点击后弹出登陆.注册modal框,并且登陆.注册窗口可切换,菜单栏为响应式 2.导航栏中的山水选项可下拉,点击下拉中的九寨沟``丽江``水帘洞会定位到相应的tab 3.幻灯片大屏轮播 4.tab页点击切换 下面我们开始拥Bootstrap入怀. Bootstrap想必小伙伴们都

  • 详解bootstrap导航栏.nav与.navbar区别

    详解bootstrap导航栏.nav与.navbar区别

    刚刚看了bootstrap的导航栏,发现有点弄混了,现在来整理一下: 导航栏是一个很好的功能,是 Bootstrap 网站的一个突出特点.导航栏在您的应用或网站中作为导航页头的响应式基础组件.导航栏在移动设备的视图中是折叠的,随着可用视口宽度的增加,导航栏也会水平展开.在 Bootstrap 导航栏的核心中,导航栏包括了站点名称和基本的导航定义样式. 一.简单的ul,li组成的导航: <ul class="nav nav-pills justify-content-center bg-da

  • bootstrap自定义样式之bootstrap实现侧边导航栏功能

    bootstrap自带的响应式导航栏是向下滑动的,有时满足不了个性化的需求,需要做一个类似于android drawerLayout 侧滑的菜单,这就是我要实现的bootstrap自定义侧滑菜单,参考了很多官网的侧滑,实现方法各有不同,优缺点也十分明显,有的官网首页为了仅仅实现一个侧滑的效果,用了owl.carousel滑屏的插件,个人觉得小题大做了.这个bootstrap侧滑菜单更专业的名字叫做手机导航栏.我也比较这个名字,更符合bootstrap的特性.所以我这篇文章介绍的更容易的一种做法,

  • 原生JS实现顶部导航栏显示按钮+搜索框功能

    根据点击导航栏,搜索框的内容会随之变动 话不多说,先上图 HTML代码段 <div class="bar"> <ul id="menu" class="menu"> <li class="active">搜店</li> <li class="gradient">地址</li> <li class="gradient&qu

  • 小程序自定义导航栏兼容适配所有机型（附完整案例）

    前言 大部分情况下我们都是使用微信官方自带的 navigationBar 配置 ,但有时候我们需要在导航栏集成搜索框.自定义背景图.返回首页按钮等. 思路 隐藏官方导航栏 获取胶囊按钮.状态栏相关数据以供后续计算 根据不同机型计算导航栏高度 编写新的导航栏 页面引用自定义导航 正文 隐藏官方导航栏 隐藏导航栏可以全局配置,也可以单独页面配置,具体根据业务需求来. 全局隐藏 //app.json "window": { "navigationStyle": "

随机推荐